Claude Design e Claude Code: o que muda com /design-sync e /design?

Fala aí, beleza? A Anthropic acabou de fechar o vão que existia entre desenhar a tela e escrever o código dela

O Claude Design e o Claude Code agora conversam nos dois sentidos: dá pra puxar o design system pro repositório e construir com os componentes reais, ou empurrar o que já foi construído de volta pro canvas e continuar editando por lá

Parece detalhe, mas muda o começo de qualquer projeto de interface

Bora entender o que cada comando faz de verdade?

O que é o Claude Design e de onde vem essa integração

O Claude Design é um produto do Anthropic Labs pra criar protótipos, slides, one-pagers e mockups conversando com o Claude

Ele foi lançado em research preview no dia 17 de abril de 2026, e é acessado em claude.ai/design com a sua conta Claude

Hoje ele está em beta pros planos pagos Pro, Max, Team e Enterprise

A virada veio em 17 de junho de 2026: a Anthropic anunciou que Claude Code e Claude Design passaram a sincronizar nos dois sentidos, com o comando /design-sync

Na mesma atualização entraram também a edição direta no canvas (WYSIWYG) e novos controles de marca pra empresas

Pré-inscrição Formação Claude Code

Domine o Claude Code do básico ao avançado

Você vai aprender a criar sistemas completos com Claude Code, sem precisar ser programador. Inscreva-se para ter acesso a um desconto de lançamento e bônus especiais!

Quero minha vaga

Como funciona o /design-sync na prática

O /design-sync é rodado DENTRO do Claude Code

Mas antes de sair digitando: tem um passo anterior obrigatório, que é conectar o servidor MCP do Claude Design no Claude Code

É o que a documentação oficial indica pra trabalhar a partir do terminal, e o comando exato está logo na próxima seção

Com o MCP conectado, aí sim o /design-sync faz o trabalho dele: trazer um ou mais design systems pro seu contexto de trabalho

As origens aceitas são:

• repositório do GitHub
• arquivos de design
• uploads brutos
• o próprio codebase local

Se o seu design system vive em código (uma biblioteca de componentes React, por exemplo), dá pra vincular ou subir o repositório e o Claude lê os componentes e os estilos de lá

E por que isso importa tanto? 😀

Porque com o design system importado o Claude constrói usando os componentes REAIS, e ainda confere a própria saída contra o design system antes de te mostrar o resultado, corrigindo o que fugiu do padrão

A sincronização vale nos dois sentidos, o famoso round-trip: dá pra levar um protótipo iniciado no Claude Code pro Claude Design e editar no canvas, ou levar um protótipo do Claude Design pro Claude Code construir

O comando /design e o MCP do Claude Design

Além do sync, existe o comando /design no Claude Code

Com ele dá pra criar, editar e sincronizar projetos de design sem sair do terminal

Pra trabalhar a partir do Claude Code, a documentação oficial indica conectar o servidor MCP do Claude Design:

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

Esse é aquele passo anterior que citei lá em cima: rode ele PRIMEIRO, depois vá de /design-sync

Repara no --scope user: isso registra o servidor pro seu usuário, não só pra um projeto

Se você já mexeu com MCP antes, é o mesmo ritual de sempre, nada exótico aqui

Handoff: levando o protótipo do canvas para o terminal

Agora o caminho contrário, que é onde a maioria das pessoas vai começar: você desenhou no canvas e quer código

O passo a passo oficial é curtinho:

1. No projeto do Claude Design, clique no botão Export
2. Escolha a opção Hand off to Claude Code
3. Por padrão, o Claude empacota os arquivos de design do projeto, o chat e um README
4. Ele devolve um prompt com a URL do bundle pra você colar no seu Claude Code local

Existe também a opção de handoff direto pro Claude Code Web, se você não quiser passar pela máquina

O ponto que faz diferença: no handoff o Claude Code continua do trabalho existente em vez de recomeçar a partir de uma captura de tela, com o contexto dos componentes e padrões usados no protótipo

E o ganho é maior ainda quando o codebase está vinculado

Aqui vale o mesmo cuidado de sempre antes de sair gerando arquivo: se o projeto já existe, planejar antes de executar mudanças economiza um monte de retrabalho

Fora o handoff, o Claude Design exporta pra bundles HTML, PPTX e PDF, e tem handoff pra parceiros: Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel e Wix

Quando desenhar no canvas e quando empurrar para o Claude Code

Essa é a pergunta que interessa, né?

A régua é simples: canvas é pra DECIDIR, terminal é pra CONSTRUIR

Quando vale ficar no Claude Design:

• quando você ainda não sabe o layout e quer ver variação antes de escrever uma linha de código
• quando o entregável é visual mesmo: protótipo, slide, one-pager, mockup
• quando quer ajustar espaçamento, hierarquia e cor conversando, com a edição direta no canvas
• quando precisa mostrar a ideia pra alguém que não vai abrir o VS Code 🙂

Quando é hora de empurrar pro Claude Code:

