Do Prompt ao Protótipo - Huashu Design · adiel

Protótipos visuais são ferramentas cruciais no ciclo de vida de qualquer software ou nova ideia. No entanto, muitos desenvolvedores - assim como eu - podem não ter inclinação ou experiência prática com design, dificultando o uso de ferramentas tradicionais como o Figma. A capacidade de prototipar rapidamente não só ajuda a refinar conceitos, como também pode permitir invalidar premissas que pareciam viáveis em fases iniciais.

Huashu Design

Huashu Design é uma skill de design para agentes de IA inspirada no Claude Design. A skill transforma boas práticas de design em um workflow estruturado e reutilizável. Ela orienta o agente através de processos de concepção, crítica e refinamento para criar protótipos, apresentações, animações e experiências visuais com maior consistência e qualidade.

Instalação

A instalação é simples, utilize npx skills add alchaincyf/huashu-design, ou baixe a skill manualmente. Mais detalhes podem ser encontrados no repositório: huashu-design.

Após instalado, a utilizacao é simples, abra o agente - Codex, Opencode, Claude Code, etc - e instrua algum prompt, por exemplo:

"Construa um protótipo iOS para um app de pomodoro."

E pronto. O agente pode fazer algumas perguntas e normalmente vai gerar um index.html numa pasta prototype.

Outro ponto de destaque da skill para mim é a geração de apresentações. Informe o texto dos slides (ou deixe a IA inventar ¯\_(ツ)_/¯), escolha uma direção visual e o harness entrega um HTML completo com os slides.

Além disso, a skill suporta:

Geração de variações de design;
Consultoria e conselhos de design;
Motion design;
Exportação versátil (PDF, imagem, PPTX editável e vídeo).

Embora eu ainda não tenha testado o export de vídeos, todas as outras funcionalidades entregaram o esperado. Então, deve funcionar normalmente.

Exemplo Prático

Rodei o seguinte comando no Codex utilizando o GPT 5.4:

Faça o prótotipo de um app web estilo Hacker News. Tema escuro com cor cinza/azulada. O nome do projeto é TabNews. Formato minimalista de feed, sem distrações.

Pedi para o agente exportar em formato de imagem e aqui está o resultado:

Não se sinta obrigado a utilizar apenas um prompt inicial. O fluxo ideal é utilizar o modo de planejamento (planning), ou criar um arquivo .md com os detalhes da sua ideia, ou manter uma sessão de refinamento com o agente até que todas as informações necessárias estejam consolidadas. O resultado será muito superior.

Também é importante ressaltar que você pode ir ajustando o design após a primeira iteração. Altere objetos de posição, mude completamente o design, alterne entre Web/Mobile; é rápido e viável. Essa é a grande vantagem de utilizar IA.

Comparação com OpenDesign

Um outro projeto que vem ganhando popularidade é o OpenDesign, uma alternativa mais direta ao Claude Design e com objetivos similares aos do Huashu Design. Embora o OpenDesign seja frequentemente utilizado por meio de sua interface web, ele também pode ser integrado a agentes e fluxos de trabalho como um conjunto de skills ou como um plugin dentro do harness. A principal diferença é que o OpenDesign adota uma abordagem mais ampla, funcionando como uma plataforma completa de design assistido por IA, enquanto o Huashu Design se concentra em fornecer metodologias, filosofias de design em um workflow simples para ser incorporado em qualquer agente.

Além disso, existem mais alguns pontos que merecem atenção:

Estabilidade: O OpenDesign é um projeto em intenso vibecoding e, no momento, não é nada estável. Meus primeiros testes até que funcionaram bem, mas a cada nova versão o fluxo de utilização pode mudar completamente. A versão mais recente (v0.9.0), por exemplo, foi praticamente uma reescrita, com mais de 300 PRs em uma única semana.
Instalação: O Huashu Design é uma skill que se integra ao seu ambiente de trabalho (o harness que você já utiliza). O OpenDesign, por outro lado, na sua versão completa requer instalação separada (e relativamente complexa no Linux).

No fim das contas, a escolha depende do que você procura: se deseja adicionar capacidades de design ao seu fluxo atual com o mínimo de atrito, o Huashu Design tende a ser mais simples. Já o OpenDesign pode ser interessante para quem busca uma solução mais completa.

Conclusão

Em resumo, Huashu Design é uma forma eficiente de pular o processo tradicional de prototipagem manual. Integrando-se diretamente ao seu ambiente de agente, ele transforma instruções textuais em protótipos funcionais, HTML e variações visuais. É uma ótima opção para visualizar as suas ideias rapidamente sem precisar ser um expert em design.