Claude Design sem design system: como deixar todo material com a mesma cara da sua marca

O deck parece de uma empresa, a landing page de outra e o one-pager de uma terceira, e ninguém na reunião consegue apontar exatamente o que está errado

Fala aí, beleza? Se cada peça que você cria sai com uma cara diferente, o problema quase nunca é o prompt: é não ter um mínimo de marca escrito em lugar nenhum

O Claude Design é um produto da Anthropic, anunciado oficialmente em abril de 2026, pra você criar protótipos, slides, one-pagers e outras peças visuais conversando com o Claude

Hoje ele está em beta e disponível nos planos Pro, Max, Team e Enterprise (no Enterprise a capacidade vem desligada por padrão, então alguém com acesso de admin precisa ativar antes de você sair testando)

E aqui vai o recorte deste post: ele é pra quem NÃO tem documentação formal de marca pra subir no onboarding… sem manual de identidade, sem biblioteca de componentes, sem arquivo de design bonitinho. Você tem um logo, alguns prints e uma noção de como a marca fala

Bora montar o mínimo reaproveitável? 🙂

O que você precisa ter em mãos antes de começar:

• Acesso ao Claude Design: na web em claude.ai/design ou pela barra lateral do Claude Desktop
• Um plano compatível: Pro, Max, Team ou Enterprise (de novo: no Enterprise depende de ativação por admin)
• O material bruto que você já tem espalhado: logo, um PDF ou PPT bem desenhado, prints do site, textos que soam como a marca

Esse material bruto importa mais do que parece, porque o Claude Design aceita coisas bem diferentes como base: codebases (uma biblioteca de componentes React, por link ou upload do repositório), protótipos (screenshots, fluxos web, arquivos de design), apresentações e documentos bem desenhados em PPT ou PDF, e assets individuais como logos, arquivos de paleta e espécimes tipográficos

Uma nota de expectativa antes de você começar a gerar peça atrás de peça: o Claude Design compartilha os mesmos limites de uso do chat, do Claude Cowork e do Claude Code, sem cota separada

Ou seja, o que você gasta desenhando sai do mesmo bolso que você usa pra conversar e pra codar, beleza?

Como montar seu bloco de marca mínimo e repetir em cada pedido

A ideia é simples: se você não tem design system, você escreve o menor documento possível que já resolve a maior parte da inconsistência

Se você conhece aquele arquivo de variáveis que todo projeto front-end tem (cor, fonte, espaçamento), é a mesma lógica, só que em texto puro pra colar no pedido

1. Defina a paleta em três papéis:

Não escolha cores bonitas, escolha FUNÇÕES. Uma primária, uma secundária e uma de destaque, cada uma com instrução de uso

PALETA DA MARCA (use exatamente estas cores)
- Primária #1B3A5C: fundos de destaque e títulos
- Secundária #F2F0EB: fundos amplos e respiro
- Destaque #E2574C: botão principal e números em evidência
Não introduza cores novas. Se precisar de um tom intermediário,
use variação de opacidade das três acima.

O erro comum deste passo: listar cinco ou seis cores sem dizer onde cada uma entra. Aí cada peça escolhe uma favorita diferente e pronto, bagunça

2. Feche a tipografia em no máximo duas famílias:

Família, tamanho e peso. Duas famílias no máximo, porque a terceira sempre aparece no slide errado

TIPOGRAFIA
- Títulos: Libre Franklin, peso bold, sem itálico
- Corpo de texto: Source Sans 3, peso regular
- Hierarquia: título grande, subtítulo médio, corpo confortável para leitura
- Proibido usar uma terceira família em qualquer peça

O erro comum deste passo: dizer só o nome da fonte e esquecer peso e hierarquia. A fonte vem certa, o visual vem errado

3. Escreva a regra de título:

Essa é a parte que quase todo mundo pula, e é a que mais aproxima as peças entre si

