Índice
Atualizado em 12 de outubro de 2026: com o anúncio oficial de 8 de outubro de 2026, o Claude Design saiu do beta e passou a estar disponível em todos os planos, inclusive o gratuito. A tela independente claude.ai/design será encerrada em 14 de dezembro de 2026. Atualizamos a disponibilidade na seção 4 e as perguntas frequentes de acordo.
Atualizado em 26 de setembro de 2026: reescrevemos a seção 3 de acordo com a documentação oficial do Claude Code e a ajuda oficial. O /design-sync é o comando que leva o design system do seu repo para o Claude Design; a passagem do design para o código fica com a entrega ao Claude Code e com o /design. Também corrigimos a lista de destinos de exportação adicionados em junho conforme o anúncio oficial e acrescentamos o que faz a skill /design, incluída no Claude Code desde agosto.
O Claude Design é uma ferramenta de design do Anthropic Labs que permite criar designs de UI, protótipos, one-pagers e outros trabalhos visuais por meio de conversa (lançada em 17 de abril de 2026 como uma prévia de pesquisa). Depois, em 17 de junho de 2026, uma grande reformulação adicionou importação de design systems e sincronização bidirecional com o Claude Code (/design-sync, /design), encurtando drasticamente o vaivém entre designers e desenvolvedores. Depois, em 16 de setembro de 2026, junto com a integração do Claude Cowork com o chat, o Claude Design passou a funcionar dentro de qualquer conversa (a tela independente claude.ai/design será encerrada em 14 de dezembro de 2026).
Este artigo cobre o que é o Claude Design, a reformulação de junho, como o /design-sync e o /design dividem o trabalho, a disponibilidade e por que isso importa — com base em informações oficiais. Três pontos de partida. (1) O Claude Design é uma ferramenta de design baseada em conversa que você refina por chat, comentários, edições diretas e sliders. (2) Os destaques de junho são "importe seu design system e construa com seus componentes reais" e "sincronize nos dois sentidos com o Claude Code." (3) Saiu do beta em 8 de outubro de 2026 e está disponível em todos os planos, inclusive o gratuito (ativado por padrão no Enterprise a partir de 15 de outubro). Desde 16 de setembro basta pedir um design numa conversa comum, enquanto o /design-sync vive no Claude Code.
Design e código, nos dois sentidos
— transite entre o canvas e o repo
/design-sync · /design ↔
Code→Design traga o design system do seu repo com o /design-sync e construa com componentes reais,
Design→Code entregue os designs prontos ao Claude Code, que continua a implementação, e transforme o código em um protótipo ao vivo no canvas (/design).
1. O que é o Claude Design
O Claude Design é uma ferramenta em que "você descreve o que quer em conversa, o Claude constrói o design e você o refina por chat, comentários inline, edições diretas e sliders." Ele cria trabalhos visuais como designs, protótipos interativos e one-pagers (ajuda oficial "Get started with Claude Design"). O anúncio de lançamento também citava slides, mas desde 16 de setembro de 2026 as apresentações têm uma ferramenta própria, o Claude Slides. Foi lançado em 17 de abril de 2026 como uma prévia de pesquisa para Pro / Max / Team / Enterprise, e mais de um milhão de pessoas o usaram na primeira semana.
Sobre o modelo: no lançamento de abril ele rodava no Claude Opus 4.7 (que a Anthropic chamou de "nosso modelo de visão mais capaz"). No entanto, o anúncio da reformulação de junho não reafirma o modelo, então este artigo não afirma que "a versão de junho roda no Opus 4.7" (confirme o que há de mais recente oficialmente). Para um panorama mais amplo, veja ferramentas de design com IA comparadas.
2. A grande reformulação de junho de 2026
A reformulação de 17 de junho de 2026 fez o Claude Design passar de "um brinquedo de prototipagem" para "um espaço de trabalho que faz tarefas do dia a dia alinhadas à marca." As principais mudanças:
O que a reformulação de junho adicionou
/design-sync traz o seu design system, e os designs prontos são entregues ao Claude Code para implementação. O /design também transforma código em um protótipo ao vivo (§3).Em resumo, ele evolui na direção de "construir sobre sua marca, fazer o vaivém com o código e se encaixar na governança corporativa."
3. /design-sync e /design: indo e voltando entre design e código
O Claude Code tem dois comandos que se conectam ao Claude Design. Segundo a referência oficial de comandos do Claude Code, o /design-sync é uma skill que "converte o design system em React do seu repo e o envia ao Claude Design, para que os designs gerados usem seus componentes reais" (você também pode dar um nome, como em /design-sync Acme DS). A primeira sincronização verifica cada componente e pode levar algumas horas em um repo grande. A autorização com a sua conta do claude.ai é feita com o /design-login.
| Direção | O que usar | O que acontece |
|---|---|---|
| Código → Design (design system) | /design-sync | Lê os tokens e componentes do seu repo e os leva ao Claude Design, então os designs seguintes partem dos seus componentes reais |
| Design → Código (entrega) | Entrega ao Claude Code / /design | Entregue um design pronto ao Claude Code e ele continua a partir do seu trabalho existente em vez de reconstruir a partir de uma captura de tela. Use "Handoff to Claude Code" no menu de exportação (um agente de programação local ou o Claude Code on the web), ou importe um design para o seu código com o /design no Claude Code |
| Código → Canvas (protótipo) | /design | Transforme o código que você construiu em um protótipo ao vivo e refine-o no canvas |
Essa divisão vem do anúncio oficial de junho e da ajuda oficial. O /design-sync é indicado quando o design system já existe no código como componentes React; um design system de marca centrado em fontes, cores e diretrizes é melhor criado no chat a partir de arquivos, arquivos do Figma, apresentações e logotipos (ajuda oficial: "Set up your design system in Claude Design").
O /design já aparecia no anúncio de junho e, desde agosto de 2026, é uma skill incluída no Claude Code: você passa um briefing e ele desenha mockups de UI, fluxos de telas, landing pages ou pôsteres como vários artboards em um único canvas, publicado como um artifact de Design (documentação oficial: "Artifacts"). Os artboards são editados selecionando elementos em um navegador de desktop, e cada um pode ser exportado como PNG ou PDF. Os dois comandos funcionam na API da Anthropic, mas não por nuvens como Amazon Bedrock, Google Cloud ou Microsoft Foundry (dependem de recursos do claude.ai). Combina bem com o desenvolvimento orientado por especificações; veja desenvolvimento orientado por especificações.
4. Disponibilidade
Esta é a disponibilidade em 12 de outubro de 2026, conferida na ajuda oficial e no anúncio oficial de 8 de outubro. Desde junho, duas coisas mudaram: a integração de 16 de setembro ampliou a porta de entrada de uma tela dedicada para as suas conversas comuns, e em 8 de outubro o recurso saiu do beta e chegou ao plano gratuito.
| Item | Detalhes |
|---|---|
| Planos | Todos os planos: Free / Pro / Max / Team / Enterprise, ativado por padrão. No Enterprise é ativado por padrão em 15 de outubro de 2026, e um proprietário pode ativá-lo antes em Organization settings > Artifacts |
| Acesso | Pedir em qualquer conversa (ou escolher Output > Design na caixa de mensagem) / o modelo Design na aba Artifacts / Claude Code (/design) / os apps de iOS e Android / a tela independente claude.ai/design (encerrada em 14 de dezembro de 2026; os sistemas de design podem ser migrados pela página Artifacts do Claude) |
| Onde roda | A edição no canvas é feita na web / no desktop. Os apps móveis também permitem pedir, ver e editar designs (mudar o compartilhamento exige web / desktop). O /design-sync e o /design vivem no Claude Code (desktop ou terminal) |
| Uso | Consome dos mesmos limites de uso que o chat e o Claude Code (não há cota separada para o Claude Design) |
| Status | Fora do beta (prévia de pesquisa em 17 de abril → grande reformulação em 17 de junho → desde 16 de setembro, dentro das conversas → 8 de outubro, fim do beta e chegada ao plano gratuito) |
O fácil de confundir: o "canvas (web/desktop)" e o "/design-sync / /design (Claude Code)" vivem em lugares diferentes. Você trabalha o design no canvas que se abre ao lado da conversa (ou em claude.ai/design até 14 de dezembro de 2026) e sincroniza com o código por comandos do Claude Code — e essa divisão é exatamente a ponte entre designers e desenvolvedores.
5. Por que isso importa
Até agora, passar do design para o código muitas vezes significava "reconstruir a partir de uma captura de tela." O Claude Design + /design-sync fecha essa lacuna ao (1) importar seu design system para construir com "componentes reais" e (2) permitir que design e código façam o vaivém nos dois sentidos. Os engenheiros não reconstroem do zero, e os designers podem refinar a saída do código no canvas.
Em outras palavras, o Claude Design é um produto que conecta o fluxo de trabalho "designer × desenvolvedor" em uma única linha. Quando você quer compartilhar uma construção rápido, transforme-a em uma página compartilhada com o Claude Code Artifacts; para UI alinhada à marca, use o Claude Design — combinar os novos recursos próximos ao Claude Code compensa. A imprensa relata que o avanço da IA no design é impactante o suficiente para que as ações de fabricantes consagradas de ferramentas de design reagissem (não afirmamos números exatos, que oscilam).
Como parte da mesma família de ferramentas de criação do Claude Design, o Claude Dashboards, que cria dashboards de dados, e o Claude Motion, que cria animações explicativas, também entraram em beta. As diferenças e quando usar cada um são explicadas em O que são Claude Dashboards e Motion.
Resumo
O Claude Design (prévia de pesquisa em abril de 2026, grande reformulação em 17 de junho) é uma ferramenta de design do Anthropic Labs para criar UI, protótipos, one-pagers e mais por meio de conversa, e desde 16 de setembro de 2026 funciona dentro de qualquer conversa. Os destaques de junho são (1) importação de design systems (construa com componentes reais), (2) a ida e volta com o Claude Code (/design-sync, entrega e /design), (3) edição direta no canvas, (4) limites de uso compartilhados (a correção do "consumo de tokens"), (5) controles de marca para Enterprise e (6) conectores de exportação ampliados.
O /design-sync é um comando do Claude Code que leva o design system em React do seu repo para o Claude Design. Os designs prontos vão para a implementação por uma entrega ao Claude Code ou pelo /design, e o /design também transforma o código em um protótipo ao vivo no canvas. Está disponível em todos os planos, inclusive o gratuito (fora do beta desde 8 de outubro de 2026), a tela independente claude.ai/design será encerrada em 14 de dezembro de 2026, e o /design-sync está no Claude Code. A essência é encurtar o vaivém entre designer e desenvolvedor. Observe que as coisas podem mudar — por exemplo, o modelo da versão de junho não é reafirmado oficialmente — então confirme o que há de mais recente na documentação. Relacionados: ferramentas de design com IA comparadas, Claude Code Artifacts, desenvolvimento orientado por especificação.
FAQ
Q. O que é o Claude Design?
A. Uma ferramenta de design do Anthropic Labs para criar designs por meio de conversa. Descreva o que você quer em palavras e o Claude gera UI, protótipos e one-pagers, que você refina por chat, comentários inline, edições diretas e sliders. Foi lançado em 17 de abril de 2026 como uma prévia de pesquisa, com mais de um milhão de usuários na primeira semana. Desde 16 de setembro de 2026 basta pedir um design numa conversa comum (também pelo modelo Design da aba Artifacts, pelo Claude Code ou pela tela independente claude.ai/design até 14 de dezembro de 2026).
Q. O que o comando /design-sync faz?
A. Ele leva o design system do seu repo para o Claude Design. Quando o design system já existe no código como componentes React, ele lê os tokens e os componentes e os envia, para que os designs gerados pelo Claude Design usem seus componentes reais. A primeira sincronização verifica cada componente, então pode levar algumas horas em um repo grande. O caminho inverso (do design para o código e do código para o canvas) fica com a entrega ao Claude Code e o /design: entregue um design pronto ao Claude Code e ele continua a partir do seu trabalho existente em vez de reconstruir a partir de uma captura de tela.
Q. O que mudou na reformulação de junho de 2026?
A. Principalmente (1) importação de design systems (construa com seus componentes, com a saída conferida e corrigida), (2) a ida e volta com o Claude Code (/design-sync, entrega e /design), (3) edição direta no canvas (arrastar/redimensionar/alinhar), (4) uma correção do "consumo de tokens" via limites de uso compartilhados com chat/Cowork/Claude Code, (5) controles de marca para Enterprise em que um admin aprova e bloqueia um padrão, e (6) conectores de exportação ampliados. Ele passou da prototipagem para um "espaço de trabalho de tarefas reais alinhado à marca."
Q. Qual plano pode usá-lo?
A. Saiu do beta em 8 de outubro de 2026 e está disponível em todos os planos, inclusive o gratuito (Free / Pro / Max / Team / Enterprise), segundo a ajuda oficial em 12 de outubro de 2026. O uso sai dos mesmos limites do chat e do Claude Code. Está ativado por padrão, e no Enterprise é ativado por padrão em 15 de outubro de 2026 (um proprietário pode ativá-lo antes). Os apps móveis permitem pedir, ver e editar designs, enquanto o /design-sync e o /design vivem no Claude Code. A tela independente claude.ai/design será encerrada em 14 de dezembro de 2026, então migre cedo os sistemas de design que estiverem lá.
Q. Qual modelo o alimenta?
A. No lançamento de abril ele rodava no Claude Opus 4.7 (que a Anthropic chamou de "nosso modelo de visão mais capaz"). No entanto, o anúncio da reformulação de junho não declara o modelo, então não podemos afirmar que "a versão de junho roda no Opus 4.7." Modelos e detalhes podem ser atualizados, então confira a página oficial para informações atuais.
