O problema: UIs construídas por IA parecem todas iguais
Peça a qualquer agente de codificação para "construir uma landing page" e você obterá a mesma coisa: um hero em Tailwind gray-950, um gradiente violeta, Inter e três cards de recursos. É competente e completamente genérico, porque o modelo não tem memória da sua marca entre os prompts. Adicione uma segunda página e o estilo deriva: espaçamento diferente, um azul ligeiramente distinto, um novo formato de botão. Não há uma fonte de verdade para o visual, portanto, não há consistência.
Um sistema de design resolve isso. Quando o agente tem um conjunto de tokens semânticos, um par de tipografia fixo e regras escritas para seguir, cada tela que ele gera referencia as mesmas variáveis em vez de tentar adivinhar novamente. Essa é a diferença entre um demo e um produto.
Um kit de design real, visualizado
Um kit é um sistema completo, não apenas uma paleta. Abaixo está uma prévia ao vivo do kit gratuito ambient-sage: os mesmos tokens, fontes e tratamentos que um agente recebe quando o aplica. Tudo nesta página poderia ser repintado apenas trocando o kit.
Ambient Sage
Live renderRendered from the kit's actual tokens, fonts, and treatments
Dashboard
Welcome back — here's how AmbientSage is performing today.
Active users
15.1k
+5%Trending up this month
vs. previous 30 days
MRR
$49.1k
+3%Strong recurring growth
Net of churn
Retention
89%
+2%Engagement above target
Rolling 28-day window
NPS
69
+3Meets growth projections
Survey · n=1,204
Total revenue
Last 12 months
$49.1k+18.2%
Recent sales
You closed 265 deals this month.
Alex Rivera
alex@ambientsage.com
Mira Okonkwo
mira@ambientsage.com
Jonas Feld
jonas@ambientsage.com
Sana Qureshi
sana@ambientsage.com
Theo Lindgren
theo@ambientsage.com
Recent transactions
View all| Customer | Status | Date | Amount |
|---|---|---|---|
AR Alex Rivera Founder & CEO | Paid | 2m ago | $1,999.00 |
MO Mira Okonkwo Head of Product | Pending | 1h ago | $39.00 |
JF Jonas Feld Design Lead | Processing | 3h ago | $299.00 |
SQ Sana Qureshi Engineering Lead | Paid | Yesterday | $99.00 |
TL Theo Lindgren Brand Director | Refunded | 2d ago | $2,400.00 |
Typography
Plus Jakarta Sans
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Guias por ferramenta
A mecânica difere conforme a ferramenta: agentes de codificação executam um servidor MCP local, construtores web utilizam o registro shadcn ou o DESIGN.md exportado. Escolha sua ferramenta:
- Dê ao Claude Code um sistema de design: MCP via
.mcp.json, ouidentityforge apply. - Dê ao Cursor um sistema de design: MCP via
.cursor/mcp.json. - Dê ao Windsurf um sistema de design: configuração manual de MCP para o Cascade, além do caminho via CLI.
- Dê ao v0 um sistema de design: o registro shadcn + DESIGN.md como briefing.
- Dê ao Lovable um sistema de design: conhecimento do projeto +
shadcn addno repositório. - Dê ao Bolt um sistema de design: execute
shadcn adddiretamente no terminal do Bolt.
O que o agente realmente recebe
Independentemente de como você instale, o conteúdo é composto pelas mesmas três coisas:
- Um DESIGN.md: o briefing escrito: a intenção do design, o sistema de tipografia, regras de espaçamento e layout, tratamentos de componentes, motivos distintivos e o que fazer e não fazer. Isso é o que impede o agente de adotar o padrão genérico. O que é um DESIGN.md e como gerar um.
- Tokens de cores semânticas: 28 funções (background, foreground, primary, muted, card, border, chart-1…5 e mais) tanto para o tema claro quanto para o escuro. O agente estiliza com base nos nomes das funções, não em hexadecimais brutos, para que os temas permaneçam coerentes. Tokens de cores semânticas explicados.
- Exportações de framework: o mesmo sistema como variáveis CSS,
@themedo Tailwind v3/v4, um item de registro shadcn ou DTCG/W3C JSON. O agente conecta o que for compatível com sua stack.
Escolhendo um kit
Navegue por kits por estilo visual para ver sistemas completos em contexto: tipografia, cor, superfícies e regras de construção. Cada kit possui um slug estável; uma vez que você o conheça, o agente pode pular a busca e aplicá-lo diretamente. Se você já possui cores de marca, a ferramenta MCP match_palette encontra os kits que melhor se ajustam perceptualmente.
Deixe o agente escolher
Com o servidor MCP conectado, você não precisa escolher um slug manualmente. Diga ao agente seu produto, público e o clima desejado. Ele pode usar search_themes para fazer uma lista curta, get_design_md para ler o briefing e apply_theme para instalar o kit escolhido.
FAQ
O que é um sistema de design para um agente de codificação de IA?
É um conjunto fixo de decisões de design: tokens de cores semânticas para temas claro e escuro, um par de tipografia, regras de espaçamento e layout, e um DESIGN.md escrito. O agente referencia essas decisões em vez de inventar estilos novamente para cada tela.
Preciso de uma conta ou chave de API para usar o Identity Forge com meu agente?
Não. Kits gratuitos e o registro shadcn funcionam sem conta. Uma chave de API (em /account/api-keys) só é necessária para dados próprios, cota de API maior e kits Pro.
Com quais ferramentas isso funciona?
Agentes de codificação: Claude Code, Cursor, Windsurf, Codex, Gemini CLI, VS Code/Copilot, opencode: execute o servidor MCP local. Construtores web: v0, Lovable, Bolt: consomem o item do registro shadcn ou o DESIGN.md e tokens exportados.
Isso é diferente de apenas pedir uma paleta de cores ao agente?
Sim. Uma paleta é um punhado de cores. Um kit é um sistema completo e coerente: 28 tokens semânticos em temas claro e escuro, fontes reais, regras de layout e componentes, motivos e o que fazer e não fazer, serializados em um DESIGN.md e exportáveis como tokens shadcn/Tailwind/DTCG.