REGRA DE TÍTULO
- Máximo de 7 palavras
- Sem ponto final
- Começa com verbo no imperativo ou com substantivo concreto
- Nunca usar travessão
- Subtítulo explica o benefício em uma linha, nunca repete o título

O erro comum deste passo: deixar a regra no nível do gosto ("título impactante"). Regra tem que ser checável: ou tem 7 palavras ou não tem

4. Escreva o tom de texto em três linhas, com exemplo:

Três linhas de descrição e, principalmente, uma frase que a marca diria e uma que a marca jamais diria. O contraexemplo faz mais trabalho que a descrição

TOM DE TEXTO
1. Direto e técnico, sem firula de agência
2. Fala "você" e explica o porquê antes do como
3. Sem promessa mágica e sem superlativo vazio

A marca DIRIA: "Configure hoje e veja seu primeiro relatório rodando"
A marca NÃO DIRIA: "A solução definitiva e revolucionária do mercado"

O erro comum deste passo: escrever adjetivos ("moderno, jovem, confiável") sem uma frase de exemplo. Adjetivo cada um interpreta do seu jeito

5. Junte tudo num bloco único e cole no início de CADA pedido:

Agora cola os quatro pedaços em um arquivo só e usa esse texto como primeira coisa de todo projeto novo

## BLOCO DE MARCA (colar no início de todo pedido)

PALETA: primária #1B3A5C (destaque e títulos), secundária #F2F0EB
(fundos amplos), destaque #E2574C (botão principal e números).
Nenhuma cor fora dessas três.

TIPOGRAFIA: títulos em Libre Franklin bold, corpo em Source Sans 3
regular. Máximo duas famílias.

TÍTULOS: até 7 palavras, sem ponto final, verbo no imperativo ou
substantivo concreto, nunca travessão.

TOM: direto e técnico, fala "você", explica o porquê antes do como,
sem superlativo vazio. Diria "Configure hoje e veja seu primeiro
relatório rodando". Não diria "solução definitiva e revolucionária".

IDIOMA: todo o texto da peça em português do Brasil.

Aplique isso a todas as telas, slides e textos desta peça.

Repare que dá pra começar um projeto por prompt de texto, por upload de imagens e documentos (DOCX, PPTX, XLSX) ou apontando pra um codebase. Então o bloco pode viver como prompt colado, como documento que você sobe junto, ou os dois

O erro comum deste passo: mandar o bloco uma vez e achar que ele vale pro resto do dia. Peça nova, bloco colado de novo

6. Quando o bloco estabilizar, transforme ele em design system de verdade:

O bloco de texto é o atalho. O destino final é ter seu design system (ou mais de um, se a sua organização tem marca principal e submarca) dentro do Claude Design mesmo, gerado a partir dos seus materiais

Isso acontece subindo os assets no onboarding (ou depois, pelas configurações da organização): o Claude extrai componentes reutilizáveis, cores, tipografia e padrões a partir do que você subiu e usa isso como base dos projetos criados na conta

E você não fica preso a um único caminho de entrada, porque é possível importar de um repositório GitHub, de arquivos de design, de uploads soltos ou do codebase local

O erro comum deste passo: subir o material mais feio que você tem só pra "ter algo". Se o PPT é mal desenhado, o padrão extraído vai ser mal desenhado também. Sobe o melhor material, não o primeiro que achar

Quando as peças continuam saindo diferentes umas das outras

Mesmo com bloco pronto, às vezes o resultado foge. Os sintomas que mais aparecem:

Sintoma: a peça nova ignorou a paleta

Causa: o bloco de marca simplesmente não foi repetido naquele pedido, então a peça nasceu sem referência nenhuma

Correção: cole o bloco novamente e, em vez de refazer tudo, use comentário inline no elemento que saiu errado, apontando qual cor deveria estar ali

Sintoma: o ajuste que você fez numa peça não pegou nas outras

Causa: foi um refino pontual, daqueles de editar o texto ali e mexer no espaçamento daquele card

