Design Sem Designer: Construindo Interfaces Direto no Terminal

Uma história familiar: você escreve código, a lógica funciona perfeitamente, mas tudo parece um vestígio dos anos noventa. Para deixar bonito, você precisa abrir o Figma e lembrar como desenhar retângulos, ou chamar um designer e esperar uma semana. Mas e se você só precisa rapidamente esboçar um protótipo ou montar uma apresentação para um meetup?

Recentemente encontrei o repositório huashu-Design. Não é outro editor gráfico ou biblioteca de componentes UI no sentido tradicional. É uma "skill" para agentes de IA (como Claude Code ou Cursor) que transforma prompts de texto em artefatos de design funcionais e prontos para uso. Você literalmente digita no terminal: "Faça um protótipo de um app de rastreamento de hábitos para iOS," e alguns minutos depois recebe um arquivo HTML interativo.

O Que É Isso

O autor do projeto, o desenvolvedor conhecido como 花叔 (Huasheng), decidiu trazer a filosofia do Claude Design para a linha de comando. A ideia central é que um bom design não surge no vácuo. Ele cresce a partir do contexto: diretrizes de marca existentes, logos e paletas de cores.

Huashu Design é um conjunto de instruções e ferramentas que ensinam uma rede neural a trabalhar como um designer júnior profissional. A ferramenta pode extrair cores do seu site, selecionar fontes e gerar não apenas imagens, mas código funcional.

O Que Essa Ferramenta Pode Fazer

O projeto aborda vários pontos problemáticos dos desenvolvedores quando se trata de visuais. Veja o que ela produz:

1. Protótipos interativos. Gera arquivos HTML com um mockup de moldura de iPhone 15 Pro. Botões são clicáveis, telas alternam, dados vêm de APIs reais ou mocks.
2. Apresentações PPTX. Você pede para ela esboçar slides para uma talk, e a ferramenta cria um deck HTML que pode ser convertido para PowerPoint padrão. E estes não serão imagens—serão blocos de texto editáveis.
3. Motion design. Possui um motor Stage + Sprite integrado. Você pode pedir para criar uma animação do fluxo de trabalho do seu algoritmo e obter uma saída em MP4 ou GIF.
4. Infográficos. Se você precisa visualizar dados para um artigo ou relatório, a ferramenta diagramar uma grade de revista usando CSS Grid.

Um detalhe interessante: o projeto inclui 40 estilos prontos (20 para web e 20 para apresentações). Isso ajuda a evitar o estilo típico de "gerado por IA" com gradientes roxos e ícones padronizados que já cansaram todo mundo.

Como Funciona Por Trás dos Panos

A coisa mais valiosa aqui são os protocolos de trabalho de marca. Quando você pede para criar um design para uma empresa específica, o agente não adivinha as cores. Ele segue um algoritmo estrito:

• Pesquisa a página oficial brand.company.com.
• Baixa logos em formato SVG.
• Analisa os arquivos CSS do site para extrair códigos HEX exatos das cores.
• Salva tudo no arquivo brand-spec.md.

Só depois disso a renderização real começa. Essa abordagem garante que o resultado não vai parecer um trabalho aleatório.

Para animações, um modelo de timeline é usado. Você descreve a lógica via APIs como useTime ou interpolate, e scripts integrados baseados em Playwright renderizam em um stream de vídeo.

Como Experimentar

A ferramenta é otimizada para Claude Code, mas pode ser adaptada para outras ferramentas de IA. A instalação é simples:

npx skills add alchaincyf/huashu-design

Depois disso, você pode dar comandos diretos no chat do agente. Por exemplo: "Faça uma apresentação sobre psicologia de IA em 3 variantes de estilo." O agente não vai apenas despejar texto—ele vai sugerir três direções visuais baseadas em sua biblioteca de estilos.

Para Quem É Útil

Vejo dois cenários principais. O primeiro é teste rápido de hipóteses. Quando você precisa mostrar a um cliente ou equipe como um recurso vai funcionar sem gastar horas em mockups. O segundo é criação de conteúdo. Se você mantém um blog ou fala em conferências, a capacidade de montar uma apresentação estilosa ou animação direto enquanto escreve código é uma enorme economia de tempo.

O projeto recentemente mudou para a licença MIT, então pode ser usado livremente para fins comerciais.

Claro, o huashu-Design não vai substituir um diretor de arte. Interfaces complexas com refinamento profundo de UX ainda requerem mãos humanas. Mas para tarefas do tipo "deixe bonito e rápido," esta é, arguavelmente, uma das soluções mais interessantes que encontrei ultimamente.

Se você está cansado de lutar com CSS ou só quer que seus projetos paralelos tenham uma aparência respeitável—dê uma olhada no repositório. O README tem muitos exemplos ao vivo que explicam as capacidades melhor do que qualquer texto.