Why isn't saying "use our Design System" enough?
Because the AI doesn't know what is in your system. Without concrete tokens and a component list, it falls back on the most common patterns from its training data: hard-coded color codes and pixel values, generic components, and plausible variants your library doesn't have.
To you, "design system" means a whole set of rules; to the AI it is only a name. To make it comply, the rules themselves have to be pasted in.
How long should a primer be, and what should go in it?
As short as possible while covering where the AI most often strays: the spacing scale, the color palette (including the primary color Token), the font, the list of available components, and two or three hard rules (for example, use tokens, not raw values).
One page is usually enough. Longer material (typography rules, tone, edge cases) should be supplied in tiers and added only for complex or entirely new designs.
Does the self-check line actually work?
Both guides I found recommend it, but neither gives quantified before-and-after data, so I can't promise how much it helps. The logic is simple: asking the AI to list deviations brings non-conforming values to the surface, so you don't have to compare item by item.
It doesn't replace your own acceptance check. The AI's check on its own output can also be wrong, so treat it as the first filter, not the last.
If I use Figma, what else do I need to do?
The prompt only governs the generation stage. Once you're in the design file, check that layers are really bound to Token variables, and reject raw hex codes and arbitrary spacing; map each AI-generated element to an existing component, and treat anything unmappable as a gap to resolve by either adding a component or changing the design.
If an AI tool reads your file through Figma MCP, note that it reflects only what is actually in the file: inconsistent variables or unstructured components carry straight into the output.
Writing "design a pricing page using our Design System" in a prompt usually gets you a screen that looks close but doesn't match in the details. LogRocket's example is typical: the system defines only 16px and 24px spacing, and the AI delivers padding of 18px and 48px. Nothing looks badly wrong, but every such deviation has to be found and corrected by someone later.
The aiuxplayground guide lists the usual ways this goes wrong: output with hard-coded values like padding: 16px and color: #333 instead of your tokens; generic components that drift from your system when no system context is given; mixed naming (btn-primary alongside ButtonPrimary) that makes the AI pick one or blend them; and, as LogRocket warns, plausible-sounding variants that don't exist in your library, such as a "secondary outline button with an icon."
Adjectives like "modern and clean" don't help; concrete rules do. LogRocket's advice is to replace adjectives with checkable conditions, for example "24px vertical rhythm, a maximum of three font sizes, cards with 16px padding and an 8px border radius."
The approach is to condense your design system's essentials into a fixed Block of text and paste it before each generation. Below is a version built from the values in LogRocket's example (an 8px spacing scale, a primary color of #2563EB, Inter as the font, and a limited component list). Adapt it to your own:
You are designing within our design system. Use ONLY the elements below. Anything not listed must be flagged as "a custom element that needs design system approval."Spacing scale: 8px increments (tokens: space-8, space-16, space-24 ...) Primary button color: #2563EB (Token: color-action-primary) Font: Inter Components: Card, Button (primary / secondary), Badge, H1-H4
Rules:
Then write the task, for example: "Using our design system above, create a settings card component with a title, a description and a toggle." Two points matter. First, anything outside the list has to be flagged by the AI as a custom element needing approval, so newly invented things can't slip in quietly. Second, the last line is a self-check: it asks the AI to verify that all spacing values sit in the scale and to list any deviations.
Both guides recommend giving tokens as structured data such as JSON rather than describing them in prose. The amount can be tiered: for ordinary requests supply only the spacing scale, color palette and available components; for more complex work add typography rules and tone guidance; keep full documentation for entirely new designs that need edge cases and interaction patterns.
Two details that are easy to miss: keep a single naming convention so the AI doesn't have to guess, and ask the AI to map every generated element to an existing component, because anything it can't map is a gap you need to deal with first. If you use Figma, also check that layers are actually bound to token variables rather than raw hex codes or arbitrary spacing.
What the primer saves is retries. Each time you rerun because spacing doesn't match or a component was invented, you spend more of your allowance (the way allowances are counted varies by tool, but it does get consumed). Spend half an hour on two things: write your most-used design system rules into a one-page primer, and over the next week record how many generations were usable as they were and how many had to be redone, with and without the primer.
Remember the primer needs maintenance too. Neither guide provides quantified before-and-after data; the only figure in LogRocket is an anecdote about generating three concepts in under five minutes, so I can't tell you how much it will save. That number has to come from your own records.