Correção: ajustes de espaçamento, cor e layout podem ser aplicados ao design inteiro depois de validados em um elemento. Faça o ajuste uma vez e propague, não conserte slide por slide

Sintoma: a marca evoluiu e o design system ficou velho

Causa: trocou a cor de destaque, entrou uma fonte nova, e o que está salvo continua sendo o de antes

Correção: nas configurações de organização do Claude Design, clique em Open ao lado do design system desejado e depois em Remix, no canto superior direito, que abre a interface de chat pra você pedir o ajuste conversando

Como prevenir isso:

Versione o bloco de marca em um arquivo único e reuse SEMPRE o mesmo, sem reescrever de cabeça cada vez. Bloco reescrito é bloco diferente, e bloco diferente é peça diferente

E vale saber que, com design system definido, o Claude constrói usando os componentes dele e ainda confere o próprio resultado contra o design system, corrigindo antes de te mostrar

Isso não substitui a sua revisão, mas tira do seu colo aquela parte chata de caçar botão fora do padrão

O que ficou claro quando testei esse fluxo na prática

No vídeo abaixo eu não testo o Claude Design, e sim o Open Design, uma alternativa que roda na sua máquina, mas o que eu aprendi ali sobre consistência vale pros dois

A primeira coisa que me chamou atenção foi poder partir de um design system inicial já pronto em vez de definir tipografia e paleta do zero, inclusive se espelhando em uma marca de referência. Quando testei, isso já resolveu metade do problema antes do primeiro prompt

Na criação do projeto eu também escolhi o nível de fidelidade, de um frame simples até algo de alta fidelidade, bem perto da versão final. Se liga nisso: fidelidade escolhida antes do prompt muda o resultado mais que adjetivo no prompt

Depois do prompt veio uma surpresa boa: a ferramenta fez um briefing antes de desenhar qualquer coisa. Perguntou a superfície principal (desktop ou mobile), o público e o tom visual, limitando a escolha a no máximo duas opções de tom

Eu informei público brasileiro (microempresários) e pedi explicitamente que o site fosse em português. E depois reforcei isso pelo prompt, porque essas ferramentas às vezes entregam material em inglês mesmo quando você quer português

Nas configurações eu mostro onde definir o idioma da ferramenta, e também o espaço pra cadastrar provedores de mídia, pra geração de imagem e vídeo, caso a IA principal que você usa não gere esse tipo de material

Quando me perguntaram sobre o contexto da marca, dava pra compartilhar informações ou mandar uma referência. Eu preferi deixar a ferramenta escolher e só registrei observações no campo livre, justamente pra ver o que sai sem direção forte

E saiu o que era previsível: no meio da execução veio uma nova pergunta de direção visual, com opções nomeadas de estilo, e eu escolhi a linha minimalista e moderna. Ou seja, a escolha de marca volta a acontecer DEPOIS, no meio do caminho, se você não fechou antes

Terminada a landing page, abri o resultado e a página estava funcional em HTML, com acesso ao código fonte e possibilidade de pedir alteração pontual por comentário. Dava pra exportar o código, levar pra IDE ou publicar direto

Aí veio o teste que mais interessa pra este post: usei o MESMO projeto pra criar uma apresentação, pedindo um deck que fizesse referência à landing page recém-criada

A interface é praticamente a mesma da landing page, muda pouca coisa além do tipo de projeto, e o fluxo de perguntas se repete. Também ativei speaker notes, porque assim o slide fica com menos texto e a fala vai pra nota

E a conclusão honesta: o que mais estraga resultado é gente que joga o prompt e esquece completamente do design. Sem referência repetida, cada peça escolhe um caminho visual diferente e a culpa cai na IA

Da parte de consumo, acompanhei o painel de uso durante a execução: com assinatura, o consumo sai da cota da própria assinatura, enquanto por API daria pra acompanhar o custo de cada interação

