[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6H43HTF01HSKGEDB0XADVXW":3,"skill-same:01M6H43HTF01HSKGEDB0XADVXW":111},{"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":66,"commitSha":67,"skillDirectory":68,"forksCount":69,"repositoryHtmlUrl":70,"repositoryHomepageUrl":6,"ownerHtmlUrl":71,"ownerBlogUrl":72,"ownerDescription":73,"updatedAt":74,"install":75,"resources":88},"01M6H43HTF01HSKGEDB0XADVXW","dx-figma-extract",null,"Extract design context, tokens and screenshots from a Figma URL into figma-extract.md. Use after requirements when the story has a Figma URL. Not for general Figma browsing or without a spec directory.","easingthemes\u002Fdx-aem-flow","easingthemes","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F2750284?v=4","01M6H3XYGJY8QCX9ES36P2WF4H","Dragan Filipović","01M6H3XYMN1XVSGKN7N79SW3RH",7,"MIT","https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-core\u002Fskills\u002Fdx-figma-extract\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],"dx figma extract","figma","dx","extract","edit","mode","URL","port","app","desktop app","context","design","write","read","work","open","search","code","directory","MCP","2026-11-10 10:12:30",false,"---\nname: dx-figma-extract\ndescription: \"Extract design context, tokens and screenshots from a Figma URL into figma-extract.md. Use after requirements when the story has a Figma URL. Not for general Figma browsing or without a spec directory.\"\nargument-hint: \"[ADO Work Item ID] [Figma URL] — both optional, any order. Uses most recent story if ID omitted.\"\ncompatibility: \"Requires Figma desktop app with Dev Mode MCP enabled (port 3845). File must be open in Figma.\"\nmetadata:\n  version: 2.28.0\n  mcp-server: figma\n  category: design-to-code\nallowed-tools: [\"read\", \"edit\", \"search\", \"write\", \"agent\", \"figma\u002F*\", \"playwright\u002F*\"]\n---\n\nYou extract everything needed from a Figma design link — reference code, design tokens, screenshots — so that Figma is never consulted again in downstream steps.\n\nUse ultrathink for node selection logic — matching Figma frame names to story context requires careful reasoning.\n\n## 1. Parse Arguments & Locate Spec Directory\n\n**Parse `$ARGUMENTS` into two optional parts:** an ADO work item ID and a Figma URL. They can appear in any order, or only one, or neither.\n\nDetection rules:\n- **Figma URL:** any token containing `figma.com\u002F` — set `$FIGMA_URL_ARG`\n- **ADO ID:** any token that is purely numeric — set `$ADO_ID_ARG`\n- Remaining tokens: ignore (may be noise from slash-command parsing)\n\n**Locate spec directory** using only the ADO ID (never the Figma URL):\n```bash\nSPEC_DIR=$(bash .ai\u002Flib\u002Fdx-common.sh find-spec-dir $ADO_ID_ARG)\n```\n\nIf no ADO ID was provided, `find-spec-dir` returns the most recent spec directory. If the script exits with error, ask the user for the work item ID.\n\n## 2. Check Existing Output\n\n1. Check if `figma-extract.md` exists in the spec directory\n2. If it exists and `raw-story.md` hasn't changed → print `figma-extract.md already up to date — skipping` and STOP\n3. If stale → continue (regenerate)\n\n## 3. Find Figma URL\n\n**Priority order:**\n1. `$FIGMA_URL_ARG` (from arguments) — if provided, use it as the Figma URL\n2. `$SPEC_DIR\u002Fraw-story.md` — search for URLs matching `figma.com\u002Fdesign\u002F\u003CfileKey>\u002F\u003CfileName>?node-id=\u003CnodeId>`\n3. `$SPEC_DIR\u002Fdor-report.md` (Design section) — fallback if raw-story.md has no Figma URL\n\n**If no Figma URL found anywhere:** Print `No Figma URL found in story or arguments — skipping` and STOP.\n\n**URL Parsing:**\n- Extract `nodeId` from `node-id=` parameter, convert hyphens to colons (`1-2` → `1:2`)\n- Extract `fileKey` from the path segment after `\u002Fdesign\u002F` (recorded in figma-extract.md for reference)\n- If URL format is `figma.com\u002Fdesign\u002F:fileKey\u002Fbranch\u002F:branchKey\u002F:fileName` → use `branchKey` as fileKey\n\n**User-provided URL override:**\nIf `$FIGMA_URL_ARG` was provided AND raw-story.md also contains a Figma URL, record both in figma-extract.md and flag the override:\n```\n⚠️ Using user-provided Figma URL (differs from story URL)\n   Story URL: \u003Curl from raw-story.md>\n   User URL:  \u003Curl from user>\n```\nIf raw-story.md has no Figma URL, record the source as `\"User-provided URL (no story URL)\"`.\n\n## 4. Gather Story Context\n\nRead these files for component identification (used in node selection and relevance check):\n- `$SPEC_DIR\u002Fexplain.md` — distilled requirements with component names\n- `$SPEC_DIR\u002Fresearch.md` — codebase findings with component directories\n\nExtract and remember:\n- Component names (e.g., \"Header\", \"ProductCard\", \"hero\")\n- Variation names (e.g., \"brand\", \"default\", \"pdp\")\n- UI element names (e.g., \"dropdown\", \"stepper\", \"card\", \"teaser\")\n- Key terms from the story title and requirements\n\n## 5. Node Selection\n\nCall `get_metadata` to understand the node structure:\n```\nmcp__plugin_dx-core_figma__get_metadata\n  nodeId: \u003CnodeId>\n  clientLanguages: \"html,css,javascript\"\n```\n\nAnalyze the XML response:\n\n**Case A — Node is a COMPONENT, INSTANCE, or FRAME (single viewport, not a PAGE):**\nUse this node directly. Set `viewports: [{ name: \"default\", nodeId: \u003CnodeId> }]`. Proceed to Step 6.\n\n**Case B — Node is a PAGE or top-level FRAME with many children:**\n1. Parse child frame names from the XML\n2. **First, check for viewport variants** (Case C below) among the children\n3. If no viewport variants found, match against component names from explain.md\u002Fresearch.md:\n   - Case-insensitive substring match\n   - Strip common prefixes (e.g., \"Desktop\u002F\", \"Mobile\u002F\", \"Component\u002F\")\n   - Score by relevance to story context\n4. **High-confidence single match** → auto-select, print: `Auto-selected Figma node: \"\u003Cname>\" (ID: \u003CnodeId>)`\n5. **Multiple candidates** → ask the user:\n   ```\n   Figma link points to a page with multiple components:\n   1. \u003Cname1> (ID: \u003Cid1>)\n   2. \u003Cname2> (ID: \u003Cid2>)\n   3. \u003Cname3> (ID: \u003Cid3>)\n   Which component(s) should I extract? (numbers, comma-separated)\n   ```\n6. **No match** → ask the user with the full list of top-level children\n7. After selecting a node, check if IT contains viewport variants (Case C). A selected component frame may itself contain Desktop\u002FMobile children.\n\n**Case C — Viewport variants detected:**\n\nA node (the linked node itself, or a selected child) contains multiple viewport variants as children. Detect using these heuristics:\n\n1. **Name-based:** Child frame names containing (case-insensitive): `desktop`, `mobile`, `tablet`, `responsive`, `phone`, `web`, or common width values (`1440`, `1280`, `1024`, `768`, `375`, `390`, `414`)\n2. **Size-based:** Two or more sibling frames where one is wide (>900px) and another is narrow (\u003C500px) — check frame width from the XML `width` attribute\n3. **Pattern-based:** Names like `Component \u002F Desktop`, `Hero - Mobile`, `Desktop View`, `Mobile View`, `@desktop`, `@mobile`\n\n**When viewport variants are detected:**\n- Print: `Multi-viewport design detected: \u003Clist of variant names with dimensions>`\n- Set `viewports` list, e.g.: `[{ name: \"desktop\", nodeId: \"123:456\", width: 1440 }, { name: \"mobile\", nodeId: \"123:789\", width: 375 }]`\n- Sort viewports by width descending (desktop first)\n- Proceed to Step 6 which will extract each viewport separately\n\n**When NOT viewport variants:** Sibling frames that represent different components (e.g., \"Header\" and \"Footer\") are NOT viewport variants — they differ in content, not just width. Use name heuristics first; fall back to size comparison only for ambiguous cases.\n\n## 6. Extract Design Data\n\n**For each viewport** in the `viewports` list (or once if single viewport), make three MCP calls. When multiple viewports exist, loop through each and tag all output with the viewport name.\n\n### 6a. Design Context\n\n```\nmcp__plugin_dx-core_figma__get_design_context\n  nodeId: \u003Cviewport.nodeId>\n  clientLanguages: \"html,css,javascript\"\n```\n\nSave: reference code, annotations, design system hints. Tag with viewport name if multi-viewport.\n\n**Important:** The response contains image\u002FSVG asset URLs served locally by the Figma desktop MCP (e.g., `http:\u002F\u002Flocalhost:3845\u002Fassets\u002F\u003Chash>.png`). The PostToolUse hook automatically downloads these to `$SPEC_DIR\u002Fprototype\u002Fassets\u002F`. After the hook runs, check `$SPEC_DIR\u002Fprototype\u002F.figma-asset-manifest.json` for the downloaded file paths.\n\n### 6b. Screenshot\n\nBefore calling `get_screenshot`, write the target path so the PostToolUse hook saves the image there:\n\n**Single viewport:**\n```bash\nmkdir -p $SPEC_DIR\u002Fprototype\necho \"$SPEC_DIR\u002Fprototype\u002Ffigma-reference.png\" > .ai\u002F.figma-screenshot-target\n```\n\n**Multi-viewport:**\n```bash\nmkdir -p $SPEC_DIR\u002Fprototype\necho \"$SPEC_DIR\u002Fprototype\u002Ffigma-reference-\u003Cviewport.name>.png\" > .ai\u002F.figma-screenshot-target\n```\nExample: `figma-reference-desktop.png`, `figma-reference-mobile.png`\n\nThen call:\n```\nmcp__plugin_dx-core_figma__get_screenshot\n  nodeId: \u003Cviewport.nodeId>\n```\n\nThe hook automatically saves the PNG to the target path and reports the location via `additionalContext`.\n\n**Also create a convenience symlink\u002Fcopy** for backward compatibility: copy the desktop (widest) screenshot to `figma-reference.png` so downstream skills that expect the default filename still work.\n\n### 6c. Variable Definitions\n\nOnly call once (tokens are shared across viewports):\n```\nmcp__plugin_dx-core_figma__get_variable_defs\n  nodeId: \u003Cviewport.nodeId>  # use the first\u002Fdesktop viewport\n```\n\nSave: design token definitions (colors, spacing, typography variables).\n\n## 7. Screenshot Layer Analysis (Design Quality)\n\n**This step is mandatory.** Consult `references\u002Fdesign-quality.md` for the full pattern catalog, three-phase analysis process, and output format.\n\nDesigners sometimes paste website screenshots as context and overlay new elements on top. This step detects those patterns, classifies each node, and produces a cleaned reference code.\n\n### Summary\n\n1. **Phase 1 — Structural detection:** Scan the `get_metadata` XML and `get_design_context` reference code against the pattern catalog in `references\u002Fdesign-quality.md`. Classify each top-level child as `designed` | `hybrid` | `screenshot-context` | `decoration`.\n\n2. **Phase 2 — Visual confirmation:** Read the Figma screenshot image and cross-reference. For `screenshot-context` nodes, describe what existing UI is visible. Catch any gaps Phase 1 missed.\n\n3. **Phase 3 — Cleaned output:** Produce the Layer Classification table, Screenshot Regions table, and a cleaned reference code (screenshot layers stripped, real elements preserved).\n\n**If ALL nodes are `designed`** (no screenshots detected): print `Design quality: clean — no screenshot layers detected` and skip to Step 8. Do NOT add the `## Design Quality` section to figma-extract.md.\n\n**If any screenshots detected:** The cleaned reference code replaces the raw code in the `## Reference Code` section. Add `## Design Quality` section to figma-extract.md (between `## Screenshot` and `## Reference Code`) with the classification table and screenshot region descriptions.\n\n## 8. Design-vs-Story Relevance Check\n\n**This step is mandatory.** Consult `references\u002Frelevance-check.md` for the full scoring algorithm, mismatch report format, and output file conventions. Summary:\n\n1. Count keyword matches between story context (Step 4) and Figma design content\n2. **LOW (\u003C 2 matches):** warn user, write `figma-mismatch.md`, add `## Relevance Warning` to figma-extract.md\n3. **OK (>= 2 matches):** continue silently\n\n## 9. Analyze Dynamic Content & Build Breakpoint Tables\n\nConsult `references\u002Fdynamic-content.md` for detection heuristics and `references\u002Fbreakpoint-tables.md` for table format.\n\n### 9a. Dynamic Content Detection\n\nScan the design context reference code from Step 6 and identify elements with placeholder content. For each, record which CSS properties are content-dependent. Tag these values with **≈** in all output sections.\n\n### 9b. Breakpoint CSS Override Tables (multi-viewport only)\n\nWhen multi-viewport extraction is active, diff the design context across viewports to produce mobile-first CSS override tables:\n\n1. Extract element + property + value triples from each viewport's reference code\n2. Mobile baseline = all mobile triples\n3. Tablet overrides = only triples where tablet differs from mobile\n4. Desktop overrides = only triples where desktop differs from tablet\n\nMark content-dependent values with **≈**. Use viewport frame widths as breakpoint boundaries (or project breakpoints from research.md if available).\n\nSkip this step for single-viewport extractions.\n\n## 10. Write figma-extract.md\n\nCreate `$SPEC_DIR\u002Fprototype\u002F` directory if it doesn't exist.\n\nRead `.ai\u002Ftemplates\u002Fspec\u002Ffigma-extract.md.template` and follow that structure exactly. The template uses HTML comments as authoring instructions — follow them but do not include them in the output. Key rules:\n\n- **Single-viewport:** use the single \"Reference Code\" section, omit per-viewport sections and Breakpoint CSS Overrides\n- **Multi-viewport:** use per-viewport sections (Desktop Variant, Mobile Variant, etc.), include Breakpoint CSS Overrides, omit the single \"Reference Code\" section\n- **Dynamic Content Elements** is mandatory in both modes — scan reference code for placeholders, tag content-dependent values with ≈\n- **Breakpoint CSS Overrides** is multi-viewport only — diff CSS values across viewports in mobile-first order\n- Omit `## Relevance Warning` if no mismatch detected\n- Omit `## Annotations & Constraints` (single-viewport) if none found\n\n## 11. Present Summary\n\n```markdown\n## figma-extract.md created\n\n**Component:** \u003Cnode name>\n**Node ID:** \u003CselectedNodeId>\n\u003Cif multi-viewport>**Viewports:** \u003Clist, e.g. \"desktop (1440px), mobile (375px)\">\u003C\u002Fif>\n- Reference code: \u003Clines of code extracted> \u003Cif multi-viewport>(per viewport)\u003C\u002Fif>\n- Design tokens: \u003Ccount> variables\n- Dynamic content elements: \u003Ccount> marked with ≈ tolerance\n\u003Cif multi-viewport>- Breakpoint tables: \u003Ccount> breakpoints with CSS override diffs\u003C\u002Fif>\n- Screenshots: \u003Cif single>prototype\u002Ffigma-reference.png\u003Celse>prototype\u002Ffigma-reference-desktop.png, prototype\u002Ffigma-reference-mobile.png\u003C\u002Fif>\n- Assets: \u003Ccount> download URLs (\u003Ccount> downloaded locally)\n\u003Cif screenshots detected>- Design quality: hybrid — \u003CN> screenshot layers stripped, \u003CM> real elements preserved\u003C\u002Fif>\n\u003Cif clean design>- Design quality: clean — no screenshot layers\u003C\u002Fif>\n\u003Cif mismatch>- ⚠️ Design-story mismatch detected — see figma-mismatch.md\u003C\u002Fif>\n\u003Cif url override>- ⚠️ Using user-provided URL (differs from story)\u003C\u002Fif>\n\n### Next: `\u002Fdx-figma-prototype` to generate HTML\u002FCSS prototype, then `\u002Fdx-figma-verify` to verify\n```\n\n## MCP Fallback & Error Handling\n\nConsult `references\u002Fmcp-fallback.md` for the full fallback strategy and error handling. Key rules:\n- **Desktop MCP only** — never fall back to `mcp__claude_ai_Figma__*` (cloud)\n- **Graceful degradation** — if one MCP call fails, continue with whatever is available\n- **Partial extraction** is better than no extraction\n\n## Success Criteria\n\n- [ ] `figma-extract.md` exists in spec directory\n- [ ] ≥1 reference screenshot saved\n- [ ] Design tokens extracted (colors, spacing, typography)\n- [ ] Component mapping documented\n\n## Rules\n\n- **Extract everything** — this is the only Figma interaction\n- **Save screenshots as files** — not just descriptions, actual image files via the hook\n- **Download assets** — the hook downloads localhost:3845 image URLs from get_design_context\n- **Smart node selection** — use story context to auto-drill-down when possible\n- **One interruption max** — only ask the user if auto-selection fails\n- **Always check relevance** — compare design against story context, warn on mismatch\n- **Track URL source** — record whether URL came from story or user override\n- **Idempotent** — check existing output before re-extracting\n- **Graceful degradation** — partial extraction is better than no extraction\n","You extract everything needed from a Figma design link — reference code, design tokens, screenshots — so that Figma is never consulted again in downstream steps.\n\nUse ultrathink for node selection logic — matching Figma frame names to story context requires careful reasoning.\n\n## 1. Parse Arguments & Locate Spec Directory\n\n**Parse `$ARGUMENTS` into two optional parts:** an ADO work item ID and a Figma URL. They can appear in any order, or only one, or neither.\n\nDetection rules:\n- **Figma URL:** any token containing `figma.com\u002F` — set `$FIGMA_URL_ARG`\n- **ADO ID:** any token that is purely numeric — set `$ADO_ID_ARG`\n- Remaining tokens: ignore (may be noise from slash-command parsing)\n\n**Locate spec directory** using only the ADO ID (never the Figma URL):\n```bash\nSPEC_DIR=$(bash .ai\u002Flib\u002Fdx-common.sh find-spec-dir $ADO_ID_ARG)\n```\n\nIf no ADO ID was provided, `find-spec-dir` returns the most recent spec directory. If the script exits with error, ask the user for the work item ID.\n\n## 2. Check Existing Output\n\n1. Check if `figma-extract.md` exists in the spec directory\n2. If it exists and `raw-story.md` hasn't changed → print `figma-extract.md already up to date — skipping` and STOP\n3. If stale → continue (regenerate)\n\n## 3. Find Figma URL\n\n**Priority order:**\n1. `$FIGMA_URL_ARG` (from arguments) — if provided, use it as the Figma URL\n2. `$SPEC_DIR\u002Fraw-story.md` — search for URLs matching `figma.com\u002Fdesign\u002F\u003CfileKey>\u002F\u003CfileName>?node-id=\u003CnodeId>`\n3. `$SPEC_DIR\u002Fdor-report.md` (Design section) — fallback if raw-story.md has no Figma URL\n\n**If no Figma URL found anywhere:** Print `No Figma URL found in story or arguments — skipping` and STOP.\n\n**URL Parsing:**\n- Extract `nodeId` from `node-id=` parameter, convert hyphens to colons (`1-2` → `1:2`)\n- Extract `fileKey` from the path segment after `\u002Fdesign\u002F` (recorded in figma-extract.md for reference)\n- If URL format is `figma.com\u002Fdesign\u002F:fileKey\u002Fbranch\u002F:branchKey\u002F:fileName` → use `branchKey` as fileKey\n\n**User-provided URL override:**\nIf `$FIGMA_URL_ARG` was provided AND raw-story.md also contains a Figma URL, record both in figma-extract.md and flag the override:\n```\n⚠️ Using user-provided Figma URL (differs from story URL)\n   Story URL: \u003Curl from raw-story.md>\n   User URL:  \u003Curl from user>\n```\nIf raw-story.md has no Figma URL, record the source as `\"User-provided URL (no story URL)\"`.\n\n## 4. Gather Story Context\n\nRead these files for component identification (used in node selection and relevance check):\n- `$SPEC_DIR\u002Fexplain.md` — distilled requirements with component names\n- `$SPEC_DIR\u002Fresearch.md` — codebase findings with component directories\n\nExtract and remember:\n- Component names (e.g., \"Header\", \"ProductCard\", \"hero\")\n- Variation names (e.g., \"brand\", \"default\", \"pdp\")\n- UI element names (e.g., \"dropdown\", \"stepper\", \"card\", \"teaser\")\n- Key terms from the story title and requirements\n\n## 5. Node Selection\n\nCall `get_metadata` to understand the node structure:\n```\nmcp__plugin_dx-core_figma__get_metadata\n  nodeId: \u003CnodeId>\n  clientLanguages: \"html,css,javascript\"\n```\n\nAnalyze the XML response:\n\n**Case A — Node is a COMPONENT, INSTANCE, or FRAME (single viewport, not a PAGE):**\nUse this node directly. Set `viewports: [{ name: \"default\", nodeId: \u003CnodeId> }]`. Proceed to Step 6.\n\n**Case B — Node is a PAGE or top-level FRAME with many children:**\n1. Parse child frame names from the XML\n2. **First, check for viewport variants** (Case C below) among the children\n3. If no viewport variants found, match against component names from explain.md\u002Fresearch.md:\n   - Case-insensitive substring match\n   - Strip common prefixes (e.g., \"Desktop\u002F\", \"Mobile\u002F\", \"Component\u002F\")\n   - Score by relevance to story context\n4. **High-confidence single match** → auto-select, print: `Auto-selected Figma node: \"\u003Cname>\" (ID: \u003CnodeId>)`\n5. **Multiple candidates** → ask the user:\n   ```\n   Figma link points to a page with multiple components:\n   1. \u003Cname1> (ID: \u003Cid1>)\n   2. \u003Cname2> (ID: \u003Cid2>)\n   3. \u003Cname3> (ID: \u003Cid3>)\n   Which component(s) should I extract? (numbers, comma-separated)\n   ```\n6. **No match** → ask the user with the full list of top-level children\n7. After selecting a node, check if IT contains viewport variants (Case C). A selected component frame may itself contain Desktop\u002FMobile children.\n\n**Case C — Viewport variants detected:**\n\nA node (the linked node itself, or a selected child) contains multiple viewport variants as children. Detect using these heuristics:\n\n1. **Name-based:** Child frame names containing (case-insensitive): `desktop`, `mobile`, `tablet`, `responsive`, `phone`, `web`, or common width values (`1440`, `1280`, `1024`, `768`, `375`, `390`, `414`)\n2. **Size-based:** Two or more sibling frames where one is wide (>900px) and another is narrow (\u003C500px) — check frame width from the XML `width` attribute\n3. **Pattern-based:** Names like `Component \u002F Desktop`, `Hero - Mobile`, `Desktop View`, `Mobile View`, `@desktop`, `@mobile`\n\n**When viewport variants are detected:**\n- Print: `Multi-viewport design detected: \u003Clist of variant names with dimensions>`\n- Set `viewports` list, e.g.: `[{ name: \"desktop\", nodeId: \"123:456\", width: 1440 }, { name: \"mobile\", nodeId: \"123:789\", width: 375 }]`\n- Sort viewports by width descending (desktop first)\n- Proceed to Step 6 which will extract each viewport separately\n\n**When NOT viewport variants:** Sibling frames that represent different components (e.g., \"Header\" and \"Footer\") are NOT viewport variants — they differ in content, not just width. Use name heuristics first; fall back to size comparison only for ambiguous cases.\n\n## 6. Extract Design Data\n\n**For each viewport** in the `viewports` list (or once if single viewport), make three MCP calls. When multiple viewports exist, loop through each and tag all output with the viewport name.\n\n### 6a. Design Context\n\n```\nmcp__plugin_dx-core_figma__get_design_context\n  nodeId: \u003Cviewport.nodeId>\n  clientLanguages: \"html,css,javascript\"\n```\n\nSave: reference code, annotations, design system hints. Tag with viewport name if multi-viewport.\n\n**Important:** The response contains image\u002FSVG asset URLs served locally by the Figma desktop MCP (e.g., `http:\u002F\u002Flocalhost:3845\u002Fassets\u002F\u003Chash>.png`). The PostToolUse hook automatically downloads these to `$SPEC_DIR\u002Fprototype\u002Fassets\u002F`. After the hook runs, check `$SPEC_DIR\u002Fprototype\u002F.figma-asset-manifest.json` for the downloaded file paths.\n\n### 6b. Screenshot\n\nBefore calling `get_screenshot`, write the target path so the PostToolUse hook saves the image there:\n\n**Single viewport:**\n```bash\nmkdir -p $SPEC_DIR\u002Fprototype\necho \"$SPEC_DIR\u002Fprototype\u002Ffigma-reference.png\" > .ai\u002F.figma-screenshot-target\n```\n\n**Multi-viewport:**\n```bash\nmkdir -p $SPEC_DIR\u002Fprototype\necho \"$SPEC_DIR\u002Fprototype\u002Ffigma-reference-\u003Cviewport.name>.png\" > .ai\u002F.figma-screenshot-target\n```\nExample: `figma-reference-desktop.png`, `figma-reference-mobile.png`\n\nThen call:\n```\nmcp__plugin_dx-core_figma__get_screenshot\n  nodeId: \u003Cviewport.nodeId>\n```\n\nThe hook automatically saves the PNG to the target path and reports the location via `additionalContext`.\n\n**Also create a convenience symlink\u002Fcopy** for backward compatibility: copy the desktop (widest) screenshot to `figma-reference.png` so downstream skills that expect the default filename still work.\n\n### 6c. Variable Definitions\n\nOnly call once (tokens are shared across viewports):\n```\nmcp__plugin_dx-core_figma__get_variable_defs\n  nodeId: \u003Cviewport.nodeId>  # use the first\u002Fdesktop viewport\n```\n\nSave: design token definitions (colors, spacing, typography variables).\n\n## 7. Screenshot Layer Analysis (Design Quality)\n\n**This step is mandatory.** Consult `references\u002Fdesign-quality.md` for the full pattern catalog, three-phase analysis process, and output format.\n\nDesigners sometimes paste website screenshots as context and overlay new elements on top. This step detects those patterns, classifies each node, and produces a cleaned reference code.\n\n### Summary\n\n1. **Phase 1 — Structural detection:** Scan the `get_metadata` XML and `get_design_context` reference code against the pattern catalog in `references\u002Fdesign-quality.md`. Classify each top-level child as `designed` | `hybrid` | `screenshot-context` | `decoration`.\n\n2. **Phase 2 — Visual confirmation:** Read the Figma screenshot image and cross-reference. For `screenshot-context` nodes, describe what existing UI is visible. Catch any gaps Phase 1 missed.\n\n3. **Phase 3 — Cleaned output:** Produce the Layer Classification table, Screenshot Regions table, and a cleaned reference code (screenshot layers stripped, real elements preserved).\n\n**If ALL nodes are `designed`** (no screenshots detected): print `Design quality: clean — no screenshot layers detected` and skip to Step 8. Do NOT add the `## Design Quality` section to figma-extract.md.\n\n**If any screenshots detected:** The cleaned reference code replaces the raw code in the `## Reference Code` section. Add `## Design Quality` section to figma-extract.md (between `## Screenshot` and `## Reference Code`) with the classification table and screenshot region descriptions.\n\n## 8. Design-vs-Story Relevance Check\n\n**This step is mandatory.** Consult `references\u002Frelevance-check.md` for the full scoring algorithm, mismatch report format, and output file conventions. Summary:\n\n1. Count keyword matches between story context (Step 4) and Figma design content\n2. **LOW (\u003C 2 matches):** warn user, write `figma-mismatch.md`, add `## Relevance Warning` to figma-extract.md\n3. **OK (>= 2 matches):** continue silently\n\n## 9. Analyze Dynamic Content & Build Breakpoint Tables\n\nConsult `references\u002Fdynamic-content.md` for detection heuristics and `references\u002Fbreakpoint-tables.md` for table format.\n\n### 9a. Dynamic Content Detection\n\nScan the design context reference code from Step 6 and identify elements with placeholder content. For each, record which CSS properties are content-dependent. Tag these values with **≈** in all output sections.\n\n### 9b. Breakpoint CSS Override Tables (multi-viewport only)\n\nWhen multi-viewport extraction is active, diff the design context across viewports to produce mobile-first CSS override tables:\n\n1. Extract element + property + value triples from each viewport's reference code\n2. Mobile baseline = all mobile triples\n3. Tablet overrides = only triples where tablet differs from mobile\n4. Desktop overrides = only triples where desktop differs from tablet\n\nMark content-dependent values with **≈**. Use viewport frame widths as breakpoint boundaries (or project breakpoints from research.md if available).\n\nSkip this step for single-viewport extractions.\n\n## 10. Write figma-extract.md\n\nCreate `$SPEC_DIR\u002Fprototype\u002F` directory if it doesn't exist.\n\nRead `.ai\u002Ftemplates\u002Fspec\u002Ffigma-extract.md.template` and follow that structure exactly. The template uses HTML comments as authoring instructions — follow them but do not include them in the output. Key rules:\n\n- **Single-viewport:** use the single \"Reference Code\" section, omit per-viewport sections and Breakpoint CSS Overrides\n- **Multi-viewport:** use per-viewport sections (Desktop Variant, Mobile Variant, etc.), include Breakpoint CSS Overrides, omit the single \"Reference Code\" section\n- **Dynamic Content Elements** is mandatory in both modes — scan reference code for placeholders, tag content-dependent values with ≈\n- **Breakpoint CSS Overrides** is multi-viewport only — diff CSS values across viewports in mobile-first order\n- Omit `## Relevance Warning` if no mismatch detected\n- Omit `## Annotations & Constraints` (single-viewport) if none found\n\n## 11. Present Summary\n\n```markdown\n## figma-extract.md created\n\n**Component:** \u003Cnode name>\n**Node ID:** \u003CselectedNodeId>\n\u003Cif multi-viewport>**Viewports:** \u003Clist, e.g. \"desktop (1440px), mobile (375px)\">\u003C\u002Fif>\n- Reference code: \u003Clines of code extracted> \u003Cif multi-viewport>(per viewport)\u003C\u002Fif>\n- Design tokens: \u003Ccount> variables\n- Dynamic content elements: \u003Ccount> marked with ≈ tolerance\n\u003Cif multi-viewport>- Breakpoint tables: \u003Ccount> breakpoints with CSS override diffs\u003C\u002Fif>\n- Screenshots: \u003Cif single>prototype\u002Ffigma-reference.png\u003Celse>prototype\u002Ffigma-reference-desktop.png, prototype\u002Ffigma-reference-mobile.png\u003C\u002Fif>\n- Assets: \u003Ccount> download URLs (\u003Ccount> downloaded locally)\n\u003Cif screenshots detected>- Design quality: hybrid — \u003CN> screenshot layers stripped, \u003CM> real elements preserved\u003C\u002Fif>\n\u003Cif clean design>- Design quality: clean — no screenshot layers\u003C\u002Fif>\n\u003Cif mismatch>- ⚠️ Design-story mismatch detected — see figma-mismatch.md\u003C\u002Fif>\n\u003Cif url override>- ⚠️ Using user-provided URL (differs from story)\u003C\u002Fif>\n\n### Next: `\u002Fdx-figma-prototype` to generate HTML\u002FCSS prototype, then `\u002Fdx-figma-verify` to verify\n```\n\n## MCP Fallback & Error Handling\n\nConsult `references\u002Fmcp-fallback.md` for the full fallback strategy and error handling. Key rules:\n- **Desktop MCP only** — never fall back to `mcp__claude_ai_Figma__*` (cloud)\n- **Graceful degradation** — if one MCP call fails, continue with whatever is available\n- **Partial extraction** is better than no extraction\n\n## Success Criteria\n\n- [ ] `figma-extract.md` exists in spec directory\n- [ ] ≥1 reference screenshot saved\n- [ ] Design tokens extracted (colors, spacing, typography)\n- [ ] Component mapping documented\n\n## Rules\n\n- **Extract everything** — this is the only Figma interaction\n- **Save screenshots as files** — not just descriptions, actual image files via the hook\n- **Download assets** — the hook downloads localhost:3845 image URLs from get_design_context\n- **Smart node selection** — use story context to auto-drill-down when possible\n- **One interruption max** — only ask the user if auto-selection fails\n- **Always check relevance** — compare design against story context, warn on mismatch\n- **Track URL source** — record whether URL came from story or user override\n- **Idempotent** — check existing output before re-extracting\n- **Graceful degradation** — partial extraction is better than no extraction\n",{"name":5,"metadata":57,"description":7,"allowed-tools":60,"argument-hint":64,"compatibility":65},{"version":58,"category":59,"mcp-server":33},"2.28.0","design-to-code",[45,36,48,44,61,62,63],"agent","figma\u002F*","playwright\u002F*","[ADO Work Item ID] [Figma URL] — both optional, any order. Uses most recent story if ID omitted.","Requires Figma desktop app with Dev Mode MCP enabled (port 3845). File must be open in Figma.","main","a99cabc3f459fbeaa42b13a1604db1bccb6a364b","plugins\u002Fdx-core\u002Fskills\u002Fdx-figma-extract",3,"https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow","https:\u002F\u002Fgithub.com\u002Feasingthemes","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdraganfilipovic\u002F","Agentic SDLC platform in production. I build agent-ready codebases. AEM MCP Server author.","2026-11-11 09:59:48",{"source":8,"skillName":5,"commands":76,"prompt":86,"zipAvailable":87},[77,80,83],{"tool":78,"command":79},"npx","npx skills add easingthemes\u002Fdx-aem-flow --skill dx-figma-extract",{"tool":81,"command":82},"bunx","bunx skills add easingthemes\u002Fdx-aem-flow --skill dx-figma-extract",{"tool":84,"command":85},"pnpm","pnpm dlx skills add easingthemes\u002Fdx-aem-flow --skill dx-figma-extract","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-core\u002Fskills\u002Fdx-figma-extract\u002FSKILL.md",true,[89,95,99,103,107],{"path":90,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":93,"sourceHtmlUrl":94},"references\u002Fbreakpoint-tables.md","REFERENCE","参考文档",2581,"https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-core\u002Fskills\u002Fdx-figma-extract\u002Freferences\u002Fbreakpoint-tables.md",{"path":96,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":97,"sourceHtmlUrl":98},"references\u002Fdesign-quality.md",9683,"https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-core\u002Fskills\u002Fdx-figma-extract\u002Freferences\u002Fdesign-quality.md",{"path":100,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":101,"sourceHtmlUrl":102},"references\u002Fdynamic-content.md",2831,"https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-core\u002Fskills\u002Fdx-figma-extract\u002Freferences\u002Fdynamic-content.md",{"path":104,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":105,"sourceHtmlUrl":106},"references\u002Fmcp-fallback.md",1139,"https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-core\u002Fskills\u002Fdx-figma-extract\u002Freferences\u002Fmcp-fallback.md",{"path":108,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":109,"sourceHtmlUrl":110},"references\u002Frelevance-check.md",2182,"https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-core\u002Fskills\u002Fdx-figma-extract\u002Freferences\u002Frelevance-check.md",[112,135,154,169,185,200],{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":118,"publishedAt":52},"01M6H48W19F46A7B7TSSQAMYRW","dx-hub-status","Show hub dispatch status — which repos are running, done, blocked or failed. Use for 'hub status', 'what's running'.","https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-hub\u002Fskills\u002Fdx-hub-status\u002FSKILL.md",[],[34,119,120,121,122,123,124,125,126,127,128,129,130,131,132,45,44,133,134],"dx hub status","hub","status","hub status","which","show","for","ticket","clean","use","done","Bash","id","dispatch","repos","grep",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":52},"01M6H48R6ZH7YMVPMVWMMWT3RA","dx-hub-init","Initialize a hub directory for multi-repo orchestration. Discovers sibling repos, merges configs, validates CLI compatibility. Use when setting up hub mode for the first time. Trigger on \"init hub\", \"set up hub\", \"multi-repo setup\".","https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-hub\u002Fskills\u002Fdx-hub-init\u002FSKILL.md",[],[142,143,34,144,120,145,146,37,147,148,149,150,151,152,130,153,50,45,44,36],"init","hub init","dx hub init","SET","time","default","up","repo setup","orchestration","configure","multi-repo","cli",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":161,"publishedAt":52},"01M6H48K267CWEF8YNN3Y49BVT","dx-hub-dispatch","Dispatch a ticket to several repos — open an independent Claude session per repo in VS Code terminals. Use for 'hub dispatch', 'work on ticket across repos'.","https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-hub\u002Fskills\u002Fdx-hub-dispatch\u002FSKILL.md",[160],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[34,162,132,120,163,125,164,165,166,126,47,51,128,38,130,167,49,168,131,46],"dx hub dispatch","ado","repo","work on","session","vscode","across",{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":173,"categories":174,"keywords":175,"publishedAt":52},"01M6H48FAWKTT6AAWT3H80ZKE0","dx-hub-config","View and edit hub configuration — add repos, adjust terminal delay. Use to manage hub settings. Trigger on \"hub config\", \"add repo to hub\", \"terminal delay\".","https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-hub\u002Fskills\u002Fdx-hub-config\u002FSKILL.md",[],[34,176,120,177,124,178,164,179,180,181,182,128,151,130,183,45,184,44,36,133],"dx hub config","config","view","manage","trigger","true","adjust","terminal","settings",{"skillNo":186,"name":187,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":189,"categories":190,"keywords":191,"publishedAt":52},"01M6H48BNMYEJY6CCWPYHNQDAT","dx-discover-repos","Resolve which repos a work item touches (explicit directive → simple block → cross-repo table → LLM). Used by the KAI-HUB router to fan an agent out across repos; 'which repos'.","https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-hub\u002Fskills\u002Fdx-discover-repos\u002FSKILL.md",[],[192,34,193,133,123,164,168,194,131,195,46,196,120,197,198,199],"discover","dx discover repos","router","directive","simple","block","sonnet","table",{"skillNo":201,"name":202,"nameZh":6,"description":203,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":204,"categories":205,"keywords":207,"publishedAt":52},"01M6H487QA1FDSBT1HTZGW4HAQ","dx-upgrade","Upgrade a consumer project to the installed plugin versions — run dx-doctor, fix stale and missing files, list manual actions. Use after upgrading plugins.","https:\u002F\u002Fgithub.com\u002Feasingthemes\u002Fdx-aem-flow\u002Fblob\u002Fmain\u002Fplugins\u002Fdx-core\u002Fskills\u002Fdx-upgrade\u002FSKILL.md",[206],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[208,34,209,210,211,48,212,213,214,215,45,44,36,216,217,218,219,128,220,221],"upgrade","dx upgrade","project","actions","fix","files","auto","run","list","doctor","manual","missing","plugin","plugins"]