> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uspec.design/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Generate design system documentation for any Figma component. Render it directly into Figma, or export a portable .md spec for any LLM

<Note>
  **uSpec 2.0 is here.** Added new skill create-component-md. Bring your pixel-perfect Figma component to your favorite LLM. [Read the article about Component.md →](https://ianguisard.substack.com/p/componentmd)
</Note>

<Frame>
  <img src="https://mintcdn.com/personal-49ab26fb/ZYG_i5QveKIsG6Ph/images/cover.png?fit=max&auto=format&n=ZYG_i5QveKIsG6Ph&q=85&s=1f7b73802e2a871c77fd466c77bee25a" alt="uSpec: design system documentation for Figma components" width="1920" height="932" data-path="images/cover.png" />
</Frame>

uSpec turns your Figma components into structured documentation from your AI agent. Pick a component, a skill analyzes it, and the output lives either in Figma as annotation frames or on disk as a single `.md` spec you can take anywhere.

Works with **Cursor**, **Claude Code**, and **Codex**.

## Start here: Component Markdown

<CardGroup cols={1}>
  <Card title="Your component. One .md file. Anywhere." icon="file-code" href="/specs/component-md">
    **New in v2.0.** Your design system source of truth, in one markdown file per component. Covers API, structure, color, and screen-reader behavior. An artifact that LLM tools can build from and humans can query.
  </Card>
</CardGroup>

## Render into Figma

The original uSpec skills render annotation frames directly into your Figma file, next to the component.

<CardGroup cols={3}>
  <Card title="Component Anatomy" icon="crosshairs" href="/specs/anatomy">
    Numbered markers and attribute tables for every element
  </Card>

  <Card title="Component API" icon="code" href="/specs/api">
    Properties, values, defaults, and configuration examples
  </Card>

  <Card title="Component Properties" icon="sliders" href="/specs/property">
    Variant axes, boolean toggles, and variable mode exhibits
  </Card>

  <Card title="Component Color" icon="palette" href="/specs/color">
    Design token mapping for every element and state
  </Card>

  <Card title="Component Structure" icon="ruler" href="/specs/structure">
    Dimensions, spacing, and padding across density and size variants
  </Card>

  <Card title="Screen Reader" icon="universal-access" href="/specs/screen-reader">
    VoiceOver, TalkBack, and ARIA accessibility specs
  </Card>

  <Card title="Motion" icon="film" href="/specs/motion">
    Animation timeline bars and easing details from After Effects
  </Card>
</CardGroup>

## How it works

uSpec supports two rendering paths from the same source component:

<Steps>
  <Step title="Figma-native path">
    Point the skill at a Figma link. The agent uses the Figma MCP to pull structure, variables, and styles from your file, then renders annotation frames directly in Figma using templates you linked during setup.
  </Step>

  <Step title="Component Markdown path">
    Run the **uSpec Extract** Figma plugin to produce a `_base.json` capture of your component, then run `create-component-md` against the JSON. The skill runs four parallel interpretation agents (API, structure, color, voice) and writes a single `.md` specification to disk.
  </Step>
</Steps>

## Get started

<CardGroup cols={2}>
  <Card title="Setup" icon="download" href="/getting-started">
    Set up your AI agent, Figma MCP, and your template library.
  </Card>

  <Card title="Create your first spec" icon="rocket" href="/getting-started#create-your-first-spec">
    Prompt format, available skills, and tips for better output.
  </Card>
</CardGroup>