E duas dores de bastidor, porque ninguém merece apanhar sozinho: na instalação eu bati num erro de permissão ao habilitar o gerenciador de pacotes e resolvi abrindo o terminal como administrador (pelo terminal do VS Code não funcionou pra mim). Tome cuidado aqui

Apareceu também um warning durante a instalação e eu segui adiante, acreditando que não atrapalharia o uso. E recomendo ler o README do repositório junto com o vídeo, porque o passo a passo de instalação costuma estar lá (no meu caso, na seção de início rápido, mais pra baixo na página)

Na tela inicial de setup teve um detalhe massa: a ferramenta detectou sozinha quais agentes eu tinha instalados na máquina e me deixou escolher um deles, além da opção de usar API

E é aí que está a diferença de filosofia que eu comento no vídeo: na alternativa open source você escolhe em qual IA rodar e qual modelo usar, o que te dá mais controle sobre mudanças que acontecem fora do seu alcance

No vídeo você vê o fluxo completo: criação do projeto partindo de um design system pronto, o briefing antes do desenho, a landing page em HTML e a apresentação nascendo do mesmo projeto

Onde esse bloco de marca mais salva o resultado

Não é todo material que sofre igual. Esses são os casos em que repetir o bloco faz a maior diferença:

• Deck de apresentação: principalmente quando a peça vai sair do ambiente, já que o Claude Design exporta pra PDF e PowerPoint. Slide com fonte trocada no meio do deck é o erro mais visível que existe
• One-pager de produto: é a peça que mais circula solta, muitas vezes impressa ou anexada em email, longe de qualquer contexto da marca
• Protótipo de tela: aqui a regra de título e a paleta em três papéis evitam aquele protótipo que parece de outro produto da empresa
• Peça que segue pra outra ferramenta: a lista de conectores inclui Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel e Wix. Se a marca já foi definida antes, o que chega do outro lado chega coerente

E pra quem trabalha no terminal:

Se o seu time vive no Claude Code, o fluxo não precisa passar pelo navegador: o comando /design cria, edita e sincroniza projetos de design sem sair do terminal, e o /design-sync puxa o design system pra que o que for construído no Claude Design parta dos componentes já existentes

Esse é o cenário em que o bloco de marca deixa de ser texto colado e vira parte do projeto. E se você quer ir mais longe nessa direção, vale pensar em criar uma skill de design pro caso de projeto que ainda não tem nada documentado

Marca principal e submarca no mesmo lugar:

Como eu comentei no passo 6, uma organização pode ter mais de um design system no Claude Design, então marca principal e submarca não precisam brigar pelo mesmo conjunto de cores

E como a importação aceita repositório GitHub, arquivos de design, uploads soltos ou codebase local, cada marca pode entrar pelo caminho que já existe, sem você ter que padronizar tudo antes de começar

No Enterprise ainda é possível restringir quem publica, definir o design system padrão da organização e excluir design systems, pela permissão de Claude Design Admin via custom roles. Nos outros casos, qualquer membro com acesso ao Claude Design pode criar e editar

Conclusão

Consistência de marca aqui não é documento bonito, é disciplina de repetição

Quatro itens (paleta em três papéis, tipografia com no máximo duas famílias, regra de título checável e tom de texto com exemplo e contraexemplo) já resolvem a maior parte daquela sensação de peças feitas por empresas diferentes

Seu próximo passo prático é chato e funciona: escreva o bloco de marca HOJE em um arquivo só, use ele em três peças seguidas e vá corrigindo o que escapou

Quando o bloco parar de mudar, ele amadureceu. Aí você sobe os assets no onboarding ou pelas configurações da organização e deixa o Claude extrair cores, tipografia e componentes reutilizáveis pra virar o design system da conta

Depois disso, cada peça nova nasce já parecida com as outras, e você volta a gastar seu tempo no conteúdo em vez de caçar botão fora do padrão 🙂

Até o próximo post!