# uSpec

> Generate structured design system documentation for UI components directly from Cursor to Figma using AI agent skills.

uSpec is an AI-powered tool that generates structured design system documentation for UI components, bridging Cursor and Figma. You describe a component, an AI agent skill analyzes it using your Figma file as context, and renders the spec directly in your Figma file. It supports a wide range of spec types including anatomy, API, properties, color annotations, structure, screen reader, and motion specs.

- **Component Anatomy** — *Generates numbered markers and attribute tables for every element in a component.*
- **Component API** — *Documents properties, values, defaults, and configuration examples.*
- **Component Properties** — *Covers variant axes, boolean toggles, and variable mode exhibits.*
- **Color Annotation** — *Maps design tokens for every element and state.*
- **Component Structure** — *Documents dimensions, spacing, and padding across density and size variants.*
- **Screen Reader Specs** — *Generates VoiceOver, TalkBack, and ARIA accessibility specs using the `@create-voice` skill.*
- **Motion Specs** — *Produces animation timeline bars and easing details from After Effects.*
- **Figma Console MCP Integration** — *Pulls structure, variables, and styles directly from your Figma file via the Figma Console MCP.*
- **Cursor Agent Skills** — *Trigger specific documentation types in Cursor's chat by referencing skills like `@create-color` or `@create-voice`.*
- **Open Source** — *Available on GitHub for community contributions and customization.*

To get started, set up Cursor, configure the Figma Console MCP, and load your template library. Then share a Figma component link in Cursor's chat, reference the desired agent skill, and uSpec will render the documentation directly in your Figma file.

## Features
- Component Anatomy specs
- Component API documentation
- Component Properties documentation
- Color annotation and token mapping
- Component Structure specs
- Screen Reader / Accessibility specs
- Motion animation specs
- Figma Console MCP integration
- Cursor agent skill triggers
- Open source

## Integrations
Figma, Cursor, Figma Console MCP, After Effects

## Platforms
WEB, API

## Pricing
Open Source

## Links
- Website: https://docs.uspec.design
- Documentation: https://docs.uspec.design
- Repository: https://github.com/redongreen/uSpec
- EveryDev.ai: https://www.everydev.ai/tools/uspec