--- name: dx-figma-all-b4f9bdd0cb46 description: "Full Figma design-to-code flow in one command — extract, prototype, verify. Use when a story has a Figma URL: 'figma all', 'turn this figma into code'." argument-hint: "[ADO Work Item ID] [Figma URL] — both optional, any order" compatibility: "Requires Figma desktop app with Dev Mode MCP enabled (port 3845). Chrome for verification step." metadata: version: 2.30.0 mcp-server: figma category: design-to-code allowed-tools: ["read", "edit", "search", "write", "agent", "figma/*", "playwright/*"] --- You are a coordinator. You do NOT implement anything yourself. You delegate each workflow step via the Skill tool, then report progress. ## 0. Input Validation 1. **Figma URL required** — if no Figma URL is provided in the arguments or spec files, STOP immediately: "A Figma URL is required. Usage: `/dx-figma [component-name]`" 2. **Figma MCP health** — run `bash .ai/lib/mcp-health-check.sh figma`. If Figma Desktop is not responding on port 3845, STOP: "Figma Desktop not detected. Open Figma and enable Dev Mode MCP." 3. **AEM MCP health** — run `bash .ai/lib/mcp-health-check.sh aem`. If AEM is not responding, WARN: "AEM author not responding — verification step may be skipped." ## Argument Parse `$ARGUMENTS` into two optional parts (any order): - **Figma URL:** any token containing `figma.com/` — forward to extract step - **ADO ID:** any purely numeric token — forward to extract step - If neither provided, the extract skill uses the most recent story and its Figma URL Build a combined argument string from whatever was provided (e.g., `2416553 https://figma.com/...`, or just `2416553`, or just the URL, or empty). ## Progress Tracking Follow `.ai/rules/task-progress.md` (plugin default: `rules/task-progress.md`). The progress **file** is the source of truth — write it at every item transition: ```bash DX_PROGRESS_FILE="figma-progress.md" DX_PROGRESS_TITLE="/dx-figma-all Progress" \ bash "$CLAUDE_PLUGIN_ROOT/shared/update-progress.sh" "$SPEC_DIR" "" "" ``` Status values: `pending` · `in_progress` · `done` · `failed` · `skipped` · `blocked`. One row per item, updated in place. If `TaskCreate` is in this session's tool list, also mirror the same items into tasks so the user gets a live checklist — `TaskList` first to cancel stale tasks from an interrupted run. If it is absent (the default on Opus 4.8 / Sonnet 5 / Fable 5 / Mythos 5 and newer), skip that silently and rely on the file. Never block an item transition on a task tool being present. 1. Extract design from Figma 2. Generate prototype 3. Verify against design ## Execution Order ``` Step 1: extract → figma-extract.md + prototype/figma-reference.png Step 2: prototype → figma-conventions.md + prototype/index.html + prototype/styles.css Step 3: verify → figma-gaps.md + prototype/prototype-screenshot.png ``` **Idempotent by default:** Each skill checks if its output file already exists and is still valid before regenerating. Steps report one of: **created**, **updated**, or **skipped**. ## Instructions ### 1. Dispatch steps 1–3 sequentially For each step, use the Skill tool to invoke the skill. Wait for each to return before starting the next. **Step 1 — Extract:** ``` Invoke /dx-figma-extract ``` Print: `Step 1/3 done —` followed by the summary. **Step 2 — Prototype:** ``` Invoke /dx-figma-prototype ``` Print: `Step 2/3 done —` followed by the summary. **Step 3 — Verify:** ``` Invoke /dx-figma-verify ``` Print: `Step 3/3 done —` followed by the summary. ### 2. Final summary After all steps complete, find the spec directory and present: ```markdown ## Figma Design-to-Code Complete **Component:** **Directory:** `.ai/specs/-/prototype/` | Step | Status | Output | |------|--------|--------| | Extract | | figma-extract.md | | Prototype | | prototype/index.html + styles.css | | Verify | | figma-gaps.md | ### To preview: open `prototype/index.html` in a browser ### Next Steps 1. Review the prototype visually 2. `/dx-plan` — generate implementation plan using the prototype as reference 3. `/dx-step-all` — execute the plan ``` ## Error Handling - **Step 1 (extract) fails:** STOP. Cannot proceed without design data. Print error and suggest: `Run /dx-figma-extract manually to debug.` - **Step 2 (prototype) fails:** STOP. Cannot verify without a prototype. Print error and suggest: `Run /dx-figma-prototype manually to debug.` - **Step 3 (verify) fails:** Report gaps but do NOT block — the prototype is still usable. Print warning: `Verification had issues — review figma-gaps.md. The prototype is still usable for planning.` For any failure, retry the failed step **once** before stopping. ## Validation Gates | After Step | Gate | Fail Action | |-----------|------|-------------| | 1 (extract) | `figma-extract.md` exists in spec directory | STOP — "Extract failed. Check Figma MCP connection." | | 2 (prototype) | `prototype/index.html` exists | STOP — "Prototype generation failed." | | 3 (verify) | `figma-gaps.md` exists | WARN — continue, report that verification didn't complete | ## Rules - **You are coordinator only** — all implementation happens inside the agent's isolated context - **Never implement steps yourself** — always delegate via Agent tool - **Sequential dependencies are strict** — never dispatch step N+1 until step N returns OK - **Keep main context lean** — you only see compact summaries, not file contents - **Progress reporting** — print status after each step so the user can see progress - **Same quality as individual skills** — running `/dx-figma-all` produces identical output to running each skill separately ## Platform Compatibility This skill uses subagent orchestration (Agent tool dispatch) which is available in **Claude Code only**. **Copilot CLI / VS Code Chat:** Run the individual skills manually in sequence: 1. `/dx-figma-extract [component-name]` — extract design from Figma 2. `/dx-figma-prototype [id]` — generate HTML/CSS prototype 3. `/dx-figma-verify [id]` — verify prototype against design --- Source attribution: easingthemes Original project: https://github.com/easingthemes/dx-aem-flow/blob/f742d0c3bf54b6a4c7dfb9a60b5bd6257b492b65/plugins/dx-core/skills/dx-figma-all/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice MIT License Copyright (c) 2025-2026 Dragan Filipovic Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Mega AI Hub resource metadata Creator / publisher: easingthemes Original project: https://github.com/easingthemes/dx-aem-flow/blob/f742d0c3bf54b6a4c7dfb9a60b5bd6257b492b65/plugins/dx-core/skills/dx-figma-all/SKILL.md Attribution basis: Source repository record Fields of work: Design, Development & Engineering Roles: Frontend Developer, Product Designer, UX Designer Specialties: API, Backend, Design, Figma, Frontend, Playwright Tools: Figma Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 39b364f2db42ef09d84c5e489718eb713dfa40c50d19f5948a249e8159c7a6f1