Bolt erstellt ganze Apps aus einem Prompt, aber jeder neue Screen kann neue Styling-Entscheidungen erfordern. Da Bolt npm im Browser ausführt, kannst du dasselbe Token-Set installieren, das du auch lokal verwenden würdest, und ihm schriftliche Regeln für zukünftige Generierungen geben.

1. 1

   Stelle sicher, dass das Projekt shadcn/ui nutzt

   Bolts React + Tailwind Starters funktionieren sehr gut. Falls das Projekt noch nicht mit shadcn initialisiert wurde, führe zuerst npx shadcn@latest init im Bolt-Terminal aus.

2. 2

   Füge die Tokens des Kits hinzu

   Führe den Registry-Befehl des Kits direkt im Bolt-Terminal aus. Er schreibt die CSS-Variablen des Kits (alle 28 semantischen Rollen, Light + Dark Mode) in dein Theme.

   Copy

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

3. 3

   Füge die DESIGN.md als Briefing ein

   Öffne die Kit-Seite in der Gallery (z. B. /kits/ambient-sage), kopiere die DESIGN.md und füge sie in den Bolt-Chat mit der Anweisung ein, diese für alles, was gebaut wird, zu befolgen.

4. 4

   Nutze das System im Prompt

   Jetzt kannst du ganz normal bauen: Bolt nutzt deine installierten Tokens und folgt der DESIGN.md.

   Copy

   Build a landing page using only the theme's design tokens
   and the DESIGN.md rules: don't add new colors or fonts.

Der Registry-Eintrag unter https://identityforge.io/r/<slug>.json enthält jede semantische Rolle. Dadurch muss Bolt keine Werte improvisieren, die eine lose Farbpalette undefiniert lassen würde: gedämpfter Text, Rahmen, Hover-Zustände, Dark Mode oder Chart-Serien. Das sorgt dafür, dass eine Bolt-App wie designt wirkt und nicht nur zusammengestellt wurde. Siehe Erklärung semantischer Farb-Tokens.

Dasselbe Muster gilt für v0 und Lovable. Für Coding-Agents wie Claude Code und Cursor starte beim Pillar Guide.