Como importar seu design system no Claude Design: GitHub, arquivos ou codebase local

Rascunho de IA que já nasce com a cara do produto que existe, e não com cara de template genérico

Essa é a ideia por trás da importação de design system no Claude Design, o produto do Anthropic Labs que está em beta nos planos Pro, Max, Team e Enterprise, incluído na assinatura

E tem um detalhe que muita gente pula: a importação aceita origens diferentes (repositório do GitHub, arquivos de design, uploads brutos e a codebase local, via /design-sync no Claude Code), e cada origem entrega um material diferente pro modelo mastigar

Ou seja, a origem que você escolhe muda o rascunho que sai do outro lado

Bora destrinchar isso? 🙂

O que você precisa antes de importar

Antes de sair subindo arquivo, três coisas:

1. Plano com acesso

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

O Claude Design está em beta em Pro, Max, Team e Enterprise, incluso na assinatura

2. Recurso habilitado (só Team e Enterprise)

Nesses dois planos quem liga é o admin, em Organization settings > Capabilities

Tome cuidado aqui: em organizações Enterprise ele vem DESLIGADO por padrão

Então se você é do Enterprise e não acha o produto, provavelmente não é bug, é o toggle da organização mesmo

"E quem pode mexer nisso?"

No Enterprise existe a permissão Claude Design Admin, disponível via custom roles, que serve pra restringir quem publica design system, definir o padrão da organização e apagar design systems

3. Pelo menos uma fonte válida do seu design system

Basta UMA fonte pra começar

Fornecer várias só dá mais material pro Claude trabalhar, mas não é obrigatório

Qual origem escolher: código, protótipo, deck ou ativo solto

Aqui é onde a decisão fica prática

Cada tipo de fonte entrega um recorte diferente da sua marca:

Design system que vive em código:

Se o seu sistema já é uma biblioteca de componentes, esse é o caminho mais direto

E aqui existem DOIS jeitos de trazer a mesma origem, que é a codebase:

Se o design system está num repositório (o do GitHub, por exemplo), dá pra linkar ou subir o repositório, e o Claude lê os componentes e os estilos

Se o design system está na sua máquina, o caminho é a codebase local, com o comando /design-sync rodado no Claude Code

Mesmo destino, entrada diferente: escolha pelo lugar onde o código vive hoje

Protótipo, deck ou ativo solto:

Nem todo time tem componente versionado, né? E tudo bem

Se o que você tem é um PDF caprichado da marca, ele serve: o Claude extrai cores, padrões de layout e tipografia dali

Se o que você tem é logo, paleta e espécime tipográfico jogados numa pasta, também serve

Uma fonte já começa o jogo, várias engordam o material

Como importar seu design system no Claude Design passo a passo

O caminho abaixo cobre desde escolher a organização até deixar o design system valendo nos projetos novos

1. Escolha a organização. Abra o Claude Design e clique no nome da organização atual, no canto inferior esquerdo do seletor de projeto. Ali dá pra selecionar uma existente ou criar uma nova. Erro comum: subir tudo na organização errada e depois não entender por que o time não vê nada

2. Suba os ativos que definem marca e produto. Isso acontece durante o onboarding ou depois, pelas configurações da organização. O Claude analisa esse material pra extrair um design system reutilizável. Erro comum: mandar material meia boca. A importação é tão boa quanto a fonte, e arquivo incompleto reaparece no resultado

3. Traga a codebase, pelo caminho que combina com você. Se o design system está num repositório, é o link ou upload do repositório, como na tabela lá em cima. Se ele vive na sua máquina, aí entra o /design-sync, que roda no Claude Code e serve pra puxar o design system pra dentro do Claude Design, de modo que tudo que for construído lá parta dos componentes existentes

/design-sync

4. Entenda o que ele lê da codebase linkada. Não é só "olhar os componentes". A leitura cobre estrutura de componentes, estilo e tema (sistema de cores, escala de espaçamento, tipografia e abordagem de CSS), padrões de framework (gerenciamento de estado, hooks, fluxo de dados e outras convenções) e organização de arquivos. Erro comum: achar que o resultado sai limpo de um repo bagunçado. Codebase zoada aparece no rascunho, sem dó

5. Use a codebase no contexto do projeto. Uma vez linkada, ela passa a fazer parte do contexto e você pode referenciar componentes pelo nome no prompt, tipo "use o componente ProductCard" ou "siga o mesmo padrão de layout da página de settings". Quem já se divertiu criando persona de IA com instruções conhece a lógica: quanto mais específico o comando, menos espaço pro modelo improvisar. Erro comum: pedir "faça bonito" e esperar que ele adivinhe qual card você quer

6. Valide com um projeto de teste. Crie um projeto só pra isso e veja se a saída bate com a expectativa da marca. Erro comum: pular essa etapa e descobrir o desalinhamento no meio de um projeto real

7. Ligue o toggle "Published". Depois de publicado, qualquer projeto criado pela homescreen do Claude Design dentro da organização usa o SEU design system em vez do padrão. Erro comum: fazer todo o processo, esquecer o toggle e seguir recebendo rascunho com a cara padrão, achando que a importação falhou

Conclusão

O ganho prático da importação é bem concreto: depois que o design system entra, o Claude constrói com os seus componentes, confere a própria saída contra o seu design system e corrige antes de você ver o resultado

É menos "gerei uma tela genérica e agora vou retrabalhar tudo", e mais "já saiu no vocabulário do produto"

E quando o design estiver pronto pra virar software, dá pra passar o trabalho pro Claude Code, que continua do que já existe em vez de recomeçar a partir de um screenshot

Dali pra frente é o fluxo normal de dev, incluindo coisas como automatizar CI/CD com o Claude Code se o seu projeto pedir

A regra de ouro segue a mesma, e vale repetir: a importação é tão boa quanto a fonte

Capricha no material de entrada e o resto flui muito mais fácil 😀

até o próximo post!