Se você já tentou padronizar a identidade da sua marca, provavelmente passou por isso: abriu um arquivo em branco, ficou olhando para a tela e não soube por onde começar. Qual roxo é o roxo certo? Qual era mesmo a fonte dos títulos? O botão do site tem o mesmo formato do botão que você usa nos posts?
A boa notícia é que, se você já publica há algum tempo, essas respostas existem. Elas estão no seu site, nos seus posts e nos arquivos da sua logo, só que espalhadas em lugares diferentes. Criar um design system é reunir tudo isso em um lugar só e travar as decisões, para você parar de escolher cor no olho a cada peça nova.
Nesta aula eu te mostro como fazer isso com a ajuda da inteligência artificial, por dois caminhos que se completam. O primeiro é pela aba de Design System do Claude Design, que faz as peças criadas ali já nascerem com a sua identidade aplicada. O segundo é pelo chat, transformando o seu design system em uma skill, que fica salva no seu perfil e passa a ser consultada sozinha em toda conversa nova.
No mapa abaixo estão as cinco fases da aula, com os sete prompts prontos para copiar. Clique em cada fase para abrir. Vale deixar esta página aberta ao lado enquanto você faz o processo, porque cada prompt entra em um momento específico.
Como criar o design system da sua marca com IA
Extraia as cores, as fontes e os componentes que a sua marca já tem, e ensine a IA a aplicar isso sozinha em toda peça.
Prompt de extração
MINHA MARCA
Nome: [NOME DA MARCA]
O que eu faço: [UMA FRASE]
Meu público: [QUEM COMPRA DE VOCÊ]
Onde a marca aparece: [SITE, INSTAGRAM, PROPOSTAS]
O QUE VOU TE MANDAR
[COLE OS LINKS DO SEU SITE E DAS SUAS PÁGINAS]
Anexo: prints do meu Instagram, arquivos da logo em todas as versões e prints de peças que eu já publiquei e gosto do resultado.
O QUE PRECISO QUE VOCÊ FAÇA
1. Acesse os links e leia o conteúdo e a estrutura das páginas.
2. Olhe as imagens anexadas e identifique os padrões que se repetem: fontes, tamanhos, cores, molduras, posição do texto e tipo de foto.
3. Amostre as cores exatas dos arquivos e me devolva os códigos hexadecimais reais, não aproximações.
4. Aponte as divergências. Se a mesma cor aparece em dois tons diferentes entre o site e o Instagram, eu quero saber.
5. Me diga o que ainda falta decidir para o sistema ficar completo.
Não invente cor, fonte ou espaçamento. Se não conseguir extrair um valor, pergunte antes de assumir.
Prompt da página navegável
Estrutura das seções:
– Fundação: posicionamento, público e personalidade visual em 5 adjetivos, com uma lista do que a marca faz e outra do que evita
– Logos: cada versão sobre fundo claro e sobre fundo escuro, com a cor do arquivo escrita embaixo, mais as regras de aplicação
– Cores: cada cor com o hex, o nome da variável e para que serve
– Tipografia: as fontes e a escala de tamanho no desktop e no mobile
– Espaçamento: a escala usada, com barra visual de cada valor
– Componentes: botão, card e os blocos que se repetem, renderizados de verdade na página
– Aplicações: como os valores viram peça em cada canal que eu uso
– Bloco de tokens em CSS pronto para copiar
– Checklist de aprovação antes de publicar
Requisitos: arquivos de logo embutidos no HTML para a página funcionar offline, conteúdo dentro de uma área de leitura centralizada e zero rolagem horizontal em qualquer largura de tela.
Prompt dos arquivos
1. tokens.css com todas as variáveis em :root, e um comentário explicando o papel de cada valor: cores, fontes, escala de espaçamento, largura de container, raio de borda e sombra.
2. componentes.html com a implementação de referência dos componentes, com nomes de classe organizados, importando o tokens.css. Inclua botão primário e secundário, card, a primeira dobra montada na ordem certa e os blocos que mais se repetem nas minhas páginas.
Coloque os dois na mesma pasta, porque o HTML precisa enxergar o CSS.
Prompt dos textos do formulário
1. Nome da empresa e breve descrição: o que a marca faz, para quem, e quais tipos de peça eu produzo.
2. Observações: as cores com o papel de cada uma, a tipografia com a escala de tamanho, o espaçamento, as regras que não podem ser quebradas, o padrão de ícone, a regra de aplicação de logo e o vocabulário que a minha marca não usa.
O que vai em cada campo
- Nome da empresa e breve descriçãoO primeiro texto gerado, em um bloco só
- Link para o código do GitHubDeixe em branco
- Código do seu computadorA pasta com o tokens.css e o componentes.html
- Arquivo .figSó se você usa Figma
- Fontes, logotipos e outros recursosOs arquivos da sua logo. Fontes do Google Fonts não precisam de upload
- Alguma outra observação?O segundo texto gerado, colado inteiro
Prompt para empacotar a skill
O SKILL.md carrega só o essencial, que precisa estar sempre à mão: os tokens em CSS prontos para colar, as regras de cor, a escala tipográfica, o espaçamento, os componentes, o padrão de ícone e um checklist final.
Separe em arquivos de referência o que só é lido quando faz falta, um para cada tipo de peça que eu produzo. Anexe a página navegável como recurso, para consulta de detalhe.
A descrição precisa disparar sempre que eu pedir qualquer peça visual ou código de interface, e também quando eu perguntar qual cor, qual fonte ou qual versão da logo usar, ou quando eu mandar um print pedindo o que dá para melhorar.
Instalar e testar
- InstalarNo card do arquivo .skill tem um botão de salvar. Um clique e ela entra no seu perfil
- TestarAbra uma conversa nova e peça a primeira dobra de uma página do seu produto
- Se funcionouA peça vem com as suas cores e fontes sem você ter falado nada
- Se não disparouPeça para reescrever a descrição com mais situações concretas de uso
As 5 regras que sustentam tudo
- Extraia, não inventeUm sistema inventado do zero não parece com o que já está no ar, e ninguém segue
- Trave uma cor de açãoReserve uma cor só para o botão e a palavra destacada. Nenhum outro elemento cheio usa
- Componente renderizadoMostrar o componente pronto vale mais do que descrever ele em texto
- Documente as divergênciasA cor do site quase sempre difere um pouco da cor do Instagram, e isso aparece
- Deixe o que falta visívelUma seção de pendências evita que o sistema pareça completo antes da hora
Domine a nova forma de criar sites
O design system organiza a sua marca. O Sites Evolution te mostra como construir os sites que vão usar ela, com WordPress, Elementor, templates e inteligência artificial.
Conhecer o Sites EvolutionUm detalhe que muda bastante o resultado: resista à vontade de inventar no meio do caminho. É tentador escolher uma paleta nova e mais bonita quando a IA te mostra as opções, só que um sistema que não parece com o que você já publicou vira um manual que ninguém segue, nem você mesma. O trabalho aqui é organizar o que a sua marca já é, e não criar uma marca nova.
E não se assuste se aparecerem divergências no meio da extração. Quase toda marca descobre nessa hora que o roxo do site está um tom diferente do roxo do Instagram, ou que existem três tamanhos de botão sem nenhum motivo. Isso não é falha sua, é o acúmulo natural de quem produz conteúdo há anos e foi ajustando as coisas no caminho. Enxergar essas diferenças é justamente o que permite corrigir de uma vez.
Faça os dois caminhos, não só um. O Claude Design cuida das peças visuais que você gera dentro da ferramenta, e a skill cuida do dia a dia no chat, quando você pede uma legenda, uma seção de página ou uma revisão. Configurando os dois com os mesmos valores, a sua marca fica aplicada nos dois lugares e não existe risco de um contradizer o outro.
Com o design system funcionando, o próximo passo é construir os sites que vão usar ele. É exatamente isso que eu ensino no Sites Evolution, do primeiro rascunho até o site publicado, com WordPress, Elementor, templates e IA.
[aqui entra o botão do Sites Evolution]
Se travar em alguma fase, me conta aqui nos comentários qual foi, que eu te ajudo a destravar.
