Claude Code para design.

O que o Claude Code realmente é

O Claude Code é a ferramenta de programação agêntica da Anthropic. Ele lê sua base de código, edita arquivos, executa comandos e se integra às suas ferramentas de desenvolvimento — planejando, escrevendo e verificando o trabalho a partir de tarefas em linguagem natural, em vez de apenas autocompletar linhas.

Ele está disponível em várias superfícies que compartilham o mesmo motor: uma CLI de terminal, extensões para IDE no VS Code, Cursor e JetBrains, um aplicativo desktop com revisão visual de diff e uma experiência web para tarefas de longa duração. Seus arquivos CLAUDE.md, configurações e servidores MCP acompanham todas elas.

• Arquivo de instruções: O Claude Code lê um arquivo CLAUDE.md na raiz do seu projeto no início de cada sessão — o lugar natural para codificar suas convenções de design, tokens e checklists de revisão.
• Skills: As Agent Skills empacotam instruções, scripts e recursos reutilizáveis que o Claude carrega sob demanda, incluindo a skill oficial de Frontend Design da Anthropic, voltada ao bom gosto.
• Plano e subagentes: Ele pode planejar antes de agir e criar subagentes que trabalham em diferentes partes de uma tarefa em paralelo, o que mantém grandes refatorações de UI coerentes.

• Fornecedor: Anthropic
• Credencial: chave de API da Anthropic (BYOK, via Console) ou assinatura do Claude (Pro / Max)
• Superfícies: CLI de terminal, extensões para VS Code / Cursor / JetBrains, aplicativo desktop, web

Por que o Claude Code é bom em design

Entre os agentes de programação, o Claude Code tem reputação de bom gosto em trabalho de frontend. Algumas coisas explicam isso.

• Decisões específicas, não vagas: O Claude Code tende a se comprometer com escolhas concretas — valores hex exatos, escalas de espaçamento, rampas tipográficas e hierarquia de componentes — em vez de generalizar, e é isso que separa uma interface de verdade de um placeholder.
• Raciocínio ciente da base de código: Com um amplo contexto de trabalho, ele refatora a UI em muitos arquivos de uma vez, reutilizando seus componentes e tokens existentes em vez de reinventar estilos avulsos.
• Uma skill oficial de frontend: A Anthropic disponibiliza uma skill de Frontend Design que faz o Claude escrever primeiro uma direção de design e o afasta deliberadamente de fontes de sistema genéricas e dos previsíveis gradientes roxos.

A lição é a mesma que a Anthropic faz sobre seus próprios modelos: o Claude não tem bom gosto por padrão — deixado por conta própria, ele converge para o centro estatístico do web design (Inter, gradientes roxos, sombras suaves). Ele produz bom design quando você lhe dá restrições. O Open Design empacota exatamente esses insumos, e é por isso que os dois se encaixam (mais sobre isso abaixo).

Configure o Claude Code para trabalho de design, do zero

Aqui está o caminho completo, de uma máquina limpa até um Claude Code capaz de criar e verificar UI.

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• Codifique suas regras de design: Coloque seus tokens, primitivos e convenções no CLAUDE.md e aponte o Claude para eles, para que a saída combine com uma marca em vez de cair em uma aparência genérica.
• Adicione verificação no navegador: Conecte um MCP do Playwright ou do Chrome para que o Claude renderize em um navegador real e verifique sua saída em diferentes breakpoints, em vez de apenas confirmar que o build passou.

O fluxo de CLAUDE.md e Skills

O loop de design de maior alavancagem com o Claude Code é alimentá-lo com referências reais mais o seu contexto de design e então iterar até que a UI corresponda — com o CLAUDE.md e as Skills carregando as restrições, para que você não precise reexplicá-las a cada prompt.

