Why Lovable needs a design system
Lovable is great at turning a prompt into a working app, but its default look is generic and it drifts as the app grows: each new feature is a new styling decision. Because it uses Tailwind and shadcn, it can build against a real token set and follow written rules; you just have to make those rules persistent so they apply to every generation, not only the one where you mentioned them.
The kit you'll give it
After Work Chill
Double tap on a widget to edit settings
Plus Jakarta Sans · 28 semantic tokens · light + dark
Give Lovable the kit
- 1
Put the DESIGN.md in project Knowledge
Open the kit's page in the gallery (for example, /kits/ambient-sage), copy its DESIGN.md, and paste it into Project settings > Knowledge. Lovable keeps Project Knowledge as persistent context for later generations.
- 2
Connect to GitHub and apply the tokens
Use Lovable's GitHub integration, then in the connected repo run the kit's registry command to install its CSS variables into the shadcn theme:
npx shadcn add https://identityforge.io/r/ambient-sage.json - 3
Or paste the CSS variables in the chat
Prefer to stay in Lovable? Copy the kit's CSS-variable export from its kit page and ask Lovable to set your global stylesheet's
:rootand.darkto exactly those values. - 4
Build on the system
Prompt as usual; Lovable now themes with your tokens and obeys the DESIGN.md in Knowledge.
Add a dashboard. Use the design tokens and follow the DESIGN.md in Project Knowledge. Do not add new colors or fonts.
Knowledge is what makes it stick
The single most common reason an AI builder ignores your design system is that the rules were mentioned once and forgotten. Putting the DESIGN.md in Lovable's Knowledge makes it a permanent instruction, so consistency holds as the app grows.
One URL, the whole theme
Every public kit exposes a stable shadcn registry item at https://identityforge.io/r/<slug>.json. That URL carries all 28 semantic roles in light and dark, so Lovable never has to improvise hover states, muted text, borders, or chart colors. See semantic color tokens explained for what those roles are and why they matter.
The same approach works in v0 and Bolt. For terminal-based coding agents, see the pillar guide.
FAQ
How do I give Lovable a design system?
Paste the kit's DESIGN.md into Lovable's project Knowledge so it applies to every prompt, then apply the kit's tokens: either run `npx shadcn add https://identityforge.io/r/<slug>.json` in the GitHub-connected repo, or paste the kit's CSS variables into the project stylesheet.
Why put the DESIGN.md in Knowledge instead of a prompt?
Knowledge is standing context that applies to every generation. A one-off prompt is forgotten on the next message, which is why builders drift off-brand. Knowledge keeps the design rules in force as the app grows.
Do I need to connect GitHub?
Only for the `shadcn add` path. You can instead paste the kit's exported CSS variables directly and ask Lovable to set the global stylesheet to those values.