Dê um design system ao Cursor

O Agente do Cursor gera funcionalidades completas rapidamente, mas cada geração pode tomar decisões de estilo diferentes. Sem um sistema fixo, o espaçamento, as cores e as formas dos componentes divergem entre os arquivos. Um design system fornece ao Agente um conjunto de design tokens semânticos e um DESIGN.md escrito, para que os componentes posteriores sigam as mesmas regras do primeiro.

O Cursor suporta MCP nativamente. O Agente pode usar ferramentas para buscar, obter e aplicar um kit enquanto trabalha, além de ler os arquivos que o kit instala.

Abaixo está o kit gratuito teal-rose-institute-grid renderizado a partir de seus tokens reais. Os comandos neste guia utilizam o ambient-sage; ambos são gratuitos e instalados da mesma forma:

1. 1

   Escreva a config do MCP

   Execute isto na raiz do seu projeto para mesclar o servidor ao .cursor/mcp.json.

   Copy

   npx --yes identityforge@latest install --client cursor

2. 2

   Ative o servidor no Cursor

   Abra Customize na barra lateral, encontre o servidor identityforge e ative-o. Reinicie o Cursor se as ferramentas não aparecerem.

3. 3

   Faça login (opcional para kits gratuitos)

   Copy

   npx --yes identityforge@latest login

4. 4

   Dê o prompt ao Agente para tematizar seu app

   Forneça 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 aplicará com apply_theme.

   Copy

   Use Identity Forge to pick a minimal, warm theme for a
   wellness app, apply it, and follow the DESIGN.md.

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

Para tornar o Agente consistente mesmo fora de um ciclo de aplicação de kit, adicione uma regra de projeto em .cursor/rules/ instruindo-o a estilizar apenas com base nos design tokens semânticos e a seguir o DESIGN.md. Isso complementa bem o kit: os tokens definem os valores, e a regra garante que o código gerado sempre os utilize.

---
description: Keep generated UI on the design system
alwaysApply: true
---

Always style against the semantic design tokens defined in the
project (bg-background, text-foreground, bg-primary, bg-muted,
border-border, …) and follow the rules and motifs in DESIGN.md.
Never hardcode raw hex colors or introduce new fonts.

1. 1

   Aplicação via CLI

   Escreve o DESIGN.md + um arquivo de tokens no diretório atual; peça ao Cursor para integrá-los.

   Copy

   identityforge apply ambient-sage

2. 2

   registro shadcn

   Instala as variáveis CSS do kit diretamente se você utiliza shadcn/ui.

   Copy

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

Veja a mesma configuração para Claude Code e Windsurf, ou comece pelo guia fundamental.

• Model Context Protocol - Cursor Docs: O Cursor lê os servidores MCP do projeto em .cursor/mcp.json e permite alterná-los em Customize na barra lateral.
• Rules - Cursor Docs: As regras do projeto ficam em .cursor/rules como arquivos .mdc com frontmatter; um arquivo markdown simples nessa pasta é ignorado pelo sistema de regras.

• Model Context Protocol - Cursor Docs: O Cursor lê os servidores MCP do projeto em .cursor/mcp.json e permite alterná-los em Customize na barra lateral.
• Rules - Cursor Docs: As regras do projeto ficam em .cursor/rules como arquivos .mdc com frontmatter; um arquivo markdown simples nessa pasta é ignorado pelo sistema de regras.