How It Works

Understand the pipeline that turns a Figma link into structured documentation

Echo Specs connects three systems, Cursor, Figma, and a Figma plugin, into a single pipeline. You provide a component link and context, and the system produces formatted documentation directly in your Figma file.

The pipeline at a glance

Each spec type follows this same pipeline, but the internal steps differ depending on what the skill needs to analyze. The diagrams below show what happens inside each skill.

---

Triggering a skill

Skills are triggered by typing @ followed by the skill name in Cursor’s chat.

1. Type @

   In Cursor’s chat, type @. Cursor shows an autocomplete menu of available skills.

2. Select a skill

   Continue typing to filter (e.g., @create-v) or use arrow keys to select. The skill name must match exactly: @create-voice, not create voice or voice spec.

3. Add your prompt

   After the skill name, paste a Figma link and add any context about states, variants, or behaviors.

If autocomplete doesn’t show the skill, verify the Echo Specs project is open in Cursor. Skills load from the .cursor/skills/ folder.

---

Inside each skill

Every skill loads an instruction file, reads platform-specific or domain-specific reference files, extracts data from Figma via MCP, runs through a checklist, and outputs validated JSON. The reference files determine what the agent knows about each domain.

Screen Reader

The screen reader skill loads four reference files, one for general instructions and one per platform, then runs a merge analysis to determine focus stops before generating per-platform tables.

The merge analysis is the critical step. It determines which visual parts become independent focus stops and which get merged into a parent announcement. The three platform files provide the exact property names and announcement patterns for iOS, Android, and Web.

Color Annotation

The color skill loads a single instruction file, then extracts design tokens and variable values from Figma to map every visual element to its token name.

The agent reads token names directly from Figma variables, so the output uses your actual token naming conventions rather than generic names.

Overview

The overview skill loads its instruction file and then runs a series of diagnostic questions to determine which sections the component needs: structure, variants, states, sizes, shapes, density, and behavior.

Only relevant sections appear in the output. A simple button gets structure, type, and states. A complex list item might also get density, size, background context, and overflow behavior sections.

API

The API skill loads its instruction file, identifies all configurable properties (including sub-component slots), and generates property tables with configuration examples.

Transient states like hover and pressed are excluded from the API. They are handled at runtime. Only persistent, configurable properties like isDisabled or isSelected become API entries.

Structure

The structure skill loads its instruction file, measures all dimensional properties, and organizes them into tables by variant axis (size, density, or shape).

Values are reported as token references when bound to a variable (e.g., sizing-button-lg (56)) or as plain numbers when hardcoded. The column pattern depends on the component: sizes get columns like Large, Medium, Small; density gets Compact, Default, Spacious.

Changelog

Changelogs are different from other specs. They don’t require deep component analysis. You describe what changed and the agent formats it. The create, update, and convert modes each follow a slightly different path.

The agent acts as a writer, not a transcriber. It rewrites titles for conciseness, standardizes date formats to MM.DD.YYYY, and ensures every description line uses bullet formatting.

---

What the agent sees vs. what you provide

The agent can extract structure, tokens, and styles from Figma automatically. But some information only exists in your head:

The agent can extract	You need to describe
Component layers and hierarchy	States not visible in the current frame
Design token names and values	Behavioral modes (fill vs. hug, truncation)
Variant axes and properties	Focus order preferences
Visual dimensions and spacing	Platform-specific interaction details
Styles and color values	Business logic or conditional rules

The more context you provide in your prompt, the more accurate the output. A one-line prompt works, but adding states, behaviors, and edge cases produces significantly better specs.

---

Architecture overview

The Figma Console MCP acts as the bridge between Cursor and Figma Desktop. It connects via WebSocket through the Desktop Bridge plugin, giving the agent real-time access to your file data without requiring manual export.