Windsurf ein Designsystem geben

Cascade erstellt Features end-to-end, entscheidet aber wie jeder Coding-Agent in jedem Schritt das Styling neu: hier eine leicht andere Akzentfarbe, dort ein neuer Abstand, auf dem nächsten Screen eine andere Schriftart. Ein Designsystem eliminiert dieses Rätselraten: ein Satz semantischer Design-Tokens und eine schriftliche DESIGN.md, der Cascade folgt, sodass die gesamte App wie ein einziges Produkt wirkt und nicht wie das Ergebnis von zehn verschiedenen Prompts.

1. 1

   Windsurf MCP-Konfiguration öffnen

   Öffnen Sie das Einstellungsmenü (da Windsurf zu Cognition gehört, heißt dieses nun Devin Settings), gehen Sie zu Cascade > MCP Servers und wählen Sie die Bearbeitung der Raw-Konfiguration (~/.codeium/windsurf/mcp_config.json).

2. 2

   Identity Forge Server hinzufügen

   Fügen Sie den unten stehenden Eintrag in das mcpServers-Objekt ein (integrieren Sie ihn neben etwaige bestehende Server).

   Copy

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

3. 3

   MCP-Server aktualisieren

   Aktualisieren Sie im MCP-Panel von Cascade die Liste, damit die Identity Forge Tools geladen werden.

4. 4

   Cascade zur Gestaltung der App auffordern

   Geben Sie Produkt, Zielgruppe und Stimmung an; Cascade nutzt dann search_themes, get_design_md und apply_theme.

   Copy

   Use Identity Forge to pick a clean, editorial theme for a
   recipe site, apply it, and follow the DESIGN.md.

Da Windsurf Terminal-Befehle ausführen kann, funktionieren die client-agnostischen Pfade ohne Konfigurationsänderung: Cascade (oder Sie) führt einfach einen Befehl aus:

1. 1

   CLI apply

   Schreibt die DESIGN.md und eine Token-Datei in das aktuelle Verzeichnis. Fordern Sie Cascade auf, die DESIGN.md zu lesen und die Tokens zu implementieren.

   Copy

   identityforge apply ambient-sage

2. 2

   shadcn registry

   Installiert die CSS-Variablen des Kits direkt für shadcn/ui-Projekte.

   Copy

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

Die Cursor-Anleitung beschreibt denselben MCP-Workflow mit einem unterstützten Installationsbefehl, und der Pillar-Guide verlinkt alle Tools. Um den Inhalt zu verstehen, lesen Sie, was eine DESIGN.md ist.

• Cascade MCP - Devin Docs: Die Windsurf-Dokumentation befindet sich nun unter docs.devin.ai; MCP-Server für den Cascade-Agent werden in ~/.codeium/windsurf/mcp_config.json über Devin Settings > Cascade > MCP Servers konfiguriert.

• Cascade MCP - Devin Docs: Die Windsurf-Dokumentation befindet sich nun unter docs.devin.ai; MCP-Server für den Cascade-Agent werden in ~/.codeium/windsurf/mcp_config.json über Devin Settings > Cascade > MCP Servers konfiguriert.