Skip to main content
Echo Specs helps you generate structured documentation for your UI components, directly from Cursor to Figma. You describe a component, an AI agent skill analyzes it using your Figma file as context, and the Echo Specs plugin renders the spec in Figma.

​
What you can create

Component API Spec

Properties, values, defaults, and configuration examples

Component Color Annotation

Design token mapping for every element and state

Component Structure Spec

Dimensions, spacing, and padding across density and size variants

Component Screen Reader Spec

VoiceOver, TalkBack, and ARIA accessibility specs

Component Overview

Structure, variants, states, and behavior documentation

Changelogs

Track design system changes over time

​
How it works

1

Provide a Figma link and context

Share a link to the component in Figma. This is the primary input. You can also add a description of states, variants, or behavior to guide the agent. The Figma Console MCP pulls structure, variables, and styles directly from your file.
2

Trigger an agent skill

In Cursor’s chat, reference the skill you need, like @create-voice for screen reader specs or @create-color for color annotations. The agent analyzes your component and generates structured JSON.
3

Generate documentation in Figma

Paste the JSON into the Echo Specs Figma plugin and click Generate. The plugin auto-detects the spec type and populates the correct documentation template.

​
Get started

Quickstart

Create your first specification in under 5 minutes.

Installation

Set up Cursor, Figma Console MCP, and the Echo Specs plugin.