dx-figma-all

name: dx-figma-all description: Run the full Figma design-to-code workflow — extract, prototype, verify — all in one command. Use when a story has a Figma URL and you want to turn a design into a verified prototype. Trigger on "figma all", "full figma", "extract and prototype". when_to_use: "Use when a story has a Figma URL and you want to extract, prototype, and verify in one command. Trigger on 'figma all', 'full figma', 'extract and prototype', '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 <figma-url> [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

Before creating tasks, use TaskList to check for existing tasks from a previous run (e.g., user interrupted and restarted). If stale tasks exist, delete them all first with TaskUpdate (status: cancelled) so the list is clean. Then create a task for each item using TaskCreate. Mark each in_progress when starting, completed when done.

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 <combined-arguments>

Print: Step 1/3 done — followed by the summary.

Step 2 — Prototype:

Invoke /dx-figma-prototype <ADO ID if provided>

Print: Step 2/3 done — followed by the summary.

Step 3 — Verify:

Invoke /dx-figma-verify <ADO ID if provided>

Print: Step 3/3 done — followed by the summary.

2. Final summary

After all steps complete, find the spec directory and present:

## Figma Design-to-Code Complete

**Component:** <name from figma-extract.md>
**Directory:** `.ai/specs/<id>-<slug>/prototype/`

| Step | Status | Output |
|------|--------|--------|
| Extract | <created/updated/skipped> | figma-extract.md |
| Prototype | <created/updated/skipped> | prototype/index.html + styles.css |
| Verify | <PASS/PASS WITH MINOR GAPS/NEEDS ATTENTION> | 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

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 <figma-url> [component-name] — extract design from Figma
2. /dx-figma-prototype [id] — generate HTML/CSS prototype
3. /dx-figma-verify [id] — verify prototype against design