Cursor ein Designsystem geben

Der Agent von Cursor generiert ganze Features schnell, aber bei jeder Generation können neue Styling-Entscheidungen getroffen werden. Ohne ein festes System driften Abstände, Farben und Komponentenformen über verschiedene Dateien hinweg (Drift). Ein Designsystem gibt dem Agenten einen Satz semantischer Design-Tokens und eine schriftliche DESIGN.md vor, sodass spätere Komponenten denselben Regeln folgen wie die ersten.

Cursor unterstützt MCP nativ. Der Agent kann Tools zum Suchen, Abrufen und Anwenden eines Kits während der Arbeit nutzen, zusätzlich zum Lesen der vom Kit installierten Dateien.

Unten ist das kostenlose teal-rose-institute-grid-Kit dargestellt, basierend auf seinen echten Design-Tokens. Die Befehle in dieser Anleitung verwenden ambient-sage; beide sind kostenlos und werden auf die gleiche Weise installiert:

1. 1

   MCP-Konfiguration schreiben

   Führen Sie dies im Projektstammverzeichnis aus, um den Server in .cursor/mcp.json zu integrieren.

   Copy

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

2. 2

   Server in Cursor aktivieren

   Öffnen Sie „Customize“ in der Seitenleiste, suchen Sie den identityforge-Server und schalten Sie ihn ein. Starten Sie Cursor neu, falls die Tools nicht erscheinen.

3. 3

   Anmelden (optional für kostenlose Kits)

   Copy

   npx --yes identityforge@latest login

4. 4

   Den Agenten per Prompt anweisen, die App zu themen

   Geben Sie Produkt, Zielgruppe und Stimmung an; der Agent erstellt eine Shortlist mit search_themes, liest das Briefing mit get_design_md und wendet es mit apply_theme an.

   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"]
    }
  }
}

Um eine konsistente Umsetzung durch den Agenten auch außerhalb eines Kit-Apply-Durchgangs zu gewährleisten, fügen Sie eine Projektregel in .cursor/rules/ hinzu. Diese sollte festlegen, dass das Styling ausschließlich auf Basis der semantischen Design-Tokens erfolgt und die DESIGN.md befolgt wird. Dies ergänzt das Kit ideal: Die Tokens definieren die Werte, während die Regel sicherstellt, dass der generierte Code diese konsequent nutzt.

---
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

   CLI apply

   Schreibt die DESIGN.md und eine Design-Tokens-Datei in das aktuelle Verzeichnis; weisen Sie Cursor an, diese zu verknüpfen.

   Copy

   identityforge apply ambient-sage

2. 2

   shadcn registry

   Installiert die CSS-Variablen des Kits direkt, sofern shadcn/ui verwendet wird.

   Copy

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

Siehe dieselbe Einrichtung für Claude Code und Windsurf oder beginnen Sie mit dem Basis-Guide.

• Model Context Protocol - Cursor Docs: Cursor liest Projekt-MCP-Server aus .cursor/mcp.json und steuert diese über „Customize“ in der Seitenleiste.
• Rules - Cursor Docs: Projektregeln befinden sich in .cursor/rules als .mdc-Dateien mit Frontmatter; einfache Markdown-Dateien werden vom Regelsystem ignoriert.

• Model Context Protocol - Cursor Docs: Cursor liest Projekt-MCP-Server aus .cursor/mcp.json und steuert diese über „Customize“ in der Seitenleiste.
• Rules - Cursor Docs: Projektregeln befinden sich in .cursor/rules als .mdc-Dateien mit Frontmatter; einfache Markdown-Dateien werden vom Regelsystem ignoriert.