[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DF12KJ4B5GEAPNVT55JEPR":3,"skill-same:01M6DF12KJ4B5GEAPNVT55JEPR":101},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":14,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M6DF12KJ4B5GEAPNVT55JEPR","transpose-to-figma",null,"Use when lifting a running or built UI back onto the Figma canvas (the G2 TRANSPOSE \u002F Code-to-Canvas edge of the design-review loop) and you must pick the right code-to-Figma path - story.to.design for the component-system loop, the Figma MCP generate_figma_design for live\u002Flocalhost screens, or html.to.design for an audit-only DOM record. NOT for Figma-to-code (use figma-implement-design).","Prekzursil\u002Fagent-skills-toolchain","Prekzursil","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F54636077?v=4","01M6DACZ1PCQHD99SCR1YXG28B","Andrei Mihai Visalon","01M6DACZ670WZF535V3WYYSS4Z",0,"MIT","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Fskills\u002Ftranspose-to-figma\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"transpose to figma","figma","edge","live","record","back","only","use","pick","system","loop","design","audit","code","generate","component","implement","canvas","review","MCP","2026-11-10 10:12:30",false,"---\nname: transpose-to-figma\ndescription: Use when lifting a running or built UI back onto the Figma canvas (the G2 TRANSPOSE \u002F Code-to-Canvas edge of the design-review loop) and you must pick the right code-to-Figma path - story.to.design for the component-system loop, the Figma MCP generate_figma_design for live\u002Flocalhost screens, or html.to.design for an audit-only DOM record. NOT for Figma-to-code (use figma-implement-design).\n---\n\n\u003C!-- origin: user (design-SOTA research, 2026-06-30); implements DESIGN-SKILLS-AND-EVAL.md §1.2, DESIGN-WORKFLOW.md G2\u002F§1\u002F§3, FIGMA-SETUP.md §1\u002F§2.3\u002F§2.6\u002F§3 -->\n\n\n# transpose-to-figma Skill\n\nThe **G2 TRANSPOSE** gate of the TCR design-review loop — the *altitude selector* for\nthe code-to-Figma edge. Its one job: lift the **running UI onto the canvas so you\ncritique reality, not a stale design file** — and pick the *right* transpose path for\nthe situation so you don't pay for drift you didn't need.\n\n**Skill location:** `~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002F`\n\n> Implements `DESIGN-SKILLS-AND-EVAL.md §1.2` (the `transpose-to-figma` row),\n> `DESIGN-WORKFLOW.md` G2 + §1 (lossy round-trip) + §3 (the transpose→discuss→revert\n> micro-loop), and `FIGMA-SETUP.md §1` (transpose-plugin table) + `§2.3` (tool surface)\n> + `§2.6` (Code Connect) + `§3` (token spine). Cross-reference **FIGMA-SETUP.md** for\n> MCP install\u002Fauth, rate limits, and the token pipeline before first use.\n\n---\n\n## Overview — the one load-bearing truth\n\n**The code → Figma → code round-trip is LOSSY and render-mediated.** `generate_figma_design`\ndoes not convert code to Figma; it spins your dev server, renders in a browser, and\n**serializes the rendered DOM**. Visual structure transfers; **React state, routing, API\ncalls, and business logic do NOT.** (`DESIGN-WORKFLOW.md §1`)\n\n**The only things that round-trip cleanly:**\n1. **W3C DTCG design tokens** (Tokens Studio ⇄ Git ⇄ Style Dictionary).\n2. **Code-Connected components** (the agent emits *your* `\u003CButton>`, not a re-derived div).\n\nEverything else is a *visual snapshot* — useful to look at and discuss, never a second\nsource of truth. This is why **revert is a first-class gate** (G6): treat every apply-back\nas a reversible commit; keep only the visual delta.\n\n---\n\n## When to use\n\n- You are at **G2** of a design-review pass on Reframe \u002F momentstudio \u002F WebCoder \u002F bilbo\n  and need the live UI on the canvas to critique or hand a node to detailed editing.\n- You must decide **which** importer to drive (the altitude decision below) and you don't\n  want to silently introduce design-system drift.\n- You need to document **what will and won't survive** the round-trip before anyone edits.\n\n**When NOT to use:**\n- Going Figma → code (implementing a node) → **figma-implement-design**.\n- Plain Figma data fetch \u002F MCP setup \u002F troubleshooting → **figma**.\n- Pushing a component library to Claude Design → **design-sync**.\n\n---\n\n## The altitude decision (the key insight)\n\nPick by **where the truth lives + what fidelity you need**, not by habit. DOM-accurate ≫\nscreenshot; for your *own* apps never reach for a vision\u002Fscreenshot importer.\n\n```dot\ndigraph altitude {\n  \"Storybook \u002F published kit exists\\nAND you want the system loop?\" [shape=diamond];\n  \"Need an audit \u002F benchmark record only?\" [shape=diamond];\n  \"Where does the UI run?\" [shape=diamond];\n  \"story.to.design\\n(system loop, LOW drift)\" [shape=box];\n  \"html.to.design\\n(audit record only, HIGH drift)\" [shape=box];\n  \"generate_figma_design\\n(Figma MCP, MEDIUM drift)\" [shape=box];\n\n  \"Storybook \u002F published kit exists\\nAND you want the system loop?\" -> \"story.to.design\\n(system loop, LOW drift)\" [label=\"yes\"];\n  \"Storybook \u002F published kit exists\\nAND you want the system loop?\" -> \"Need an audit \u002F benchmark record only?\" [label=\"no\"];\n  \"Need an audit \u002F benchmark record only?\" -> \"html.to.design\\n(audit record only, HIGH drift)\" [label=\"yes\"];\n  \"Need an audit \u002F benchmark record only?\" -> \"Where does the UI run?\" [label=\"no\"];\n  \"Where does the UI run?\" -> \"generate_figma_design\\n(Figma MCP, MEDIUM drift)\" [label=\"live \u002F staging \u002F localhost\"];\n}\n```\n\n| Path | Direction | Granularity | Drift | Use for | What lands in Figma |\n|---|---|---|---|---|---|\n| **story.to.design** | Storybook\u002Fcode → **real components + variants** | component | ? Low | **the system loop** | your component graph (carries Code Connect IDs + token refs) |\n| **`generate_figma_design`** (Figma MCP) | live UI incl. **localhost** → semantic frames | screen | ? Medium | live\u002Fauth'd\u002Flocal app capture | editable frames, render-mediated |\n| **html.to.design** | web\u002Fapp → flat editable layers | flat | ? High | **audit\u002Fbenchmark record only** | flat layers — *look at*, do not bind |\n| *image.to.design \u002F Codia* | screenshot → AI-guessed layers | lossy | ? Highest | only when you have **no DOM** (competitor native app, video frame) | hallucinated structure |\n\n> **Rule:** `story.to.design` (system loop) or `generate_figma_design` (live) for your\n> own apps. `html.to.design` is an audit artifact, **not** the system loop — screenshot\u002FDOM\n> importers drift the moment Figma naming diverges from code (`FIGMA-SETUP.md §1`).\n\nLet the harness make the call deterministically:\n\n```powershell\n# Recommend a path + drift class + caveats + the exact next tool call:\nnode ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs select --target localhost --has-storybook\nnode ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs select --target live --auth\nnode ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs select --target audit\n# -> JSON {chosenAltitude, tool, driftClass, surviving, caveat, nextCall} + SUCCESS:transpose-select-\u003Cid>\n```\n\n---\n\n## Driving each path\n\n### A. System loop — `story.to.design` (LOW drift, the preferred path)\n\nUse when the app has a **Storybook or published component kit**. What lands in Figma **is**\nyour component graph, so Code Connect IDs and token references come along for free — every\nfuture G6 reconcile becomes \"reuse my component,\" not \"generate fresh divs.\"\n\n1. Run the **story.to.design** plugin against the Storybook URL (component-level import).\n2. Confirm real components + variants imported (not flat frames).\n3. Record it as a **system-loop** transpose (see \"Record\" below).\n\n> Greenfield app with no kit? There is nothing for Code Connect \u002F tokens to bind to. Drop\n> to the **audit loop**: extract tokens manually first (`design-tokens-pipeline` \u002F Tokens\n> Studio), *then* transpose. The loop **rewards maturity; it does not manufacture it**\n> (`DESIGN-WORKFLOW.md` G0\u002FG2).\n\n### B. Live \u002F localhost — `generate_figma_design` (MEDIUM drift, the workhorse)\n\nThe **Code-to-Canvas** primitive: turns live\u002Fstaging\u002F**localhost** UI into editable frames.\nRender-mediated — it spins your dev server, renders in a browser, and serializes the DOM.\n\n1. Resolve any target node URL you already have (mirrors `figma-implement-design` parsing):\n   ```powershell\n   node ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs resolve --url \"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002F\u003CfileKey>\u002F\u003Cname>?node-id=1-2\"\n   # -> { fileKey, nodeId } + SUCCESS:transpose-resolve-\u003Cid>\n   ```\n2. Call the MCP tool **`generate_figma_design`** with the live\u002Flocalhost URL (e.g. an\n   Electron renderer's Vite port like Reframe on `:5173`; works behind auth via the capture\n   path). Capture IDs are **single-use**.\n3. Verify the imported frame matches the live render — fonts, spacing, and **real states**\n   (empty \u002F error \u002F loading, not just the happy path).\n\n> Beta caveat: `generate_figma_design` + `use_figma` are **free during beta, slated to become\n> usage-based paid** — budget for it. **Don't let a beta gate the loop:** if it flakes,\n> degrade gracefully to *screenshot → critique (ui-audit Track-B) → MCP-fed edit*\n> (`DESIGN-WORKFLOW.md §5`).\n\n### C. Audit record — `html.to.design` (HIGH drift, look-only)\n\nDOM-accurate flat capture that handles auth\u002Fprivate\u002Flocalhost. Fine to **look at and\ncritique**; **wrong for the system loop** — it produces flat layers with no component\u002Ftoken\nbinding, and screenshot-style imports cause design-system drift. Tag the result audit-only.\n\n---\n\n## Record the transpose (the revert-surface manifest)\n\nAfter any path, write a typed record so the downstream critique\u002Freconcile gates know what is\nbound (and therefore revertible) vs. what is a throwaway snapshot:\n\n```powershell\n# System loop (both bound) -> systemLoopReady: true, revert via token diff:\nnode ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs record `\n  --path system-loop --screens home,settings --code-connect --token-refs `\n  --out .\u002Ftranspose-out\n\n# Audit record (nothing bound) -> emits the AUDIT-ONLY warning:\nnode ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs record --path audit --out .\u002Ftranspose-out\n```\n\n`transpose-record.json` shape:\n```jsonc\n{\n  \"id\": \"transpose-\u003Cid>\",\n  \"path\": \"system-loop\",\n  \"driftClass\": \"low\",\n  \"screens\": [\"home\", \"settings\"],\n  \"survives\": [\n    \"DTCG design tokens (Tokens Studio \u003C-> Git \u003C-> Style Dictionary)\",\n    \"Code-Connected components (emits your real \u003CButton>, not a re-derived div)\"\n  ],\n  \"doesNotSurvive\": [\"React state\", \"routing\", \"API calls \u002F data fetch\", \"business logic\"],\n  \"systemLoopReady\": true,\n  \"revertSurface\": \"token diff (tiny + reviewable) — the clean revert channel\"\n}\n```\n\n`systemLoopReady` is true **only** when nodes are both Code-Connected **and** token-bound;\notherwise the record is flagged AUDIT-only and must not become a second source of truth.\n\n---\n\n## Standard questions for this gate (the G2 question bank)\n\nFrom `DESIGN-WORKFLOW.md` G2 — ask these before declaring the transpose good:\n\n- Does the imported frame **match the live render** — fonts, spacing, and **real states**\n  (empty \u002F error \u002F loading too), not just the happy path?\n- Which screens **carry the experience**? Focus there; don't transpose the whole app.\n- Do nodes carry **Code Connect IDs + token refs** (system loop) or are they **flat layers**\n  (audit only)? If flat, you are in the audit loop — say so.\n- Where is the source of truth — **repo or Figma library**? (Default: repo-native for these\n  code-first apps; treat Figma as a detail workshop fed from code, not a parallel canon.)\n\n---\n\n## What survives vs. what is lost (cite this every time)\n\n| Round-trips cleanly (KEEP) | Lost in transpose (DO NOT trust the canvas for) |\n|---|---|\n| **DTCG design tokens** — both sides dereference the *same* JSON | React state |\n| **Code-Connected components** — your real component, not re-derived markup | Routing |\n| | API calls \u002F data fetch |\n| | Business logic \u002F interaction wiring |\n\n**Consequence (the revert edge, G6):** every apply-back is a **reversible commit**; diff for\nlogic regressions; **keep only the visual delta, revert anything that re-touched\nstate\u002Frouting\u002Fdata.** System-wide changes ride the **token PR**, not per-file edits, so they\nare deterministic and revertible. Figma is the source of truth for *visual* decisions only.\n\n---\n\n## Prerequisites (one-time — see FIGMA-SETUP.md)\n\n- **Figma MCP server** installed + authed (`claude plugin install figma@claude-plugins-official`,\n  or `claude mcp add --transport http figma https:\u002F\u002Fmcp.figma.com\u002Fmcp`). Prefer **Remote** —\n  the write\u002Ftranspose tools (`generate_figma_design`, `use_figma`) are remote-only.\n- **≥1 Dev\u002FFull seat** — Starter\u002FView seats cap at ~6 MCP calls\u002Fmonth (a toy).\n- **Code-Connect your shared kit once** — the single biggest fidelity lever; without it,\n  reports ~85–90% styling inaccuracy \u002F generic hardcoded JSX.\n- **Tokens Studio ⇄ Git ⇄ Style Dictionary** stood up — the only lossless channel and the\n  clean revert surface.\n\n> Full install\u002Fauth, rate limits, Code Connect, and the token pipeline: **FIGMA-SETUP.md**.\n\n---\n\n## Terminal-state outputs\n\nEvery subcommand prints a marker on its last line (`AGENTS.md §4` anti-degeneration contract):\n- `SUCCESS:transpose-select-\u003Cid>` \u002F `FAILED:transpose-select-\u003Cid> \u003Creason>`\n- `SUCCESS:transpose-resolve-\u003Cid>` \u002F `FAILED:transpose-resolve-\u003Cid> \u003Creason>`\n- `SUCCESS:transpose-\u003Cid>` \u002F `FAILED:transpose-\u003Cid> \u003Creason>` (record)\n\n---\n\n## Common mistakes\n\n| Mistake | Fix |\n|---|---|\n| Using `html.to.design` \u002F a screenshot importer as the system loop | DOM\u002Fscreenshot imports drift; use `story.to.design` (system) or `generate_figma_design` (live). Reserve flat capture for an audit record only. |\n| Trusting the transposed canvas for behavior | It's a *visual snapshot*. State\u002Frouting\u002Fdata did not transfer. Verify wiring in code, not on canvas. |\n| Letting the `generate_figma_design` beta gate the whole loop | Degrade to screenshot → ui-audit Track-B critique → MCP-fed edit. The round-trip is a nicety, not a hard dependency. |\n| Running two sources of truth | Default repo-native (Claude Design + DesignSync). Figma is a detail workshop fed from code; reconcile via Code Connect only if a teammate lives in Figma. |\n| Transposing the whole app | Transpose only the screens that carry the experience; narrow scope per pass (NN\u002Fg 1-hour-critique rhythm). |\n| Treating an unbound import as shippable canon | If nodes aren't both Code-Connected and token-bound, it's audit-only. `record` flags this. |\n\n---\n\n## Where this sits in the loop\n\n```\nG1 AUDIT (ui-audit) ──▶ G2 TRANSPOSE (this skill) ──▶ G3 CRITIQUE (critique-panel)\n                                                          │\n                              G6 RECONCILE (figma-implement-design + token PR) ◀── G4\u002FG5\n```\n\n**REQUIRED NEIGHBORS:** `ui-audit` (G1 + the degrade-to-screenshot fallback) · `figma` (MCP\nsetup\u002Ffetch) · `figma-implement-design` (G6 Figma→code) · `design-sync` (repo→Claude Design).\nThis skill is the **altitude selector** only — it picks and drives the transpose path and\nrecords the lossy-revert surface; it does not implement code (that's G6).\n\n---\n\n## TDD\n\nSanity-check the three subcommands (no browser, no MCP):\n```powershell\ncd ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\nnode transpose.mjs select --target localhost --has-storybook   # -> system-loop, low drift\nnode transpose.mjs select --target audit                       # -> audit, high drift\nnode transpose.mjs resolve --url \"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FAbC123\u002FApp?node-id=12-34\"  # -> {fileKey:AbC123, nodeId:12:34}\nnode transpose.mjs record --path system-loop --code-connect --token-refs --out .\u002F_t   # -> systemLoopReady:true\nnode transpose.mjs record --path audit --out .\u002F_t              # -> AUDIT-only warning\n```\nExpect a `SUCCESS:transpose-*` marker on the last line of each.\n","\u003C!-- origin: user (design-SOTA research, 2026-06-30); implements DESIGN-SKILLS-AND-EVAL.md §1.2, DESIGN-WORKFLOW.md G2\u002F§1\u002F§3, FIGMA-SETUP.md §1\u002F§2.3\u002F§2.6\u002F§3 -->\n\n\n# transpose-to-figma Skill\n\nThe **G2 TRANSPOSE** gate of the TCR design-review loop — the *altitude selector* for\nthe code-to-Figma edge. Its one job: lift the **running UI onto the canvas so you\ncritique reality, not a stale design file** — and pick the *right* transpose path for\nthe situation so you don't pay for drift you didn't need.\n\n**Skill location:** `~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002F`\n\n> Implements `DESIGN-SKILLS-AND-EVAL.md §1.2` (the `transpose-to-figma` row),\n> `DESIGN-WORKFLOW.md` G2 + §1 (lossy round-trip) + §3 (the transpose→discuss→revert\n> micro-loop), and `FIGMA-SETUP.md §1` (transpose-plugin table) + `§2.3` (tool surface)\n> + `§2.6` (Code Connect) + `§3` (token spine). Cross-reference **FIGMA-SETUP.md** for\n> MCP install\u002Fauth, rate limits, and the token pipeline before first use.\n\n---\n\n## Overview — the one load-bearing truth\n\n**The code → Figma → code round-trip is LOSSY and render-mediated.** `generate_figma_design`\ndoes not convert code to Figma; it spins your dev server, renders in a browser, and\n**serializes the rendered DOM**. Visual structure transfers; **React state, routing, API\ncalls, and business logic do NOT.** (`DESIGN-WORKFLOW.md §1`)\n\n**The only things that round-trip cleanly:**\n1. **W3C DTCG design tokens** (Tokens Studio ⇄ Git ⇄ Style Dictionary).\n2. **Code-Connected components** (the agent emits *your* `\u003CButton>`, not a re-derived div).\n\nEverything else is a *visual snapshot* — useful to look at and discuss, never a second\nsource of truth. This is why **revert is a first-class gate** (G6): treat every apply-back\nas a reversible commit; keep only the visual delta.\n\n---\n\n## When to use\n\n- You are at **G2** of a design-review pass on Reframe \u002F momentstudio \u002F WebCoder \u002F bilbo\n  and need the live UI on the canvas to critique or hand a node to detailed editing.\n- You must decide **which** importer to drive (the altitude decision below) and you don't\n  want to silently introduce design-system drift.\n- You need to document **what will and won't survive** the round-trip before anyone edits.\n\n**When NOT to use:**\n- Going Figma → code (implementing a node) → **figma-implement-design**.\n- Plain Figma data fetch \u002F MCP setup \u002F troubleshooting → **figma**.\n- Pushing a component library to Claude Design → **design-sync**.\n\n---\n\n## The altitude decision (the key insight)\n\nPick by **where the truth lives + what fidelity you need**, not by habit. DOM-accurate ≫\nscreenshot; for your *own* apps never reach for a vision\u002Fscreenshot importer.\n\n```dot\ndigraph altitude {\n  \"Storybook \u002F published kit exists\\nAND you want the system loop?\" [shape=diamond];\n  \"Need an audit \u002F benchmark record only?\" [shape=diamond];\n  \"Where does the UI run?\" [shape=diamond];\n  \"story.to.design\\n(system loop, LOW drift)\" [shape=box];\n  \"html.to.design\\n(audit record only, HIGH drift)\" [shape=box];\n  \"generate_figma_design\\n(Figma MCP, MEDIUM drift)\" [shape=box];\n\n  \"Storybook \u002F published kit exists\\nAND you want the system loop?\" -> \"story.to.design\\n(system loop, LOW drift)\" [label=\"yes\"];\n  \"Storybook \u002F published kit exists\\nAND you want the system loop?\" -> \"Need an audit \u002F benchmark record only?\" [label=\"no\"];\n  \"Need an audit \u002F benchmark record only?\" -> \"html.to.design\\n(audit record only, HIGH drift)\" [label=\"yes\"];\n  \"Need an audit \u002F benchmark record only?\" -> \"Where does the UI run?\" [label=\"no\"];\n  \"Where does the UI run?\" -> \"generate_figma_design\\n(Figma MCP, MEDIUM drift)\" [label=\"live \u002F staging \u002F localhost\"];\n}\n```\n\n| Path | Direction | Granularity | Drift | Use for | What lands in Figma |\n|---|---|---|---|---|---|\n| **story.to.design** | Storybook\u002Fcode → **real components + variants** | component | ? Low | **the system loop** | your component graph (carries Code Connect IDs + token refs) |\n| **`generate_figma_design`** (Figma MCP) | live UI incl. **localhost** → semantic frames | screen | ? Medium | live\u002Fauth'd\u002Flocal app capture | editable frames, render-mediated |\n| **html.to.design** | web\u002Fapp → flat editable layers | flat | ? High | **audit\u002Fbenchmark record only** | flat layers — *look at*, do not bind |\n| *image.to.design \u002F Codia* | screenshot → AI-guessed layers | lossy | ? Highest | only when you have **no DOM** (competitor native app, video frame) | hallucinated structure |\n\n> **Rule:** `story.to.design` (system loop) or `generate_figma_design` (live) for your\n> own apps. `html.to.design` is an audit artifact, **not** the system loop — screenshot\u002FDOM\n> importers drift the moment Figma naming diverges from code (`FIGMA-SETUP.md §1`).\n\nLet the harness make the call deterministically:\n\n```powershell\n# Recommend a path + drift class + caveats + the exact next tool call:\nnode ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs select --target localhost --has-storybook\nnode ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs select --target live --auth\nnode ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs select --target audit\n# -> JSON {chosenAltitude, tool, driftClass, surviving, caveat, nextCall} + SUCCESS:transpose-select-\u003Cid>\n```\n\n---\n\n## Driving each path\n\n### A. System loop — `story.to.design` (LOW drift, the preferred path)\n\nUse when the app has a **Storybook or published component kit**. What lands in Figma **is**\nyour component graph, so Code Connect IDs and token references come along for free — every\nfuture G6 reconcile becomes \"reuse my component,\" not \"generate fresh divs.\"\n\n1. Run the **story.to.design** plugin against the Storybook URL (component-level import).\n2. Confirm real components + variants imported (not flat frames).\n3. Record it as a **system-loop** transpose (see \"Record\" below).\n\n> Greenfield app with no kit? There is nothing for Code Connect \u002F tokens to bind to. Drop\n> to the **audit loop**: extract tokens manually first (`design-tokens-pipeline` \u002F Tokens\n> Studio), *then* transpose. The loop **rewards maturity; it does not manufacture it**\n> (`DESIGN-WORKFLOW.md` G0\u002FG2).\n\n### B. Live \u002F localhost — `generate_figma_design` (MEDIUM drift, the workhorse)\n\nThe **Code-to-Canvas** primitive: turns live\u002Fstaging\u002F**localhost** UI into editable frames.\nRender-mediated — it spins your dev server, renders in a browser, and serializes the DOM.\n\n1. Resolve any target node URL you already have (mirrors `figma-implement-design` parsing):\n   ```powershell\n   node ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs resolve --url \"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002F\u003CfileKey>\u002F\u003Cname>?node-id=1-2\"\n   # -> { fileKey, nodeId } + SUCCESS:transpose-resolve-\u003Cid>\n   ```\n2. Call the MCP tool **`generate_figma_design`** with the live\u002Flocalhost URL (e.g. an\n   Electron renderer's Vite port like Reframe on `:5173`; works behind auth via the capture\n   path). Capture IDs are **single-use**.\n3. Verify the imported frame matches the live render — fonts, spacing, and **real states**\n   (empty \u002F error \u002F loading, not just the happy path).\n\n> Beta caveat: `generate_figma_design` + `use_figma` are **free during beta, slated to become\n> usage-based paid** — budget for it. **Don't let a beta gate the loop:** if it flakes,\n> degrade gracefully to *screenshot → critique (ui-audit Track-B) → MCP-fed edit*\n> (`DESIGN-WORKFLOW.md §5`).\n\n### C. Audit record — `html.to.design` (HIGH drift, look-only)\n\nDOM-accurate flat capture that handles auth\u002Fprivate\u002Flocalhost. Fine to **look at and\ncritique**; **wrong for the system loop** — it produces flat layers with no component\u002Ftoken\nbinding, and screenshot-style imports cause design-system drift. Tag the result audit-only.\n\n---\n\n## Record the transpose (the revert-surface manifest)\n\nAfter any path, write a typed record so the downstream critique\u002Freconcile gates know what is\nbound (and therefore revertible) vs. what is a throwaway snapshot:\n\n```powershell\n# System loop (both bound) -> systemLoopReady: true, revert via token diff:\nnode ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs record `\n  --path system-loop --screens home,settings --code-connect --token-refs `\n  --out .\u002Ftranspose-out\n\n# Audit record (nothing bound) -> emits the AUDIT-ONLY warning:\nnode ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs record --path audit --out .\u002Ftranspose-out\n```\n\n`transpose-record.json` shape:\n```jsonc\n{\n  \"id\": \"transpose-\u003Cid>\",\n  \"path\": \"system-loop\",\n  \"driftClass\": \"low\",\n  \"screens\": [\"home\", \"settings\"],\n  \"survives\": [\n    \"DTCG design tokens (Tokens Studio \u003C-> Git \u003C-> Style Dictionary)\",\n    \"Code-Connected components (emits your real \u003CButton>, not a re-derived div)\"\n  ],\n  \"doesNotSurvive\": [\"React state\", \"routing\", \"API calls \u002F data fetch\", \"business logic\"],\n  \"systemLoopReady\": true,\n  \"revertSurface\": \"token diff (tiny + reviewable) — the clean revert channel\"\n}\n```\n\n`systemLoopReady` is true **only** when nodes are both Code-Connected **and** token-bound;\notherwise the record is flagged AUDIT-only and must not become a second source of truth.\n\n---\n\n## Standard questions for this gate (the G2 question bank)\n\nFrom `DESIGN-WORKFLOW.md` G2 — ask these before declaring the transpose good:\n\n- Does the imported frame **match the live render** — fonts, spacing, and **real states**\n  (empty \u002F error \u002F loading too), not just the happy path?\n- Which screens **carry the experience**? Focus there; don't transpose the whole app.\n- Do nodes carry **Code Connect IDs + token refs** (system loop) or are they **flat layers**\n  (audit only)? If flat, you are in the audit loop — say so.\n- Where is the source of truth — **repo or Figma library**? (Default: repo-native for these\n  code-first apps; treat Figma as a detail workshop fed from code, not a parallel canon.)\n\n---\n\n## What survives vs. what is lost (cite this every time)\n\n| Round-trips cleanly (KEEP) | Lost in transpose (DO NOT trust the canvas for) |\n|---|---|\n| **DTCG design tokens** — both sides dereference the *same* JSON | React state |\n| **Code-Connected components** — your real component, not re-derived markup | Routing |\n| | API calls \u002F data fetch |\n| | Business logic \u002F interaction wiring |\n\n**Consequence (the revert edge, G6):** every apply-back is a **reversible commit**; diff for\nlogic regressions; **keep only the visual delta, revert anything that re-touched\nstate\u002Frouting\u002Fdata.** System-wide changes ride the **token PR**, not per-file edits, so they\nare deterministic and revertible. Figma is the source of truth for *visual* decisions only.\n\n---\n\n## Prerequisites (one-time — see FIGMA-SETUP.md)\n\n- **Figma MCP server** installed + authed (`claude plugin install figma@claude-plugins-official`,\n  or `claude mcp add --transport http figma https:\u002F\u002Fmcp.figma.com\u002Fmcp`). Prefer **Remote** —\n  the write\u002Ftranspose tools (`generate_figma_design`, `use_figma`) are remote-only.\n- **≥1 Dev\u002FFull seat** — Starter\u002FView seats cap at ~6 MCP calls\u002Fmonth (a toy).\n- **Code-Connect your shared kit once** — the single biggest fidelity lever; without it,\n  reports ~85–90% styling inaccuracy \u002F generic hardcoded JSX.\n- **Tokens Studio ⇄ Git ⇄ Style Dictionary** stood up — the only lossless channel and the\n  clean revert surface.\n\n> Full install\u002Fauth, rate limits, Code Connect, and the token pipeline: **FIGMA-SETUP.md**.\n\n---\n\n## Terminal-state outputs\n\nEvery subcommand prints a marker on its last line (`AGENTS.md §4` anti-degeneration contract):\n- `SUCCESS:transpose-select-\u003Cid>` \u002F `FAILED:transpose-select-\u003Cid> \u003Creason>`\n- `SUCCESS:transpose-resolve-\u003Cid>` \u002F `FAILED:transpose-resolve-\u003Cid> \u003Creason>`\n- `SUCCESS:transpose-\u003Cid>` \u002F `FAILED:transpose-\u003Cid> \u003Creason>` (record)\n\n---\n\n## Common mistakes\n\n| Mistake | Fix |\n|---|---|\n| Using `html.to.design` \u002F a screenshot importer as the system loop | DOM\u002Fscreenshot imports drift; use `story.to.design` (system) or `generate_figma_design` (live). Reserve flat capture for an audit record only. |\n| Trusting the transposed canvas for behavior | It's a *visual snapshot*. State\u002Frouting\u002Fdata did not transfer. Verify wiring in code, not on canvas. |\n| Letting the `generate_figma_design` beta gate the whole loop | Degrade to screenshot → ui-audit Track-B critique → MCP-fed edit. The round-trip is a nicety, not a hard dependency. |\n| Running two sources of truth | Default repo-native (Claude Design + DesignSync). Figma is a detail workshop fed from code; reconcile via Code Connect only if a teammate lives in Figma. |\n| Transposing the whole app | Transpose only the screens that carry the experience; narrow scope per pass (NN\u002Fg 1-hour-critique rhythm). |\n| Treating an unbound import as shippable canon | If nodes aren't both Code-Connected and token-bound, it's audit-only. `record` flags this. |\n\n---\n\n## Where this sits in the loop\n\n```\nG1 AUDIT (ui-audit) ──▶ G2 TRANSPOSE (this skill) ──▶ G3 CRITIQUE (critique-panel)\n                                                          │\n                              G6 RECONCILE (figma-implement-design + token PR) ◀── G4\u002FG5\n```\n\n**REQUIRED NEIGHBORS:** `ui-audit` (G1 + the degrade-to-screenshot fallback) · `figma` (MCP\nsetup\u002Ffetch) · `figma-implement-design` (G6 Figma→code) · `design-sync` (repo→Claude Design).\nThis skill is the **altitude selector** only — it picks and drives the transpose path and\nrecords the lossy-revert surface; it does not implement code (that's G6).\n\n---\n\n## TDD\n\nSanity-check the three subcommands (no browser, no MCP):\n```powershell\ncd ~\u002F.claude\u002Fskills\u002Ftranspose-to-figma\nnode transpose.mjs select --target localhost --has-storybook   # -> system-loop, low drift\nnode transpose.mjs select --target audit                       # -> audit, high drift\nnode transpose.mjs resolve --url \"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FAbC123\u002FApp?node-id=12-34\"  # -> {fileKey:AbC123, nodeId:12:34}\nnode transpose.mjs record --path system-loop --code-connect --token-refs --out .\u002F_t   # -> systemLoopReady:true\nnode transpose.mjs record --path audit --out .\u002F_t              # -> AUDIT-only warning\n```\nExpect a `SUCCESS:transpose-*` marker on the last line of each.\n",{"name":5,"description":7},"main","a298c929b6cbd662e1fce54302ce520d5ceea1a5","skills\u002Ftranspose-to-figma","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain","https:\u002F\u002Fgithub.com\u002FPrekzursil","2026-11-02 14:30:57",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add Prekzursil\u002Fagent-skills-toolchain --skill transpose-to-figma",{"tool":69,"command":70},"bunx","bunx skills add Prekzursil\u002Fagent-skills-toolchain --skill transpose-to-figma",{"tool":72,"command":73},"pnpm","pnpm dlx skills add Prekzursil\u002Fagent-skills-toolchain --skill transpose-to-figma","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Fskills\u002Ftranspose-to-figma\u002FSKILL.md",true,[77,83,87,93,97],{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"figma_parity.mjs","SCRIPT","脚本",11658,"https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Fskills\u002Ftranspose-to-figma\u002Ffigma_parity.mjs",{"path":84,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":85,"sourceHtmlUrl":86},"figma_token_drift.mjs",8765,"https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Fskills\u002Ftranspose-to-figma\u002Ffigma_token_drift.mjs",{"path":88,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":91,"sourceHtmlUrl":92},"README.md","REFERENCE","参考文档",1698,"https:\u002F\u002Fgithub.com\u002Fstrmt7\u002Fai_skills_collection_benchmarked\u002Fblob\u002Fmain\u002Fincluded\u002Fskills\u002Fby-category\u002Fcoding-refactoring-repository-automation\u002Freddit-verified-gtm-registry\u002Fyc-intent-radar-skill\u002FREADME.md",{"path":94,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":95,"sourceHtmlUrl":96},"transpose.mjs",7710,"https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.mjs",{"path":98,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":99,"sourceHtmlUrl":100},"transpose.test.mjs",6522,"https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Fskills\u002Ftranspose-to-figma\u002Ftranspose.test.mjs",[102,123,148,174,188,204],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":52},"01M6DF7D7478R55P46REYH4QAC","clarify-requirements","Resolve genuine pre-execution ambiguity by scanning repo context, generating 1-6 grounded options, and asking 1-3 focused questions via AskUserQuestion. NOT for mid-task use (injection risk); NOT when the goal is already unambiguous; use to disambiguate vague prompts before any file edits.","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Fworkspace-hooks\u002Fskills\u002Fclarify-requirements\u002FSKILL.md",[],[109,110,111,112,113,114,115,116,117,39,118,119,120,121,122],"clarify requirements","clarify","requirements","risk","options","task","prompts","goal","scanning","context","repo","injection","execution","file",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":130,"publishedAt":52},"01M6DF79CA4BHJS66J8EZDBPWJ","openmm-md","Run FREE, open-source, Windows-native GPU molecular dynamics via the openmm-md MCP (OpenMM + CUDA on the local NVIDIA GPU). Use for protein \u002F protein-ligand MD when you want a free stack or are on Windows without a Schrodinger license. Covers the full workflow (prepare, solvate, minimize, equilibrate, production, analyze, mmgbsa) AND an honest decision guide vs Schrodinger Desmond, including how to run Desmond legitimately on Linux or a cloud GPU with a real license. This is a deliberately LESSER free alternative and does NOT replace the schrodinger MCP tools. Do NOT use it to pick a free tool when a validated FEP+, WaterMap, IFD-MD, or Prime MM-GBSA result is actually required.","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Fmcp\u002Fopenmm-md-mcp\u002Fskill\u002Fopenmm-md\u002FSKILL.md",[129],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[131,132,133,40,134,135,136,137,138,139,140,141,142,143,39,144,145,146,147,51],"openmm md","how","decision","linux","analyze","tool","stack","open","NVIDIA","gpu","license","workflow","windows","free","molecular dynamics","local","do",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":152,"categories":153,"keywords":160,"publishedAt":52},"01M6DF76C1MG85VEWP8VZCBNMN","visual-review","Take screenshots of web pages and UI using Playwright for visual review and iteration","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fvisual-review\u002FSKILL.md",[154,157],{"categoryNo":155,"categoryName":156,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":158,"categoryName":159,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[50,161,162,163,164,165,166,167,168,169,132,170,171,172,173],"visual","visual review","pages","web","false","iteration","take","check","slides","ui","screenshot","playwright","screenshots",{"skillNo":175,"name":176,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":178,"categories":179,"keywords":180,"publishedAt":52},"01M6DF73AQVCBZKEN0YXEX9FXP","status","Diagnostic status report — shows metaswarm installation state, project setup, and potential issues","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fstatus\u002FSKILL.md",[],[176,181,182,183,184,185,186,187],"setup","report","project","installation","project setup","issues","state",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":195,"publishedAt":52},"01M6DF6X6C2XB0P6GX76P7TTYV","start","Use when starting work on any task, when the user mentions metaswarm, or when the user wants to begin tracked development work","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fstart\u002FSKILL.md",[194],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[190,196,114,197,198,199,39,200,201,202,203],"start issue","issue","ready","work on issue","user","work","work on","development",{"skillNo":205,"name":181,"nameZh":6,"description":206,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":207,"categories":208,"keywords":209,"publishedAt":52},"01M6DF6QMJ9AJKFKHHKRT005PQ","Interactive project setup — detects your project, configures metaswarm, writes project-local files","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fsetup\u002FSKILL.md",[],[181,183,146,210,185,211],"files","interactive"]