Bolt ein Designsystem geben

Gemäß der Dokumentation von Bolt gibt ein Designsystem Bolt einen Satz visueller Regeln (Farben, Typografie, Abstände, Komponentenstile) vor, die beim Build-Prozess befolgt werden. Der angegebene Vorteil ist, dass Bolt UI-Code generiert, der auf Ihren tatsächlichen Komponenten basiert, anstatt auf Platzhalter-Code, den Sie später ersetzen müssten.

Es gibt zwei Stufen, und der Unterschied ist entscheidend für die Planung:

Die vorinstallierten Systeme sind ein hervorragender Weg, um den Unterschied zu sehen, den ein System macht: Wählen Sie eines aus, klicken Sie auf *Try example* und vergleichen Sie die Ergebnisqualität mit einem einfachen Prompt. Was Sie nicht tun können, ist, ein System an Ihre Marke anzupassen, da diese schreibgeschützt sind. Sobald Sie ein eigenes Erscheinungsbild benötigen, müssen Sie sich zwischen einem Team-Plan und dem Terminal entscheiden.

Das Modell von Bolt basiert auf Kompilierung, nicht auf Upload. In der Dokumentation heißt es, dass Bolt Ihr Designsystem aus Ihren eigenen Quellen, Ihrer Komponentenbibliothek und Ihrer Designsystem-Website kompiliert und dass Ihr Designsystem *durch diese Quellen definiert wird*. Wenn sich die Quellen ändern, synchronisieren Sie Bolt, um die neueste Version zu übernehmen.

Dies ist ein sauberes Modell mit einer Konsequenz, die Nutzer erst später bemerken: Das kompilierte System ist ein Snapshot. Zwischen den Synchronisierungen generiert Bolt aus einer Version Ihres Systems, die möglicherweise nicht mehr mit dem entspricht, was tatsächlich ausgeliefert wird. Dies ist das Fehlerbild, das Designsystem-Teams bereits als Token-Drift kennen – die Divergenz zwischen der definierten „Source of Truth“ und der ausgelieferten Version. Ein Coding-Agent, der selbstbewusst aus einer veralteten Kopie generiert, produziert produktionsreifen Code auf der falschen Grundlage, und das schneller als je zuvor. Nehmen Sie die Synchronisierung in Ihre Release-Checkliste auf, nicht in Ihren Wartungs-Backlog.

Bolt ist nicht ungewöhnlich darin, Quellen für die Kompilierung zu benötigen. Wir haben die aktuelle Dokumentation jedes großen AI-Builders und Coding-Agents geprüft, und das Prinzip ist bei allen identisch.

Wenn Sie eine Komponentenbibliothek und eine Dokumentationsseite pflegen, ist der Compiler von Bolt das richtige Werkzeug und der Team-Plan die richtige Wahl. Wenn Ihr Designsystem derzeit aus „dem besteht, was Bolt auf dem ersten Screen erstellt hat“, gibt es nichts zu kompilieren – in diesem Fall ist der Rest dieser Seite die praktische Lösung.

Bolt ist ein StackBlitz WebContainer. Das bedeutet, es wird eine echte Node-Umgebung mit einem echten Terminal im Browser ausgeführt. Fast kein anderes Tool in dieser Kategorie bietet das. Sie können Pakete installieren, Generatoren ausführen und Dateien schreiben. Ein Designsystem wird also exakt so installiert wie auf Ihrem eigenen Rechner – ohne Plan-Beschränkungen und ohne Kompilierungsschritt.

1. 1

   Sicherstellen, dass das Projekt shadcn/ui verwendet

   Die React + Tailwind Starter von Bolt funktionieren gut. Falls das Projekt noch nicht mit shadcn initialisiert wurde, führen Sie zuerst npx shadcn@latest init im Terminal von Bolt aus.

2. 2

   Token-Set installieren

   Führen Sie den Registry-Befehl des Kits im Terminal von Bolt aus. Dieser schreibt jede semantische Rolle für Light- und Dark-Mode in Ihr Theme, sodass Komponenten, die bereits auf bg-primary verweisen, ohne manuelle Bearbeitung aktualisiert werden.

   Copy

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

3. 3

   Brief ins Repo legen, nicht in den Chat

   Dies ist der Schritt, den viele überspringen. Die CLI schreibt eine vollständige DESIGN.md in das Projekt. So bleiben die Regeln auch bei einem neuen Chat, einem Reload oder wenn eine andere Person das Projekt öffnet, erhalten.

   Copy

   npx --yes identityforge@latest apply ambient-sage

4. 4

   Prompting auf Basis des Systems

   Builden Sie nun ganz normal und benennen Sie die Constraints in den ersten Versuchen explizit.

   Copy

   Build a landing page using only the theme's design tokens
   and the rules in DESIGN.md. Do not add a new colour or font.

