Diseño sin diseñador: Creando interfaces directamente en la terminal

Una historia conocida: escribes código, la lógica funciona perfectamente, pero todo parece un vestigio de los noventa. Para que se vea bien, tienes que abrir Figma y recordar cómo dibujar rectángulos, o llamar a un diseñador y esperar una semana. ¿Pero qué pasa si solo necesitas hacer un boceto rápido de un prototipo o preparar una presentación para un meetup?

Hace poco me topé con el repositorio huashu-Design. No es otro editor gráfico o biblioteca de componentes UI en el sentido tradicional. Es una "habilidad" para agentes de IA (como Claude Code o Cursor) que transforma prompts de texto en artefactos de diseño funcionales y listos para usar. Literalmente escribes en la terminal: "Hazme un prototipo de una app de seguimiento de hábitos para iOS," y un par de minutos después obtienes un archivo HTML interactivo.

¿Qué es esto exactamente

El autor del proyecto, el desarrollador conocido como 花叔 (Huasheng), decidió llevar la filosofía de Diseño de Claude a la línea de comandos. La idea central es que el buen diseño no surge en el vacío. Crece a partir del contexto: guías de marca existentes, logotipos y paletas de colores.

Huashu Design es un conjunto de instrucciones y herramientas que enseñan a una red neuronal a trabajar como un diseñador junior profesional. La herramienta puede extraer colores de tu sitio, seleccionar fuentes y generar no solo imágenes, sino código funcional.

Qué puede hacer esta herramienta

El proyecto aborda varios puntos débiles de los desarrolladores en cuanto a elementos visuales. Esto es lo que genera:

1. Prototipos interactivos. Genera archivos HTML con un mockup de marco de iPhone 15 Pro. Los botones son clicables, las pantallas cambian, los datos se obtienen de APIs reales o mocks.
2. Presentaciones PPTX. Le pides que dibuje diapositivas para una charla y la herramienta crea una presentación HTML que puede convertirse a PowerPoint estándar. Y no serán imágenes—serán bloques de texto editables.
3. Diseño de movimiento. Tiene un motor Stage + Sprite integrado. Puedes pedirle que cree una animación del flujo de trabajo de tu algoritmo y obtener una salida en MP4 o GIF.
4. Infografías. Si necesitas visualizar datos para un artículo o informe, la herramienta composita una cuadrícula de revista usando CSS Grid.

Un detalle interesante: el proyecto incluye 40 estilos listos para usar (20 para web y 20 para presentaciones). Esto ayuda a evitar el estilo típico "generado por IA" con gradientes morados e iconos genéricos que ya aburren a todos.

Cómo funciona internamente

Lo más valioso aquí son los protocolos de trabajo de marca. Cuando le pides que cree un diseño para una empresa específica, el agente no adivina los colores. Sigue un algoritmo estricto:

• Busca la página oficial brand.company.com.
• Descarga los logotipos en formato SVG.
• Analiza los archivos CSS del sitio para extraer los códigos de color HEX exactos.
• Guarda todo en el archivo brand-spec.md.

Solo después de eso comienza el renderizado real. Este enfoque asegura que el resultado no parecerá un trabajo improvisado al azar.

Para las animaciones, se utiliza un modelo de línea de tiempo. Describes la lógica a través de APIs como useTime o interpolate, y scripts integrados basados en Playwright la renderizan en un flujo de video.

Cómo probarlo

La herramienta está optimizada para Claude Code, pero puede adaptarse a otras herramientas de IA. La instalación es sencilla:

npx skills add alchaincyf/huashu-design

Después de eso, puedes dar comandos directos en el chat del agente. Por ejemplo: "Haz una presentación sobre psicología de la IA en 3 variantes de estilo." El agente no solo volcará texto—sugerirá tres direcciones visuales basadas en su biblioteca de estilos.

A quién le será útil

Veo dos escenarios principales. El primero es la prueba rápida de hipótesis. Cuando necesitas mostrarle a un cliente o equipo cómo funcionará una característica sin pasar horas en maquetas. El segundo es la creación de contenido. Si tienes un blog o das conferencias, la capacidad de armar una presentación o animación elegante mientras escribes código es un enorme ahorro de tiempo.

El proyecto recientemente cambió a licencia MIT, por lo que puede usarse libremente para fines comerciales.

Por supuesto, huashu-Design no reemplazará a un director de arte. Las interfaces complejas con refinamiento UX profundo todavía requieren manos humanas. Pero para tareas del tipo "hazlo ver bien y rápido," esta es posiblemente una de las soluciones más interesantes que he encontrado últimamente.

Si estás cansado de luchar con CSS o simplemente quieres que tus proyectos paralelos se vean respetables—echa un vistazo al repositorio. El README tiene muchos ejemplos en vivo que explican las capacidades mejor que cualquier texto.