Como criar um Design System em minutos no Claude Design

Design System (DS)

A base visual da marca. Define as regras de cor, tipografia e componentes reutilizáveis que garantem consistência em tudo que a empresa produz.

KV (Key Visual)

A aplicação do DS em cada canal — site, social, tráfego, app. Todo KV herda 100% do DS, por isso a identidade se mantém coerente em qualquer material.

Ordem obrigatória

DS primeiro, sempre. Os KVs só funcionam bem se o Design System já existir como base sólida.

Handoff

O momento em que o design vira código, pelo botão 'Send to Claude Code'. Empacota visual, intenção e specs técnicas e entrega direto para a squad de desenvolvimento.

Passo 1 — Criar o projeto do tipo Design System

Entre no Claude Design (claude.ai/design), crie um projeto novo e escolha o tipo Design System. Diferente dos KVs — que são prompts de chat —, o Design System usa uma tela nativa de setup com um formulário estruturado de 6 campos. Por isso ele exige um projeto próprio. Ao acessar, aparece a tela de onboarding com os campos 'Company name and blurb', links de código, upload de Figma, assets e notas. Erro comum: tentar criar o Design System dentro de um projeto de KV — não funciona.

Passo 2 — Campo 1: nome e descrição densa

Escreva o nome da empresa e uma descrição de 3 a 5 linhas cobrindo quem você é, o que faz, para quem e o tom. Esse campo é o cérebro do processo — uma frase genérica gera resultado genérico; uma descrição densa gera marca com personalidade. Os 4 pontos (quem, o quê, para quem, tom) são o mínimo para o Claude Design trabalhar bem. Nada acontece na tela ainda — você está preenchendo.

[Nome] — [cargo]. [o que faz, com diferencial]. Audiência principal: [perfil]. Tom: [2-3 adjetivos]. Estética: [2-3 adjetivos visuais].

Passo 3 — Campos 2 a 5: material de apoio (opcionais)

Anexe o que tiver. Se não tiver nada, deixe em branco — o processo funciona assim mesmo. Campo 2 (Link code on GitHub): repositório com identidade visual já implementada — o Claude Design lê o código e extrai o design existente. Campo 3 (Link code from your computer): pasta local com o código do site ou app. Campo 4 (Upload a .fig file): arquivo Figma da marca, se você já tem. Campo 5 (Add fonts, logos and assets): logo em SVG, fontes (.otf/.ttf/.woff), fotos profissionais. Anexar assets garante que o Claude Design não invente logo nem troque fonte — ele usa o que você deu. O arquivo Figma é lido localmente no navegador, sem subir para servidor. Erro comum: forçar assets fracos — se o logo está ruim, é melhor deixar em branco e pedir uma proposta no campo de notas.

Passo 4 — Campo 6: notas (o campo que muda tudo)

Escreva o direcionamento crítico. O erro mais comum aqui é inventar uma cor 'que acha bonita' sem ter marca definida — o Claude Design vai construir tudo sobre uma base fraca. Use o template correto para o seu cenário: marca já consolidada ou marca ainda não definida.

— MARCA JÁ CONSOLIDADA —
Paleta principal: [cor primária com hex] de fundo, [cor secundária com hex] pra texto, [cor de destaque com hex] como única cor de destaque — uso pontual. Tipografia: [fonte display] pra display, [fonte corpo] pra corpo, [fonte mono se aplicável]. Estética: [hairline borders, sombras sutis, muito espaço em branco]. Referências visuais: [2-3 marcas]. NÃO usar: [o que evitar]. Tom de voz: [adjetivos].

— MARCA NÃO DEFINIDA —
Mood: [minimalista/sofisticado/etc]. Personalidade: [3 adjetivos]. Referências visuais que admiro: [2-3 marcas — ex: Linear, Stripe, Notion]. EVITAR: [cores/estilos que não combinam]. Tom de voz: [direto/acolhedor/etc]. PEÇO QUE O CLAUDE DESIGN ME PERGUNTE sobre paleta de cores e tipografia ANTES de gerar, quero validar com base nas referências e escolher entre 2-3 opções.

Passo 5 — Submeter e validar

Clique em Set up. Em alguns minutos o DS completo aparece como canvas navegável com tudo. O resultado precisa ter a cara da sua empresa, não de template — valide os 5 pontos abaixo antes de aprovar. Se algo falhar, peça ajuste no chat lateral. Erro comum: aprovar rápido demais.

1. Paleta documentada, com hex.
2. Tipografia escalada (tamanhos e pesos coerentes).
3. Componentes da mesma família (botão, card e input parecem parentes).
4. Dark mode funcionando (mesmo que você use só o claro).
5. Acessibilidade WCAG AA (contraste e hierarquia).

Passo 6 — Handoff para o Claude Code

Com o DS aprovado, clique em 'Send to Claude Code' no canto do canvas. Esse botão empacota visual, intenção (o porquê das decisões) e specs técnicas num bundle e manda direto para a squad — sem baixar pasta, sem briefing. A squad correspondente recebe o bundle e começa a implementar. Se você ainda vai montar os times de agentes que recebem esse handoff, a estrutura completa está no repositório team-os (github.com/joaoguirunas/team-os).