Mi primera web app con IA

Mi primera web app con IA

Mi primera web app con IA

Mar 2, 2026

Share on:

Share on:

Blog Article Main Image

AI, Productivity, Tools

Todo el mundo está hablando de uno de los episodios del podcast de Lenny Rachitsky con Jenny Wen, y no es para menos. Se hablan de bastantes cosas interesantes pero hay una sección que resonó profundamente y con la que estoy 100% de acuerdo: el proceso clásico de creación de producto digital se está volviendo obsoleto.

Como ya comenté en este otro artículo sobre cómo la IA ha redefinido mi productividad, el impacto de estas herramientas va mucho más allá de diseñar más rápido. Ese flujo secuencial y encasillado al que estamos acostumbrados (Discovery → Divergencia → Convergencia → Wireframes → Mocks en Figma → PRD kilométrico → Handoff a Desarrollo) es lento, propenso a malentendidos y desactualizaciones y, en la era actual, un cuello de botella innecesario.

Yo no quiero diseñar más en menos tiempo, quiero diseñar mejor en el mismo tiempo y si además puede entregarse antes, entonces estupendo.

Hoy, impulsado por la IA, un Product Lead puede y debe abarcar el espectro completo: pensar estratégicamente como PM, diseñar la experiencia como Product Designer y, salvando las distancias de la ingeniería pura, "escribir" el código como Developer (por favor devs, no me malinterpretéis). No se trata de eliminar a los especialistas, sino de tener la autonomía para iterar ideas reales a una velocidad impensable hace dos años.

Una de mis grandes pasiones es la música. Hace muchos años empecé a tocar la guitarra de forma autodidacta y, como suele pasar, pronto sufrí las consecuencias. Además de chocar constantemente con la falta de tiempo, el aprendizaje musical se vuelve difuso e interminable cuando no tienes una ruta o método estructurado.

Para demostrar cómo funciona este nuevo paradigma de producto, he querido resolver ese problema personal compartiendo el paso a paso ("sin mucha jerga") de cómo he ideado, diseñado y lanzado Guitar Cheats, un panel interactivo de teoría musical donde he intentado concentrar algunos los atajos típicos del diapasón en un único ecosistema visual. No pretende ser una guía didáctica profunda ni abarcar todas las posibilidades existentes, simplemente es un recopilatorio de nociones y "trucos" básicos para que cualquiera que esté empezando a tocar música, en concreto la guitarra, tenga un apoyo dinámico e interactivo a mano.

Es cierto que ya existen excelentes apps en el mercado como Muted.io, innumerables tutoriales en YouTube o cursos muy completos, pero quería construir mi propia aplicación por dos motivos fundamentales:

  1. Necesitaba que estuviera adaptada a mi forma de entender la guitarra; la herramienta visual que me hubiera salvado horas de frustración cuando empecé a aprender (y que aún arrastro).

  2. Era el vehículo perfecto para empaparme de estos nuevos flujos de trabajo asistidos por IA y adquirir "bajando al barro" las habilidades prácticas de diseño y desarrollo que se van a exigir en el sector a partir de ahora.

Por tanto dejo un resumen escueto de los pasos que he seguido para su implementación, que tan solo me ha llevado unas horas pero ha sido unas de las experiencias más enriquecedoras en las que me he visto envuelto en el último año.

Paso 1: Product Management y el adiós a los PRDs de 20 páginas

Como responsable de producto y diseñador, el objetivo diferencial es siempre maximizar el valor entregado y minimizar el "Time-to-Insight" (el tiempo hasta obtener conocimiento real de los usuarios). En este caso al ser un "yo me lo guiso yo me lo como", el objetivo estaba chupao.

Para Guitar Cheats, la premisa era clara: tener a mano algunos de los atajos recurrentes de guitarra y poder interactuar con notas y escalas de forma que todo el conjunto se actualizara automáticamente. En lugar de encerrarme a redactar un Documento de Requisitos de Producto (PRD) exhaustivo con cada posible casuística y toda la teoría musical existente, definí únicamente las "Core Features" para un bucle de valor rápido añadiendo alguna base de teoría musical y alguna imagen para dar algo más de contexto:

  1. Un explorador de modos griegos.

  2. Una teoría y atajos básicos.

  3. Un diccionario de acordes.

  4. El sistema CAGED desglosado visualmente.

  5. Un "Drone Player" interactivo para entrenar el oído musical.

  6. Y todo ello que se adapta y auto actualizara en función de una nota clave (tonalidad).

El enfoque aquí ya no es gestionar metodologías rígidas o tickets, sino tener una claridad mental absoluta de qué problema resuelve cada funcionalidad. Esa claridad es el mejor "prompt" que existe.

Paso 2: Discovery y diseño

No he invertido ni un segundo dibujando pantallas estáticas para cada estado de la aplicación. Simplemente indiqué que usara Tailwind CSS y Shadcn con alguna que otra indicación y dejé que la creatividad de la IA actuara por si sola (a ver qué me entregaba).

