Repolode
Enviar
alchaincyf

alchaincyf/huashu-design

Una skill de diseño nativa de HTML para agentes de programación con IA que convierte una instrucción de texto en prototipos, presentaciones, animaciones e infografías.

Alternativa open source a:FigmaAdobe After Effects

Ver en GitHub
Estrellas
25,426
Forks
2,850
Issues abiertos
4
Último commit
hace 3 días

¿Qué es?

Huashu Design es una skill para agentes que se instala en Claude Code, Codex, Cursor y herramientas similares. Hace que el agente genere entregables de diseño como archivos HTML, de modo que una instrucción puede dar lugar a un prototipo interactivo de una app con estilo de iPhone, una presentación con exportación editable a PPTX, una animación de línea de tiempo exportada como MP4 o GIF, o una infografía con calidad de impresión.

La skill se basa en un protocolo de recursos de marca: cuando se menciona una marca específica, el agente busca páginas y recursos oficiales, extrae sus valores de color y los registra en una especificación de marca antes de diseñar. Si la solicitud es ambigua, ofrece varias direcciones de estilo de una biblioteca nativa de HTML con 84 estilos, muestra seis miniaturas y crea tres versiones completas para que el usuario elija.

También incluye una revisión de diseño en cinco dimensiones que evalúa la coherencia de la filosofía, la jerarquía visual, la ejecución de los detalles, la funcionalidad y la innovación, y presenta una lista de elementos para conservar, corregir y mejorar rápidamente. El flujo de trabajo principal se ejecuta localmente; las funciones opcionales en la nube, como la conversión de texto a voz y la revisión de video con IA, están aisladas en una carpeta aparte y requieren confirmación explícita.

Funciones clave

  • 01Genera prototipos HTML de un solo archivo, incluidos marcos de iPhone 15 Pro y flujos interactivos con varias pantallas.
  • 02Exporta presentaciones a HTML para exponerlas y a PPTX editable con cuadros de texto reales.
  • 03Renderiza animaciones de línea de tiempo en MP4 y GIF, con interpolación opcional a 60 fps y música de fondo.
  • 04Permite explorar direcciones de diseño con miniaturas y una biblioteca de referencia con 84 estilos.
  • 05Realiza una crítica de diseño en cinco dimensiones con un gráfico de radar y una lista de correcciones concretas.

Casos de uso

  • Preparar una presentación para una conferencia y comparar varias opciones de estilo antes de elegir una.
  • Crear un prototipo interactivo de una app móvil a partir de una descripción de una sola línea.
  • Producir una animación breve para el lanzamiento de un producto y exportarla como MP4 o GIF.
  • Obtener una crítica estructurada de un diseño existente antes de entregarlo.

Inicio rápido

  1. 1

    Instala la skill con la CLI de skills

    npx skills add alchaincyf/huashu-design
  2. 2

    Abre tu agente (Claude Code, Codex, Cursor, etc.) y describe con lenguaje natural el diseño que quieres

Antes de usarlo

  • No se puede exportar a Figma un PPTX con capas editables; los formatos de salida son HTML, capturas de pantalla, vídeo o PPTX con texto editable.
  • Las animaciones complejas en 3D, de física o de partículas quedan fuera del alcance de la skill.
  • Según su autor, los diseños creados desde cero y sin una marca de referencia obtienen una valoración de calidad de alrededor de 60–65, por lo que se recomienda proporcionar recursos de marca.

Temas

#design#agent-skill#claude-code#html#prototyping#slides#animation#ui-design

Preguntas frecuentes

¿Qué es huashu-design?
Una skill de diseño nativa de HTML para agentes de programación con IA que convierte una instrucción de texto en prototipos, presentaciones, animaciones e infografías. Huashu Design es una skill para agentes que se instala en Claude Code, Codex, Cursor y herramientas similares. Hace que el agente genere entregables de diseño como archivos HTML, de modo que una instrucción puede dar lugar a un prototipo interactivo de una app con estilo de iPhone, una presentación con exportación editable a PPTX, una animación de línea de tiempo exportada como MP4 o GIF, o una infografía con calidad de impresión.
¿huashu-design es gratuito? ¿Qué licencia tiene?
huashu-design es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿huashu-design sigue mantenido?
Mantenimiento activo. El último commit de huashu-design fue el 17 oct 2026.
¿Para qué puedo usar huashu-design?
Preparar una presentación para una conferencia y comparar varias opciones de estilo antes de elegir una. Crear un prototipo interactivo de una app móvil a partir de una descripción de una sola línea. Producir una animación breve para el lanzamiento de un producto y exportarla como MP4 o GIF. Obtener una crítica estructurada de un diseño existente antes de entregarlo.
¿Cómo se instala huashu-design?
Instala la skill con la CLI de skills: npx skills add alchaincyf/huashu-design Abre tu agente (Claude Code, Codex, Cursor, etc.) y describe con lenguaje natural el diseño que quieres
¿Dónde consigo huashu-design?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/alchaincyf/huashu-design

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados