Communitygithub.com

alchaincyf/huashu-design

花叔Design: crea prototipos de alta fidelidad, demos interactivos, presentaciones, animaciones y variantes de diseño en HTML. Actúa como asesor de dirección de diseño y experto en revisiones, evitando clichés web comunes.

¿Qué es huashu-design?

Esta habilidad convierte a un agente de IA en un diseñador multifacético especializado en prototipado rápido con HTML, animación, presentaciones y exploración de variantes de diseño. Al recibir una solicitud, el agente encarna automáticamente al experto adecuado (UX, animador, diseñador de presentaciones o prototipista) y produce resultados visuales reales, evitando patrones web trillados. Es compatible con plataformas como Claude Code, Cursor y Codex, y se activa mediante palabras clave como 'haz un prototipo', 'demo interactivo', 'animación HTML' o 'revisa este diseño'. Su flujo de trabajo incluye un modo de asesoría para requisitos ambiguos, donde genera tres versiones visuales distintas en paralelo, apoyándose en una biblioteca de 40 estilos HTML nativos, 20 páginas web y 20 presentaciones. Además, incorpora protocolos de activos de marca, filtros anti-contenido generado por IA de baja calidad, un flujo de trabajo para diseñadores junior, generación de variantes (tweaks), exportación de animaciones a MP4/GIF, un pipeline para videos largos con narración y un sistema de revisión en cinco dimensiones.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alchaincyf/huashu-design/tree/main/skills/huashu-design

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace huashu-design?

花叔Design — crea prototipos de alta fidelidad, demos interactivos, presentaciones, animaciones y variantes de diseño en HTML. Además, actúa como asesor de dirección de diseño y experto en revisiones. Según la tarea, encarna al experto correspondiente (UX, animador, diseñador de presentaciones, prototipista) y evita los clichés del diseño web.

Palabras clave de activación: haz un prototipo, prototipo interactivo, demo HTML, demo de animación, variante de diseño, diseño de alta fidelidad, mockup de UI, prototipo, crea una página HTML, crea una visualización, prototipo de app, prototipo iOS, exportar MP4/GIF, video 60fps, estilo de diseño, dirección de diseño, esquema de colores, recomendar estilo, elige un estilo, hazlo bonito, revisión, ¿se ve bien?, review this design, animación narrada, video explicativo, video educativo largo, voiceover, narración, explica qué es XX en 5 minutos.

Cuando los requisitos sean ambiguos, entra en modo de asesoría de dirección de diseño: ejecuta tres líneas lógicas en paralelo para producir tres versiones visuales reales. El arsenal incluye una biblioteca nativa de 40 estilos HTML, 20 páginas web y 20 presentaciones.

Otras capacidades incluyen:

  • Protocolo de activos de marca
  • Filtro anti-contenido generado por IA de baja calidad (anti-AI slop)
  • Flujo de trabajo para diseñadores junior
  • Variantes (tweaks)
  • Exportación de animaciones a MP4/GIF
  • Pipeline para videos largos con narración
  • Revisión en cinco dimensiones

Skills relacionados