Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
uSpec is easy to set up with strong trust signals. Check agent compatibility and use-case fit before adding it to your workflow.
Repository setup guidance
gh repo view redongreen/uSpec --webOpen the official repository or website.
Check the README for package manager, auth, and platform requirements.
Try it in a small test task inside your agent workflow.
uSpec lets you describe a UI component to your AI coding agent, and it automatically creates detailed design documentation. It works with tools like Cursor, Claude Code, and Codex, and can output specs as Markdown files or directly into Figma as annotation frames. This helps developers and designers keep their design system documentation up-to-date without manual work.
uSpec is a developer tool that bridges the gap between AI coding agents and design system documentation. It consists of a CLI, a Figma plugin (uSpec Extract), and a set of render skills. The workflow starts when you describe a component to your AI agent. The agent uses the uSpec Extract Figma plugin to capture the component's design tokens, structure, and behavior. This data is saved as a `_base.json` file. Then, the `create-component-md` skill generates a self-contained Component Markdown (`.md`) file covering API, structure, color, and screen-reader behavior. This Markdown file becomes the source of truth. From there, various `create-*` render skills can take that Markdown and render specific sections back into Figma as annotation frames via the Figma MCP (Model Context Protocol). Supported spec types include API specs, color annotations, structure specs, screen reader specs, motion specs, component anatomy, and component properties. The tool is designed to work with Cursor, Claude Code, and Codex, and can be initialized with a simple `npx uspec-skills init` command. It is open source under the MIT license.
Strong trust signals; still review the README and permissions before production use.
Last commit was about 52 days ago.
211 GitHub stars indicate community interest.
1 open issues signal maintenance load.
MIT license detected.
Automatically generate API documentation for a button component from a Figma design.
Create a color annotation spec that maps design tokens to every element and state.
Produce a screen reader behavior spec for accessibility compliance.
Generate a motion spec with animation timeline bars from After Effects data.
Keep design system documentation in sync with code changes by regenerating specs on demand.
Figma or design-system access should be scoped to the minimum workspace and file permissions.
Generated design documentation should be reviewed before being treated as canonical UI guidance.
211
Stars
29
Forks
1
Issues
MIT
License
Bidirectional MCP bridge that lets AI draw UI directly on Figma canvas and read designs back as structured data.
Argos is an open source visual testing platform that detects unintended UI changes to help teams maintain quality.
Extract any website's complete design system with one command.
Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
Frontend developers using AI coding agents like Cursor or Claude Code., Design system engineers who need to maintain up-to-date documentation., UI/UX designers who want to annotate Figma components with structured specs.
The setup section provides repository-level starting guidance, not a guarantee of an independently verified installation. Check the official README and release notes.
Figma or design-system access should be scoped to the minimum workspace and file permissions. Generated design documentation should be reviewed before being treated as canonical UI guidance.
Similar or complementary options to evaluate include figma-ui-mcp, Argos, design-extract.
Jun 7, 2026
2 security/trust notes recorded.
Setup difficulty is 2/5.