uSpec skill
uSpec skills document design-system components from Figma: a component contract, color, structure and screen reader behavior.
- 251 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skills draw and change frames in your Figma file through the Figma MCP.
- Capturing a component needs a third-party Figma plugin.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/uspecDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skills draw and change frames in your Figma file through the Figma MCP.
- Capturing a component needs a third-party Figma plugin.
This is third-party code. Review the repository files before installing.
What it does
uSpec, a skill set for Cursor, Claude Code and Codex, documents design-system components. The uSpec Extract plugin captures a selected component in Figma, and the `create-component-md` skill compiles the capture into a canonical `.json` contract and a concise `.md` guide covering API, structure, color and screen reader behavior. The `create-*` skills then render specifications back into Figma through MCP: anatomy, color tokens, dimensions and spacing, properties, VoiceOver and TalkBack behavior, and an animation timeline from After Effects data. The set works with Figma Console MCP or the native Figma MCP.
Who it is for. Designers and design-system engineers who describe components in Figma and want an agent to produce specifications instead of drawing them by hand.
Good fit when
- A Figma component library needs color and structure annotations.
- A developer needs a machine-readable component contract for automation.
- A team prepares behavior notes for VoiceOver, TalkBack and ARIA.
- An animation timeline and easing table is built for a component.
Not a fit when
- Design lives outside Figma.
- A Figma MCP is not connected.
- Specifications are needed for screens rather than individual components.
Example request
Document the Button component from the selected Figma frame and draw color and structure annotations.Limitations
Figma, the uSpec Extract plugin and either Figma Console MCP or the native Figma MCP are required. After installation run the `firstrun` skill first: it extracts template keys from your Figma library. The skills draw inside your file, so try them on a copy first. On first use the plugin asks for the Figma link of the selected component and remembers it for the document. The skills work only through one of the two named MCP servers.
How to disable. Delete the skills from `.cursor/skills/`, `.claude/skills/` or `.agents/skills/`, the `references/` folder and the `uspecs.config.json` file in the project root. Remove the uSpec Extract plugin in Figma separately.
FAQ
What does init do?
It asks for the agent and Figma MCP, installs skills into the agent's directory, copies reference docs into `./references/` and writes `uspecs.config.json`.
How do I update the skills?
Run `npx uspec-skills update` after upgrading the package. `npx uspec-skills doctor` verifies the install.
Where does component data come from?
From the `_base.json` file produced by the uSpec Extract plugin. The plugin is free on Figma Community and its source is open in `figma-plugin/`.
Which agents are supported?
Cursor, Claude Code and Codex. The `--platform cursor | claude-code | codex` flag selects the platform.
Is a Figma MCP required?
Yes. Specifications are rendered through Figma Console MCP or the native Figma MCP chosen during `init`.
Discussion
No questions or reviews yet.
Related
SkillsA skill for Figma design systems: read-only audits with WCAG checks, component building and token export to code.
A skill that draws a UI component as an Apple-style sheet with spacing, radii and layers, plus a short film from it.
A TypeUI Figma plugin that reads a file's styles and generates DESIGN.md and SKILL.md for Claude Code, Codex and Cursor
A Codex skill that reviews UI screenshots and Figma frames, ranks findings and draws annotated images numbered like the report
Figma To Code MCP: from Figma layout to code
Figma To Code MCP
Figma to code over MCP: the server gives the agent a layout as compact YAML with CSS property names, resolved variables and SVG exported to disk
Meta-skill that reads a brand from a URL, name or screenshot and turns it into a full design system as a new skill
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| uSpec (this card) | no | 251 | ||
| Figma Console MCP | no | API key | 3,293 | gives an agent access to Figma; uSpec runs the component documentation workflow on top of it |
| DESIGN.md generator for Figma | no | 158 | produces DESIGN.md from a design; uSpec writes contracts and specs for individual components |
README in short
The component contract `.json` is the machine source of truth. A concise `.md` is meant for humans and LLM workflows.