What is uSpec?
uSpec is not a standalone MCP server. It is a skills pack that drives a Figma MCP server, either Figma Console MCP or the native Figma MCP, to capture a component and generate specs: a JSON contract, a Markdown guide and annotation frames for API, color, structure, screen reader and motion.
uSpec generates design system documentation for UI components directly from an AI coding agent. It does not ship an MCP server. It ships skills and a Figma plugin, and the skills call whichever Figma MCP server you connect: Figma Console MCP or the native Figma MCP.
You describe a component. uSpec captures it with its Figma plugin, builds a canonical component contract as JSON plus a portable Markdown guide, then renders sections of the spec back into Figma as annotation frames.
What changes in your agent's output
- Documentation comes from the actual Figma component, not from the agent's memory of what the component probably does.
- The JSON contract is the machine source of truth, and the Markdown file is the concise human and agent version.
- Each spec type has its own skill: API, color, structure, screen reader, motion, anatomy and properties.
- The agent writes annotation frames back into Figma through your MCP connection.
How the setup works
- Connect a Figma MCP server in your agent.
- Run
npx uspec-skills initin your project. It detects Cursor, Claude Code or Codex and installs the skills. - Ask the agent to run the
firstrunskill to extract your Figma template keys, then describe a component.
Who uSpec is for
Best for
- Design system teams that need consistent specs for many components and want documentation tied to the Figma source.
- Teams that need screen reader specs, since uSpec covers VoiceOver, TalkBack and ARIA behavior, a check that an accessibility skill can then apply in code.
- Figma-first workflows already using the Figma MCP server or Framelink.
Not for
- Teams without Figma. The workflow starts from a Figma component and its plugin.
- Anyone expecting a standalone server. Without a Figma MCP connection the render skills have nothing to write to.
- Generating new UI. uSpec documents components that exist, it does not design them.
Use it with UiChemy
uSpec documents components for design teams. UiChemy covers the build side for WordPress: Figma to WordPress turns a design into editable blocks, and Composer edits the result inside Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect uSpec: Design System Specs From Your AI Agent via Figma MCP to your AI client
npx uspec-skills initConnect a Figma MCP server
The README names Figma Console MCP and the native Figma MCP as the two supported options. Set one up in your agent first.
Install the skills
Run
npx uspec-skills initin your project. The CLI detects Cursor, Claude Code or Codex, installs the skills and references into the right directory and writesuspecs.config.json.Install the Figma plugin
Add the uSpec Extract plugin from the Figma Community. It asks for the selected component's Figma link on first use and remembers it for the document.
Run firstrun
Ask your agent to run the
firstrunskill to extract your Figma template keys, then request a spec for a component.
Endpoints and ports
https://uspec.design/Full documentation and examplesnpx uspec-skills initInstalls skills and writes uspecs.config.jsonhttps://github.com/redongreen/uSpecMIT licensed, plugin source in figma-plugin/What you can do with it
- Component contractA canonical JSON file plus a concise Markdown guide, both produced from a captured base file.
- Eight spec typesAPI, color annotation, structure, screen reader, motion, anatomy, component properties and the contract itself.
- Writes back to FigmaRender skills place each spec section into Figma as annotation frames through your MCP.
- Open-source pluginThe uSpec Extract plugin is free on the Figma Community, and its source is in the repository.
- Works with two Figma MCP serversFigma Console MCP and the native Figma MCP are both supported.
- Three agent environmentsThe installer detects which of three supported coding environments you use and writes the skills into the right folder.
Tools it exposes
firstrun
Extracts your Figma template keys the first time you use uSpec.
create-component-md
Produces the sibling component contract JSON and Markdown guide covering API, structure, color and screen-reader behavior.
create-api, create-color, create-structure
Render the API, color annotation and structure specs into Figma from the Markdown guide.
create-voice
Renders the screen reader spec, covering VoiceOver, TalkBack and ARIA behavior.
create-anatomy, create-property, create-motion
Render component anatomy, component properties and motion specs into Figma.
extract-api, extract-color, extract-structure, extract-voice
Capture skills that sit beside the render skills in the repository's skills folder.
Frequently asked questions
Is uSpec an MCP server?
No. It is a skills pack with a Figma plugin and an installer. Its skills call a Figma MCP server that you connect separately, either Figma Console MCP or the native Figma MCP. That is why this page lists skills rather than tools of its own.
How do I install uSpec?
Connect a Figma MCP server, then run npx uspec-skills init in your project. The CLI detects Cursor, Claude Code or Codex, installs the skills and writes uspecs.config.json. Install the uSpec Extract Figma plugin and run the firstrun skill next.
What does it generate?
A component contract as JSON, a Markdown guide, and Figma annotation frames for API, color, structure, screen reader, motion, anatomy and component properties. The JSON is the machine source of truth that automation can consume.
Does it need Figma?
Yes. Capture happens through the uSpec Extract plugin and rendering happens through a Figma MCP connection. For Figma-less design files, the Penpot MCP server is a different route, though uSpec itself targets Figma.
Which agents does it work with?
The README names Cursor, Claude Code and Codex, and the init CLI detects which of them you use. The skills then run inside that agent, using whichever Figma MCP server you configured.
Is the Figma plugin free?
The README says the uSpec Extract plugin is free on the Figma Community, and its source is open in the repository's figma-plugin folder. The plugin asks for the selected component's Figma link on first use.
What license does it use?
The repository is MIT licensed, and GitHub detects MIT. The README points to the LICENSE file for details and credits the project's designer, so you can use and adapt the skills and plugin source under the standard MIT terms.