Huashu Design (Claude Skill) — Instalar & Demo en vivo

Por qué usarlo

Características clave

20 principios de diseño codificados (contraste, ritmo, modularidad, …)
Revisión en 5 dimensiones: maquetación / tipografía / color / movimiento / contenido
Exportación a MP4 mediante renderizado headless para entregables animados
Modo de prototipo de alta fidelidad — fidelidad objetivo píxel perfecto
Funciona con cualquier framework o HTML puro

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "huashu-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "huashu-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/alchaincyf/huashu-design",
          "~/.claude/skills/huashu-design"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add huashu-design-skill -- git clone https://github.com/alchaincyf/huashu-design ~/.claude/skills/huashu-design

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

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.

Requisitos previos

Skill instalado — git clone https://github.com/alchaincyf/huashu-design ~/.claude/skills/huashu-design

Flujo

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
Construir

Produce HTML/CSS. Single file. Responsive. No JS frameworks.✓ Copiado

→ Entregable en un solo archivo que pasa accesibilidad básica
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

Guion gráfico

Use huashu-design. Storyboard a 30s explainer for my product: problem (8s) / solution (14s) / CTA (8s).✓ Copiado

→ Plan fotograma a fotograma
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
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

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

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

Alternativa	Cuándo usarla	Contrapartida
cc-frontend-skill	Prefieres una voz opinada en lugar de una metodología	Proceso de revisión menos estructurado
Figma	El flujo de trabajo del equipo requiere Figma	No 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