Diese Frage kommt immer wieder auf, und der Impuls ist nachvollziehbar. Das Repo ist die Single Source of Truth, also sollte man den Agenten darauf verweisen. Zwei Dinge stehen dem jedoch im Weg.

Erstens ist es eine praktische Frage: Ein Repository ist kein Designsystem in einer Form, die ein Agent direkt anwenden kann. Es besteht aus tausenden Dateien, von denen die meisten für eine Styling-Entscheidung irrelevant sind. Die eigentlichen Regeln verteilen sich auf eine Tailwind-Konfiguration, einen Theme-Provider, einige CSS-Dateien und das kollektive Gedächtnis des Teams. Die Kompilierung existiert genau deshalb, weil jemand diese Informationen auf Tokens, einen Komponenten-Katalog und einen Satz von Constraints reduzieren muss.

Zweitens beantwortet ein Repo die Frage, *was existiert*, aber nicht, *was zu tun ist*. Es enthält einen Button mit fünf Varianten; es sagt jedoch nicht, welche Variante für eine destruktive Aktion zu verwenden ist, dass man niemals zwei Akzentfarben auf einem Screen platziert oder was im Dark-Mode auf einer Fläche passiert, für die es noch keine Dark-Variante gibt. Das sind Wertungen, sie stehen in Prosa. Wenn sie niemand aufgeschrieben hat, wird der Agent eigene Annahmen treffen: plausibel, aber jedes Mal anders.

Wir haben 299 öffentliche DESIGN.md-Dateien analysiert, um zu sehen, wie oft solche Wertungen tatsächlich schriftlich fixiert werden. 76 % listen nur Präferenzen und kein einziges Verbot auf. 69 % erwähnen den Dark-Mode überhaupt nicht. 86 % geben reine Hex-Werte ohne zugeordnete semantische Rolle an, was bedeutet, dass die Frage „Welche Farbe hat ein deaktivierter Button“ in der Datei gar keine Antwort findet.

Fazit: Verlinken Sie das Repo, sofern das Tool dies unterstützt, aber schreiben Sie die Regeln dennoch auf. Was eine vollständige Datei enthalten muss, finden Sie unter was eine DESIGN.md ist.

Wenn Sie den nativen Weg wählen und sich fragen, ob Sie Bolt ein npm-Paket, eine Ordnerstruktur oder einen Link zur Dokumentation geben sollen, ist die ehrliche Antwort, dass es vom jeweiligen Tool abhängt – und die Tools sind sich hier uneinig:

• Bolt kompiliert aus Ihrer Komponentenbibliothek und Ihrer Designsystem-Website und synchronisiert diese bei Änderungen neu.
• v0 benötigt ein installierbares Paket: npm, eine .tgz oder ein Quellverzeichnis mit eigener package.json; falls nicht vorhanden, wird aus weniger strukturierten Quellen eines erstellt.
• Lovable benötigt React-Komponenten, die als dediziertes Lovable-Projekt bereitgestellt werden, und kopiert diese in verbundene Repositories.
• Coding-Agenten benötigen weder noch: Sie benötigen eine Token-Datei und ein schriftliches Briefing direkt im Repo.

Das einzige Artefakt, das alle vier akzeptieren, ist das Paar, auf das sie ohnehin alle reduzieren: ein vollständiger Satz semantischer Tokens und die dazugehörigen schriftlichen Regeln. Die Erstellung dieser Dokumente kostet nichts, auch wenn Sie später ein Paket veröffentlichen, und es ist die einzige Version, die heute in einem kostenlosen Plan funktioniert.

Der Registry-Eintrag unter https://identityforge.io/r/<slug>.json enthält jede semantische Rolle. So muss Bolt die Werte, die eine einfache Palette undefiniert lässt, niemals improvisieren: gedämpfter Text, Rahmen, Hover- und Active-Zustände, Ring, Destructive, Chart-Serien und all dies erneut für den Dark-Mode. Die Übergabe von drei Markenfarben definiert drei Werte und lässt etwa fünfundzwanzig offen. Siehe Erklärung zu semantischen Farb-Tokens.

• Das Briefing im Chat belassen. Lange Builds kürzen den Kontext. Eine DESIGN.md im Projekt wird nicht gekürzt.
• Annehmen, dass ein vorinstalliertes System an die eigene Marke angepasst werden kann. Diese sind per Design schreibgeschützt.
• Nur synchronisieren, wenn etwas falsch aussieht. Zu diesem Zeitpunkt generiert Bolt bereits seit Wochen aus einem veralteten Snapshot.
• Bolt Farben ohne Rollen geben. Eine Palette kann nicht beantworten, wie ein deaktiviertes Steuerelement aussieht; Bolt entscheidet dies dann selbst – auf jedem Screen anders.
• Dark-Mode überspringen. Er ist keine bloße Invertierung von Light-Mode, und hier zeigt sich Improvisation zuerst.