Review AI-Generated UI for System Compliance

Workflow area: Design Systems · Tier: Core · Hands-on time: ~30 minutes

AI generation moved the quality problem. Hand-built screens fail visibly — misaligned, unfinished, obviously draft. Generated screens fail invisibly: a Button that is a rectangle with the right fill but no component provenance, a modal that follows Material defaults instead of your dialog pattern, a gray that is two points off your token. Each passes a glance; none survives a theme change, a component update, or a handoff. As generated UI becomes a normal input to your files — from First Draft, Make, v0, or a colleague's prompt — compliance review becomes a standing gate, like code review for contributions. And like code review, its highest-value output is not the catch — it is the feedback that stops the same violation from being generated again.

When to use — and when not to

• Use it before any generated frame enters a shared filethe moment look-alikes land in a working file, they start getting copied; review at the border, not after naturalization.
• Use it on Make and v0 output headed for engineeringgenerated implementations that ignore your tokens and components create silent divergence between design intent and build.
• Use it to grade your generation setupthe violation rate per generation is the metric for whether pb-38's restructuring and rules are actually working.
• Skip it for throwaway divergence fodderpb-04 concepts that will be harvested and redrawn on-system never need compliance; reviewing them is wasted rigor.
• Skip the deep pass when the frame fails at a glanceif the layout is wrong, reject and re-prompt; compliance review is for output good enough to be dangerous.

The recipe

1. 1.

   Establish provenance first — is anything real? Select through the generated frame in Figma. Real library components show instance links; look-alikes are loose frames and rectangles wearing component styling. In Dev Mode, real instances resolve to Code Connect mappings and tokens; look-alikes resolve to raw values. Two minutes of clicking sorts the frame into instances, look-alikes, and custom layout — the rest of the review only concerns the last two.

2. 2.

   Run the four-layer checklist. Work through it in order; each layer catches what the previous one cannot:

   Copy

   COMPLIANCE CHECKLIST — generated UI
   1. TOKENS: every fill, stroke, text style and radius bound to a
      library token/variable — no raw hex, no off-scale spacing.
   2. PROVENANCE: every element that looks like a system component
      IS one — an instance from the library, correct variant, not
      detached, not a look-alike rebuild.
   3. PATTERNS: interactions follow OUR conventions — dialog anatomy,
      form validation placement, empty-state structure, navigation
      idioms — not the generic platform defaults models emit.
   4. A11Y BASICS: contrast on all text and controls, target sizes,
      visible focus order, labels on every input, headings in order.
   

3. 3.

   Let a model pre-screen against the checklist, then verify. Screenshot the generated frame next to reference shots of the real components and paste your pattern rules:

   Copy

   Review this generated screen against our design system.
   Attached: the generated frame; reference shots of our Button,
   Input, Dialog components; our pattern rules below.
   [PASTE 5-10 PATTERN RULES, e.g. "primary action right-aligned in
   dialogs", "inline validation below field, not toast"]
   
   List every deviation: element, what the system expects, what the
   generation did. Check colors and type against these tokens:
   [PASTE TOKEN VALUES]. Flag look-alike suspicion where styling
   matches but structure differs. Do not praise. If compliant, say
   compliant per item — do not invent violations.
   

   The model catches pattern and visual deviations fast, but it cannot see Figma's instance data — provenance (layer 2) stays a hand check. Verify each flagged item; vision models misjudge close colors in screenshots.

4. 4.

   Triage: replace, rebind, or reject. Look-alikes get replaced with real instances — swap, don't restyle, because a corrected look-alike is still an orphan. Off-token values on legitimate custom layout get rebound to tokens. Pattern violations get rebuilt to convention. If replacing and rebinding touches most of the frame, reject it: regenerating with better rules is cheaper than renovating a look-alike slum.

5. 5.

   Feed every violation back into the generation rules. This is the step that compounds. Each violation class becomes a line in your generation-rules file (pb-38) or your prompt templates: "Use the Dialog component from the library — never construct modals from frames"; "All grays come from the text-and-surface token set." Log the violation rate per generation session; the trendline tells you whether your system is becoming machine-legible or your prompts are just getting longer.

Make it yours

• Team review ritual: make compliance review the merge gate for any generated contribution to shared files — a 10-minute pairing where the generator walks the checklist with a system steward; violations become rules in the moment.
• Dev Mode as the enforcement surface: for engineering-bound frames, review in Dev Mode itself — if an element inspects to raw values instead of tokens and Code Connect snippets, it fails, regardless of how it looks on canvas.
• Violation library as teaching material: screenshot the best catches — the convincing look-alike Button, the Material-default dialog — into a "spot the fake" page; it trains new designers' eyes faster than any written rule.

Quality check

• Provenance was checked by hand in Figmascreenshots cannot reveal instance links; a review done entirely on images skipped the layer where look-alikes hide.
• Every look-alike was replaced, not restyleda styled fake still misses every future component update; only real instances stay current.
• Custom layout earned its existenceanything neither instance nor candidate for one has a reason in a comment, or it is drift being born.
• The model's findings were verifiedits color and contrast judgments from screenshots got confirmed against actual token values before anyone acted.
• At least one rule was added or sharpeneda review that catches violations without updating the generation rules will catch the same violations forever.