Claude Design como usar: guia para devs com Claude Code

A Anthropic lançou o Claude Design em abril de 2026 e a internet fez o de sempre: review pra designer, tutorial pra PM, thread decretando a morte do Figma. Um milhão de pessoas testaram na primeira semana. Mas quase ninguém respondeu a pergunta de quem escreve código: como usar o Claude Design num fluxo de dev de verdade — aquele em que o protótipo bonito precisa virar componente, PR e deploy.

É esse buraco que este post cobre. O Claude Design é a ferramenta da Anthropic que transforma prompt em protótipo funcional, apresentação e landing page. E, desde o update de junho, ele conversa com o Claude Code nos dois sentidos. Aqui você vai ver como ele extrai o design system do seu codebase, como funciona o round-trip protótipo → código → canvas, quando vale usar (e quando é melhor ir direto no Code) e quanto isso custa na prática.

Sem review de designer. É o olhar de quem recebe o protótipo e transforma em produção.

TL;DR

O que é: ferramenta da Anthropic Labs que cria designs, protótipos interativos, slides e landing pages numa interface de chat + canvas, movida pelo Claude Opus 4.7.
Pra dev, o que importa: extrai o design system do seu codebase, sincroniza com o Claude Code via /design-sync e faz handoff de protótipo pra código sem screenshot.
Custo/Acesso: incluso nos planos Pro, Max, Team e Enterprise (não tem plano gratuito); consome a cota compartilhada da assinatura. Web e desktop.
Links úteis: anúncio oficial e guia de início em português.

O que é o Claude Design: o contexto de 2 minutos

Lançado em 17 de abril de 2026 como research preview da Anthropic Labs, o Claude Design é uma tela dividida: chat à esquerda, canvas à direita. Você descreve o que quer, ele constrói o layout. A parte que a maioria dos reviews trata como detalhe — e que pra você é o ponto central — é que ele constrói o layout em código. O que aparece no canvas não é uma imagem. É estrutura renderizada, exportável como HTML standalone.

O refino acontece em três níveis: chat pra mudança estrutural ("transforma esse one-pager em três telas"), comentário inline em cima de um elemento específico, e edição direta no canvas — arrastar, redimensionar, alinhar. Essa última, desde o update de junho, não gasta turno de modelo. Guarda essa informação, porque ela volta na seção de custo.

O resto da história — exports pra PPTX, PDF, Canva, Vercel, Replit e mais nove destinos, o caso da Brilliant em que páginas que pediam 20+ prompts passaram a sair em 2 — você acha em qualquer review. Vamos ao que os reviews não cobrem.

Como usar o Claude Design a partir do seu codebase

O recurso que separa o Claude Design de um gerador de mockup é o design system extraído do seu repositório. Em vez de você descrever a identidade visual no prompt ("usa azul, fonte Inter, botão arredondado") e rezar, ele lê a codebase — uma component library React, por exemplo — e extrai paleta de cores, famílias e pesos de fonte, padrões de UI reutilizáveis (botões, cards, navegação), sistema de espaçamento e estrutura de grid.

O caminho mais curto pra quem já vive no terminal é de dentro do próprio Claude Code:

# dentro do repositório, numa sessão do Claude Code
/design-sync
# lê a codebase local e importa o design system pro Claude Design

Também dá pra apontar um repositório do GitHub, subir arquivos de design ou capturar elementos direto do seu site em produção. Publicou o design system, todos os projetos do time passam a usar automaticamente — e o update de junho adicionou um papel de admin que aprova um sistema único e trava edição, resolvendo a preocupação óbvia de governança de marca em time grande.

Na prática, a extração acerta o grosso e erra o fino na primeira passada. A recomendação da própria doc é a mesma que vale pra qualquer contexto de agente: dê exemplos reais, não só especificação. Telas de verdade do seu produto ensinam mais que um style guide em PDF. Se a primeira extração não capturou a essência, itere com o botão Remix — é uma conversa, não um formulário.

O round-trip com Claude Code: protótipo vira código, código vira canvas

Até junho, o Claude Design era uma via de mão única: desenhava bonito, exportava, tchau. O update de 17 de junho fechou o ciclo — e é aqui que a ferramenta deixa de ser brinquedo de slide e entra no fluxo de engenharia.

Três peças montam o round-trip:

# 1. o design system nasce do seu código (visto acima)
/design-sync

# 2. o comando /design no Claude Code cria, edita e sincroniza
#    projetos de design sem sair do terminal
/design

# 3. o MCP server do Claude Design pluga no seu ambiente
claude mcp add

E o handoff no sentido inverso: um protótipo aprovado no canvas gera um bundle que o Claude Code recebe com uma instrução — nas palavras da cobertura do update, "sem screenshot, sem rebuild". O agente não recebe uma imagem pra imitar; recebe a estrutura, com os componentes aprovados do design system como vocabulário.

Se você já sofreu o fluxo antigo, sabe o que isso mata: o print do Figma colado no chat, o "faz igualzinho", o agente reconstruindo tudo na adivinhação e entregando um botão que não existe no seu design system. O protótipo e o código passam a falar a mesma língua porque nasceram do mesmo lugar — o seu repositório. É o mesmo princípio que fez o MCP virar o padrão de tools dos agentes: contexto estruturado ganha de contexto adivinhado, sempre.

