Skip to main content
reopt Handbook
reopt Handbook
Design Systems for the AI Era

Foundation

Token ArchitectureComponent SpecBuilt-in Accessibility

AI Workflow

Prompt InterfaceDESIGN.md InterfaceAgentic Design Quality ControlWorkflow StrategiesAI-Based Design System EvolutionContext Injection

User Experience

Consistency PatternsInteraction DesignForms and Data Input

Next Interfaces

Agent UI ProtocolsGenerative UISpatial and Multimodal Interfaces

Practice

Execution PlaybookMigration StrategyGovernance and CollaborationCase Studies

Operations

Verification ChecklistUpdate Log
Handbook›Design Systems for the AI Era›Consistency Patterns
한국어English

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

AreaRule
LayoutUse approved grids and app-shell patterns.
SpacingUse the token scale; no raw pixel values.
TypographyUse named text styles by surface type.
ColorUse semantic roles, not hue guesses.
ResponsivenessDefine breakpoints and wrapping behavior.
Empty statesProvide standard structure and tone.

Layout Rules for Agents

  1. Choose the surface type first: dashboard, form, editor, docs, landing, or game.
  2. Use the matching layout template.
  3. Keep tool surfaces dense and scannable.
  4. Do not put cards inside cards.
  5. 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?

Related docs

Agentic Design Quality Control

Control generic AI UI tendencies with context, critique loops, and evaluation gates.

Component Spec

Component schemas that AI can interpret and generate accurately.

Cmd. /color

Claude Code Command Master · Set the current session prompt-bar color.

Cmd. /desktop

Claude Code Command Master · Continue the session in Claude Code Desktop (/app).

Codex App and IDE

Advanced Codex Usage · Use Codex across the app, terminal, and IDE without losing context discipline.

Context Injection

Deliver the right design-system context to AI agents at the right time.

Interaction Design

Tokenize state feedback, microinteractions, and motion behavior.

On this page

Consistency StackLayout Rules for AgentsResponsive ChecksVisual Review Questions