uSpec

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.