Mucha gente no lo sabe, pero los asistentes de IA tienen una herramienta para hacer código y todas funcionan más o menos de la misma forma: Le dices qué hacer y ellos generan el código.
Por favor no te vayas aún ni dejes de leer. Sé que la palabra código puede asustar o generar un aburrimiento increíblemente grande… Pero justamente esto es lo que nos permite a los simples mortales empezar a crear prototipos y aplicaciones sin tener que saber programar.
¿Te quedaste? ¡Perfecto! Pues te decía que nuestros asistentes tienen herramientas que nos permiten crear software simplemente conversando. Les describes lo que quieres y ellos lo construyen.
Lo que sigue es la historia sobre cómo se me ocurrió hacer una web sencilla para probar Claude Code (la herramienta de código de Anthropic) para este post, pero terminé haciendo mi versión de una suite de creación de gráficos…
Empezando a usar Claude Code
OK. Entonces, se me había ocurrido escribir un post sobre Claude Code y estaba pensando crear una página web (¿aún les dicen así?) como ejemplo.
Ya había probado esta herramienta hace varios meses, y aunque escribía código que funcionaba, aún me parecía una herramienta exclusiva para programadores. Me dio la impresión de que necesitaba demasiada supervisión y que aún no estaba lista para ser usada por gente que no supiera leer código.
Así fue como el martes 7 de abril a las 8:49pm (hora de Lima) abrí Claude y le dije:
I’m using Claude Code to create an app. Can we talk about the app so I can create a prompt for Claude Code?
Lo sé, esta instrucción está en Inglés, te cuento que suelo usar ese idioma para conversar con mis asistentes, así evito oxidarme. Pero no te preocupes que de ahora en adelante los traduciré.
Estoy usando Claude Code para crear una app. ¿Podemos hablar sobre la app y crear el prompt para Claude Code?
Fíjate cómo dice app y no página web, eso es porque en el último minuto decidí hacer algo que tenía en la cabeza desde hace algunos años… y que de paso era menos aburrido más interesante que una simple página web… una app para crear gráficos de burbujas.
Lo sé, lo sé, los gráficos de burbujas no suenan a la app más emocionante del mundo, pero desde que los vi, cuando hacía mi MBA, siempre pensé en hacer una app que nos permita crear este tipo de gráficos. De hecho, hace unos años, traté de hacerla y fallé miserablemente.
Estos gráficos me encantan porque hacen muy fácil poner en perspectiva un montón de aspectos diferentes. Por ejemplo, podemos usarla para ver la matriz de crecimiento-participación del Boston Consulting Group (BCG) o para cosas más importantes, como ver qué lugar ocupa el Cau Cau en la gastronomía Peruana.
Me tomé la libertad de hacer este gráfico con la app que te estoy contando que creé 😉
En vertical vemos el nivel de “deliciosidad”, en horizontal qué tan difícil es preparar ese plato… el tamaño de la burbuja es qué tanto engorda.
Volviendo acá. Ahí estaba yo, conversando con Claude sobre cómo hacer un primer prompt para Claude Code que me ayude a hacer realidad mi app soñada… Pues luego de varias idas y vueltas con Claude contándole cómo quería que la app funcionara y respondiendo todas sus preguntas, llegué a un prompt para Claude Code.
Antes de contarte más recuerda que Claude y Claude Code son herramientas separadas (aunque ambas funcionan con tu misma cuenta). Para usar Claude Code puedes descargar la app de escritorio, o si te sientes más aventurero instalarlo en tu terminal. Si no sabes lo que es una terminal o una consola de comandos, mejor descarga la app de escritorio.
Pequeño disclaimer: sé programar, pero no me considero un programador y definitivamente no soy un experto en Claude Code. Nunca en mi vida había construido y lanzado una aplicación completa yo solito.
Sigamos. Aquí te enseño cómo se ve en la consola. En mi caso prefiero usarla en vez de la app de escritorio porque me hace sentir como Neo en The Matrix ;)
Tú le escribes y él te responde, sólo que sus respuestas pueden ser código y además tiene la capacidad de guardarlo en tu máquina, crear, editar y eliminar archivos (con tu permiso) y hasta usar sistemas de control de versiones (no te preocupes si no has escuchado de eso, no es nada del otro mundo).
Volviendo a mi página web app de creación de gráficos, ya tenía el prompt para Claude Code, así que lo pegué y dejé que la magia suceda…
Recuerda: Claude Code no se usa en la web, tienes que descargar la app de escritorio o, para sentirte un poco hacker, usarla en la consola. Yo elegí la segunda opción 😎
Creando la app
Claude Code se quedó pensando… y pensando… y pensando… y nueve minutos después tenía la primera versión de la app corriendo en mi máquina. ¿Y sabes qué? Funcionaba.
Bueno, funcionaba es un decir. De hecho la app se veía bien, hacía lo que se supone que debía hacer, pero tenía algunos bugs y muuuuuucho espacio de mejora.
Así se veía esta primera versión:
Así que le mencioné una de las cosas que podíamos mejorar… Craso error.
Lo que pasó fue que Claude Code se puso inmediatamente a codificar (no esperaba menos de esa herramienta). El problema es que no había terminado de explicarle aún cómo hacer la mejora que quería y Claude ya estaba escribiendo código. Cuando terminó me respondió orgulloso cómo había hecho la mejora por su cuenta.
Ahí fue que tuve que responderle “muy amablemente” que lo que había hecho no servía para nada, y que me dejara explicarle bien la idea antes de empezar con el coding.
Luego de investigar un poco, aprendí que Claude Code está pensado para hacer… “code”, duh! Eso significa que si le pido algo casi siempre va a tratar de hacer código inmediatamente.
Al comienzo, para evitar esto le decía cosas como:
Aún no hagas código. Conversemos primero.
Luego aprendí que eso es algo que pasa tan seguido, que el mismo Anthropic tuvo que crear una función que hace eso, se llama Plan mode. Esto separa el pensamiento de la creación de código, es decir que obliga a Claude a crear un plan que tú tienes que aprobar antes de que se ponga a programar.
Luego de aprender ese truco, me quedé conversando y programando con Claude Code hasta más o menos las 2am. Para ese momento, mi app ya tenía todas las funcionalidades que me haya podido imaginar incluyendo una base de datos, registro de usuarios, etc, etc.
Había hecho, en unas cuantas horas con mi asistente de IA, la aplicación que tenía en la cabeza. Pero sólo estaba corriendo en mi máquina. Era hora de ponerla en Internet.
Y entonces me emocioné…
Al día siguiente me levanté a las 6am para seguir con Claude al menos 45 minutos antes de despertar a mis hijos para ir al colegio. Había estado tan pegado con la aplicación la noche anterior y quería ponerla en Internet, pero para eso necesitaba un servidor.
Déjame ser sincero, he visto mil veces cómo se despliegan estas soluciones a Internet pero jamás lo he hecho. Eso siempre estuvo en el libreto de ingenieros especializados, expertos en configurar servidores, bases de datos, manejar el dominio, correos, permisos y un montón de cosas más que no entiendo…
Yo sólo tenía a Claude Code…
¿Cómo hago para hostear esto en mi VPS?
Tal vez te estés preguntando ¿Qué diablos es una VPS? Puedes pensar en eso como una computadora que está siempre conectada a Internet. En fin, Claude me fue guiando en lo que tenía que hacer y luego de 26 minutos ya tenía mi aplicación instalada y corriendo en la VPS \o/.
De paso, aproveché para ponerle control de versiones con Github (Claude me ayudó con eso también). Piensa en el control de versiones como una manera de manejar el historial de cambios que se le hacen a un software.
Listo. La app estaba funcionando en Internet… sort of, aún no tenía un dominio y para verla tenía que poner una IP en mi navegador, esas direcciones web que se leen como 162.191.54.22, debes haber visto una alguna vez.
Y justo en ese momento pensé algo como:
Wait! ¿Por qué quedarme con sólo gráficos de burbujas si puedo hacer toda una suite de gráficos?
Pero eso tendría que esperar a la noche, ya era hora de llevar a mis hijos al cole e ir a trabajar.
Gráficos, gráficos, gráficos
En la noche regresé con Claude Code, un vaso de Whisky (single malt) y comencé a contarle qué otros gráficos quería hacer.
El primero fue el gráfico de Radar, esos que parecen telarañas donde se pueden comparar varios items en un montón de dimensiones. Si fuiste fan de videojuegos como FIFA o PES, tienes que haberlos visto cuando describían las características de un jugador o equipo.
Además de comparar jugadores de fútbol, estos gráficos son muy usados en consultoría para mostrar desde benchmarks de competidores hasta análisis de segmentos de negocio. En mi caso, lo primero que hice fue usarlo para algo muchísimo más relevante: comparar a Jean-Claude Van Damme, Jackie Chan y Dolph Lundgren…
Por supuesto que hubiera podido poner gráficos más “corporativos”, pero esta herramienta es más flexible que Jean-Claude, así que aproveché para darle cabida a estos iconos de acción. ¿Quién no recuerda el peinado de Van Damme en Hard Target? (es una película de 1993 así que tal vez no conozcas esa joya del séptimo arte). Igual aprovecho para confesar que me dejé ese mismo peinado… por suerte en esa época no existían las redes sociales, así que no hay evidencia.
OK. Ya tenía mi gráfico de radar, pero dos gráficos no hacen una suite y yo seguía con viada, así que el siguiente par de noches y todo ese fin de semana me dediqué a seguir agregando gráficos y puliendo la app.
El siguiente gráfico fue algo que llamé el Roadmap. Se trata de una línea de tiempo con curvas que te permite poner puntos. Es perfecta para contar historias de todo tipo. Desde los pasos a seguir para el lanzamiento de un producto, pasando por planificación estratégica, customer journeys y hasta (cof, cof). Una línea de tiempo de las películas de Marvel, no en el orden en que salieron sino en el orden cronológico de la historia. You are welcome.
Sé que se ve pequeño, pero no te preocupes, luego te paso el link para que lo veas en vivo, no quiero arruinar la sorpresa 😉.
Como nota aparte, te cuento que en algún momento vi todas esas películas en orden. Fueron más o menos 78 horas y 46 minutos… eso es como 3 días, 6 horas y 46 minutos. Si te parece mucho, te cuento que alguna vez escuché los 500 mejores discos de la historia según Rolling Stone.
Siguiendo con los gráficos, le agregué la opción de hacer tier lists. Tú sabes, esos gráficos que andan por todo tiktok donde la gente se pone a rankear cosas por niveles.
No son una herramienta taaaaan usada en el mundo corporativo, aunque puede servir para clasificar riesgos o segmentar clientes. En mi caso, quiero usarlo para ordenar algo que todos debemos tener en cuenta… los personajes de He-Man.
Por cierto, me refiero a los personajes de la serie animada de 1983, no a la película con Dolph Lundgren.
Para agregar cada nuevo tipo de gráfico, lo que hacía era contarle a Claude Code en detalle lo que quería y él se encargaba de codificar. Luego lo probaba y hacíamos ajustes y mejoras. Una cosa por aquí, una cosita por allá. Y así íbamos ajustando el comportamiento y diseño hasta que quedaba bonito.
Entonces, ya tenía gráficos de burbujas, radar, roadmap y tier list. Por un momento pensé en parar ahí, pero estaba avanzando tan rápido con Claude Code, que decidí agregarle dos gráficos más al app.
Empecé con brackets de torneo, como en los campeonatos. Dos oponentes se enfrentan y sólo uno pasa a la siguiente ronda, y así hasta llegar a la final. Simple (pero divertido).
En el mundo corporativo puedes usar los brackets en talleres para eliminar opciones de forma progresiva hasta quedarte con la opción “ganadora”. Pero como esto es un post y no un workshop corporativo por qué no hacemos un bracket enfrentando a los villanos de las películas de Rocky (también voy a incluir a los de Creed, porque YOLO).
Mira cómo funciona. En la ronda una teníamos los brackets y luego fui seleccionando el ganador de cada uno, que pasaba al siguiente bracket y así hasta la final.
Y qué final: Apollo Creed vs. Ivan Drago. Si eres fan de Rocky debes saber que esta pelea ya se dio en Rocky IV, si no eres fan de Rocky anda ahora mismo a verlas todas (aunque si quieres puedes saltarte Rocky V, no te pierdes de nada).
Volviendo a los brackets. Para este gráfico se me ocurrió que además de llenar a mano cada uno de los brackets, podríamos poner una lista y que la app sola se encargue de hacer los matches de la primera ronda (lo llamé procesamiento en lote). Lo coordiné con Claude, ajustamos cómo debía funcionar y luego de un par de idas y vueltas estaba listo. Como me gustó, terminé poniéndole esa funcionalidad a un par de gráficos más.
Y así llegamos al último gráfico, al comienzo lo llamé breakdown (porque se trata de descomponer algo en partes), pero no me terminó de convencer y terminó siendo bautizado como Ramas, aunque el nombre aún no me termina de convencer.
Este gráfico se trata de tener un concepto raíz e ir separándolo en diferentes ramas, cada rama en sub-ramas, y así sucesivamente hasta terminar de descomponer el concepto. Este gráfico fue el más complicado de todos. Hacer que las ramas no se crucen, que esté alineando y que pueda crecer de manera vertical y horizontal fue todo un reto. De hecho tuvimos que hacer y rehacer varias veces lo mismo, a veces parecía que Claude no me entendía y no faltó un…
¡Maldita sea, Claude! Es la décima vez que te pido lo mismo.
¿Acaso no puedes hacer esto bien?
y un par de
Revierte todo!
(suerte que estábamos usando control de versiones 😅)
Al final Claude y yo nos amistamos y logramos sacar el gráfico de ramas. Si eres un consultor que quiere usarlo en algún proyecto, este gráfico es perfecto para hacer un análisis de causa raíz, un desglose financiero… algo de eso. Si no eres un consultor, podrías hacer cosas como tratar de organizar todas las películas de Alien, para ver si alguien entiende bien de qué va la trama y cómo se relacionan entre ellas (incluyendo Alien vs. Depredador).
El universo de Alien es taaaaan amplio que este árbol se ve enano, puedes darle clic a la imagen para ampliarla, o esperar un poco que revele el link para que puedas ver el app en vivo.
Ahora sí tenía algo que podría llamarse una suite de creación de gráficos, pero me faltaba ponerle nombre….
For your consideration: pop n’ plot
Ya que estaba con Claude, le pedí hacer un brainstorming para el nombre de la app. Me propuso nombres como Bubblify, Bubblio, Chartwars, Comparatron, Plotto, Bloop, Burbulio, Chartico, PlotJuice, BubbleWar.
Me decepcionó la falta de creatividad de la IA, así que cerré Claude y me puse a pensar solo, a la antigua, con mi propio cerebro humano.
No recuerdo exactamente cómo llegué al nombre. Mi idea era que hacer gráficos fuese algo divertido, lo más lejano posible de las (aburridas) herramientas corporativas.
Esa ruta de buscar algo divertido me llevó a pensar en “Rock n’ Roll” y “Rock & Pop”, luego me di cuenta que Pop y Plot (gráfico en inglés) son palabras cortas y se parecen, además “Pop” es el sonido que hacen las burbujas al explotar, y mi proyecto inicial era de gráficos de burbujas…
Así que junté todo y salió pop n’ plot. Sólo me faltaba ver si el dominio estaba libre, ¿y qué crees?
Exactamente 27 minutos después de haber cerrado la IA, regresé y le dije:
¿Y qué opinas de pop n’ plot (popnplot.com)?
Un par de horas después tenía el dominio, certificado SSL, un logo, tipografías y una paleta de colores (gracias a Claude y Canva.com).
<shameless marketing>
Con pop n’ plot puedes crear gráficos interactivos de forma ridículamente fácil. Burbujas, radar, roadmaps, tier lists, brackets y ramas. Seis tipos de gráficos que puedes usar para el trabajo, para organizar tus ideas, para resolver debates… o simplemente para hacer tu gráfico favorito con Dolph Lundgren.
Es gratis y puedes registrarte en popnplot.com ahora mismo (sí, ahora, yo espero). También hay una suscripción de pago si quieres colaborar con mi dieta a base de cafeína ;)
</shameless marketing>
Entonces, como si fuera un post para este newsletter, me dediqué a crear el landing page más largo de la historia de los landing pages. Por supuesto que Claude Code me ayudó con todo el código. Pero el contenido es como un post de aprendiendoIA.
¿No me crees? Vas a ver cosas como esta:
Y hay más de donde vino eso. Dale una mirada en popnplot.com
Para crear este landing page lo primero que se me ocurrió fue pedirle a Claude Code que lea mis posts para que se dé una idea de cómo escribo y que usemos eso para definir una estructura (extremadamente exagerada) de landing page.
Una vez que teníamos la estructura armada yo le iba dando el contenido, Claude iba haciendo código y yo le pedía ajustes, y a veces cambios radicales, al diseño.
Pero un producto necesita más que un logo y una landing page, así que entre Claude y yo le agregamos algunas cosas básicas como crear cuenta e iniciar sesión con Google, cambiar contraseña, términos y condiciones, correos automáticos, el panel de administración y todo esto en español e inglés. Yes sir!
También me ayudó a crear el plan free (que te permite crear hasta 5 gráficos) e integrar pop n’ plot con medios de pago para poder cobrar por una suscripción pro que te da gráficos ilimitados. (Si quieres contribuir a mi ingesta de café, puedes apoyarme volviéndote pro) 😁
Pop n’ plot hacía todo lo que me había imaginado y más, pero aún no estaba completo. Me faltaba probar una idea más: conectar pop n’ plot con Claude…
¿Y si Claude pudiera hacer los gráficos?
Existe algo llamado MCP (Model Context Protocol), que es algo que nos permite conectar un asistente de IA como Claude a herramientas externas. Para que tu IA pueda conversar directamente con pop n’ plot, necesitaba implementar MCP.
Recuerdo que Claude me preguntó:
What’s next?
Y yo le respondí, muy suelto de huesos:
an MCP server?”
Y así empezaron 3 horas de codificación, pruebas y ajustes. También configuré Claude para que pueda conversar con pop n’ plot (eso me tomó 30 segundos) y listo. Ya podía pedirle directamente a mi IA que creara gráficos.
De ahí en adelante esa se volvió mi funcionalidad favorita. De hecho los gráficos que te he mostrado aquí fueron hechos directamente por Claude.
¿Quieres hacer la prueba? ¿Te parece si hacemos un gráfico de burbujas comparando, no sé… las películas de Dolph Lundgren?
¿Te das cuenta de lo potente que es esto? Claude está haciendo la investigación, revisando los datos, seleccionando las películas y va a usar pop n’ plot para crear el gráfico!
Y voilá! Claude pensó, buscó los datos, los organizó, se conectó con pop n’ plot, calculó la posición y tamaño de cada burbuja, creó el gráfico, lo volvió público y me pasó el enlace para compartir. Todo esto le tomó más o menos 43.2 segundos (give or take).
¿Quieres ver este gráfico en vivo? Míralo aquí.
El MCP le permite a Claude crear, editar, eliminar, duplicar, y ajustar la configuración de cada gráfico asociado a mi cuenta de usuario de pop n’ plot.
Ahora imagina que no hablemos de Dolph Lundgren, sino de cosas más triviales como un estudio de mercado, análisis financiero, data histórica de ventas, etc. Claude podría hacer los análisis contigo y luego encargarse de hacer los gráficos que le pidas para compartirlos con tu equipo.
Ah! ¿Y recuerdas los gráficos que te estuve mostrando en este post?
Todos, desde el radar de Van Damme, Chan y Lundgren, pasando por el roadmap de Marvel, el tier list de He-man, el bracket de oponentes de Rocky, hasta el árbol de las sagas de Alien, fueron creados directamente por Claude (bajo mi atenta supervisión, por supuesto).
Pero eso no es todo…
El trabajo que no se ve
Podríamos decir que lo que te he contado hasta ahora es la parte “divertida” de crear pop n’ plot. La landing page kilométrica, los gráficos divertidos, el MCP fueron cosas muy emocionantes, ahora dame dos minutos para contarte otra parte del trabajo que hicimos con Claude.
Que un software se vea bonito no es suficiente, tiene que funcionar bien. Y cuando hablamos de programación, funcionar bien no es sólo lo que ve un usuario, es mucho más. Ahora te cuento un poquito de eso.
Primero le pedí a Claude Code que haga una auditoría de seguridad de la aplicación. Y la hizo. Se puso a revisar toda la aplicación y juntos fuimos arreglando los problemas que encontraba. Desde validación de contraseñas, y certificados SSL hasta límites de velocidad de la API para que nadie pueda saturar el servidor (disculpa tanta sigla rara, prometo que no lo vuelvo a hacer).
También le pedí que mejorara la velocidad de carga de la página y la optimice para motores de búsqueda. Además de eso hicimos tests de código, pruebas de usabilidad, y un largo etcétera.
Fueron más de 50 tareas las que hicimos para tener una aplicación sólida. Cuando te pongas a probar con Claude Code (porque sé que lo vas a hacer) no olvides esa parte.
Y este es el post 🥳
Lo que empezó como una pequeña prueba para hacer una página web usando Claude Code, terminó con tres semanas de sesiones de trabajo entre Claudio (así le digo de cariño a Claude) y yo para construir pop n’ plot.
Parece que vivimos en el futuro. Hace algunos años me hubiese sido imposible llevar una idea como esta a la realidad de forma tan veloz, incluso teniendo un equipo de programadores.
Ahora las herramientas de IA ponen en nuestras manos la capacidad de hacer.
La creatividad, es decir el qué hacer, sigue siendo cosa de humanos.
Tampoco te voy a decir que fue súper fácil, hubieron bugs que no entendía, momentos donde Claude no me entendía a mí, pero todo se pudo resolver y ahora pop n’ plot, mi proyecto súper secreto está vivo!
Así que si tienes alguna idea guardada en el cajón, creo que es momento de sacarla.
Por último, te invito a que te registres y uses popnplot.com, me cuentes qué te parece y lo compartas con tus amigos. Además si quieres ayudarme con el café (y a veces Whisky) que hace este substack posible, considera una cuenta pro. 😁
Y no te olvides de conectar pop n’ plot con Claude, estoy seguro que te va a encantar!
Un abrazo y gracias por leerme.
G
P.D: antes que me olvide, te comparto los links a los gráficos que creé:
El tier list de personajes de He-Man (el dibujo del 83, no la película de Dolph).
El bracket de oponentes de Rocky (que ganó Dolph).
He visto tantos videos en YouTube de como usar Claude, y todos son bastantes genéricos, introductorios, simples, pero tu post sí es la verdadera forma de usar esta IA. Buen post.
Te admiro!