AI-Assisted Design Systems at Fannie Mae

As enterprise products grow, the same design decision can exist in several places: Figma, design specifications, design tokens, component code, application interfaces. Small inconsistencies accumulate:

• A spacing value gets hardcoded.
• A button gets recreated instead of reused.
• A component state exists in Figma but not in implementation.
• Accessibility behavior varies between implementations.
• A new variant is introduced without becoming part of the governed system.

Can AI coding agents help a designer maintain consistency between design intent and production code while preserving design-system governance?

CursorClaude CodeCodex

This was not a comparison of tools. The objective was to understand how AI coding agents could participate in a governed design-system workflow.

• translate design intent into reusable implementation
• improve component consistency
• identify design-system violations
• create and extend reusable components
• account for interaction states
• improve accessibility
• reduce unnecessary one-off implementations
• assist with design-system maintenance
• validate implementation against system rules
• move approved components toward deployment

1. 01

   Decide

   Decided what belonged in the system and what did not.

   Produced · Approved by engineering and the Director.

2. 02

   Design

   Designed components, variants, and states in Figma, using tokens.

   Produced · Figma components and variants.

3. 03

   Document

   Wrote usage guidance, do/don't examples, accessibility notes, and state specifications, so developers did not need to ask me.

   Produced · Documentation pages.

4. 04

   Publish

   Published components to the shared library.

   Produced · A shared component library.

5. 05

   Release notes

   Wrote what changed, why, and what to do about it for each release.

   Produced · Release notes per release.

6. 06

   Hand off

   Handed specifications, tokens, and behavior to developers, reviewed the build, and ran design QA before release.

   Produced · Reviewed, QA'd components.

AI coding tools entered this lifecycle at specific points. Section 05 shows where.

The process started in Figma. I analyzed existing Fannie Mae design-system patterns and product interfaces rather than asking AI to invent a new visual language. The available material was Figma files, existing interface patterns, existing component usage, and screens and interaction states.

Production code, internal documentation, Storybook implementation, and proprietary token architecture are intentionally not reproduced in this public case study.

1. Fannie Mae Figma system→
2. Pattern analysis→
3. Foundations→
4. Components→
5. States→
6. Explicit design-system rules

Making the system machine-readable.

Before asking AI to implement a design system, I needed to make the design decisions explicit.

# Design System Rules

SPACING
Only approved spacing values can be used.
Avoid arbitrary spacing values.

COLOR
Use semantic tokens.
Do not introduce raw color values inside components.

COMPONENTS
Reuse existing primitives before creating new components.

STATES
Interactive components must account for applicable:
Default, Hover, Focus, Pressed, Disabled, Loading, Error

ACCESSIBILITY
Focus states must remain visible.
Prefer semantic HTML.
Use ARIA where necessary.

VARIANTS
Do not create new component variants when an existing component
can support the requirement through composition.

These rules turned design-system documentation from passive guidance into instructions that AI coding agents could reason against.

• The tools were not given unrestricted authority. Human review remained the governance layer.
• The objective was not simply to generate code. The workflow connected design decisions to implementation and carried approved components through validation toward deployment.

The agents were collaborators inside the system, not the owners of the system.

TOOL CAPABILITY + QUALITY OF SYSTEM RULES + HUMAN JUDGMENT = USEFUL DESIGN-SYSTEM OUTPUT

The quality of the agent's output depended heavily on the quality of the system I gave it.

Variants

Primary, Secondary, Tertiary, Destructive

Sizes

Small, Medium, Large

States

Default, Hover, Focus, Pressed, Disabled, Loading

1. Figma intent→
2. System rules→
3. AI implementation→
4. Validation→
5. Approved component

The challenge wasn't generating a blue button. The challenge was making sure every variant and state stayed part of the same governed component architecture.

padding: 17px;
background: #006ABC;
border-radius: 5px;

padding: var(--space-component-md);
background: var(--action-primary);
border-radius: var(--radius-control);

Representative sanitized examples, not official Fannie Mae tokens.

An enterprise data table reconstruction with column headers, sorting, filtering, search, row selection, bulk actions, status indicators, pagination, loading, empty and error states, and disabled or permission states. Columns: Name, Type, Owner, Status, Last Updated, Actions. All data is fictional.

DATA TABLE
├ Table
├ TableHeader
│  ├ HeaderCell
│  └ SortControl
├ TableBody
│  └ TableRow
│      ├ Checkbox
│      ├ Cell
│      ├ StatusBadge
│      └ ActionMenu
├ BulkActionBar
├ EmptyState
├ LoadingState
├ ErrorState
└ Pagination

Button

Default → Hover → Focus → Pressed → Loading → Disabled

Input

Default → Hover → Focus → Filled → Error → Disabled → Read-only

Data table

Default, Loading, Empty, Error, Filtered, Rows selected, No permission

Representative example based on the design-system workflow.

AI detection was not treated as design-system authority. Every recommendation was evaluated against design intent, accessibility requirements, component architecture, and product context.

• Keyboard navigation
• Visible focus
• Semantic controls
• Accessible names
• Sorting announcements
• Selection state
• Error communication

DESIGN + SYSTEM RULES + AI IMPLEMENTATION + AUTOMATED CHECKS + HUMAN VALIDATION

Once implementation became part of the workflow, the design system was no longer a one-way Figma-to-code handoff. Implementation exposed gaps in the system itself: missing states, ambiguous variants, token gaps, accessibility requirements, unnecessary component duplication, unclear usage rules.

AI could change the implementation. It couldn't change the system's intent.

AI accelerated execution, but governance remained human. The designer still determined:

• what belongs in the system
• when a variant is justified
• whether two patterns should be consolidated
• how components should behave
• what accessibility means in context
• when implementation revealed a design problem

1. Failure 01

   AI created a new component where an existing primitive could have been composed.

   Response: Rejected and reused the existing component.

2. Failure 02

   AI reproduced visual appearance but missed an interaction state.

   Response: Updated the specification and implementation.

3. Failure 03

   AI introduced arbitrary styling values.

   Response: Replaced them with system tokens.

4. Failure 04

   AI produced technically valid accessibility markup but overcomplicated the interaction.

   Response: Simplified the implementation using semantic HTML and clearer behavior.

5. Failure 05

   AI interpreted visual similarity as functional equivalence.

   Response: Human review restored product intent.

AI was very good at following explicit rules. Ambiguous design intent still required human judgment.

Measured outcomes will appear here once each figure's source is confirmed.

Traditional design-system documentation asks humans to remember the rules. AI-assisted workflows create an opportunity for those rules to take part directly in implementation.

• Instead of documentation saying “Use approved spacing values,” the workflow can detect arbitrary spacing.
• Instead of “Reuse existing components,” an agent can inspect the repository before proposing another component.
• Instead of “Remember accessibility,” accessibility requirements can be part of the implementation contract.

But AI does not determine what the design system should mean. That remains a design and organizational responsibility.

The opportunity is not just reducing time to handoff. It's reducing the translation layer between design intent and production systems.

Figma ↕ Design System ↕ AI Agents ↕ Code ↕ Product

By combining design-system thinking with Cursor, Claude Code, and Codex, I explored a workflow where designers can participate deeper in implementation while maintaining the governance, accessibility, consistency, and product intent that make a design system valuable.