1. Comece pelas referências visuais mais claras que você tiver — e inclua múltiplos estados (desktop e mobile, hover, vazio, carregando), não apenas uma única imagem de destaque.
2. Seja específico no prompt; prompts vagos produzem UI genérica mesmo com um agente forte.
3. Mantenha seu design system e suas convenções no CLAUDE.md e diga ao Claude onde ficam os tokens e os primitivos canônicos.
4. Adicione a skill de Frontend Design para que o Claude se comprometa com uma direção estética real antes de escrever o código.
5. Conecte a verificação no navegador para que o Claude renderize, redimensione para os breakpoints e compare de volta com as referências — em vez de apenas confirmar que o build funciona.

Solte uma imagem de referência na sessão e escreva o prompt com restrições concretas:

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

Mantenha um servidor de desenvolvimento rodando ao lado, mantenha os prompts pequenos e focados, e faça commit das boas iterações / reverta as ruins (avisando o Claude quando reverter), para que cada passada parta de uma base limpa. Use o modo de plano para refatorações maiores, de modo a poder revisar a abordagem antes de qualquer alteração nos arquivos.

Claude Code + Figma: ida e volta entre design ↔ código

Em fevereiro de 2026, a Anthropic e a Figma lançaram uma integração bidirecional de primeira classe via servidor MCP do Figma. Ela funciona nas duas direções.

• Design → Código: Selecione um frame no Figma ou cole um link no Claude Code, traga o contexto de design e peça que ele implemente o design usando sua biblioteca de componentes existente. O Code Connect mantém a saída alinhada com seus componentes reais.
• Código → Design: Crie e visualize um recurso no navegador e então diga “Send this to Figma” para capturar a UI em execução como camadas editáveis do Figma — a tela inteira ou um elemento selecionado.

Instale uma vez com claude plugin install figma@claude-plugins-official (o MCP do Dev Mode exige um plano pago do Figma). O mesmo MCP do Figma está disponível para Claude Code, Codex, Cursor e VS Code — exatamente o tipo de capacidade portátil e multiagente que o Open Design foi feito para orquestrar.

Claude Code vs Codex vs Cursor para design

Não há um único vencedor para o trabalho de design — cada agente tem uma força diferente, e times experientes os combinam. Um resumo justo:

O veredito recorrente da comunidade é que o bom gosto vem dos humanos: todos os três caem em uma estética genérica sem skills, referências e restrições. Esse é o problema real a resolver — e ele tem forma de ferramenta de design, não de modelo.

Armadilhas e como evitar a aparência de “lixo de IA”

Mesmo com a reputação de bom gosto do Claude Code, a reclamação mais comum sobre design gerado por IA é que ele parece genérico — fontes Inter, gradientes roxos sobre branco, sombras suaves, cantos arredondados exagerados, uma estética que “grita que uma IA fez isso”. A própria Anthropic atribui isso à convergência distribucional: escolhas seguras dominam os dados de treinamento da web. Outros problemas relatados incluem layouts mobile quebrados e instruções vazando para o texto da UI.

• Instale a skill de Frontend Design: Ela força o Claude a se comprometer com uma direção real e evita explicitamente fontes e gradientes usados em excesso por IA.
• Habilite a verificação no navegador: Faça o Claude renderizar e verificar a si mesmo nos diferentes breakpoints para que os layouts não quebrem silenciosamente no mobile.
• Forneça tokens e referências: Tokens de design reais e capturas de tela de referência são a maior alavanca isolada sobre a qualidade da saída.
• Codifique regras no CLAUDE.md: Coloque regras de estilo como “sem hero cards, no máximo dois tipos de fonte, hierarquia que prioriza a marca” onde o agente as lê a cada execução.

Note que toda mitigação tem a ver com dar ao agente um contexto de design curado. Manter esse contexto na mão, projeto a projeto, é o trabalho braçal que o Open Design elimina.

Projetando com o Claude Code dentro do Open Design

O Open Design é a camada de design open-source que o fluxo acima fica pedindo. Ele trata o Claude Code como um adaptador de primeira parte e o envolve em uma biblioteca curada de skills e design systems, um pipeline de renderização estruturado e uma UI desktop local — para que o contexto de design que torna o Claude Code bom esteja presente desde a primeira execução, e não montado à mão a cada vez.

1. Instale o Open Design e selecione o Claude Code como seu agente.
2. Autentique-se com sua chave de API da Anthropic (BYOK) ou sua assinatura do Claude — as credenciais permanecem na sua máquina e nunca passam por um proxy nosso.
3. Escolha um design system e uma skill, e então gere decks, protótipos e landing pages com bom gosto consistente.
4. Cada artefato e arquivo DESIGN.md vive no seu próprio repositório, não em uma nuvem hospedada.

O mesmo agente Claude Code, a mesma chave — mais um fluxo de design real, portátil e open-source ao redor. É local-first e Apache-2.0, então nada do seu trabalho ou das suas credenciais sai da sua máquina.

Perguntas frequentes

1. 01 O Claude Code é bom para trabalho de design? +

   Sim — ele é amplamente considerado o agente de programação com o melhor bom gosto em frontend, tomando decisões específicas e cientes da base de código sobre valores hex, espaçamento e escalas tipográficas. Com a skill de Frontend Design, um design system e imagens de referência reais no contexto, ele produz UI responsiva e de qualidade de produção e pode verificá-la em um navegador. Sem esse contexto, ele tende a cair em uma aparência genérica, e é essa a lacuna que o Open Design preenche.

2. 02 Preciso de uma assinatura do Claude para projetar com o Claude Code? +

   Você pode usar uma chave de API da Anthropic (BYOK, via Console) ou uma assinatura do Claude (Pro / Max). De qualquer forma, o Open Design nunca usa um proxy para suas credenciais — elas são usadas diretamente pelo seu agente na sua máquina.

3. 03 Claude Code ou Codex para design de frontend? +

   Ambos são fortes. O Claude Code é conhecido por decisões de design específicas e cientes da base de código e por raciocínio de frontend; o Codex tem forte refinamento visual e se destaca em builds delegados e em sandbox. Muitos times usam os dois — o Open Design permite trocar de agente sem mudar o seu fluxo de design.

4. 04 Como conecto o Claude Code ao Figma? +

   Instale o plugin oficial do Figma com claude plugin install figma@claude-plugins-official. Você pode então implementar frames do Figma em código usando o contexto de design e enviar uma UI em execução de volta para frames editáveis do Figma com “Send this to Figma”. O MCP do Dev Mode exige um plano pago do Figma.

5. 05 O que são Skills e CLAUDE.md? +

   O CLAUDE.md é um arquivo markdown na raiz do seu projeto que o Claude Code lê no início de cada sessão — o lugar para codificar suas convenções de design. As Skills empacotam instruções e recursos reutilizáveis que o Claude carrega sob demanda, incluindo a skill oficial de Frontend Design da Anthropic. O Open Design oferece uma biblioteca curada de ambos para que você pule a configuração projeto a projeto.

6. 06 Como evito a estética genérica de “lixo de IA”? +

   Instale a skill de Frontend Design, forneça tokens de design reais e capturas de tela de referência, codifique as regras da marca no CLAUDE.md e habilite a verificação no navegador. O Open Design entrega tudo isso como uma biblioteca curada para que você pule a configuração projeto a projeto.

7. 07 O Open Design é afiliado à Anthropic? +

   Não. O Claude Code é um produto da Anthropic; o Open Design é um projeto open-source independente que o suporta como um adaptador de primeira parte. Claude e Claude Code são marcas registradas da Anthropic.

8. 08 Meus arquivos e credenciais estão seguros? +

   Sim — o Open Design é local-first e Apache-2.0. Seus arquivos, artefatos e DESIGN.md permanecem no seu próprio repositório, e suas credenciais da Anthropic são usadas diretamente pelo seu agente, nunca roteadas por servidores do Open Design.