Do brief do cliente a uma apresentação em HTML, no visual dele — em minutos, não em horas. Igual quando alguém pede pra "desenhar": deixa que a gente mostra.
É um fluxo só, em três tempos. Cada peça alimenta a próxima — e a apresentação nasce já vestida com o visual do cliente.
Uma sugestão de ritmo. O grosso fica na construção ao vivo: é vendo nascer que a ficha cai. Ajuste os minutos ao seu grupo.
O gancho: a piada brasileira vira convite. Mostrar o destino — uma apresentação pronta no visual de um cliente — antes de explicar o caminho.
Pegar a ID visual do cliente + referências e rodar a skill no Claude. Sai um design-system.html com cores, tipografia e componentes.
Criar a pasta, colocar o design system dentro como contexto fixo e abrir o projeto no Claude Code ou Codex.
O prompt inicial, a apresentação nascendo slide a slide e a iteração ao vivo. O coração da aula.
★ o coração · 30 minFechar com a provocação e entregar a missão da semana: investigar e voltar com a descoberta.
Lembram da aula de Skills? Aqui ela vira prática. A skill de design system pega a identidade do cliente e devolve um sistema visual pronto para usar — a base de tudo que vem depois.
Duas coisas: a identidade visual do cliente (o site, o logo, as cores da marca) e referências da pegada que você quer — capturas de tela, links de inspiração, um moodboard. A skill usa o primeiro para acertar a marca e o segundo para acertar o clima.
No Claude, descreva o que quer. A skill é acionada pela descrição da tarefa — você nem precisa "chamar" pelo nome, basta pedir um design system.
» Crie um design system para o cliente TechHome. A identidade visual está no site techhome.com.br e no logo em anexo. Quero a pegada destas referências [imagens]: clean, tecnológica, tons de azul. Gere o documento HTML com tokens, tipografia e componentes.
A skill extrai as cores, identifica a tipografia, monta a escala de tipos, os botões e os componentes — e entrega um documento HTML navegável. Essa é a fonte da verdade visual do projeto: tudo que vier depois vai beber daqui.
foi exatamente assim que o "Rascunho" — esse visual aqui — nasceu ✦
Faça ao vivo com o TechHome (nosso cliente fictício de demo) ou, se topar a adrenalina, com um cliente real do grupo. Gere duas versões mudando só as referências — eles veem na hora como a "pegada" muda o resultado mantendo a marca.
Pra construir um artefato de verdade e iterar com calma, a gente troca a conversa avulsa por um projeto em pasta. O design system entra como contexto fixo — o agente passa a "enxergar" a marca o tempo todo.
Uma pasta por entrega. Coloque o design-system.html lá dentro e um arquivo de instruções fixas para o agente (AGENTS.md no Codex, CLAUDE.md no Claude Code).
proj-techhome/ ├── design-system.html ← gerado pela skill ├── CLAUDE.md ← "use o DS como visual" └── apresentacao.html ← vai nascer aqui
No CLAUDE.md (ou AGENTS.md), uma instrução curta garante que toda peça nasça no padrão, sem você repetir a cada prompt.
Toda saída visual deste projeto deve seguir o design system em ./design-system.html — mesmas cores, tipografia e componentes. Não invente estilos fora dele.
Abra a pasta no agente da sua preferência. Os dois leem a pasta, enxergam o design system e seguem as instruções fixas. A partir daqui, é só conversar.
Com o design system na pasta, peça a apresentação. Ela nasce no visual do cliente. Daí em diante é conversa: revisar, apontar, ajustar — slide a slide, ao vivo.
Diga o essencial: a fonte visual, o tema, o público, quantos slides e como navegar. Quanto mais clara a narrativa, melhor o primeiro rascunho.
» Usando o design system em ./design-system.html como fonte visual, crie apresentacao.html: uma apresentação de 8 slides sobre a proposta de inovação para a TechHome. Público: diretoria. Um slide por tela, navegação pelas setas do teclado, fiel ao visual do design system.
O primeiro resultado é um rascunho — e rascunho é pra mexer. Aponte ajustes em linguagem natural, um de cada vez. O agente edita o arquivo na hora.
» No slide 3, troca o bloco de texto por uma timeline de 4 etapas.
» A capa precisa de mais impacto — aumenta o título e adiciona o logo.
» Deixa o slide 6 com um gráfico de barras dos 3 cenários.
É um .html — abre em qualquer navegador, projeta em tela cheia e navega pelas setas. Sem instalar nada, sem licença. E como é código, dá pra versionar, duplicar e reaproveitar na próxima entrega.
um punhado de truques que valem ouro ↓
"8 slides: problema → dados → solução → próximos passos" rende melhor que "faça sobre inovação".
Peças pequenas e específicas ("slide 3, troca X por Y") saem mais certeiras que um pedido gigante.
Se algo fugir do visual, reancore: "mantenha as cores e a tipografia do design-system.html".
"Setas do teclado, um slide por tela, modo apresentação" — pra projetar sem sustos na reunião.
Resista a deixar perfeito. O valor da demo é mostrar a velocidade da iteração — peça um ajuste "errado" de propósito e conserte ao vivo. Eles precisam ver que dá pra conversar com o resultado, não só aceitá-lo.
Skill captura a marca. A identidade do cliente vira um design system reutilizável.
A pasta é a oficina. Design system + instruções fixas = visual consistente sem repetir.
A entrega é conversa. O slide nasce e se ajusta falando — em minutos, no navegador.
o quadro também é lugar de apagar e tentar de novo. bom rascunho a todos!