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

Por que usar

Principais recursos

20 princípios de design codificados (contraste, ritmo, modularidade, …)
Revisão em 5 dimensões: layout / tipografia / cor / movimento / conteúdo
Exportação para MP4 via renderização headless para entregáveis animados
Modo de protótipo de alta fidelidade — fidelidade alvo pixel-perfect
Funciona com qualquer framework ou HTML puro

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu 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
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.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 o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a 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
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "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
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o 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"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

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

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Huashu Design

Prototipagem rápida de uma landing page de produto em HTML

👤 Fundadores e designers que preferem código ao Figma ⏱ ~60 min intermediate

Quando usar: Você tem um briefing e quer um protótipo clicável e mensurável, não um mockup estático.

Pré-requisitos

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

Fluxo

Ancorar estilo

Use huashu-design. Briefing: landing B2B SaaS minimalista, influência suíça, títulos com serifa, uma cor de destaque. Gere o plano de layout seguindo seus 20 princípios.✓ Copiado

→ Plano de layout cita os princípios específicos aplicados
Construir

Produza HTML/CSS. Arquivo único. Responsivo. Sem frameworks JS.✓ Copiado

→ Entregável em arquivo único que passa a11y básico
Revisão 5-dim

Execute a revisão de 5 dimensões no que você acabou de entregar. Onde está aquém?✓ Copiado

→ Auto-revisão crítica, sem elogios vazios

Resultado: Um protótipo que você pode testar A/B ou iterar sem sair do código.

Armadilhas

Skill reverte para o template genérico "hero + funcionalidades + CTA" — Fixe a referência de estilo (suíço, Bauhaus, editorial) em cada prompt

Combine com: filesystem

Criar um vídeo explicativo animado e exportar para MP4

👤 Devs e criadores que precisam de um vídeo do produto ⏱ ~120 min advanced

Quando usar: Você quer um explicativo de 30 segundos para o seu produto mas não consegue justificar usar o After Effects.

Fluxo

Storyboard

Use huashu-design. Faça storyboard de um explicativo de 30s do meu produto: problema (8s) / solução (14s) / CTA (8s).✓ Copiado

→ Plano quadro a quadro
Animar em HTML

Implemente cada cena como animação CSS keyframe. Renderize como um único HTML com linha do tempo.✓ Copiado

→ HTML toca corretamente no navegador
Exportar

Renderize em MP4 1080p.✓ Copiado

→ MP4 gravado em disco; duração confere

Resultado: Um explicativo em MP4 entregável gerado a partir de um prompt, sem software de edição de vídeo.

Armadilhas

Fontes renderizam diferente no Chrome headless — Embutir web fonts; não dependa de fontes do sistema

Combine com: filesystem · after-effects

Combinações

Combine com outros MCPs para 10× de alavancagem

huashu-design-skill + after-effects

Fazer storyboard em HTML, finalizar no AE para qualidade de broadcast

Rascunhe no huashu-design; exporte quadros para composição no AE.✓ Copiado

huashu-design-skill + filesystem

Salvar iterações junto com o briefing

Crie /designs/landing-v1/ a v3/ e guarde ambas.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar
plan_layout	brief, style_ref	Em todo novo design
generate_html	plan	Construir a partir do plano
review_5d	html	Auto-revisão após construir
render_mp4	html, duration	Entregável animado

Custo e limites

O que custa rodar

Cota de API: N/A
Tokens por chamada: Designs de alta fidelidade geram muito HTML — mantenha o escopo restrito
Monetário: Gratuito
Dica: Gere em etapas pequenas: estrutura primeiro, estilização depois, polimento por último

Segurança

Permissões, segredos, alcance

Escopos mínimos: filesystem-write

Armazenamento de credenciais: Nenhum

Saída de dados: Nenhum

Solução de problemas

Erros comuns e correções

MP4 render fails (ffmpeg missing)

brew install ffmpeg — o skill o usa para juntar os quadros

Verificar: `ffmpeg -version`

Design parece genérico

Você não fixou uma referência de estilo — sempre nomeie uma (suíço, Bauhaus, Pentagram, …)

Revisão dá feedback positivo para um design ruim

Prompt explícito: "seja crítico; liste primeiro o que está errado"

Alternativas

Huashu Design vs. outros

Alternativa	Quando usar	Troca
cc-frontend-skill	Você quer uma voz opinativa em vez de uma metodologia	Processo de revisão menos estruturado
Figma	O fluxo do time exige Figma	Não é código; não é animável da mesma forma

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills