Design Systems are simple to use but easy to misuse. A few small habits will get you noticeably better, more consistent results — and knowing the limits up front saves you from expecting things the system isn’t designed to do.
1. Stick to one Design System per project.
Each Design System is internally consistent — the colors work together, the type scale is cohesive, the spacing has rhythm. Mixing two Design Systems in one project is like mixing two templates: it can work, but you’ll spend more time reconciling conflicts than building. If you want variety, pick a Design System with enough range built in.
2. Tell the AI to follow the system, not just reference it.
There’s a difference between “here’s a design system” and “design this section following the attached design system.” The second phrasing produces noticeably better output. Be explicit. Reference the file in your prompts.
3. Start with one section, not a full page.
AI tools handle a single, well-scoped section much better than a full multi-section page. Build up piece by piece, iterate on each one, then assemble. Trying to one-shot a full page usually means generic spacing and weaker style adherence.
4. Re-attach the file in long sessions.
AI context can dilute over a long conversation. If output starts drifting — wrong colors, generic spacing, wrong voice — paste DESIGN.md back into the chat or remind the AI of the system explicitly. Fresh context fixes most drift problems.
5. Use Extended for the first session, Compact only if you need to.
Extended gives the AI the most context: full descriptions, role explanations, example prompts. Compact strips the prose down to essentials. Both contain the same tokens. Default to Extended; switch to Compact only if you’re hitting context limits or noticeable slowdowns.
6. Pair files when you can.
DESIGN.md tells the AI what to do. theme.css or variables.css tells your code what the values are. Giving the AI both — especially in tools like v0 or Lovable — means the generated code references the same tokens the AI is designing against. Less guesswork, cleaner output.
7. Treat the do’s and don’ts as real constraints.
The do’s and don’ts in each Design System aren’t fluff. They’re pulled directly from the template’s design rules — “don’t bold StackSans for headlines,” “anchor every page on Paper Cream.” Telling the AI to follow them improves output more than almost any other tweak.
Design Systems describe style, not licensing.
Downloading a Design System gives you the visual language of a template — colors, type scale, spacing, voice. It does not give you a license to redistribute the original template, copy its full structure, or resell its design. Use the system to build your own projects. If you want the full template, that’s what our Templates are for.
Design Systems don’t describe components.
The system tells the AI what colors, typography, and spacing to use. It doesn’t define specific components like a navbar, a pricing card, or a footer. Those are layout decisions you (or the AI) make on top of the system. If you want pre-built components in the same template’s style, use Sections, which work in Webflow, Figma, Framer and plain HTML.
Design systems do not import into Webflow or Framer.
If you build in Webflow, the route is to brief an AI with DESIGN.md and bring plain HTML in with the Converter, which is a starting point, not a perfect 1:1 translation. See From AI back to Webflow and the Converter documentation. There is no Framer route; use Sections there.
AI tool quality varies.
Some AI tools follow Design Systems more reliably than others. Claude and other large-context models tend to handle long style guides well. Smaller models and lighter-weight builders may need more reminding, more iteration, or shorter prompts. If results feel weak in one tool, try the same Design System in another — the file works the same in all of them.
Tokens are a snapshot.
A Design System reflects the template’s style at the moment it was generated. If we update a template, we’ll regenerate its Design System, but files you’ve already downloaded won’t update automatically. Re-download when you need the latest.
If you’ve read this far, you have everything you need to use Design Systems effectively. A few next steps depending on what you want to do:
We shape Design Systems based on how people actually use them. If something is missing, unclear, or could be better, let us know.
