I Asked AI to Build a Design System. It Broke Its Own Rules in One Prompt.

Design systems exist to keep products consistent. So what happens when the system and the product are both AI-generated, in the same session.... by the same tool?

I ran a three-prompt experiment in Figma Make. Generated a design system. Expanded it. Then asked it to build a dashboard using the system it just created.

The AI broke its own rules immediately.

Prompt 1: "Generate a design system for a SaaS product"

Figma Make returned a full page. Color palette, typography scale, buttons with six variants, form elements, feedback components, stats cards. Looked comprehensive.

Then I actually looked at it:

• 4 colors total. Primary, Secondary, Muted, Accent. No text colors, no borders, no hover states.
• Every heading is Medium weight. H1 through H4, all at 500. No Bold anywhere. Your visual hierarchy is flat before you build a single page.
• Same 1.5 line-height on everything. A 32px heading with 1.5 line-height creates 48px of spacing. Headings need 1.1-1.2. This is a readability problem.
• Zero spacing tokens. No 4/8/16/24px scale. Nothing.
• No interactive states. Buttons in resting state only. No hover, focus, active, or disabled.

Kinda looks complete until you try to build with it.

Prompt 2: Make It Real

I asked for the gaps to be filled:

"Expand this design system to include: a full color palette with text, border, and background colors. Spacing scale from 4px to 64px. Elevation/shadow tokens. Dark mode palette. Hover, focus, and active states for all interactive components. Border radius tokens."

Figma Make delivered the structure I asked for. Spacing bars, border radius examples, elevation scale, interactive states, a Token Reference table, even an Implementation Guide with code snippets.

But on publish, the color palette section broke. Background swatches rendered invisible. The section defining the foundation of the system couldn't display its implemented values on the published site.

Prompt 3: "Build me a dashboard using this design system"

Full dashboard appeared. Sidebar nav, four stats cards, revenue chart, donut chart, transactions table, top products list.

It also reused the exact same placeholder numbers from the design system's stats cards which makes sense.

The Audit: System vs. Dashboard

I opened the element inspector on the published dashboard and started clicking.

Colors it invented

• Stats card icon backgrounds: Pastel blue, green, peach circles which weren't in the palette.
• Chart gradient: Purple-to-pink fill. The system defines purple as Primary but didn't define a gradient or pink.
• Donut chart: Four new colors (dark purple, blue, coral, gold), none from the palette.
• Status badges: Green "completed" and orange "pending." The system has Success/Warning colors in feedback components, but the dashboard used different values.

Typography it ignored

System says every heading is Medium (500). Dashboard stats ($84,392, 12,483) render as Bold or Semibold. Section headers like "Revenue Overview" are heavier too. The AI promoted weights without updating the design system.

Components it made up

Sidebar nav, data table, charts, search bar. None existed in the design system which I guess is okay since youre asking it to build an entirely new dashboard.

One element, four violations

I clicked the "completed" badge in the transactions table. Here's what the inspector found:

Element: .completed badge (79 x 22px)

font-family: ui-sans-serif        ← system font, not the defined font
background:  #10B981 (--chart-5)  ← chart token used as status color
color:       #FFFFFF (no token)   ← hardcoded white, no system reference
padding:     2px 8px              ← 2px not in the 4px spacing scale

A chart color used as a status color. A system font instead of the custom font. Hardcoded white with no token. A spacing value the system never defined. One badge, four ways it ignored the design system.

The details

The chart subtitle ("Revenue vs Expenses over the last 7 months") used --muted-foreground correctly. That token maps to #64748B and it's properly referenced.

So the AI sometimes uses its own tokens and sometimes ignores them. It has access to the system, it just doesn't consistently follow it.

The missing icon

Four identical stats cards. Three have icons. Active Users has none. The AI forgot to render an icon in one of four identical cards, which I totally would have missed on first glance.

Design Drift

Traditional design system drift usually happens over months. A designer introduces new elements outside the design system or a developer uses #3366FF instead of var(--primary).

AI design system drift is different as it can happen in one session, between two prompts, by the same tool and in the same chat window.

Design System Enforcement

The AI generated a Token Reference table and Implementation Guide, documented how to use the tokens and then it built a product that ignores most of its own rules.

If you're using AI to generate design systems or product pages, the output needs verification against the system. Element-level inspection that checks computed CSS values against defined tokens, automated checks and general deep scan review to reduce design debt from compounding one prompt after another.

---

A version of this post was originally published on overlayqa.com/blog/ai-design-system-drift. I used OverlayQA's element inspector to capture the CSS values shown in this article.