Claude Design passa por grande atualização: sistema de design com integração, integração bidirecional e melhorias no consumo de código e tokens

A Anthropic anunciou em 18 de junho um grande redesenho do Claude Design. Os principais destaques incluem: suporte para importação de design systems a partir de repositórios do GitHub, arquivos de design ou materiais brutos; integração bidirecional com o Claude Code; e um plano de melhorias em duas camadas para o problema de consumo de tokens. Em paralelo, a empresa expandiu em 9 parceiros de exportação, incluindo Adobe, Base44 e outros.

Importação de design system: importar de repositórios do GitHub e travar as normas da marca

A atualização central desta versão é a função de importação de design system totalmente reformulada. Agora, os usuários podem enviar um design system a partir de repositórios do GitHub, arquivos de design ou materiais brutos. Após a importação, o Claude cria com base nesses componentes e, antes da entrega, compara automaticamente com as normas do design system para fazer ajustes; os usuários não veem a versão antes das correções.

O novo papel de administrador adicionado permite aprovar um único design system padrão e bloquear as permissões de edição, garantindo que cada ativo gerado pelo Claude atenda às normas de marca da empresa. A diferença em relação à essência da primeira versão é que: o Claude Design original é mais como uma tela em branco, e a saída reflete o julgamento estético do Claude; após o redesenho, ele passa a produzir conforme as normas da marca, sendo mais adequado para grandes empresas que seguem manuais de diretrizes de marca rigorosos.

Integração bidirecional do Claude Code: explicação das funções dos comandos /design-sync e /design

A integração bidirecional entre o Claude Design e o Claude Code é a segunda grande atualização:

· No Claude Code, ao inserir o comando /design-sync, é possível importar o design system do repositório de código local para o Claude Design; depois que o design estiver pronto, é só um clique para enviar ao Claude Code e entrar na fase de desenvolvimento, sem necessidade de capturas de tela ou reconstrução.

· No sentido inverso, ao inserir o comando /design no terminal do Claude Code, os desenvolvedores podem criar, editar e sincronizar diretamente projetos de design, sem sair do fluxo de trabalho.

O artigo aponta que a passagem entre design e engenharia é um dos pontos de atrito mais persistentes no desenvolvimento de software há décadas. Ferramentas como o Figma Dev Mode e o Zeplin tentam reduzir essa diferença gerando especificações e trechos de código a partir de arquivos de design, mas a tradução sempre gera perdas. A aposta da Anthropic é: se o mesmo sistema de IA tratar simultaneamente design e código, e compartilhar a mesma biblioteca de componentes, essa distância pode ser eliminada.

Plano em duas camadas para melhorias no consumo de tokens

As melhorias de consumo de tokens da Anthropic estão divididas em duas camadas:

Pool de uso compartilhado: o limite de uso do Claude Design agora é compartilhado com conversas, Claude Cowork e Claude Code, em vez de haver cobrança separada a partir de um pool menor e independente, para que a maioria dos usuários receba mais espaço de amortecimento.

Aumento da eficiência em cada geração: a Anthropic afirma ter reduzido o consumo médio de tokens por geração, mantendo a qualidade da saída. O novo editor permite que os usuários arrastem, ajustem e alinhem elementos individuais diretamente, sem precisar gastar inferência do modelo para cada pequeno ajuste; e centenas de correções de estabilidade também reduzem o desperdício de tokens causado por erros e novas gerações.

O artigo também indica que ainda existe uma contradição estrutural: o design generativo exige que o Claude faça inferência simultânea de layout, tipografia, cores, espaçamento, responsividade e conteúdo para gerar um produto completo e funcional, com uma carga de trabalho muito maior do que perguntas e respostas de conversa. Para clientes com alto volume dos planos Team e Enterprise, o impacto é menor, mas para assinantes Pro esse problema ainda existe.

Perguntas frequentes

A função de importação de design system é mais valiosa para quais tipos de usuário?

Conforme o artigo, a importação de design system tem maior significado estratégico para grandes empresas — essas organizações têm manuais rigorosos de diretrizes de marca e precisam garantir que cada saída do Claude siga os padrões visuais da empresa. O posicionamento de “tela em branco” do Claude Design na versão inicial atende bem usuários individuais ou startups, mas não é viável para grandes empresas com um manual de marca de 200 páginas.

A integração bidirecional do Claude Code requer uma assinatura adicional?

O artigo não divulga se é necessária uma assinatura adicional; apenas explica que a integração é feita por meio dos comandos /design-sync e /design. Para detalhes de preços e exigências de assinatura, é preciso consultar os comunicados oficiais da Anthropic.

Entre os 9 parceiros de exportação, qual é o papel do Claude Design no fluxo de trabalho?

De acordo com o artigo e com as declarações de cada parceiro, o Claude Design é posicionado como um “hub criativo”, e não como um destino final — ele é o ponto de partida do fluxo de trabalho de design. A Adobe, a Canva, a Vercel e outros parceiros ficam responsáveis pelo polimento, colaboração e implantação em seguida. O presidente da Replit, Michele Catasta, descreveu como “acolher os construtores bem no momento em que a criatividade começa a nascer”. Já Andrew Qu, da Vercel, comentou sobre “levar diretamente a ideia para colocar no ar na Vercel”.