• quando o projeto precisa usar os componentes reais do repositório, e não uma aproximação visual
• quando a tela vai encostar no codebase existente (rotas, estado, API, build)
• quando o assunto virou evolução de produto e não mais exploração de layout
• quando você quer que o próprio Claude confira a saída contra o design system importado

Se você veio de outro editor e está montando esse fluxo agora, dá uma olhada no que muda ao migrar do Cursor pro Claude Code, porque o hábito de trabalho pesa mais que a ferramenta

Como foi montar um SaaS com os dois: o que eu vi

No vídeo abaixo eu monto o fluxo de ponta a ponta: desenhar a interface no Claude Design e depois levar o material pro Claude Code construir, incluindo o deploy no final

Criei um projeto novo em alta fidelidade SEM usar nenhum design system, partindo só de um prompt escrito, ignorando de propósito as opções de anexar design system ou screenshot de referência

Descrevi as 2 telas com nível alto de detalhe: home com hero, título, subtítulo, campo de input pra colar a URL e chips clicáveis com exemplos, mais a tela de resultado com a URL analisada, nota geral, cards por categoria e botões de copiar relatório ou analisar outro site

No mesmo prompt coloquei as direções visuais: tema escuro, fundo quase preto, laranja como cor de destaque, tipografia limpa e cards com cantos arredondados

O projeto tinha 4 categorias de análise: SEO, conteúdo, performance e acessibilidade

Voltou exatamente as 2 telas que pedi, e ainda uma etapa intermediária com skeleton de carregamento

Aqui um detalhe que quase me enganou: na visão macro eu achei que o skeleton não tinha sido gerado, porque a animação não aparecia

Ao expandir a tela, estava lá o tempo todo 😛

Depois do primeiro resultado eu pedi 2 ajustes: reduzir a altura do hero pro input ganhar foco, e colocar a nota geral dentro de um círculo com a cor variando conforme o valor

Ficou mais enxuto e com mais impacto visual, só conversando

Na passagem pro Claude Code eu aproveitei pra somar contexto meu ao que veio do design, pedindo o projeto em Next.js integrado à API da Anthropic

Tome cuidado com essa etapa: eu já tinha enfrentado antes o Claude Code não conseguindo baixar o arquivo de design, então não é infalível

Nessa rodada o download do bundle funcionou sem intervenção nenhuma, e o Claude Code analisou o material e começou a recriar as telas em Next

Antes de subir, instalei o analytics (usei o PostHog) ainda em ambiente local, pra já testar o que estava funcionando

Analytics é item essencial em qualquer projeto web, não é firula: sem saber qual botão o usuário clica e onde o produto trava, o risco é deixar dinheiro na mesa ou lançar algo que ninguém consegue usar

E sim, mantive o escopo pequeno de propósito, com só duas telas, pra explicar o conceito sem gastar demais no Claude Design

Cota, limites e o que ligar antes de começar

Agora a parte que dói no bolso, presta atenção nessa 👀

O consumo do Claude Design saiu de uma cota separada e passou a dividir o MESMO limite de uso do chat, do Claude Code e do Cowork

Os relatos dessa fusão dos limites começaram a aparecer em 28 de maio de 2026, antes da atualização de junho

E por que isso é sério? Porque antes da correção de consumo, um resenhista da PCWorld queimou 80% da cota semanal do plano Pro em cerca de 25 minutos, produzindo três variações de um protótipo de página

Ou seja: gerar variação em rajada tem preço, e agora esse preço sai do mesmo bolso do seu terminal

O que precisa estar ligado antes:

1. Toggle Published no design system: depois de gerado, o design system só passa a valer pros novos projetos da organização quando o Published está ligado; a partir daí, projetos criados na home do Claude Design dentro da organização usam ele em vez do padrão
2. Liberação da organização (Team e Enterprise): o admin liga o Claude Design em Organization settings > Capabilities, na seção Anthropic Labs
3. Permissão Claude Design Admin (Enterprise): disponível em custom roles, ela restringe quem publica design systems, quem define o padrão da organização e quem apaga design system

O erro comum aqui é gerar um design system lindo, sair rodando /design-sync e não entender por que os projetos novos da organização continuam saindo com a cara padrão

Quase sempre é o Published desligado 🙂

Conclusão

O Claude Design e o Claude Code agora formam um caminho de ida e volta de verdade, e o valor está justamente aí: não recomeçar do zero a cada troca de ambiente

O /design-sync traz o design system pro Claude Code construir com os componentes reais e conferir a própria saída (lembrando: com o MCP conectado antes), o /design deixa criar e sincronizar sem sair do terminal, e o handoff pelo Export leva o protótipo do canvas pro código com o contexto junto

Mas seguimos em beta e em research preview, então vale ceticismo saudável: teste antes de apostar um projeto grande nisso

Próximo passo concreto? Conecta o MCP, importa o seu design system com /design-sync e roda um protótipo PEQUENO de ponta a ponta, do canvas até o código

Com escopo curto você aprende o fluxo sem torrar a cota logo no primeiro dia

faça o teste e me conta como foi…

até o próximo post!