Design system for AI agents: preparation and implementation

Preparing a design system for AI agents involves turning static visual elements into structured, named data and clear rules that artificial intelligence can understand and use. This enables AI to generate designs that match the brand, functionality, and accessibility requirements, reducing the need for manual intervention.

How do AI agents interpret design systems?

AI agents need clearly defined data to work effectively. Unlike people, who can intuitively understand visual cues and context, AI requires structured information. A design system becomes the language designers use to communicate with AI, giving it the necessary “building blocks” and rules for using them.

Why are design tokens the foundation for AI?

Design tokens are the atomic units of visual language: colors, typography, spacing, radii, shadows, animation. Giving them names, such as color.primary.600 or space.4, allows AI to identify and apply design elements precisely. AI tools can work reliably with named values, unlike trying to analyze palettes from screenshots, which often leads to inaccuracies.

• Token purposes:

  • Color: color.background.default, color.text.primary;
  • Typography: font.family.heading, font.size.body;
  • Spacing: space.xs, space.md;
  • Radius: radius.sm, radius.lg;
  • Shadows: shadow.medium;
  • Motion: motion.duration.fast.

• Token organization:

  • Primitive tokens: Base values (for example, a specific shade of gray #CCCCCC).
  • Semantic tokens: Describe purpose (for example, color.border.disabled, color.background.interactive).

Organizing tokens into primitive and semantic layers provides flexibility and scalability. Semantic tokens bind primitive values to a specific usage context, making it easy to change the brand’s look by updating only the primitive tokens. Synchronizing tokens between design files (for example, Figma Variables) and code (CSS variables) is critical for maintaining consistency.

How should components be structured for AI agents?

Component structure should be intuitive for both designers and AI. This means using consistent naming, expressing variations through variants rather than separate copies, and building with Auto Layout for structural clarity.

• Naming: Use clear, universal names for components and their variations that match their role (for example, Button, TextField, Card).
• Variants: Represent different states (hover, focus, disabled, loading) and properties (size, color, shape) of a component as variants within a single master component, not as separate copies. This allows AI to choose the right variant instead of creating a new one.
• Structure: Use Auto Layout in Figma to define explicit relationships between elements inside a component. This helps AI understand the internal logic and spacing.
• Completeness: Include all possible component states (hover, focus, disabled, loading, error, empty). If a state is not defined, AI may invent it, which will lead to design inconsistencies.
• Avoiding overrides: Do not create unique, one-off component overrides, as this hides the real component and its variants from AI.

How do you connect design components with code?

Tools like Figma’s Code Connect allow you to map each design component to its code equivalent. When an AI agent reads a design through Figma MCP (Multi-Component Platform), it knows which component in the codebase should be used instead of trying to build it from scratch.

• Connection automation: Tools that map design components to their code representation are essential. They allow AI to “see” and use existing components.
• Keeping it current: The link between design and code must stay up to date. Regularly refresh component maps when they change.
• Testing: Check the connection by asking the AI agent to build a screen or feature. This helps reveal discrepancies.

How do you write rules for AI agents?

Rules should be accessible to AI, stored where it can easily read them. These can be Markdown files in the repository or dedicated sections in design system documentation.

• Storage location:

  • Code repository (for example, CLAUDE.md, AGENTS.md).
  • Figma (in dedicated component sets or documentation).
  • Documentation sites (text pages).

• Format:

  • Use short, specific rules.

  • Provide “do” and “do not” examples in text form, not only visually.

  • Example rule:
    markdown

    UI Rules

    • Components are imported from @/components/ui. Never create buttons, input fields, or dialogs from scratch.
    • Colors, spacing, radii, and typography use tokens from src/styles/tokens.css.
    • No “raw” hex, rgb, or px values in components.
    • If the design system does not include what is needed, stop and ask. Do not create a one-off solution.

How can you make an existing design system AI-ready?

Moving toward AI readiness requires auditing and refining the existing system.

1. Audit and tokenize hard-coded values

• Finding them: Review design files and code for colors, sizes, and spacing that are not tied to design tokens. These are “hard-coded” values.
• Tokenization: Replace these values with named tokens in both design and code. This is the foundation for consistent AI-driven styling.

2. Clean up and expand components

• Merge duplicates: Find and merge components that duplicate functionality or appearance.
• Add states: Make sure all components have defined states (hover, focus, disabled, error).
• Use variants: Instead of separate components for different sizes or colors, use a variant system.

3. Map design to code

• Connection: Establish a clear link between each design component and its corresponding code equivalent.
• Automation: Use tools that simplify this mapping and keep it up to date.

4. Turn rules into text

• Documentation: Instead of complex diagrams or long descriptions, convert the design system’s key recommendations into short, clear text files (for example, in Markdown format).
• Accessibility: Store these files where AI agents can easily find them (repository, documentation).

5. Test with AI tools

• Practical validation: Use AI tools (for example, Figma Make, code agents) to create screens or prototypes based on your prepared design system.
• Review results: Carefully review the outputs to identify discrepancies, inconsistencies, or mistakes AI may have made because of unclear rules or data.

How does AI help understand user “intent”?

AI can help understand user intent, but this requires proper task framing and context. AI cannot “feel” or “guess” intent the way a person can.

1. Clarifying requirements through dialogue

• Questions from AI: AI can ask the user clarifying questions to help them better formulate their needs. This is especially useful when the user does not fully understand what they want.
• Iterative refinement: Instead of expecting a complete and precise task on the first try, the process should be iterative, allowing the user to gradually refine their requirements.

2. Comparing options

• Visual choice: If the user cannot clearly describe their preferences, AI can offer several design options. By comparing them, the user becomes more aware of their preferences.
• Feedback: Giving users a chance to compare different solutions helps avoid situations where AI generates something that is far from expectations.

3. Feedback on specific elements

• Selective feedback: The ability to point to a specific part of the screen and provide feedback (for example, “change the color of this button”) allows AI and the user to “talk about the same thing.”
• Contextuality: This ensures AI understands which exact element the instructions apply to.

4. Visual expression of intent

• Sketches: Users can draw sketches or create simple visual prototypes to communicate their ideas.
• Rapid iteration: A fast cycle of generation and review (streaming) allows the user to adjust the design direction in real time.

What context does AI need for design?

AI needs a broad range of information to generate designs successfully.

1. Knowledge management for AI

• General principles: Design systems, accessibility standards, brand guidelines. These are the “baseline knowledge” AI should always have access to.
• Project-specific requirements: Specific tasks, constraints, and the target audience of the project. This data is provided as needed.
• Current context: Active conversations, changes on the screen, recent instructions. This is temporary information that is relevant to a specific session.

AI effectiveness depends not on the volume of data, but on the ability to select the right knowledge at the right moment.

2. Using real products as references

• Value of references: Instead of verbal descriptions, showing similar screens or components from a real product is a much more effective way to communicate the desired result.
• Automated collection: Systems that automatically collect interface screenshots during the CI process make it possible to maintain an up-to-date reference library.
• Additional information: Collecting not only images, but also data about the components used, text, tokens, DOM structure, and accessibility information makes references more valuable for AI.
• Search by criteria: AI should be able to search for the right screens by components, text, or other attributes.

3. Design system as a “compression of decisions”

• Decision-making: Design system components already contain the results of many design decisions (size, color, state, spacing). AI can use this “experience” instead of making those decisions from scratch every time.
• Expansion into patterns: Effective AI use of a design system requires moving from components to more complex patterns. Patterns include:

  • Usage context: When and why this pattern should be used.
  • Structure: Which components, states, and visual style are used.
  • Examples: Real screens and flows that illustrate the pattern.

This allows AI to understand not only “what a button looks like,” but also “how to assemble a registration form” or “how to handle a loading state.”

How do you build patterns for AI from design system components?

AI often generates random components if it is not given a clear pattern structure.

1. Defining the pattern structure

• Specification: Create a document that describes the required components and how they are organized.

• Specification example:

  Pattern: Feedback Form

  Components to use:

  • Input (folder XY)
  • Checkbox (folder XY)
  • Button (folder XY)
  • Dropdown (folder XY)

  Functionality:

  • Collect data: name, email, consent.
  • Validate email format.
  • Display errors in real time.
  • Send data to the endpoint.
  • Display the success state.

  Constraints:

  • Do not create new components.
  • Do not modify existing components.
  • Use only the spacing defined in the system.

2. Show all pattern states

• Completeness: AI should understand all possible states a pattern can be in.

• Example states:

  • ✅ Empty: The form on first render.
  • ✅ Input: The user is entering data.
  • ✅ Validation: The system is checking the data.
  • ✅ Error: There is invalid data.
  • ✅ Submitting: Data is being sent.
  • ✅ Success: Data has been sent successfully.

For each state, describe the visual appearance, button state, focus, and error messages.

3. Define interaction flows

• Scenario: Describe in detail what happens when the user interacts with the pattern.

• Flow example:

  When the “Submit” button is clicked:

  1. Validate all fields.
  2. If there are errors:

     • Show red borders around invalid fields.
     • Display an error message under the fields.
     • Move focus to the first field with an error.
     • The “Submit” button remains active.

  3. If the data is valid:

     • Disable the “Submit” button.
     • Show a loading indicator on the button.
     • Send the data to the endpoint.
     • Wait for a response.

  4. On success:

     • Hide the form.
     • Show a success message.
     • Add a “Submit again” button.

  5. On server error:

     • Show an error message at the top of the page.
     • Enable the “Submit” button for another try.

4. Specify responsive behavior

• Device alignment: Describe how the pattern should look and work on different devices.

• Example:

  Mobile (up to 640px):

  • The form spans the full width.
  • All fields are stacked vertically.
  • The button spans the full width.
  • Minimum tap target size is 48px.

  Desktop (over 640px):

  • Maximum width is 480px.
  • Centered position.
  • The button is aligned to the right.
  • Standard spacing.

Is there a “design language” for AI?

AI can benefit from a more formalized way of representing design than visual elements alone.

1. Avoiding excessive information

• Problem: Passing the entire canvas content to AI leads to processing irrelevant information, increasing AI load and processing time.
• Solution: A way is needed to transmit only relevant information, reducing the amount of data.

2. Tracking changes

• Problem: In code, changes are tracked with version control systems. In design, visual comparison is not enough to precisely determine which information changed.
• Solution: Developing a “design language” that allows changes to be tracked similarly to a code diff is an important step. This could include representing design changes in a format understandable to AI, making iteration and collaboration easier.

Preparing a design system for AI agents is the process of transforming design from visual art into a structured, machine-readable system that ensures consistency, efficiency, and accessibility in the design generation process.