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

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

Aqui está o kit gratuito ambient-sage renderizado a partir de seus tokens reais: o sistema exato que o agente escreve no seu repositório quando aplica este slug:

1. 1

   Escreva a configuração do MCP

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

   Copy

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

2. 2

   Reinicie o Claude Code

   Reinicie para que ele reconheça o novo servidor e, em seguida, confirme se as ferramentas estão disponíveis pedindo ao Claude para digitar /mcp ou listar suas ferramentas do Identity Forge.

3. 3

   Faça login (opcional para kits gratuitos)

   Necessário apenas para dados de propriedade do usuário, cota de API maior 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

   Forneça o produto, o público e o clima (mood). Ele faz uma pré-seleção com search_themes, lê o briefing com get_design_md e escreve 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 fornecerá os mesmos tokens e o DESIGN.md:

1. 1

   Aplicação via CLI

   Escreve o DESIGN.md mais um arquivo de tokens no diretório atual. Diga ao Claude para ler o DESIGN.md e integrar os tokens na sua camada de estilização.

   Copy

   identityforge apply ambient-sage

2. 2

   Registro shadcn

   Se você estiver usando 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, pergunte: Use o Identity Forge para tematizar este app para um produto de bem-estar, calmo e minimalista. 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 tokens semânticos como bg-background, text-foreground e bg-primary, enquanto segue as regras do kit para cards, sombras e tipografia. As telas criadas posteriormente herdarão os mesmos arquivos e regras.

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