Consistency Patterns
System design for visual and structural consistency in AI-generated UI.
Key takeaways
- Consistency in AI-generated UI comes from constraints across layout, spacing, typography, color, responsiveness, and empty states.
- Agents should pick the surface type first (dashboard, form, editor, docs, landing, game) and use the matching layout template.
- Enforce token-based spacing with no raw pixels, semantic color roles instead of hue guesses, and named text styles by surface.
- Two hard rules prevent drift: do not nest cards, and do not apply marketing composition to operational software.
- Review every generated screen at narrow mobile, tablet, desktop, and wide desktop for text fit, layout shift, and action distinction.
Consistency comes from constraints. Agents produce stable results when layout, spacing, responsive behavior, and visual hierarchy are defined as repeatable patterns.
Consistency Stack
| Area | Rule |
|---|---|
| Layout | Use approved grids and app-shell patterns. |
| Spacing | Use the token scale; no raw pixel values. |
| Typography | Use named text styles by surface type. |
| Color | Use semantic roles, not hue guesses. |
| Responsiveness | Define breakpoints and wrapping behavior. |
| Empty states | Provide standard structure and tone. |
Layout Rules for Agents
- Choose the surface type first: dashboard, form, editor, docs, landing, or game.
- Use the matching layout template.
- Keep tool surfaces dense and scannable.
- Do not put cards inside cards.
- Do not use marketing composition for operational software.
Responsive Checks
Every generated screen should be checked at:
- narrow mobile;
- tablet or split view;
- desktop;
- wide desktop when layout density matters.
Visual Review Questions
- Does the first viewport communicate the actual product or workflow?
- Does text fit inside buttons, labels, cards, and panels?
- Does the layout shift when data changes?
- Are primary, secondary, and destructive actions visually distinct?
- Are repeated elements aligned and consistently spaced?