Clarify Your Design System Rules Before Adopting AI
1. AI replicates the gaps in your system faster, too
Faster generation does not reduce total work time if review and corrections increase.
- Undocumented exceptions and duplicate components can also become patterns for AI to follow.
- It may treat a temporary style as a standard or regard differently named versions of the same component as separate components.
- For AI to distinguish rules from exceptions, intended use and constraints must be explicit in the documentation.
- If gaps that people fill through experience remain, the same ambiguity carries into generated output.
2. Assess readiness against five criteria
Use your component inventory and token definitions to identify issues to resolve before generation.
- Completeness: Are the required states, sizes, variants, and edge cases defined?
- Reliability: Are accessibility and responsive behavior predictable and consistent?
- Consistency: Is the system free of duplicate components serving the same role or conflicting names?
- Extensibility: Can you add variants, themes, and brands without knowing hidden exceptions?
- Machine-readability: Can AI follow the usage rules from documentation alone, without knowing your team's internal context?
3. Provide context before generation and verify afterward
Prepare a short context pack—a set of usage rules for AI to reference for each component.
- What to include: Purpose, variants, sizes, tokens, states, and forbidden combinations
- For example, explicitly prohibit ordinary primary-button styling for destructive actions such as deletion.
- Figma Make: Provide real components and usage examples, and organize the structure of the Figma file.
- Name layers and components by role, and variables by purpose, such as `color/surface/primary`.
- Apply auto layout and distinguish what can change from what must remain intact.
- Claude: Supply the rules at the start of the task and ask it to flag undefined areas instead of guessing.
- Have it review its output against the same checklist before a person makes the final check.
- Before release: Review token usage, spacing rules, required states, text contrast, duplication, naming conventions, and documentation updates.
4. Start small at your system's level of readiness
The article proposes scoring each of the five criteria from 1 to 5 and using the average to set the scope of experimentation.
- 1–2: Audit and document the system before generating components.
- 3: Test the generation of new, low-stakes components using a context pack.
- 4–5: Pilot generative UI in low-impact flows, with human review.
- Define the duration, owner, success criteria, AI's scope, and rollback approach for each experiment.
- The score is a reference for choosing a starting point; actual quality still requires separate verification.
