uSpec starts with the uSpec Extract plugin. The plugin captures deterministic evidence;
create-component-md compiles it into canonical .json and concise .md artifacts. This saves
thousands of tokens per run and captures more component detail than live extraction.
See the Component Markdown guide →
create-component-md compiles a canonical .json contract and portable .md implementation guide, and the create-* skills render that guide into Figma as annotation frames.
Works with Cursor, Claude Code, and Codex.
Start here: Component Markdown
One contract, one implementation guide
A schema-valid
.json contract plus concise .md for every component. Both cover API,
structure, color, and screen-reader behavior.Render into Figma
Once you have a component.md, the create-* skills render annotation frames directly into your Figma file, next to the component. They read from the .md you generated — they no longer re-extract from a Figma link.
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
Every spec flows through one pipeline, with the component contract and its Markdown view at the center:1
Extract
Run the uSpec Extract Figma plugin on your component to produce a
_base.json capture of
every variant, token binding, and sub-component. The public plugin asks for the component link
on first use and remembers it for that document.2
Compile the contract and guide
Run
create-component-md against the _base.json. It interprets API, Structure, Color, and
Voice evidence, validates their obligations, then writes canonical .json and concise .md
artifacts.3
Render into Figma (optional)
Point any
create-* skill at the .md to render that section as annotation frames next to the component. These skills read from the .md; they do not re-extract from Figma.create-motion is the one exception: it renders a timeline from an After Effects export and does not use the Component Markdown pipeline.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.