Warum Lovable ein Designsystem benötigt
Lovable ist hervorragend darin, einen Prompt in eine funktionierende App zu verwandeln, aber das Standard-Aussehen ist generisch und es kommt zu Drift, während die App wächst: Jedes neue Feature führt zu einer neuen Styling-Entscheidung. Da Lovable Tailwind und shadcn nutzt, kann es auf Basis eines echten Token-Sets bauen und schriftliche Regeln befolgen; Sie müssen diese Regeln lediglich persistent machen, damit sie für jede Generation gelten und nicht nur für diejenige, in der Sie sie erwähnt haben.
Das Kit, das Sie verwenden
Mauve Broadcast
Live renderRendered from the kit's actual tokens, fonts, and treatments
Typography
Anton + Space Mono
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Lovable das Kit geben
- 1
Die DESIGN.md in die Project Knowledge legen
Öffnen Sie die Seite des Kits in der Galerie (zum Beispiel /kits/ambient-sage), kopieren Sie die regelbasierten Teile der DESIGN.md (Intention, Motive, Do's und Don'ts, Komponenten-Behandlungen) in die Project settings > Knowledge. Die Knowledge ist auf 10.000 Zeichen begrenzt und eine vollständige Kit-DESIGN.md ist fast dreimal so lang; kopieren Sie daher nur die Regeln und überlassen Sie die exakten Token-Werte der Installation über die Registry im nächsten Schritt. Lovable behält die Knowledge als persistenten Kontext für jede Generation bei.
- 2
Mit GitHub verbinden und Tokens anwenden
Nutzen Sie die GitHub-Integration von Lovable und führen Sie dann im verbundenen Repo den Registry-Befehl des Kits aus, um die CSS-Variablen in das shadcn-Theme zu installieren:
npx shadcn add https://identityforge.io/r/ambient-sage.json - 3
Oder die CSS-Variablen im Chat einfügen
Möchten Sie lieber in Lovable bleiben? Kopieren Sie den Export der CSS-Variablen von der Kit-Seite und bitten Sie Lovable,
:rootund.darkIhres globalen Stylesheets exakt auf diese Werte zu setzen. - 4
Auf Basis des Systems bauen
Prompten Sie wie gewohnt; Lovable gestaltet nun mit Ihren Tokens und befolgt die DESIGN.md in der Knowledge.
Add a dashboard. Use the design tokens and follow the DESIGN.md in Project Knowledge. Do not add new colors or fonts.
Eigene Design-Features von Lovable
Lovable bietet zudem nützliche Primitiven: Skills (On-Demand-Playbooks, die der Coding-Agent auf passende Aufgaben anwendet), Design Guidance (Auswahl aus Design-Vorschauen vor dem Build) und in Enterprise-Plänen native Designsystem-Projekte, die Tokens und Komponenten in konsumierende Apps pushen. Knowledge plus Registry bleibt der planunabhängige Weg und hält Ihre Tokens über alle verwendeten Tools hinweg identisch.
Knowledge sorgt für Beständigkeit
Der häufigste Grund, warum ein AI-Builder Ihr Designsystem ignoriert, ist, dass die Regeln einmal erwähnt und dann vergessen wurden. Das Hinterlegen der Design-Regeln in der Knowledge von Lovable macht sie zu einer permanenten Anweisung, sodass die Konsistenz auch beim Wachstum der App erhalten bleibt.
Eine URL, das gesamte Theme
Jedes öffentliche Kit stellt einen stabilen shadcn-Registry-Eintrag unter https://identityforge.io/r/<slug>.json bereit. Diese URL enthält alle 28 semantischen Rollen für Light- und Dark-Mode, sodass Lovable niemals Hover-Zustände, gedämpften Text, Rahmen oder Diagrammfarben improvisieren muss. Informationen darüber, was diese Rollen sind und warum sie wichtig sind, finden Sie unter Erklärung der semantischen Farb-Tokens.
Der gleiche Ansatz funktioniert in v0 und Bolt. Für terminalbasierte Coding-Agents lesen Sie bitte den Pillar Guide.
FAQ
Wie gebe ich Lovable ein Designsystem?
Legen Sie die Design-Regeln des Kits in die Project Knowledge von Lovable, damit sie für jeden Prompt gelten (die Knowledge ist auf 10.000 Zeichen begrenzt, kopieren Sie daher nur die Regel-Abschnitte, nicht die gesamte Datei), und wenden Sie dann die Tokens des Kits an: Führen Sie entweder npx shadcn add https://identityforge.io/r/<slug>.json im GitHub-verbundenen Repo aus oder fügen Sie die CSS-Variablen des Kits in das Projekt-Stylesheet ein.
Warum die DESIGN.md in die Knowledge legen und nicht in einen Prompt?
Knowledge ist ein ständiger Kontext, der für jede Generation gilt. Ein einmaliger Prompt wird bei der nächsten Nachricht vergessen, weshalb Builder oft vom Markenstil abweichen (Drift). Knowledge hält die Design-Regeln während des Wachstums der App aufrecht.
Muss ich GitHub verbinden?
Nur für den Weg über shadcn add. Alternativ können Sie die exportierten CSS-Variablen des Kits direkt einfügen und Lovable bitten, das globale Stylesheet auf diese Werte zu setzen.
Quellen
- Knowledge - Lovable Docs: Knowledge bietet persistente Anweisungen pro Projekt oder Workspace, die unter Project settings > Knowledge mit einem Limit von 10.000 Zeichen hinterlegt werden können.
- Designsysteme - Lovable Docs: Lovable bietet in Enterprise-Plänen native Designsystem-Projekte an, die Tokens und Komponenten in die konsumierenden Projekte übertragen.
Quellen
- Knowledge - Lovable Docs: Knowledge bietet persistente Anweisungen pro Projekt oder Workspace, die unter Project settings > Knowledge mit einem Limit von 10.000 Zeichen hinterlegt werden können.
- Design systems - Lovable Docs: Lovable bietet in Enterprise-Plänen native Designsystem-Projekte an, die Tokens und Komponenten in die konsumierenden Projekte übertragen.