Repolode
Enviar
alchaincyf

alchaincyf/huashu-design

Uma skill de design nativa em HTML para agentes de programação com IA, que transforma prompts em protótipos, apresentações, animações e infográficos.

Alternativa open source a:FigmaAdobe After Effects

Ver no GitHub
Estrelas
25,426
Forks
2,850
Issues abertas
4
Último commit
há 3 dias

O que é?

Huashu Design é uma skill de agente que pode ser instalada no Claude Code, Codex, Cursor e ferramentas semelhantes. Ela faz o agente criar entregáveis de design em arquivos HTML, permitindo gerar a partir de um prompt um protótipo clicável de app no estilo do iPhone, uma apresentação com exportação para PPTX editável, uma animação de linha do tempo exportada como MP4 ou GIF, ou um infográfico com qualidade para impressão.

A skill é baseada em um protocolo de assets de marca: quando uma marca específica é mencionada, o agente procura páginas e assets oficiais, extrai os valores das cores e registra tudo em uma especificação da marca antes de começar o design. Quando o pedido é vago, ela oferece opções de direção visual de uma biblioteca nativa em HTML com 84 estilos, mostra seis miniaturas e cria três versões completas para o usuário escolher.

Ela também inclui uma avaliação de design em cinco dimensões, que atribui notas à consistência da filosofia, à hierarquia visual, à execução dos detalhes, à funcionalidade e à inovação, além de apresentar uma lista de itens para manter, corrigir e melhorar rapidamente. O pipeline principal é executado localmente, enquanto recursos opcionais na nuvem, como conversão de texto em fala e revisão de vídeos com IA, ficam isolados em uma pasta separada e exigem confirmação explícita.

Recursos principais

  • 01Gera protótipos HTML em arquivo único, incluindo molduras do iPhone 15 Pro e fluxos clicáveis com várias telas.
  • 02Exporta apresentações para HTML, para exibição, e para PPTX editável com caixas de texto reais.
  • 03Renderiza animações de linha do tempo em MP4 e GIF, com interpolação opcional a 60 fps e música de fundo.
  • 04Oferece exploração de direções visuais com miniaturas e uma biblioteca de referência com 84 estilos.
  • 05Faz uma crítica de design em cinco dimensões, com gráfico de radar e uma lista de correções práticas.

Casos de uso

  • Preparar uma apresentação para uma conferência, explorando algumas opções de estilo antes de escolher uma.
  • Criar um protótipo clicável de app para dispositivos móveis a partir de uma descrição de uma linha.
  • Produzir uma animação curta para o lançamento de um produto, exportada como MP4 ou GIF.
  • Obter uma crítica estruturada de um design existente antes de encaminhá-lo para a próxima etapa.

Início rápido

  1. 1

    Instale a skill com a skills CLI

    npx skills add alchaincyf/huashu-design
  2. 2

    Abra seu agente (Claude Code, Codex, Cursor etc.) e descreva em linguagem natural o design que você quer

Antes de usar

  • Não é possível exportar para o Figma um PPTX com camadas editáveis; os formatos de saída são HTML, capturas de tela, vídeo ou PPTX com texto editável.
  • Animações complexas em 3D, de física ou de partículas estão fora do escopo da skill.
  • Segundo o autor, designs criados do zero, sem uma marca de referência, recebem uma avaliação de qualidade em torno de 60–65. Por isso, recomenda-se fornecer ativos da marca.

Tópicos

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

Perguntas frequentes

O que é huashu-design?
Uma skill de design nativa em HTML para agentes de programação com IA, que transforma prompts em protótipos, apresentações, animações e infográficos. Huashu Design é uma skill de agente que pode ser instalada no Claude Code, Codex, Cursor e ferramentas semelhantes. Ela faz o agente criar entregáveis de design em arquivos HTML, permitindo gerar a partir de um prompt um protótipo clicável de app no estilo do iPhone, uma apresentação com exportação para PPTX editável, uma animação de linha do tempo exportada como MP4 ou GIF, ou um infográfico com qualidade para impressão.
huashu-design é gratuito? Qual é a licença?
huashu-design é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
huashu-design ainda é mantido?
Manutenção ativa. O último commit de huashu-design foi em 17 de out. de 2026.
Para que posso usar huashu-design?
Preparar uma apresentação para uma conferência, explorando algumas opções de estilo antes de escolher uma. Criar um protótipo clicável de app para dispositivos móveis a partir de uma descrição de uma linha. Produzir uma animação curta para o lançamento de um produto, exportada como MP4 ou GIF. Obter uma crítica estruturada de um design existente antes de encaminhá-lo para a próxima etapa.
Como instalar huashu-design?
Instale a skill com a skills CLI: npx skills add alchaincyf/huashu-design Abra seu agente (Claude Code, Codex, Cursor etc.) e descreva em linguagem natural o design que você quer
Onde consigo huashu-design?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/alchaincyf/huashu-design

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados