# USpec

> Generate design system documentation for your UI components, directly from your AI agent. Renders into Figma or a portable .md file. Works with Cursor, Claude Code, and Codex.

- **Type:** MCP server
- **Install:** `agentstack add mcp-redongreen-uspec`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [redongreen](https://agentstack.voostack.com/s/redongreen)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [redongreen](https://github.com/redongreen)
- **Source:** https://github.com/redongreen/uSpec
- **Website:** https://uSpec.design

## Install

```sh
agentstack add mcp-redongreen-uspec
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# uSpec

Generate design system documentation for your UI components, directly from your AI agent.

Describe a component to your agent. uSpec captures it with the [uSpec Extract](https://www.figma.com/community/plugin/1635184425006534227/uspec-extract) Figma plugin, generates a portable Component Markdown (`.md`) spec, then renders sections of that spec back into Figma as annotation frames. Works with [Figma Console MCP](https://github.com/southleft/figma-console-mcp) or the [native Figma MCP](https://github.com/figma/figma-mcp), inside **Cursor**, **Claude Code**, or **Codex**.

> **Component Markdown is the source of truth.** `create-component-md` produces one self-contained `.md` per component covering API, structure, color, and screen-reader behavior — an artifact LLM tools can build from and humans can query. It is generated from a `_base.json` capture produced by the [uSpec Extract Figma plugin](https://www.figma.com/community/plugin/1635184425006534227/uspec-extract) (free on the Figma Community; source is open in [`figma-plugin/`](figma-plugin/)). Every `create-*` render skill then takes that `.md` as its required input and renders a section into Figma via your MCP.

## What you can generate

| Spec type | What you get |
|-----------|--------------|
| Component Markdown | One `.md` per component covering API, structure, color, and screen-reader behavior |
| API Spec | Properties, values, defaults, and configuration examples |
| Color Annotation | Design token mapping for every element and state |
| Structure Spec | Dimensions, spacing, and padding across density and size variants |
| Screen Reader Spec | VoiceOver, TalkBack, and ARIA behavior for every element and state |
| Motion Spec | Animation timeline bars and easing details from After Effects data |
| Component Anatomy | Numbered markers and attribute tables for every element |
| Component Properties | Variant axes, boolean toggles, and variable mode exhibits |

## Get started

In your project, run:

```bash
npx uspec-skills init
```

The CLI detects whether you are using Cursor, Claude Code, or Codex, installs all skills and references into the right directory, and writes `uspecs.config.json`. Then ask your agent to run the `firstrun` skill to extract your Figma template keys.

Full documentation and examples at **[uSpec.design](https://uspec.design/)**.

## License

MIT — see [LICENSE](LICENSE) for details.

Designed by [Ian Guisard](https://www.linkedin.com/in/iguisard/).

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [redongreen](https://github.com/redongreen)
- **Source:** [redongreen/uSpec](https://github.com/redongreen/uSpec)
- **License:** MIT
- **Homepage:** https://uSpec.design

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-redongreen-uspec
- Seller: https://agentstack.voostack.com/s/redongreen
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.