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›Context Injection
한국어English

Context Injection

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

Key takeaways

  • Context injection layers persistent repo instructions, design intent, component docs, tool context, and prompt context for the agent.
  • Keep stable rules in auto-loaded files, large references searchable, and mention only relevant components for narrow tasks.
  • A context budget gives the smallest set that prevents the most likely mistake, scaling from a tiny task up to a system migration.
  • Use MCP tools when freshness matters and repository files when repeatability matters; each context type has its own staleness or availability risk.
  • A responsibility map keeps AGENTS.md, CLAUDE.md, DESIGN.md, component MDX, and registry metadata each owning a distinct slice of context.

Agents cannot use a design system they cannot see. Context injection is the practice of giving the agent the right mix of durable instructions, local docs, tool data, and task-specific examples.

Context Layers

LayerExampleUse
Persistent repo instructionsAGENTS.md, CLAUDE.mdStable engineering and design rules.
Design intentDESIGN.mdBrand feel, layout rules, forbidden patterns.
Component docsMDX, Storybook, registry metadataAPI and composition details.
Tool contextFigma MCP, screenshots, design tokensCurrent design source.
Prompt contextUser request and mentioned filesTask-specific intent.

Injection Strategy

  1. Keep stable rules in files the agent loads automatically.
  2. Keep large references searchable rather than always injected.
  3. Mention only relevant components for narrow tasks.
  4. Use MCP for live design data when source-of-truth freshness matters.
  5. Ask for evidence when the agent makes design decisions.

Context Budget

More context is not always better. Give the agent the smallest set that can prevent the most likely mistake.

Budget tierInclude
Tiny taskUser request, one file, one component spec, verification command.
Component changeComponent spec, token rules, examples, tests, accessibility contract.
Screen changeDESIGN.md, relevant component specs, screenshot target, route, responsive rules.
System migrationToken architecture, registry metadata, migration plan, governance rules, test strategy.

File Context vs MCP Context

Context typeBest forRisk
Repository filesStable rules, APIs, ownership, commands, quality gates.Can go stale if not maintained.
MCP toolsLive design frames, variables, screenshots, external system state.Can be unavailable, partial, or beta.
User promptImmediate intent and task constraints.Often underspecified.
Generated summaryLong-running work and handoff state.May omit details that matter for UI.

Use MCP when freshness matters. Use repository files when repeatability matters.

Responsibility Map

FileOwns
AGENTS.mdEngineering workflow, commands, repo conventions, verification expectations.
CLAUDE.mdClaude-specific work style and project memory when the team uses Claude Code.
DESIGN.mdProduct feel, layout philosophy, density, visual rules, forbidden patterns.
Component MDXProps, slots, states, accessibility, examples, anti-patterns.
Registry metadataMachine-readable component availability, dependencies, and installation paths.

Example Agent Instruction

Before creating UI:
- Read DESIGN.md for product feel and layout rules.
- Use existing components from packages/ui.
- Do not invent tokens or variants.
- Run typecheck and a responsive screenshot check for meaningful UI changes.

Context Packet Template

Relevant files:
- DESIGN.md
- packages/ui/src/button.tsx
- content/docs/components/button.mdx

Task constraints:
- Surface type:
- Density:
- Allowed components:
- Forbidden patterns:
- Token rules:
- Accessibility requirements:
- Verification command:

Expected response:
- Implementation summary
- Verification evidence
- Missing context or design-system gaps

Failure Modes

FailureFix
Agent ignores DSMake component docs discoverable and mention relevant files.
Agent invents tokensAdd explicit token prohibition and validation.
Agent overuses cardsPut card rules in DESIGN.md and review screenshots.
Agent misses accessibilityMove accessibility into primitives and tests.

Verification

  • Confirm the generated code imports approved components.
  • Search for raw color, spacing, or font values.
  • Run screenshot checks at desktop and mobile widths.
  • Document any missing context the agent asked for.

Related docs

Prompt Interface

Documentation strategies that help AI choose and use the design system correctly.

Execution Playbook

The minimum path for launching an AI-first design system quickly.

Cmd. /mention

Codex Command Master · Attach a file or path to the conversation.

Mastering CLAUDE.md

Claude Code Complete Guide · Design project memory that Claude Code can actually follow.

Context Management: The New Core Skill

Developer Unlearning · Decide what AI needs to know, what to omit, and when to reset context.

AI-Based Design System Evolution

Use AI to build, audit, and evolve the design system itself.

Consistency Patterns

System design for visual and structural consistency in AI-generated UI.

On this page

Context LayersInjection StrategyContext BudgetFile Context vs MCP ContextResponsibility MapExample Agent InstructionContext Packet TemplateFailure ModesVerification