Quickstart

Create your first design specification in under 5 minutes

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

Skill	What it generates
@create-voice	Screen reader specs for VoiceOver, TalkBack, and ARIA
@create-color	Color token annotations for all elements and states
@create-overview	Component anatomy, variants, and states
@create-api	Property tables with values, defaults, and examples
@create-structure	Dimensional specs for spacing, padding, and sizing
@create-changelog	New changelog with initial entries
@update-changelog	Append entries to an existing changelog
@convert-changelog	Extract 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.