AI Agent System for Automated Design System Documentation

uber · Tech · 2026 · source Agentic: yes · promotional bias: med · source-backed · extracted with prompt 0.5.2 (schema v2)

Generated from extraction.json — do not edit by hand. Every claim cites verbatim source evidence; stated means the quote directly asserts the claim, implied means it supports it indirectly.

Problem

Domain: Design-system documentation

Uber needed accurate component specs across many implementation stacks without weeks of manual documentation per component.

Constraints:

Figma source of truth
enterprise security
seven implementation stacks
accessibility details

Architecture

uSpec is a local agentic documentation pipeline: a designer gives Cursor an agent skill, Figma component link, and contextual notes; the Cursor agent uses Figma Console MCP over a local Figma Desktop connection to read component structure, tokens, variables, styles, and accessibility semantics, then programmatically renders completed spec pages back into Figma. Domain-specific skill instructions and schemas guide interpretation, while the MCP bridge and renderer keep proprietary design data on the machine.

Diagram confidence: explicit (topology described by the source).

flowchart LR
  designer-context-input["designer-context-input"]
  cursor-agent["cursor-agent"]
  agent-skill["agent-skill"]
  figma-console-mcp["figma-console-mcp"]
  figma-desktop-file["figma-desktop-file"]
  figma-spec-output["figma-spec-output"]
  structured-schemas-and-templates["structured-schemas-and-templates"]
  designer-context-input --> cursor-agent
  cursor-agent --> agent-skill
  cursor-agent --> figma-console-mcp
  figma-console-mcp --> figma-desktop-file
  cursor-agent --> figma-spec-output
  figma-desktop-file --> figma-spec-output
  structured-schemas-and-templates --> figma-spec-output

Drag to pan · scroll or use +/− to zoom · reconstructed from the source's described component topology

Components

Component	Role	Interacts with
`designer-context-input`	Provides the Figma component link and human context about states, variants, and platform-specific behavior.	`cursor-agent`
`cursor-agent`	Runs the AI agent locally, follows uSpec skill instructions, interprets the Figma component, and coordinates reading and rendering.	`designer-context-input`, `agent-skill`, `figma-console-mcp`, `figma-spec-output`
`agent-skill`	Encodes domain knowledge, validation rules, structured schemas, and reference documentation for each spec type.	`cursor-agent`
`figma-console-mcp`	Local bridge that gives the agent read-write access to Figma component data, variables, styles, and tokens.	`cursor-agent`, `figma-desktop-file`
`figma-desktop-file`	The proprietary design-system source of truth that stays on the user machine while component data is read.	`figma-console-mcp`, `figma-spec-output`
`figma-spec-output`	Completed spec pages rendered directly into Figma, including anatomy, API, tokens, and accessibility details.	`cursor-agent`, `figma-desktop-file`
`structured-schemas-and-templates`	Enforce repeatable spec structure and consistency across authors and components.	`agent-skill`, `figma-spec-output`

Data flow

A designer opens Cursor, invokes the relevant uSpec skill, and supplies a Figma component link plus context that cannot be inferred from the file. The Cursor agent connects through Figma Console MCP to the local Figma Desktop file, extracts component hierarchy, tokens, variables, and styles, interprets accessibility and platform details using skill instructions and references, and writes the finished specification directly back into Figma without a manual formatting step.

3 supporting quotes

“First, open Cursor and reference an agent skill with your Figma component link. Add context about states, variants, or platform-specific behavior that the agent can’t infer from the design alone.”article, stated

“Next, the AI agent connects to your Figma file through the Figma Console MCP, extracts component structure, design tokens, variables, and styles, then maps the parent-child relationships between layers and sub-components to render a finished spec page directly in your Figma file.”article, stated

“Each skill loads its own instruction file with validation rules, structured schemas, and reference documentation. The screen reader skill, for example, loads platform-specific accessibility property references”article, stated

Why this architecture

The architecture separates interpretation from precision. The agent handles ambiguous design-system judgment, such as accessibility semantics and token mapping, while scripts and MCP provide deterministic Figma access and rendering. The local-only MCP/Figma Desktop loop is also the security decision: Uber can use AI-assisted docs only because proprietary component data does not leave the machine.