El clásico bucle de discovery-divergir-converger se desmorona cuando cualquiera actuando como un ingeniero puede poner en marcha siete agentes de IA y lanzar una versión funcional antes de que siquiera termines de explorar opciones.

Sin embargo, Figma sigue siendo imprescindible para mí aunque ahora cambia su propósito. Como bien señala Jenny Wen (Head of Design de Claude, ex-Figma) tanto en el podcast de Lenny como en este vídeo formal, Figma sigue siendo imbatible para explorar rápidamente múltiples direcciones visuales distintas en un lienzo espacial al mismo tiempo. Las herramientas de programación asistidas por IA son aún demasiado lineales y generan un "sesgo de inversión" rápido hacia una sola ruta.

Pero una vez validada la dirección, el trabajo de diseño se divide ahora en dos modos distintos:

  1. Apoyar la ejecución: Mancharse las manos, diseñar directamente en el navegador (usando herramientas como Tailwind CSS) comprobando la interactividad real y puliendo el código generado.

  2. Establecer la visión a muy corto plazo (3 a 6 meses): Los roadmaps de varios años han muerto. Pero precisamente porque todos pueden construir rapidísimo, debe seguir existiendo alguien responsable de orientar al equipo en una dirección con sentido y coherencia.

En este contexto híbrido, Jenny comentaba los perfiles de diseño que sobrevivirán en este apocalipsis de cambio constante:

  • Los Generalistas: Se adaptan rapidísimo a esa mezcla inevitable entre diseño, producto e ingeniería.

  • Los Especialistas profundos: Expertos top en un área muy concreta (difíciles de encontrar, pero su impacto es abismal).

  • Los Juniors "Craft": La contratación más ignorada y a la vez más prometedora hoy día. Los perfiles humildes con curvas de aprendizaje rápidas, que llegan con la "pizarra en blanco" y sin apego a procesos heredados, tienen una ventaja competitiva brutal.

A medida que la IA mejora inexorablemente en "gusto" y "juicio", los diseñadores no pueden escudarse únicamente en tener "buen ojo" como foso defensivo. La IA es una compañera de equipo y siempre tendrá que haber un humano responsable en última instancia de lo que se publica. Porque criterio y propósito no deben de desaparecer.

Paso 3: Desarrollo a la velocidad de la luz

Aquí es donde entra el factor diferenciador. ¿Soy un ingeniero de software Senior capaz de escalar arquitecturas de bases de datos para millones de usuarios? Nada más lejos de la realidad. Es más confieso que la mitad de las veces no sé ni lo que la IA está desarrollando. Pero no necesito saberlo para crear un MVP (Producto Mínimo Viable) increíblemente complejo y pulido.

Trabajando con skills y agentes, he construido la aplicación completa en herramientas web punteras (React 19, TypeScript o Vite). Estamos hablando de ensamblar casi 1.500 líneas de código lógico que maneja, entre otras maravillas:

  • Las matemáticas detrás del Círculo de Quintas y los saltos de intervalos musicales.

  • Un sintetizador de audio real incrustado en el navegador interactuando con las pulsaciones del usuario para el Drone Player.

  • Mapas vectoriales para mostrar combinaciones de trastes en el instrumento.

En esta fase, mi rol fue el de un "Director de Orquesta" (nunca mejor dicho). No necesitaba saberme la sintaxis para declarar una variable de memoria; ni tampoco ser un músico profesional para saber si lo que se ha generado es correcto y tiene sentido.Necesitaba mi intuición, sentido del producto y por supuesto algo de teoría básica para revisar que la interfaz tuviera sentido, estuviera libre de fallos fatales y resolviera el flujo esperado.

La otra parte del aprendizaje pertenece a la curiosidad, porque de eso se trata. Con todo esto estoy aprendiendo a ver la misma realidad que un ingeniero. Su mismo lenguaje. Y sí, para ello he tenido que hacer preguntas tan básicas y ridículas como "cuál es la diferencia entre la terminal de Mac y la de Antigravity y cuándo debería de usar una otra", "qué es bash y zsh", "crea un cheat sheet de comandos de terminal, node, github, etc.", "cómo conseguir un token para conectarlo con este MCP", "debo de ejecutar el npm install en la carpeta global o la específica del proyecto", "está mi ordenador siendo vulnerable? haz una auditoría de seguridad", etc.

Paso 4: El mantenimiento silencioso

Por supuesto no es oro todo lo que reluce. También hay que bajar a las cloacas del código: las operaciones. En principio, cualquier pequeño cambio técnico, bug o configuración extraña requiere abrir un ticket a Operaciones, rezar tres avemarías y esperar que el sistema no explote en mil pedazos.

