Skip to main content
This guide walks you through creating a specification for a UI component.

​
Prerequisites

Before you begin, make sure you have:
  • Cursor open with the Echo Specs project loaded
  • Figma Console MCP connected to Figma Desktop
  • The Echo Specs Figma plugin installed
See the Installation guide for detailed setup instructions.

​
Step 1: Write your prompt

Every prompt follows the same format: 
@skill-name [Figma link] + additional context
Reference a skill, paste a Figma link, and describe anything the agent can’t infer from the design: states, variants, behavior, or interaction details.

​
Example prompt

@create-voice https://www.figma.com/design/abc123/Components?node-id=100:200

This is a primary action button with enabled, hover, pressed, and disabled states.
The button has a text label and an optional leading icon.

​
Available skills

SkillWhat it generates
@create-voiceScreen reader specs for VoiceOver, TalkBack, and ARIA
@create-colorColor token annotations for all elements and states
@create-overviewComponent anatomy, variants, and states
@create-apiProperty tables with values, defaults, and examples
@create-structureDimensional specs for spacing, padding, and sizing
@create-changelogNew changelog with initial entries
@update-changelogAppend entries to an existing changelog
@convert-changelogExtract an existing Figma changelog to JSON

​
Step 2: Copy the JSON output

The agent analyzes your component and returns structured JSON: 
{
  "templateType": "screenReader",
  "componentName": "Button",
  "guidelines": "• Label must describe the action\n• iOS: 'dimmed', Android: 'disabled'",
  "states": [
    {
      "state": "enabled",
      "sections": [
        {
          "title": "VoiceOver (iOS)",
          "tables": [{ "name": "Button", "announcement": "\"Submit, button\"", "properties": [...] }]
        }
      ]
    }
  ]
}
Copy the full JSON output from Cursor’s chat.
Make sure to copy the entire JSON block. Partial copies cause validation errors in the plugin.

​
Step 3: Generate in Figma

1

Open your Figma file

Navigate to the file where you want to create the documentation.
2

Launch the plugin

Go to Plugins → Development → Echo Specs
3

Paste and generate

Paste the JSON into the text area and click Generate. The plugin auto-detects the spec type.

​
Result

The plugin creates a documentation frame with:
  • Component name and guidelines
  • Formatted tables and properties
  • Placeholder areas for component previews
If a documentation frame appears, your setup is working correctly.

​
Tips for better output

​
Be specific about states

Mention all states (selected, disabled, expanded) in your prompt. The agent cannot infer states that aren’t visible in the current Figma frame.

​
Describe the parts

For complex components, describe the interactive elements:
  • “This is a tooltip. The bell icon triggers it, and the bubble appears on hover and focus.”
  • “This is a tab bar with 3 tabs. Only one can be selected at a time.”

​
Get the project

The Echo Specs repository is private. If you don’t have access, request it from ian.guisard. Once you have access, clone the repository: 
git clone https://github.com/iguisard/base-echo.git
This project is maintained by Ian Guisard. Reach out to Ian directly if you have questions or need help getting started.

​
Next steps

Explore spec types

Learn about all the spec types you can generate.

Figma plugin

Learn how to use the plugin and supported spec types.