3 supporting quotes

“uSpec combines both: AI judgment where interpretation matters—classifying accessibility semantics, selecting the right token mappings, deciding how to structure a spec—and programmatic scripts where precision matters, rendering the result directly in Figma.”article, stated

“The entire pipeline runs locally. The MCP connects to Figma Desktop over a local WebSocket, the agent runs in Cursor on your machine, and rendering happens directly in Figma through that same local connection.”article, stated

“No cloud API, no proprietary design data leaving your network. At Uber, this is what makes AI-assisted documentation possible in the first place: nothing leaves your machine.”article, stated

Models used: Cursor AI models

Scale

The Base design system serves thousands of engineers, so stale component specifications create broad downstream inconsistency.
“The Uber Base design system serves thousands of engineers, and every component they ship depends on specs that are accurate, complete, and current.”article, stated
The component documentation burden spans seven implementation stacks, density variants, and strict accessibility requirements.
“At Uber, the complexity compounded in different ways: 7 implementation stacks, density variants across each, and strict accessibility requirements.”article, stated
A full screen-reader spec across three platforms can be generated in under two minutes.
“Speed: A full screen reader spec covering 3 platforms generates in under 2 minutes.”article, stated
The previous months-long spec-writing process can now produce complete specs in days.
“A system with hundreds of components that previously required months of spec-writing can generate complete specs in days.”article, stated

Alternatives considered (roads not taken)

Manual spec writing for every component

Rejected because: Manual authoring was slow, inconsistent across authors, and drifted as soon as components changed.

“Manual spec writing is slow, inconsistent across authors, and drifts out of date the moment a component changes.”article, stated

Cloud-hosted AI/API access to proprietary design data

Rejected because: Uber needed the design data to remain local; the local MCP/Figma Desktop path avoids cloud API transfer.

“No cloud API, no proprietary design data leaving your network. At Uber, this is what makes AI-assisted documentation possible in the first place: nothing leaves your machine.”article, stated

Patterns

`tool-use-orchestration` (documentation)

The agent reads real Figma component structure through MCP and writes finished spec pages back into Figma.

“uSpec is an agentic system that connects an AI agent in Cursor® to Figma® through the open-source Figma Console MCP.”article, stated

`privacy-preserving-processing` (security)

The pipeline runs locally so proprietary design data does not leave Uber’s network.

“The entire pipeline runs locally, so no proprietary design data ever leaves your network—a requirement for an organization like Uber.”article, stated

Tradeoffs

How to satisfy enterprise security while using AI agents.

Chose local MCP pipeline over external API upload of design data.

Rationale: Local execution preserves security but requires the agent to operate against local Figma tooling.

“reated an opportunity that didn’t exist before: a way to connect an AI agent directly to Figma without sending proprietary design data through external APIs, and a way to automate the entire spec creation process end-to-end.”article, stated

How to divide work between AI judgment and deterministic scripting.

Chose Use the agent for interpretation and programmatic scripts/MCP for precise Figma access and rendering. over Letting the LLM both interpret and directly improvise all rendered spec structure..

Rationale: The source says this combination lets uSpec apply judgment where interpretation matters while keeping precision in the rendering path.

Gotchas (what bit them)

Component docs drift into assumptions and tech debt when specs lag designs.

Root cause: Manual documentation cannot keep pace with component count, variants, and platform-specific details.

Resolution: Use an agent to regenerate current specs from actual Figma structure and provided context.

“When those specs fall behind, engineering builds from assumptions instead of definitions, which causes inconsistencies and tech debt.”article, stated

Evaluation

Uber reports workflow-time reduction and generated spec completeness rather than formal model scores.

Metrics: minutes instead of weeks · months to days

“This blog describes how Uber’s design systems team uses AI agents and Figma Console MCP to generate up-to-date component specs in minutes instead of weeks.”article, stated

Outcomes

uSpec turns a months-long design-spec process into days while improving consistency.

Uber design-system team source; no independent measurement.

“The system runs entirely locally to meet enterprise security requirements, generates complete specs in minutes instead of weeks, and has transformed a months-long documentation process into one that takes days while maintaining consistency and accuracy across the entire design system.”summary, stated