Ahora, esas tareas "aburridas" que antes frenaban cualquier lanzamiento se gestionan en minutos con un tono mucho más relajado:

  • Lidiar con el famoso archivo .gitignore. Para los no iniciados, es básicamente el "segurata" de la discoteca que decide qué archivos tienen permiso para entrar en el repositorio y cuáles se quedan fuera por llevar zapatillas de deporte (o ser archivos temporales que ensucian todo). Gracias a la IA, configurar esto para que la publicación final fuera impecable fue un trámite, no una tortura de comandos crípticos.

  • Configuración para humanos: El control de versiones y la fontanería del código ya no son un lenguaje arcano para iniciados. Entendiendo el flujo lógico y apoyándote en tu copiloto IA, esas tareas que antes asustaban a los perfiles de Product Management hoy se resuelven casi por inercia.

  • El "Sprint" de los tres minutos: ¿Modificar un componente para actualizar los derechos legales en el pie de página o meter un enlace a la web corporativa? Antes eso podía generar un hilo de Slack interminable. Aquí, se convirtió en una tarea de tres minutos de reloj (un minuto para el cambio, dos para disfrutar del café).

En resumen: si tienes claro el flujo, la IA se encarga de que la "fontanería" no te manche la camisa.

Paso 5: Lanzamiento y Go-to-Market

Por último, un producto excelente encerrado en tu disco duro no sirve de nada. Esta fase de despliegue es, precisamente, donde más tiempo he invertido para adquirir nuevas habilidades técnicas que tradicionalmente quedaban fuera del alcance de un perfil de diseño o producto.

  1. Publicación Automática (CI/CD): Para que Guitar Cheats fuera accesible a todo el mundo, implementé un sistema de Integración y Despliegue Continuo (CI/CD) utilizando Vercel. Esto significa que la infraestructura en la nube está conectada directamente al repositorio de código, en este caso Github. Cada vez que guardo un avance, la plataforma detecta el cambio, lo procesa y publica una nueva versión en cuestión de segundos, garantizando que el servicio nunca se interrumpa.

  2. Gestión de Dominios y Branding: La identidad del proyecto es fundamental para generar confianza. Adquirí y configuré el dominio oficial guitarcheats.app. Este proceso implica no solo la compra, sino la configuración de registros DNS o implementación de código para Analytics.

  3. Iterar en Público (Building in Public): En el mercado actual, la confianza de los usuarios no se construye esperando a alcanzar una perfección "ciega" antes de lanzar. Se construye mediante la transparencia y la velocidad de respuesta. Siguiendo el modelo de empresas punteras como Anthropic, el enfoque es publicar versiones tempranas y funcionales para recoger feedback real de inmediato. Lanzar una herramienta con aspectos aún por pulir no daña la marca; lo que realmente la daña es la falta de comunicación y mejora tras el lanzamiento. La clave está en iterar visiblemente basándose en lo que los usuarios necesitan hoy, no en lo que nosotros imaginamos ayer. Así que he ido iterando sobre la marcha (y obviamente, no voy a peder millones ni va a morir ningún gatito si me equivoco).

El chat como interfaz y la vuelta a las trincheras (IC)

Vale la pena subrayar que, a pesar de que el "chat" parecía un paso intermedio hacia interfaces más ricas, ha demostrado ofrecer una flexibilidad infinita y ha venido para quedarse. Eso sí, evolucionaremos hacia un futuro híbrido, como ya vemos con los Artifacts de Claude, en el que modelos de IA generarán elementos de UI completos al vuelo (ya sea directamente en herramientas de diseño como Figma o Pencil o integrados en el código), siendo el lenguaje natural el tejido conectivo de todo ello.

En este punto, el debate actual se centra en dónde residirá nuestra verdadera mesa de mezclas: ¿será el chat integrado en el IDE (el editor de código) o el CLI (la línea de comandos) el estándar definitivo? Lo que está claro es que el flujo de trabajo se está desplazando hacia donde la IA puede no solo sugerir, sino ejecutar y previsualizar en tiempo real.

Para entender profundamente estos cambios, perfiles como la propia Jenny dieron un paso atrás, pasando de Design Director (gestionando a docenas de personas) a volver a ser aportador individual (IC). Es el único camino para adquirir las habilidades técnicas necesarias en este periodo de transición tan rápido, habilidades imposibles de conseguir simplemente observando desde el sillón de un manager tradicional.

¿La conclusión? Mejores decisiones en menor tiempo

Fusionar los sombreros de Management, Diseño y Desarrollo no implica que no valoremos la ingeniería profunda o la investigación minuciosa para proyectos gigantescos.

Pero, en mi opinión, sí significa que para transformar ideas brutas en valor real puesto a disposición de los usuarios, el 'Handoff' (ese pase de balón entre departamentos) o ciertas dinámicas como SCRUM, han muerto o lo están haciendo lentamente.

Cubrir el espectro completo, asistido por IA, dota al Product Lead del mayor superpoder posible: reducción drástica de la fricción. Puedes tomar decisiones de mucha más calidad en muchísimo menos tiempo porque no hay pérdida de contexto ni juego del teléfono escacharrado entre el que lo piensa, el que lo pinta y el que lo construye. Por primera vez en la historia del software, las tres figuras son la misma persona.

Y por último y no menos importante, estoy abierto a recibir feedback tanto técnico como musical, así que siéntete libre de escribirme y lo iteramos.

Visita la app en www.guitarcheats.app y sígueme en Github.

© 2025 Carlos López. All Rights reserved.

Share on: