Dê um design system ao Claude Code

O Claude Code não mantém estado sobre o design. Cada prompt começa do zero, então ele recorre aos mesmos padrões seguros: Inter, fundo slate-950, acento violeta, cards genéricos. Construa algumas telas e elas começarão a divergir porque nada fixa o visual. Um design system é esse ponto de fixação: um conjunto de design tokens semânticos e um DESIGN.md escrito que o agente consulta em cada tarefa, garantindo que a página cinco combine com a página um.

O Claude Code também é ideal para o MCP. Uma vez que o servidor está conectado, o agente não recebe apenas arquivos estáticos: ele pode navegar pelo catálogo, ler o brief completo de um kit e aplicá-lo, tudo dentro da sua sessão, sem que você precise sair do terminal.

Aqui está o kit gratuito atmospheric-botanical renderizado a partir de seus tokens reais, o mesmo formato de sistema que o agente escreve no seu repositório ao aplicar qualquer slug de kit (os comandos aqui usam ambient-sage):

1. 1

   Escreva a configuração do MCP

   Execute isso na raiz do seu projeto. Ele mescla um servidor identityforge ao .mcp.json (não irá sobrescrever servidores existentes).

   Copy

   npx --yes identityforge@latest install --client claude-code

2. 2

   Aprove o servidor

   Reinicie para que ele reconheça o novo servidor e, em seguida, confirme se as ferramentas estão disponíveis digitando /mcp: o painel listará os servidores conectados e a quantidade de ferramentas.

3. 3

   Faça login (opcional para kits gratuitos)

   Necessário apenas para dados proprietários, cotas de API maiores ou kits Pro. Utiliza um fluxo PKCE via navegador.

   Copy

   npx --yes identityforge@latest login

4. 4

   Peça um visual e deixe o agente aplicá-lo

   Informe o produto, o público e o mood. Ele fará uma pré-seleção com search_themes, lerá o brief com get_design_md e escreverá o DESIGN.md + tokens com apply_theme.

   Copy

   Use Identity Forge to pick a calm, trustworthy theme for a
   fintech dashboard, apply it, and follow the DESIGN.md.

{
  "mcpServers": {
    "identityforge": {
      "command": "npx",
      "args": ["-y", "identityforge@latest", "mcp"]
    }
  }
}

O Claude Code pode executar comandos de shell, então você não precisa estritamente do servidor MCP. Qualquer uma destas opções fornece os mesmos tokens e o DESIGN.md:

1. 1

   Aplicação via CLI

   Escreve o DESIGN.md e um arquivo de tokens no diretório atual. Peça ao Claude para ler o DESIGN.md e conectar os tokens à sua camada de estilização.

   Copy

   identityforge apply ambient-sage

2. 2

   Registro shadcn

   Se você usa shadcn/ui, isso instala as variáveis CSS do kit diretamente no tema do seu projeto.

   Copy

   npx shadcn add https://identityforge.io/r/ambient-sage.json

Com o servidor conectado, peça: Use Identity Forge to theme this app for a wellness product, calm and minimal. O Claude pode chamar search_themes({ description: "wellness product, calm and minimal" }), escolher ambient-sage, ler seu DESIGN.md e executar apply_theme. Ele então refatora os componentes para usar design tokens semânticos como bg-background, text-foreground e bg-primary, seguindo as regras do kit para cards, sombras e tipografia de exibição. Telas posteriores herdarão os mesmos arquivos e regras.

Próximo: faça o mesmo no Cursor, leia o que é um DESIGN.md ou navegue pelos kits por estilo visual para encontrar um slug que combine com seu produto.

• Model Context Protocol - Claude Code Docs: Servidores MCP com escopo de projeto ficam no .mcp.json na raiz do projeto, e o Claude Code solicita aprovação antes de utilizá-los; o painel /mcp lista os servidores conectados e a quantidade de ferramentas.

• Model Context Protocol - Claude Code Docs: Servidores MCP com escopo de projeto ficam no .mcp.json na raiz do projeto, e o Claude Code solicita aprovação antes de utilizá-los; o painel /mcp lista os servidores conectados e a quantidade de ferramentas.