Figma Spec Extractor Skill: Wireframe to Markdown Specs

What is the figma-spec-extractor skill?

The figma-spec-extractor skill lives in the xtone/ai_development_tools repository under development_workflows, and its instructions are written in Japanese. Give it a Figma design URL and it builds an implementation spec, step by step, as Markdown files.

Before starting, it collects four inputs: the Figma URL, the project goal used as the yardstick for reviews, a destination such as local Markdown, Notion or GitHub Wiki, and an implementation mode of new or extension.

What lands in the docs folder

• pages/ holds a README index plus one file per page, each with six fixed sections: elements, text, action buttons, referenced models, components used and open issues.
• use-cases.md and actors.md, with a use case by actor matrix that marks who takes part in each case.
• data-model.md, with a state transition section and design notes for every entity.
• components.md, grouped by Atomic Design level, with a page to organism mapping table to catch gaps.
• reviews/ with coverage, data model and components reports, each item tagged must, recommended or optional.
• existing-codebase.md, written only in extension mode.

Rules that keep the spec honest

• Attributes absent from Figma, such as business requirements, KPIs or invented features like login and payment, are never added by guesswork.
• Anything derivable from the structure, such as page roles, state transitions and typical pain points, may appear in the main text.
• Missing items are listed only at review steps 6, 9 and 12, then shown to you.
• Generic entities with no page in Figma, such as StaticPage, User or Session, are proposed in reviews and left undefined in the model.
• Helper agents receive the list of valid entity and column IDs, and the parent agent greps the output afterwards to catch invented numbers.

Run modes and extension mode

Extension mode suits an existing repository: the skill surveys current models, routes and views first, then prefers reusing a model, adding a column, repurposing a column after a code search, and only then creating a new entity.

• Hybrid, the recommended mode, pauses for your confirmation after steps 0, 1, 4, 6, 7, 9 and 12.
• Fully automatic shows you only the review results.
• Iterative reflection always runs the final step, which loops through questions and updates every related document. It is recommended with extension mode.

Who the figma-spec-extractor skill is for

Best for

• Turning a finished Figma wireframe into documents a team can build from before any code exists.
• Adding a feature to an existing app, where extension mode reuses current models. For naming and structuring the resulting parts, see web-component-design.
• Teams that want design gaps recorded as prioritised review lists instead of buried in chat.

Not for

• Generating visual code. The output is documentation. To work on Figma files directly from an agent, see figma-edit-mcp.
• Setups without an authenticated Figma MCP server, because every extraction step reads design data through it.
• A single quick screen. The full process runs many steps with review checkpoints.

Use it with UiChemy

This skill produces specs for building an application, not a website layout. If your Figma file describes a WordPress site, run UiChemy Figma to WordPress on it for an editable build, and keep these specs for any app logic. Click Get Started on uichemy.com.

How to install Figma Spec Extractor Skill: Wireframe to Markdown Specs

/plugin marketplace add xtone/ai_development_tools

1. Add the marketplace in Claude Code

   Run /plugin marketplace add xtone/ai_development_tools, the HTTPS style command shown in the README. An SSH form with the [email protected] address is also given.

2. Install the workflow plugin

   Run /plugin install development-workflows@xtone-ai-development-tools. The README lists development-workflows as the plugin for workflow skills, and this skill sits in its development_workflows folder.

3. Or copy the folder by hand

   Run git clone https://github.com/xtone/ai_development_tools.git, then copy development_workflows/skills/figma-spec-extractor, including its references folder, to where your agent loads skills.

4. Authenticate the Figma server

   The skill expects a figma-dev MCP server to be authenticated, and tells you to use /mcp if it is not. It also refers to a figma-use skill from the official Figma plugin.

5. Start with a Figma URL

   Provide the design URL, the project goal, a destination for the docs and an implementation mode, then work in the directory where docs/ should be written.

Check that it loaded

Ask the agent to extract specs from a Figma wireframe URL. It should ask for your goal, destination and mode, then create docs/pages and docs/reviews before extracting anything.

Read the official instructions on GitHub

Key features

• Staged extractionWork runs from step 0 to step 14, with an extra step 0.5 in extension mode. Each stage builds on the files written by the one before it.
• Fixed docs layoutOutput always follows the same tree: pages, use cases, actors, data model, components and three reviews, so teammates know where to look.
• Six-section page filesEvery page file carries the same six sections, and a final check confirms all of them exist for every page.
• Scoped IDsUse cases, actors, entities, columns, relations and components get IDs such as UC-01, A-01, E-01 and CMP-01, numbered in discovery order with two digits and always cited with a name.
• No-guess principleBusiness requirements, KPIs, invented features and fictional personas are forbidden. Only what the structure of the design supports is written down.
• Three prioritised reviewsCoverage, data model and components reviews list what is missing or excessive, each item labelled must, recommended or optional.
• Canvas and prototype detectionIf every page has one width, the file is treated as a single width design. If it has no prototype reactions, it is treated as wireframe level.
• Reuse-first extension modeExisting models, routes and views are surveyed first, and column reuse is confirmed by searching the real code before any new entity is proposed.
• Parallel page workPer-page extraction runs in parallel helper agents, with a cheaper model formatting design data and a stronger one handling synthesis and review judgement.
• Question loopThe final step walks through each review with up to four questions per round, then updates all related documents and re-counts the summaries.

Frequently asked questions