/ Directorio / Playground / Huashu Design
← Todos los servidores ↗ GitHub
● Comunidad alchaincyf ⚡ Instantáneo

Huashu Design

por alchaincyf · alchaincyf/huashu-design

Skill de diseño nativo en HTML para Claude — prototipos de alta fidelidad, diapositivas, animaciones, exportación a MP4 y 20 principios de diseño.

Huashu Design (华术) es un skill de Claude Code que usa HTML/CSS como lienzo de diseño. Entrega prototipos, presentaciones y explainers animados sin Figma. Incluye 20 principios de diseño fijados, revisión en 5 dimensiones y renderizado a MP4. Agnóstico al framework; funciona a partir de un brief informal.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

listo

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

Casos de uso

Usos del mundo real: Huashu Design

Prototipar rápidamente una landing page de producto en HTML

👤 Fundadores y diseñadores que prefieren el código a Figma ⏱ ~60 min intermediate

Cuándo usarlo: Tienes un brief y quieres un prototipo interactivo y medible, no un mock estático.

Flujo
  1. Anclar el estilo
    Use huashu-design. Brief: minimal B2B SaaS landing, Swiss-influenced, serif headings, one accent color. Generate layout plan following your 20 principles.✓ Copiado
    → El plan de maquetación cita los principios específicos aplicados
  2. Construir
    Produce HTML/CSS. Single file. Responsive. No JS frameworks.✓ Copiado
    → Entregable en un solo archivo que pasa accesibilidad básica
  3. Revisión en 5 dimensiones
    Run the 5-dimension review on what you just shipped. Where does it fall short?✓ Copiado
    → Autorrevisión crítica, no elogios

Resultado: Un prototipo que puedes A/B testear o iterar sin salir del código.

Errores comunes
  • El skill vuelve a la plantilla genérica «hero + características + CTA» — Fija la referencia de estilo (suizo, Bauhaus, editorial) en cada prompt
Combinar con: filesystem

Crear un explainer animado y exportarlo a MP4

👤 Desarrolladores y creadores que entregan vídeos de producto ⏱ ~120 min advanced

Cuándo usarlo: Quieres un explainer de 30 segundos para tu producto pero no puedes justificar After Effects.

Flujo
  1. Guion gráfico
    Use huashu-design. Storyboard a 30s explainer for my product: problem (8s) / solution (14s) / CTA (8s).✓ Copiado
    → Plan fotograma a fotograma
  2. Animar en HTML
    Implement each scene as a CSS keyframe animation. Render as a single HTML with a timeline.✓ Copiado
    → El HTML se reproduce limpiamente en el navegador
  3. Exportar
    Render to 1080p MP4.✓ Copiado
    → MP4 escrito en disco; duración coincide

Resultado: Un explainer en MP4 listo para distribuir generado desde un prompt, sin software de edición de vídeo.

Errores comunes
  • Las fuentes se renderizan diferente en Chrome headless — Incluye las fuentes web; no dependas de las fuentes del sistema
Combinar con: filesystem · after-effects

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

huashu-design-skill + after-effects

Guion gráfico en HTML, acabado en AE para calidad de emisión

Draft in huashu-design; export frames for AE compositing.✓ Copiado
huashu-design-skill + filesystem

Guardar las iteraciones junto al brief

Create /designs/landing-v1/ through v3/ and keep both.✓ Copiado

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
plan_layout brief, style_ref Para cada nuevo diseño 0
generate_html plan Construir a partir del plan 0
review_5d html Autorrevisión tras construir 0
render_mp4 html, duration Entregable animado 0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
N/A
Tokens por llamada
Los diseños de alta fidelidad producen mucho HTML — mantén el alcance acotado
Monetario
Gratuito
Consejo
Genera en pequeños pases: estructura primero, estilos después, pulido al final

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: filesystem-write
Almacenamiento de credenciales: Ninguno
Salida de datos: Ninguno

Resolución de problemas

Errores comunes y soluciones

El renderizado a MP4 falla (ffmpeg no encontrado)

brew install ffmpeg — el skill lo usa para unir los fotogramas

Verificar: `ffmpeg -version`
El diseño parece genérico

No fijaste una referencia de estilo — indica siempre una (suizo, Bauhaus, Pentagram, …)

La revisión da feedback positivo sobre un mal diseño

Prompt explícito: "sé crítico; lista primero lo que está mal"

Alternativas

Huashu Design vs otros

AlternativaCuándo usarlaContrapartida
cc-frontend-skillPrefieres una voz opinada en lugar de una metodologíaProceso de revisión menos estructurado
FigmaEl flujo de trabajo del equipo requiere FigmaNo es código; no es animable de la misma manera

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills