From dx-core
Extract design context, tokens, and screenshots from a Figma URL. Saves figma-extract.md and reference screenshots. Use after requirements phase when a Figma URL is in the story. Trigger on "extract figma", "figma design", "get figma". Do NOT use for general Figma browsing, viewing designs without a story, or when no spec directory exists.
npx claudepluginhub easingthemes/dx-aem-flow --plugin dx-coreThis skill is limited to using the following tools:
You extract everything needed from a Figma design link — reference code, design tokens, screenshots — so that Figma is never consulted again in downstream steps.
Figma MCP (structured data) + pinchtab (screenshots) for design-to-code, fidelity checks, token extraction. Triggers "compare to design", "match the figma", "extract tokens from figma", "inspect in figma".
Automates Figma design review: extracts tokens, maps components to React/Vue/Svelte codebases, detects drift, generates implementation plans and tasks. For design handoffs.
Share bugs, ideas, or general feedback.
You extract everything needed from a Figma design link — reference code, design tokens, screenshots — so that Figma is never consulted again in downstream steps.
Use ultrathink for node selection logic — matching Figma frame names to story context requires careful reasoning.
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.
Detection rules:
figma.com/ — set $FIGMA_URL_ARG$ADO_ID_ARGLocate spec directory using only the ADO ID (never the Figma URL):
SPEC_DIR=$(bash .ai/lib/dx-common.sh find-spec-dir $ADO_ID_ARG)
If 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.
figma-extract.md exists in the spec directoryraw-story.md hasn't changed → print figma-extract.md already up to date — skipping and STOPPriority order:
$FIGMA_URL_ARG (from arguments) — if provided, use it as the Figma URL$SPEC_DIR/raw-story.md — search for URLs matching figma.com/design/<fileKey>/<fileName>?node-id=<nodeId>$SPEC_DIR/dor-report.md (Design section) — fallback if raw-story.md has no Figma URLIf no Figma URL found anywhere: Print No Figma URL found in story or arguments — skipping and STOP.
URL Parsing:
nodeId from node-id= parameter, convert hyphens to colons (1-2 → 1:2)fileKey from the path segment after /design/ (recorded in figma-extract.md for reference)figma.com/design/:fileKey/branch/:branchKey/:fileName → use branchKey as fileKeyUser-provided URL override:
If $FIGMA_URL_ARG was provided AND raw-story.md also contains a Figma URL, record both in figma-extract.md and flag the override:
⚠️ Using user-provided Figma URL (differs from story URL)
Story URL: <url from raw-story.md>
User URL: <url from user>
If raw-story.md has no Figma URL, record the source as "User-provided URL (no story URL)".
Read these files for component identification (used in node selection and relevance check):
$SPEC_DIR/explain.md — distilled requirements with component names$SPEC_DIR/research.md — codebase findings with component directoriesExtract and remember:
Call get_metadata to understand the node structure:
mcp__plugin_dx-core_figma__get_metadata
nodeId: <nodeId>
clientLanguages: "html,css,javascript"
Analyze the XML response:
Case A — Node is a COMPONENT, INSTANCE, or FRAME (single viewport, not a PAGE):
Use this node directly. Set viewports: [{ name: "default", nodeId: <nodeId> }]. Proceed to Step 6.
Case B — Node is a PAGE or top-level FRAME with many children:
Auto-selected Figma node: "<name>" (ID: <nodeId>)Figma link points to a page with multiple components:
1. <name1> (ID: <id1>)
2. <name2> (ID: <id2>)
3. <name3> (ID: <id3>)
Which component(s) should I extract? (numbers, comma-separated)
Case C — Viewport variants detected:
A node (the linked node itself, or a selected child) contains multiple viewport variants as children. Detect using these heuristics:
desktop, mobile, tablet, responsive, phone, web, or common width values (1440, 1280, 1024, 768, 375, 390, 414)width attributeComponent / Desktop, Hero - Mobile, Desktop View, Mobile View, @desktop, @mobileWhen viewport variants are detected:
Multi-viewport design detected: <list of variant names with dimensions>viewports list, e.g.: [{ name: "desktop", nodeId: "123:456", width: 1440 }, { name: "mobile", nodeId: "123:789", width: 375 }]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.
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.
mcp__plugin_dx-core_figma__get_design_context
nodeId: <viewport.nodeId>
clientLanguages: "html,css,javascript"
Save: reference code, annotations, design system hints. Tag with viewport name if multi-viewport.
Important: The response contains image/SVG asset URLs served locally by the Figma desktop MCP (e.g., http://localhost:3845/assets/<hash>.png). The PostToolUse hook automatically downloads these to $SPEC_DIR/prototype/assets/. After the hook runs, check $SPEC_DIR/prototype/.figma-asset-manifest.json for the downloaded file paths.
Before calling get_screenshot, write the target path so the PostToolUse hook saves the image there:
Single viewport:
mkdir -p $SPEC_DIR/prototype
echo "$SPEC_DIR/prototype/figma-reference.png" > .ai/.figma-screenshot-target
Multi-viewport:
mkdir -p $SPEC_DIR/prototype
echo "$SPEC_DIR/prototype/figma-reference-<viewport.name>.png" > .ai/.figma-screenshot-target
Example: figma-reference-desktop.png, figma-reference-mobile.png
Then call:
mcp__plugin_dx-core_figma__get_screenshot
nodeId: <viewport.nodeId>
The hook automatically saves the PNG to the target path and reports the location via additionalContext.
Also create a convenience symlink/copy for backward compatibility: copy the desktop (widest) screenshot to figma-reference.png so downstream skills that expect the default filename still work.
Only call once (tokens are shared across viewports):
mcp__plugin_dx-core_figma__get_variable_defs
nodeId: <viewport.nodeId> # use the first/desktop viewport
Save: design token definitions (colors, spacing, typography variables).
This step is mandatory. Consult references/design-quality.md for the full pattern catalog, three-phase analysis process, and output format.
Designers 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.
Phase 1 — Structural detection: Scan the get_metadata XML and get_design_context reference code against the pattern catalog in references/design-quality.md. Classify each top-level child as designed | hybrid | screenshot-context | decoration.
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.
Phase 3 — Cleaned output: Produce the Layer Classification table, Screenshot Regions table, and a cleaned reference code (screenshot layers stripped, real elements preserved).
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.
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.
This step is mandatory. Consult references/relevance-check.md for the full scoring algorithm, mismatch report format, and output file conventions. Summary:
figma-mismatch.md, add ## Relevance Warning to figma-extract.mdConsult references/dynamic-content.md for detection heuristics and references/breakpoint-tables.md for table format.
Scan 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.
When multi-viewport extraction is active, diff the design context across viewports to produce mobile-first CSS override tables:
Mark content-dependent values with ≈. Use viewport frame widths as breakpoint boundaries (or project breakpoints from research.md if available).
Skip this step for single-viewport extractions.
Create $SPEC_DIR/prototype/ directory if it doesn't exist.
Read .ai/templates/spec/figma-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:
## Relevance Warning if no mismatch detected## Annotations & Constraints (single-viewport) if none found## figma-extract.md created
**Component:** <node name>
**Node ID:** <selectedNodeId>
<if multi-viewport>**Viewports:** <list, e.g. "desktop (1440px), mobile (375px)"></if>
- Reference code: <lines of code extracted> <if multi-viewport>(per viewport)</if>
- Design tokens: <count> variables
- Dynamic content elements: <count> marked with ≈ tolerance
<if multi-viewport>- Breakpoint tables: <count> breakpoints with CSS override diffs</if>
- Screenshots: <if single>prototype/figma-reference.png<else>prototype/figma-reference-desktop.png, prototype/figma-reference-mobile.png</if>
- Assets: <count> download URLs (<count> downloaded locally)
<if screenshots detected>- Design quality: hybrid — <N> screenshot layers stripped, <M> real elements preserved</if>
<if clean design>- Design quality: clean — no screenshot layers</if>
<if mismatch>- ⚠️ Design-story mismatch detected — see figma-mismatch.md</if>
<if url override>- ⚠️ Using user-provided URL (differs from story)</if>
### Next: `/dx-figma-prototype` to generate HTML/CSS prototype, then `/dx-figma-verify` to verify
Consult references/mcp-fallback.md for the full fallback strategy and error handling. Key rules:
mcp__claude_ai_Figma__* (cloud)figma-extract.md exists in spec directory