Conteúdo detalhado
🧩 Design virou código — a mudança de superfície
Durante mais de 20 anos, design morava em outro app: você desenhava num editor e um time reconstruía aquilo em código, em outro lugar. Hoje a superfície de design é o próprio código. Você descreve, o agente gera a interface direto em HTML/CSS — e você itera ali mesmo.
O reconhecimento de que a interface agora nasce no código, e que o agente é quem a desenha conforme você descreve.
Quem entende isso para de tratar design como "etapa separada" e passa a iterar visual e código no mesmo lugar — muito mais rápido.
Superfície de design = código · iteração no mesmo ambiente · design como sistema, não ato isolado.
🔁 Onde o design mora — antes e agora
- •Antes: design no app de protótipo → engenharia reconstrói em código → duas fontes de verdade.
- •Agora: você descreve no Claude Code → ele gera HTML/CSS → você ajusta na hora, mesmo lugar.
- •O ciclo "desenhar → entregar → reconstruir" virou um único loop de conversa.
⚠️ O calcanhar de Aquiles
IA, por padrão, é ruim de design. Ela não "sente" o que é bonito nem sabe por que uma tela boa é boa. Se você só pede "faça bonito", recebe o visual genérico de sempre. O resto do módulo resolve exatamente isso.
🎯 Codificar o "bom design" — a ideia que destrava tudo
A virada do módulo cabe numa frase: se a gente codificar o que é bom design, a IA reproduz bom design com confiabilidade. Bom design tem regras — proporção, espaçamento, contraste, hierarquia. Quando viram um arquivo que o agente lê e segue, a qualidade deixa de ser sorte e passa a ser sistema.
Escrever, num arquivo que o agente lê, as regras objetivas que tornam uma tela boa.
É o que separa "página genérica de IA" de "isso parece um produto de verdade".
Cognitive load (lida em ~3 s) · white space · proporção entre textos · espaços iguais · nada encostando nas bordas.
✓ As regras que fazem "parecer profissional"
- ✓Glanceável em ~3 s (sistema 1, não sistema 2).
- ✓White space generoso e espaços iguais entre elementos.
- ✓Razão consistente entre tamanhos de texto (hierarquia).
- ✓Margem de respiro: nada encostando nas bordas.
✗ O que "denuncia" amadorismo
- ✗Texto demais — a leitura de 3 s some.
- ✗Elementos colados na borda da tela.
- ✗Espaços desiguais e tamanhos de fonte aleatórios.
- ✗"Faça bonito" sem nenhuma regra carregada.
📐 A proporção áurea como atalho
Sites "nível Apple" não são bonitos por acaso: a razão entre tamanhos de texto, os espaços iguais e a margem de respiro seguem proporção (~1,618). E a IA é um estagiário de QI 500: capaz, mas sem a régua certa ele "come giz de cera". Dê a régua — ele entrega nível sênior.
🖼️ Skills de design — open-design e power-design
Um bom designer tem muitas cores no pincel. Aqui suas "cores" são as skills. Duas formam a fundação: open-design (um estúdio local para montar brand systems) e power-design (regras universais que o agente carrega antes de construir slides e telas).
open-design = UI local open-source com exemplos prontos e suporte a vários modelos. power-design = repositório de regras (cognitive load, white space, proporção, hierarquia).
open-design dá versatilidade e consistência de marca; power-design dá decks e telas "nível Apple" sem você ser designer.
UI local · design systems · escolha do agente de código · ~3 s para entender · ~10 palavras por tela como teto.
🪜 Passo a passo — open-design (estúdio local)
- No Claude Code, peça para clonar o repositório do open-design e abrir o projeto.
- Peça para instalar dependências e rodar a aplicação (ela sobe a própria interface).
- Na UI, escolha seu agente de código (ex.: Claude Code) e conclua a configuração.
- Use um exemplo da galeria (dashboard, kanban) como base e monte seu design system.
Carregar power-design antes de construir
Clone o repositório do power-design, instale e estude todas as regras de design. Antes de construir qualquer tela, aplique: cognitive load baixo (legível em ~3 s), white space generoso, nada encostando nas bordas e proporção consistente entre tamanhos de texto.
🔍 Extrair identidade visual — design-language-skill
O coração do módulo: extrair, não copiar. Você aponta uma referência que admira e a design-language-skill gera um blueprint — paleta, fontes, escala, espaçamento, scaffold de layout — para reaplicar no seu projeto, com identidade própria.
Uma skill que, a partir de um site/print, gera um blueprint de design (cores, fontes, escala, espaçamento, layout).
É o atalho para seu projeto ter "a vibe" de referências excelentes. Extração ≠ cópia: você captura o porquê, não o código alheio.
Brand extraction · blueprint/design tokens · scaffold de layout · múltiplos eixos (cor, tipografia, espaçamento, ritmo).
Aponte a referência
Instale a skill e diga ao agente o site de referência e o que é o seu negócio.
Receba o blueprint
Cores, fontes, espaçamento e escala — com um print de referência junto.
Construa e itere
Peça a tela aplicando o blueprint e refine com feedback curto: "mais respiro aqui", "logo no canto inferior esquerdo".
🚫 A linha vermelha
Tentar reproduzir o código da referência gera bagunça e problema de direito autoral. Extraia a linguagem de design (cor, fonte, espaçamento, ritmo) — não o código. Identidade própria, vibe inspirada.
🎬 Imagens com IA, animação e 3D — o acabamento
Com a fundação no lugar, o visual eleva tudo: imagens com IA (inclusive com texto na imagem) para heróis e brand assets, mais loops sutis e 3D que dão finesse. Atenção: isso é acabamento, não fundação — vem por último.
Geração/edição de imagens por IA para ilustrar telas, e animações de fundo + assets 3D que adicionam profundidade.
A imagem certa eleva qualquer interface; e gerar 20 variações no mesmo estilo economiza horas.
Referência de estilo · edição guiada para "encaixar" no fundo · lote consistente · start frame = end frame · preferir 4K · 3D como finesse.
🖌️ Fluxo prático do visual
- •Imagem: gere a base descrevendo o estilo; se não contrastar com o fundo, peça ao agente para escrever um prompt de edição (posição, contraste, recorte) e ajuste.
- •Lote: use uma imagem como referência e gere 20 variações coerentes (mesma paleta, iluminação e linguagem).
- •Loop: garanta o mesmo quadro inicial e final; gere algumas vezes até a emenda ficar limpa.
- •3D: assets (ex.: via Spline) entram como finesse, validados em alta resolução.
Gerar imagem de herói no estilo da marca
Gere uma imagem de herói no estilo desta marca: [paleta e descrição]. Se não contrastar com o fundo, escreva um prompt de edição para ajustar contraste e posição, de forma que a imagem encaixe perfeitamente no fundo do site.
🧱 Seu design system reutilizável
Tudo converge aqui. Pense em peças de Lego universais: espaçamento, fontes, proporções e cores são blocos padronizados. Consolide-os num design system seu — tokens, marca, componentes — que o agente reutiliza em todo projeto.
Consolidar paleta, tipografia, espaçamento, componentes e regras num design system reutilizável.
Consistência vira padrão. Você para de redecidir cores/fontes a cada tela.
Design tokens · biblioteca de componentes · brand kit · reuso entre projetos · paleta por significado (azul = confiança/dados).
🪜 Passo a passo — consolidar o sistema
- Defina paleta (use uma plataforma de paletas como referência) e tipografia.
- Registre tokens e regras num arquivo que o agente possa ler em qualquer projeto.
- A cada nova tela, referencie esse design system para manter coerência.
Indo mais fundo (opcional): por que escolher cor por significado
Cor não é só estética — é mensagem. Azul transmite confiança e densidade de dados; por isso muito dashboard e produto SaaS é azul. Escolher a paleta pelo significado do seu negócio (e não pelo gosto do dia) é o que torna o sistema durável entre projetos.
Auto-checagem (opcional): por que codificar regras de design melhora o resultado da IA?
🛠️ Exemplo prático guiado
Objetivo: criar uma landing de 1 seção (hero) que pareça profissional já na primeira geração, com identidade extraída de uma referência e um asset visual coerente.
- Prepare o terreno. Abra o Claude Code numa pasta de projeto vazia.
- Carregue as regras. "Clone o power-design, instale e estude todas as regras antes de construir."
- Extraia a identidade. Com a design-language-skill, aponte a referência e o seu tema; receba o blueprint.
- Construa o hero. "Crie uma landing de 1 seção aplicando o blueprint e as regras do power-design. Proposta de valor em uma frase, muito white space, nada encostando nas bordas."
- Adicione o visual. Gere a imagem de herói no estilo da marca; se não contrastar, peça um prompt de edição.
- Refine com feedback curto. "Iguale os espaços; razão entre título e subtítulo na proporção; logo no canto inferior esquerdo."
- Valide os 3 segundos. Olhe a tela por 3 s — você entende do que se trata? Se sim, passou no teste.
Critério de qualidade: hierarquia clara, respiro nas bordas, proposta de valor em uma frase, e coerência entre texto, cor e imagem.
✏️ Exercícios
1. Blueprint de marca (fácil)
Escolha um site que admira e extraia o blueprint com a design-language-skill. Sucesso: arquivo com cor, tipografia, espaçamento e uma observação de hierarquia.
2. Slide glanceável (fácil)
Com o power-design, gere um slide único sobre um tema seu. Sucesso: entende-se em ~3 s, máx. ~10 palavras, margens de respiro visíveis.
3. Hero com imagem coerente (médio)
Construa um hero de 1 seção e adicione uma imagem gerada por IA no estilo da marca. Sucesso: a imagem contrasta bem e a proposta de valor está em uma frase.
4. Loop sutil (médio)
Gere uma animação de fundo em loop (start frame = end frame). Sucesso: sem "salto" visível na emenda e em resolução alta.
5. Design system mínimo (médio)
Consolide paleta + tipografia + 2 componentes num arquivo e gere uma segunda tela referenciando-o. Sucesso: as duas telas parecem da mesma marca sem redefinir cores/fontes.
⌨️ Prompts prontos
Use-os como ponto de partida. Quando o canônico é em inglês (colar na referência original), o original vem junto. O banco completo está na Biblioteca → Prompts.
Carregar e estudar regras de design (power-design)
Clone o repositório do power-design, instale e estude todas as regras de design. Antes de construir qualquer tela, aplique: cognitive load baixo (legível em ~3 segundos), white space generoso, nada encostando nas bordas e proporção consistente entre tamanhos de texto.
Extrair identidade visual (design-language-skill) — canônico
Use a design-language-skill com esta referência: [URL ou print]. Meu negócio é: [descrição em 1 frase]. Gere um blueprint de design com paleta, tipografia, escala de tamanhos, espaçamento e um scaffold de layout. Não copie o código da referência — extraia o porquê do design.
Original (EN):
Extract this website's design identity (palette, typography, scale, spacing, layout scaffold) into a reusable blueprint. Do not copy the code — capture why the design works, then rebuild a new hero section applying universal design rules (cognitive load, white space, proportion).
Construir o hero aplicando o blueprint
Crie uma landing de 1 seção (hero) aplicando o blueprint extraído e as regras do power-design. Proposta de valor em uma frase. Pouco texto. Muito respiro. Hierarquia clara entre título e subtítulo.
Consolidar o design system reutilizável
Consolide um design system reutilizável: paleta, tipografia, espaçamento, tokens e componentes base. Salve num arquivo que você possa ler em qualquer projeto futuro para manter consistência.
⚠️ Erros comuns
- ✗Pedir "faça bonito" sem regras. Sem um design system carregado, a IA entrega o visual genérico. Sempre referencie regras (power-design) e/ou um blueprint.
- ✗Copiar em vez de extrair. Reproduzir o código da referência gera bagunça. Extraia a linguagem de design, não o código.
- ✗Texto demais na tela. Telas profissionais são glanceáveis. Encheu de texto, quebrou a leitura de 3 s. Corte palavras.
- ✗Ignorar white space e bordas. Elementos encostando na borda e espaços desiguais denunciam amadorismo. Garanta respiro e espaços iguais.
- ✗Tratar 3D/animação como fundação. O maior retorno está no design system (cor, tipografia, proporção). 3D e loops são acabamento — venham por último.
✅ Resumo do módulo
Checklist de conclusão
- ☐ Entendi que design virou código e por que codificar regras melhora a IA.
- ☐ Carreguei um conjunto de regras de design (power-design) antes de construir.
- ☐ Extraí um blueprint de uma referência com a design-language-skill (sem copiar código).
- ☐ Construí uma tela glanceável em ~3 segundos, com white space e bordas respeitadas.
- ☐ Adicionei uma imagem coerente com a marca (contraste e estilo ok).
- ☐ Consolidei um design system reutilizável (tokens, paleta, tipografia, componentes).
- ☐ Gerei uma segunda tela reaproveitando o design system e mantendo consistência.
Próxima trilha:
Trilha 3 — Operar & Lucrar: 3.1 — Agente pessoal sempre-ligado. Você termina a Trilha 2 sabendo construir com qualidade; agora é hora de operar e monetizar.