Claude Design vs ir direto no Claude Code

A pergunta certa não é "qual é melhor". É "quem está no loop".

Use o Claude Design quando o loop tem gente que não programa. Protótipo pra validar com stakeholder, exploração de três direções visuais antes de escrever uma linha, landing page que o marketing vai comentar em cima. O comentário inline no canvas é o recurso matador aqui: o PM aponta no elemento, sem abrir issue, sem descrever "aquele botão azul meio torto" por texto.

Vá direto no Claude Code quando o loop é você. Se você já sabe o que quer, tem o design system no repo e o resultado é código de produção com lógica e integração, o desvio pelo canvas é cerimônia. O Code com um bom contexto de frontend entrega a tela sem intermediário — e o que ele produz já está no seu repositório, versionado.

A zona cinzenta é o descartável. Protótipo pra teste de usabilidade que vai morrer sexta-feira: Design, porque iterar no canvas é mais barato que manter branch de protótipo. Spike técnico pra validar viabilidade: Code, porque o que importa é a integração, não o visual.

A régua honesta: o Claude Design compete com o seu fluxo de protótipo, não com o seu fluxo de produção. Quem decide a arquitetura do frontend continua sendo você — como em qualquer sistema com agente no meio, a ferramenta executa; o critério é seu.

Preço, planos e a pegadinha dos tokens

Direto: o Claude Design é pago, mas não é cobrado à parte. Ele vem incluso nos planos Pro, Max, Team e Enterprise, em beta, sem plano gratuito. Funciona na web e no desktop.

O detalhe que importa é como ele cobra: consumindo a cota compartilhada da sua assinatura — a mesma do chat, do Cowork e do Claude Code. Não existe medidor separado. Cada geração no canvas sai do mesmo bolso que alimenta o seu agente de código.

E aqui entra a história que justifica o cuidado. No lançamento, o consumo era agressivo a ponto de virar pauta: um reviewer queimou 80% da cota semanal em cerca de 25 minutos gerando três variações de um design. O update de junho atacou o problema por dois lados: a média de tokens por turno caiu, e o canvas reconstruído com edição direta (drag, resize, align) resolve ajuste fino sem chamar o modelo.

Três hábitos que protegem sua cota:

Publique o design system uma vez e reuse — evita a re-extração a cada projeto.
Ajuste fino na mão, não no chat. Mover um elemento dois pixels por prompt é pagar tokens pra usar o mouse.
Codebase grande = consumo maior, segundo a própria doc. Se o repo é um monolito de dez anos, aponte o /design-sync pra component library, não pra raiz.

Limitações e pontos de atenção

Onde você vai se queimar se entrar sem saber:

É research preview. Comportamento, limites e até comandos mudam sem aviso — este post reflete o estado de julho de 2026, e a régua pra tudo é a doc oficial.
A extração do design system lê seu código. Mesma conversa de sempre com agente: decida o que a ferramenta pode ler antes de apontar ela pro repositório. Codebase com segredo hardcoded é problema seu, não dela.
O protótipo exportado é ponto de partida, não produção. HTML standalone valida ideia; acessibilidade, performance e integração continuam sendo trabalho de engenharia.
Sem plano gratuito — pra quem só quer testar, o custo de entrada é a assinatura Pro.

FAQ rápido

O Claude Design é gratuito? Não. Está em beta nos planos pagos (Pro, Max, Team e Enterprise), sem custo adicional além da assinatura — mas consome a cota compartilhada de uso, a mesma do chat e do Claude Code.

Preciso do Claude Code pra usar o Claude Design? Não — dá pra usar só na web/desktop e exportar PPTX, PDF, HTML ou mandar pro Canva. Mas o round-trip com o Claude Code é onde está o valor pra dev; sem ele, você está usando a ferramenta como gerador de slide.

Funciona com qualquer stack? A extração de design system tem como caso oficial component libraries (React no exemplo da doc), mas aceita GitHub, arquivos de design e captura de site. O export em HTML standalone serve qualquer stack — a tradução pro seu front é sua.

Por que meu limite acabou tão rápido? Provavelmente você iterou visual por prompt. Edição direta no canvas não gasta turno de modelo; chat gasta. E projeto com codebase grande consome mais na extração. Reveja os três hábitos da seção de preço.

Conclusão

O Claude Design pelo olhar do dev se resume a um contrato: protótipo e código nascendo do mesmo design system, extraído do seu repositório, com handoff estruturado em vez de screenshot. Isso é engenharia útil. O canvas bonito é consequência.

A aposta pra frente: a Anthropic está montando um funil onde a ideia entra pelo Design e sai pelo Code — e quem entende as duas pontas aproveita o funil inteiro, enquanto quem só gera protótipo continua dependendo de alguém pra transformar aquilo em produto. Prototipar ficou barato. O segundo tempo — handoff virando código que aguenta produção, com revisão e critério — é o que continua caro, e é exatamente o que a gente treina toda semana, ao vivo, no Clã Beer and Code: construindo junto, com gente revisando o que você faz, em vez de cada um se virando sozinho.

Agora que você viu o fluxo Design → Code, o próximo nível é entender o que segura um agente desses em produção: a anatomia de um agent harness explica state, tool execution e guardrails — as peças que o canvas esconde de você.