Claude Design permite trabajar con distintos formatos visuales dentro de un proyecto: páginas, interfaces y experiencias animadas. El resultado depende de la intención, los materiales que aportas y las revisiones que haces después de la primera versión.
En el video del 24 de abril de 2026 recorrí cinco casos con ejemplos concretos: una landing para un recepcionista virtual, una interfaz de escritorio, una aplicación móvil, una página basada en una referencia visual y una animación de lanzamiento. Puedes ver todas las demostraciones en YouTube.
Qué tienen en común los cinco casos
Todos parten de un objetivo visual que se puede expresar y después probar. Una landing necesita comunicar una oferta y llevar a una acción. Una aplicación necesita organizar tareas y estados. Una animación necesita presentar una idea en el tiempo.
En la grabación insistí en entender el resultado como un conjunto de archivos y componentes. Eso permite continuar el trabajo fuera de la vista previa. Pero conviene precisar el alcance: construir una interfaz web no equivale a tener resuelta una aplicación nativa, su servidor y sus integraciones.
También hay una actualización respecto a abril: Claude Design ya no tiene el cupo semanal separado que aparecía en el video. La ayuda actual de Claude indica que comparte los límites de uso del plan. Planificar y revisar con criterio sigue siendo útil; no debe presentarse como una forma de obtener uso ilimitado.
Caso 1: una landing para vender un servicio concreto
El ejemplo de Jack partió de una oferta: atender llamadas y ayudar a agendar citas en clínicas. Pedí un tono profesional y cercano, una dirección visual simple y ondas de sonido como recurso reconocible.
Las preguntas iniciales ayudaron a definir la audiencia y la acción principal. Una página para dueños de clínicas debe explicar qué problema resuelve el servicio y qué ocurre cuando alguien pide una demostración. No basta con llenar secciones de palabras sobre IA.
En la demo apareció una interfaz atractiva con visualización de llamada, secciones de integración y una invitación a agendar. Eso demuestra la construcción de la página. La llamada real, el destino de los leads y las condiciones comerciales necesitan configurarse y comprobarse aparte.
Para convertir el prototipo en una propuesta publicable, sustituye todas las cifras, precios y testimonios de ejemplo por información real. Si todavía no tienes evidencia de un resultado, explica el funcionamiento del servicio en vez de inventar validación social.
Caso 2: una interfaz de escritorio con varios estados
El segundo caso fue la aplicación de dictado de voz que estaba desarrollando. Mostré su historial, opciones, diccionario y ajustes, además de las variantes clara y oscura. Aquí el trabajo visual debía respetar una función cotidiana: dictar y revisar texto sin perderse en la interfaz.
Había trabajado antes en la aplicación y rehice su diseño con Claude Design. Después continué la integración desde Claude Code. Es un caso de rediseño de una interfaz dentro de un producto en desarrollo, no la prueba de que un único prompt resuelva toda una aplicación de escritorio.
Al revisar algo similar, prueba estados que suelen olvidarse: historial vacío, una entrada larga, un ajuste desactivado y un error al procesar. Un modo oscuro correcto también necesita contraste legible en campos secundarios y menús, no solo un fondo diferente.
Caso 3: una experiencia móvil con onboarding
La rana meditadora permitió mostrar otro formato. La aplicación tenía una bienvenida, preferencias visuales, una pantalla principal y un generador. El objetivo era una experiencia sencilla que invitara a usarla pronto.
En este video recorrí su interfaz. La construcción y la conexión con voz están desarrolladas en la guía de Claude Design con Claude Code, basada en la grabación anterior.
Si estás diseñando un onboarding, pregunta qué información necesitas antes del primer uso y qué puede configurarse después. Cada pantalla adicional debería justificar por qué existe. También conviene poder volver atrás sin perder lo que la persona ya completó.
Ver el prototipo dentro de un marco de teléfono es una primera comprobación. Después prueba anchos reales, teclado en pantalla y textos que ocupan más espacio. Esa revisión es parte del diseño de la experiencia.
Caso 4: una referencia visual para orientar otra página
En la grabación tomé una captura completa de una página y la usé para explorar un prototipo llamado Diseña con Benja. La captura daba información sobre jerarquía, distribución y estilo que habría sido difícil describir solo con palabras.
La aplicación práctica es analizar qué funciona en una referencia y adaptarlo a tu oferta. Puedes conservar una jerarquía clara o una forma de mostrar categorías y desarrollar tu propia identidad, textos y materiales autorizados. Una captura no te entrega derechos sobre todos los activos que contiene.
También probé controles para cambiar color y tipografía, y anotaciones para pedir ajustes concretos. Es útil cuando sabes que una sección no funciona, pero te cuesta describir su ubicación. Señalar el elemento reduce la ambigüedad del pedido.
Caso 5: una animación de lanzamiento
Para la aplicación de dictado pedí una pieza que mostrara el recorrido de apretar una tecla, dictar y recibir texto. Exploré una versión vertical y otra horizontal utilizando el contexto del mismo producto.
El ejemplo es una composición animada hecha con elementos web. No es equivalente a pedir cualquier escena fotorealista a un modelo generativo de video. Si necesitas un MP4 para publicarlo en redes, añade un proceso de render o captura que produzca el archivo final y revisa audio, tamaño y duración.
Como extensión del ejercicio, probé convertir la secuencia en una página que avanzaba al hacer scroll. El primer pedido necesitó aclaraciones; después apareció el comportamiento que buscaba. Esa parte muestra por qué conviene definir la interacción, además de la apariencia.
Mantén una identidad común entre formatos
Los casos comparten un problema: conservar el mismo lenguaje visual cuando cambias de landing a aplicación o animación. En la grabación mencioné que Max había trabajado el logo de la aplicación en Photoshop. Ese material, usado como referencia concreta, ayudó a mantener continuidad.
Un sistema de diseño puede reunir tipografías, colores, botones, espaciados y ejemplos de uso. La documentación de Claude Design explica cómo prepararlo con tus propios materiales. Después conviene probarlo en formatos distintos, porque una identidad debe funcionar en más de una pantalla.
Qué entregar al continuar la implementación
Antes de pasar el proyecto a Claude Code, dejaría escrito qué partes son reales y cuáles son simuladas. Una tabla breve evita que un desarrollador o un agente interprete un botón dibujado como una integración ya terminada.
| Resultado visual | Siguiente comprobación |
|---|---|
| Formulario de la landing | Destino del registro y confirmación al usuario |
| Interfaz de escritorio | Acciones reales, persistencia y errores |
| Generador móvil | Conexión al servicio, espera y límites |
| Catálogo de ejemplo | Datos reales, búsquedas y navegación |
| Animación web | Archivo exportable y formatos de publicación |
Para una landing con más movimiento, el método FRAME propone preparar la dirección y los assets antes del montaje. Para operar herramientas externas, la guía de skills y MCP explica cómo conectar el procedimiento con la ejecución.
Video completo y recursos
Ve los cinco casos en YouTube para apreciar la navegación y las animaciones que una captura no muestra. Los recursos de la comunidad están en Imperio Agéntico.
Puedes suscribirte al canal para seguir proyectos completos y ver cómo avanzan desde una idea visual hasta una implementación que se puede probar.
Preguntas frecuentes
¿Cuáles son los cinco casos de Claude Design de esta guía?
Una landing de recepción por voz, una interfaz de escritorio, una app móvil, un prototipo basado en referencia visual y una animación de lanzamiento. Cada caso tiene un objetivo y una continuación distintos.
¿Una landing generada ya tiene un CRM conectado?
No necesariamente. Puede mostrar formularios y botones sin un destino operativo. Comprueba dónde llegan los registros y qué confirmación recibe la persona.
¿Los precios y testimonios de las capturas son resultados reales?
En las maquetas se utilizan elementos de demostración. Antes de publicar una oferta real hay que sustituirlos por información respaldada y condiciones comerciales vigentes.
¿La animación de Claude Design ya es un MP4?
El ejemplo muestra una composición animada con elementos web. Para distribuir un MP4 necesitas un proceso de render o captura y comprobar el archivo final.
¿Cómo mantengo la marca entre una landing y una aplicación?
Usa los mismos materiales autorizados y un sistema de diseño con colores, tipografía, componentes y ejemplos. Revisa después su aplicación en cada formato.
¿Claude Design conserva el cupo separado mostrado en abril?
La documentación consultada para esta guía indica que Design comparte los límites del plan. No debes calcular el consumo actual a partir del cupo separado que aparece en la grabación.