Você treina a IA com o manual de marca de cada cliente. Ela guarda cor, letra e regra, e passa a gerar post, story, reel, apresentação e proposta dentro do manual. O ganho é tempo: quinze posts que levavam de um a dois dias passam a levar menos de uma hora. Este documento é o design system desta marca, montado com o mesmo método. Ele é a prova viva do que a aula ensina.
Cada decisão daqui vira token. Token é uma decisão com nome. Nomeada uma vez, ela volta igual na próxima peça, sem você reabrir o PDF e caçar o hexadecimal na página certa.
Esta marca nasceu sem manual nenhum. Por isso o documento demonstra o caminho longo: o prompt perguntou o que faltava e propôs decisão por decisão. Quem chega com o PDF do cliente na mão faz o caminho curto, porque a decisão já está tomada e só precisa ser lida.
Design com Claude é um treinamento independente por Gabriel, da Adhub. Não possui vínculo, patrocínio ou afiliação com a Anthropic. "Claude" é marca registrada da Anthropic PBC, citada aqui apenas como referência à ferramenta ensinada.
versão 2.0 · turma de 26/08 · 19:30 · 100 vagas · documento vivo
O gargalo nunca foi talento. O que consome o mês não é criar, é recriar: reabrir o arquivo, reconstruir a mesma marca do zero, caçar o hexadecimal certo, refazer o mesmo card pela quadragésima vez. Isso é montagem, não direção. As quatro etapas abaixo são as mesmas da aula, na mesma ordem. Você continua fazendo a direção criativa. O sistema faz a montagem.
Quinze posts em menos de uma hora, com a identidade da marca travada.
Design system em 20 minutos. Você monta a identidade de uma marca real: paleta, tipografia, regras de composição, tom visual. Uma vez montado, tudo que vier depois nasce dentro dele.
15 posts em uma passada. Feed e stories da mesma marca, gerados em série, todos coerentes entre si. Sem repetir prompt, sem refazer layout.
Imagem, vídeo e áudio. Como plugar as APIs de geração para produzir foto de produto, reel vertical e locução, sem contratar fotógrafo, editor ou locutor.
Empacotar para o cliente. Como entregar isso como um serviço: o que mostrar, como precificar, o que continuar cobrando caro.
21:10 · tira-dúvidas ao vivo, câmera aberta, nos últimos 30 minutos. Figma, Photoshop, Illustrator, Canva, Premiere e CapCut continuam exatamente onde estão. O que muda não é onde você trabalha. É onde a fundação mora.
Uma por área da marca. Clique para ir até a seção.
Cinco neutros. Duas de sinal. Duas de apoio. Quando o manual do cliente traz os hexadecimais, eles entram aqui como estão. Quando não traz, o prompt pergunta e propõe. A regra existe para fechar a decisão, não para abrir possibilidade. A cor de sinal ocupa no máximo 5% da área e é isso que faz ela funcionar. Travada uma vez, ela para de voltar em cada peça nova.
95% neutro · 5% sinal. Essa barra é a proporção real, não um exemplo.
| regra | por quê |
|---|---|
Texto sobre --sinal é sempre --tinta, nunca branco. | Contraste e temperatura. Branco sobre lima suja o verde. |
| Cor de sinal em no máximo 5% da área. | Exceções deliberadas: barra de escassez e slide divisório. |
| Nunca texto colorido sobre fundo colorido. | Legibilidade em miniatura de feed. |
| Não usar o laranja da Anthropic como identidade. | A base creme é referência de temperatura, não de identidade. |
Duas formas no sistema inteiro: bloco reto e pílula. Um grid de 4px com dez passos, que é a régua única de todo espaçamento. Zero sombra em qualquer lugar. Cada regra aqui existe para apagar uma pergunta que você faria de novo amanhã, com o PDF do cliente aberto na mesa.
Zero sombra em qualquer lugar, externa ou interna. Separação é borda de 1px em --linha ou mudança de fundo.
Oito níveis, cada um com um trabalho. A escala do manual entra aqui e para de ser consultada em prosa. Você deixa de escolher tamanho no olho e passa a chamar o nível pelo nome. Archivo 900 assina, Inter carrega o corpo, JetBrains Mono marca prompt e horário. Três famílias, papel definido, nenhuma dúvida na próxima peça.
| Archivo 900 · wdth 118% | display, hero, capa, número |
| Inter 400 · 500 · 600 | corpo, UI, botão, legenda |
| JetBrains Mono 400 · 700 | prompt, horário, legenda de tempo |
Voz também é decisão, e a maioria dos manuais para de escrever antes de chegar nela. Frase curta. Verbo no início. Lista de proibições fechada. Sem essa lista a IA escreve bonito e escreve errado, e você reescreve tudo na mão. O conteúdo do texto muda todo dia. A regra não muda mais.
As frases aposentadas entram na proibição em vez de sumirem. Senão elas voltam na próxima peça.
| # | regra | por quê |
|---|---|---|
| 1 | Comece pelo verbo das quatro etapas: monte, gere, produza, entregue. | Repetidos, eles ensinam o método sem explicar o método. |
| 2 | Nomeie a decisão antes de nomear o resultado. | Resultado sem mecanismo é promessa, e promessa sozinha não move mercado que já viu tudo. |
| 3 | Ataque o processo, nunca a pessoa. | Culpar o processo tira a culpa do leitor e não cria briga em comentário. |
| 4 | Número forte, isolado e verificável. | Número que não se sustenta derruba a página inteira junto com ele. |
| 5 | Toda escassez carrega data e porquê na mesma linha. | As 100 vagas são limite real do tira-dúvidas ao vivo. Escassez sem causa visível ativa ceticismo e contamina as alegações verdadeiras. |
| 6 | Nunca escreva pronto sozinho. Diga pronto em relação a quê. | O comprador imagina uma coisa, a aula entrega outra, e nasce o reembolso. |
| 7 | A ferramenta entra no corpo do texto, nunca na promessa. Nenhuma delas sai do fluxo. | Figma, Photoshop, Canva, CapCut e Premiere continuam. Muda onde a fundação mora, não onde a pessoa trabalha. |
| 8 | Nenhuma promessa de dinheiro, faturamento, cliente ou retorno. | Vale para copy, garantia, legenda e slide. Sem exceção. |
| 9 | Toda peça com o wordmark, que é o nome da marca desenhado, carrega o aviso legal na legenda. | O nome contém marca de outra empresa. O aviso vive na legenda, nunca dentro da arte. |
| proibido | no lugar |
|---|---|
| Travessão longo e curto | Ponto, vírgula ou dois-pontos. Duas frases curtas em vez de uma longa. |
| Emoji, em qualquer contexto | Ícone de linha Lucide. |
| Itálico | Peso 600 ou a cor de sinal. |
| Seta unicode como ícone | <Icon name="arrow-right" /> |
17 componentes em 4 grupos. Nenhum deles pede uma decisão nova. Cada um carrega uma decisão que já estava escrita no manual, agora travada em token e pronta para gerar peça. Os dados de turma, preço e política que aparecem aqui são os reais, para o componente nascer com o texto certo.
Seis layouts em 1920 × 1080, um para cada situação. Proposta comercial, apresentação para cliente, orçamento, aula: muda o conteúdo, não muda a marca. É o mesmo sistema que gera o post gerando o slide. Os slides desta aula saíram daqui.
Quatro bibliotecas de animação, um vocabulário só. A decisão não é qual biblioteca usar. É como a marca se move, e isso vale nas quatro. Cada movimento está descrito abaixo em português comum, com o termo técnico entre parênteses, porque esta lista precisa ser lida por quem escreve o código e por quem aprova a peça. O que está fora do vocabulário está fora em todas: o DSGNMotion recusa e avisa no console do navegador.
| biblioteca | papel | onde |
|---|---|---|
| GSAP 3.12 | sequência de tempo (timeline), revelação por corte reto (wipe), contagem de número, faixa de texto que corre sem parar (marquee) | documento, carrossel, story animado |
| anime.js 3.2 | entrada em cascata numa grade (stagger), texto que aparece letra por letra | grade de cor, feed cinético |
| Motion 11 | entrada da legenda por cima do vídeo e do 3D (overlay) | reel |
| three.js r160 | a marca em volume, girando devagar (3D) | reel |
O guardião do vocabulário. Aceita o que está na lista, recusa o que está fora, e diz por quê. Clique em qualquer botão. Os quatro últimos são os proibidos, e existem aqui para você ver a recusa acontecer.
Seis formatos.
Zero recomeço.
Post de feed, carrossel, story, reel, peça de anúncio: tudo sai do mesmo sistema, que saiu do manual do cliente. Nenhuma peça abre uma escolha nova, e é por isso que quinze delas cabem em menos de uma hora. O take de vídeo e a imagem continuam vindo do CapCut, do Premiere ou do Photoshop. As animadas rodam aqui mesmo. Passe o mouse na peça para repetir.