Claude Design sirve para explorar y construir una interfaz; Claude Code permite continuar la implementación y conectarla con servicios reales. En el video del 18 de abril de 2026 probé ese recorrido con una aplicación de meditación protagonizada por una rana.
Empecé por la identidad visual y las pantallas. Después ajusté elementos del diseño, pasé el proyecto a Claude Code y conecté generación de texto y voz. Al final se ve la aplicación funcionando localmente. El despliegue público, los usuarios y los pagos quedaron como pasos posteriores. Puedes ver la construcción completa en YouTube.
Empieza por la experiencia que quieres crear
El brief era sencillo: una aplicación orientada al celular, con una sensación cálida y natural, colores pastel y una rana como personaje principal. Debía incluir una bienvenida, opciones de personalización y un reproductor para escuchar meditaciones.
La petición visual no era solamente “hazla bonita”. Incluía una dirección reconocible: madera, tonos suaves, calma y una navegación simple. Eso permitió discutir decisiones concretas cuando Claude Design propuso alternativas.
En las preguntas de la demo elegí entre estilos de rana, paletas y composiciones. También pedí que el onboarding fuera breve. Una aplicación puede tener muchas opciones, pero si las presenta todas antes de permitir el primer uso, la experiencia empieza con una barrera.
Qué conviene entregar como contexto
Si ya tienes marca, aporta los materiales que la representan: logo, colores, tipografías y ejemplos de interfaces. En la grabación incorporé una referencia gráfica de la rana y fui evaluando cómo encajaba en la propuesta.
La guía de sistemas de diseño de Claude explica cómo usar materiales de marca y componentes como base reutilizable. El resultado necesita una revisión visual: subir un logo no garantiza que cada pantalla respete su uso.
Para repetir el ejercicio, elegiría materiales propios o autorizados y comprobaría su aplicación en tres situaciones: fondo claro, fondo oscuro y tamaño pequeño. Un símbolo que se ve bien en una presentación puede perder legibilidad dentro de la navegación móvil.
Diseña el recorrido antes de conectar la API
La primera versión permitió recorrer la bienvenida, elegir opciones y entrar a la pantalla principal. También mostraba el flujo de generación y el reproductor. En esa etapa, ver texto y una animación de reproducción no demostraba que la voz ya estuviera conectada.
Esa separación ayuda a trabajar con orden. Primero comprueba si una persona entiende la interfaz: dónde empieza, qué debe escribir y cómo vuelve al inicio. Después integra los servicios que producen el contenido real.
| Pantalla | Pregunta que debería resolver |
|---|---|
| Bienvenida | ¿Qué puede hacer esta aplicación? |
| Personalización | ¿Qué necesita saber antes de empezar? |
| Inicio | ¿Dónde encuentro la acción principal? |
| Generación | ¿Qué puedo pedir y qué está ocurriendo? |
| Reproductor | ¿Cómo escucho, pauso y vuelvo atrás? |
Esta tabla es una forma editorial de revisar el caso. No pretende convertir la aplicación de ejemplo en una herramienta terapéutica validada: aquí estamos observando diseño e integración técnica.
Usa comentarios concretos para ajustar la interfaz
En un momento de la demo quise cambiar el orden de una cita y la rana. En vez de describir coordenadas, marqué los elementos con la herramienta de anotación. Después comparé la modificación y pedí volver a la versión anterior.
Ese tipo de iteración funciona mejor cuando el comentario explica una intención. “Acerca el botón a la instrucción para que se entienda el siguiente paso” aporta más criterio que “ponlo distinto”. Puedes revisar una cosa a la vez y conservar una versión que te sirva como referencia.
Los ajustes pequeños también importan en celular: texto cortado, un botón desplazado o un elemento decorativo que empuja la acción principal. No asumas que una vista previa móvil demuestra que todos los anchos funcionan bien.
Pasa el proyecto a Claude Code
El siguiente paso fue usar la opción de handoff. En el primer intento apareció un problema de acceso al archivo. Volví a copiar el comando sin la anotación adicional y la importación continuó. Es un detalle práctico que se ve en la grabación y que evita presentar el proceso como infalible.
La documentación de exportación de Claude Design contempla el paso a Claude Code y la descarga del proyecto. Si una importación por enlace falla, el ZIP permite continuar trabajando con los archivos exportados.
Pide que el proyecto incluya contexto suficiente para seguirlo: qué está implementado, qué es una simulación y qué servicios faltan. Un README claro ahorra tener que descubrir otra vez el propósito de cada pantalla.
Conecta texto y voz desde la implementación
En la demo usé servicios de generación de texto y ElevenLabs para la voz. La intención de la persona se convertía en un texto y después en un audio que podía reproducirse desde la aplicación local.
Las claves de esos servicios deben quedar en el backend o en variables de entorno del servidor. Para repetir el ejemplo no hace falta pegarlas en capturas, mensajes publicados ni código enviado al navegador. La interfaz solicita la generación; la capa de servidor realiza las llamadas autorizadas.
Comprueba también la espera y el error. Si la voz tarda, la pantalla debe indicarlo. Si una llamada falla, el botón debe permitir recuperarse sin acumular generaciones repetidas. Un reproductor atractivo no resuelve esas condiciones por sí solo.
Qué falta para convertirlo en un producto público
El final del video distingue la prueba local de una publicación real. Para abrir el servicio a otras personas habría que decidir cómo se autentican, qué pueden consumir, dónde se guardan sus datos y cómo se controla el uso de los proveedores.
También revisaría la experiencia con teclado y diferentes pantallas, los textos largos, la carga del audio y el comportamiento al salir y volver. Esas comprobaciones dependen del producto que quieras entregar, no de lo bien que se vea una captura.
El caso muestra una aplicación web pensada para móvil. Eso no equivale a haber construido y distribuido una aplicación nativa en las tiendas de iOS o Android. Si ese es tu objetivo, tendrás que añadir su proceso específico de desarrollo y publicación.
Cómo continuar desde este ejemplo
Si buscas más formatos, la guía de cinco casos de Claude Design recorre landings, interfaces de escritorio y animaciones. Si quieres preparar una página con movimiento, el método FRAME organiza el brief y los assets antes del montaje.
Para mí, la lección de la rana es que el diseño puede convertirse en algo que se prueba pronto. Ver una primera versión permite decidir con mayor claridad qué mantener, qué corregir y qué conexiones realmente necesita la experiencia.
Video completo y recursos
Abre el video de Claude Design y Claude Code para ver las preguntas, las correcciones y la aplicación local con voz. Los recursos que compartimos para implementar estos casos están en Imperio Agéntico.
Puedes suscribirte a YouTube para seguir construcciones completas, con sus resultados y los ajustes necesarios para llegar a ellos.
Preguntas frecuentes
¿Qué se construyó en el video de Claude Design y Claude Code?
Una aplicación web orientada a móvil, con una rana como personaje, onboarding y generación de contenido con voz. Al final de la grabación se prueba localmente.
¿El diseño inicial ya generaba audio real?
No. La primera etapa permitía recorrer la interfaz y ver el flujo. La integración de texto y voz se realizó después desde Claude Code y se probó en la aplicación local.
¿Qué puedo hacer si falla el handoff de Claude Design?
Comprueba el comando y el acceso al proyecto. La exportación como ZIP permite continuar con los archivos. En la demo se repitió el handoff después de un primer error de acceso.
¿Dónde deben guardarse las claves de los servicios de voz y texto?
En el backend o en variables de entorno del servidor, fuera del código que recibe el navegador y de los archivos compartidos públicamente.
¿Una vista móvil equivale a una aplicación nativa publicada?
No. El ejemplo es una aplicación web pensada para móvil. Una distribución nativa en iOS o Android necesita su proceso específico de implementación y publicación.
¿Qué falta antes de abrir una aplicación así al público?
Definir acceso de usuarios, consumo, almacenamiento y manejo de errores, además de probar distintos dispositivos. El alcance final depende del servicio que quieras ofrecer.