od-figma-migration
Helps your agent migrate designs from Figma. It extracts elements, maps tokens, and generates the design. Useful for transferring visual interfaces between tools.
What it does
This tool helps transfer a design from a Figma file to a website. It takes your design information from Figma and turns it into code for a website.
When to use it
- ✓When you want to turn a Figma design into a website.
- ✓When migrating a design project from Figma to the web.
- ✓To create a website prototype from a Figma design.
Example of what to ask your AI
“Turn this Figma design into a website.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool first extracts the details from your Figma design. Then, it organizes this information and uses it to generate the website's code.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill od-figma-migrationOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/scenarios/od-figma-migration/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
od-figma-migration (scenario)
Spec §1 / §10.1 / §21.3.1 / §23.3.3: the canonical figma-migration
flow. The pipeline is sequenced so each stage's output is the next
stage's input — figma-extract writes figma/tree.json,
token-map writes token-map/colors.json (etc.), and generate
reads both before producing the HTML artifact.
Default pipeline
{
"stages": [
{ "id": "extract", "atoms": ["figma-extract"] },
{ "id": "tokens", "atoms": ["token-map"] },
{ "id": "generate", "atoms": ["file-write", "live-artifact"] },
{
"id": "critique", "atoms": ["critique-theater"],
"repeat": true,
"until": "critique.score>=4 || iterations>=3"
}
]
}
Required GenUI surfaces
The scenario expects two oauth-prompt / form surfaces from the
plugin layer:
figma-oauth—oauth.route='connector',connectorId='figma', persists at the project tier so multi-conversation work doesn't re-prompt.file-pick—kind='form', captures the Figma file URL on the first turn sofigma-extractknows where to read.
The daemon auto-derives the figma-oauth surface when
od.connectors.required[].id='figma' is declared and the connector
isn't yet authorised (spec §10.3.1 implicit oauth-prompt rule).
FAQ
What is a 'pipeline'?
It's a sequence of steps the tool follows to complete the task, like an assembly line.
What are 'stages'?
These are the main steps within the pipeline, where each step does a part of the work.
Why does the tool ask to connect to Figma?
It needs to access your Figma file to extract the design information.
Details
Original description by the author
Default reference pipeline for the figma-migration taskKind — figma-extract → token-map → generate → critique.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #607
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
bun-runtime
Has your agent use Bun to run, organize, and test code. It helps choose Bun over other tools and migrate existing projects.
affaan-m/ECC
database-migrations
Helps your agent make safe changes to databases. It ensures changes can be undone and minimizes downtime.
affaan-m/ECC
deployment-patterns
Sets up deployment and CI/CD workflows, containerization, and rollback strategies to ensure safe releases.
affaan-m/ECC