Skip to content
Skillpedia
Deploy & cloud (DevOps)101k · #607

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

https://github.com/nexu-io/open-design/blob/main/plugins/_official/scenarios/od-figma-migration/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/plugins/_official/scenarios/od-figma-migration/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
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-migration

Or 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.md
Technical 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 so figma-extract knows 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

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills