Skip to main content
v1.7.0 — Figma slot detection, nearest-edge marker placement, component-relative spec placement, and improved rendering. See changelog.
uSpec — generate design system documentation from your AI agent to Figma
uSpec generates structured documentation for your UI components, directly from your AI agent to Figma. You describe a component, an agent skill analyzes it using your Figma file as context, and renders the spec directly in your Figma file. Works with Cursor, Claude Code, and Codex.

​
What you can create

Component Anatomy

Numbered markers and attribute tables for every element

Component API

Properties, values, defaults, and configuration examples

Component Properties

Variant axes, boolean toggles, and variable mode exhibits

Component Color

Design token mapping for every element and state

Component Structure

Dimensions, spacing, and padding across density and size variants

Screen Reader

VoiceOver, TalkBack, and ARIA accessibility specs

Motion

Animation timeline bars and easing details from After Effects

​
How it works

1

Provide a Figma link and context

Share a link to the component in Figma. This is the primary input. You can also add a description of states, variants, or behavior to guide the agent. The Figma MCP pulls structure, variables, and styles directly from your file.
2

Trigger an agent skill

Reference the skill you need — like create-voice for screen reader specs or create-color for color annotations. The agent analyzes your component and renders documentation directly in your Figma file.

​
Get started

Setup

Set up your AI agent, Figma MCP, and your template library.

Create your first spec

Prompt format, available skills, and tips for better output.