Figma-to-Code Pipeline
From a Figma URL to a production AEM component that matches the design. The pipeline builds a verified prototype as a quality gate, then feeds it into the implementation plan -- so the final component gets it right the first time.
From Figma URL to Production Component
/dx-figma-all <figma-url> orchestrates the entire pipeline. The prototype is a quality checkpoint -- the real output is a production-ready AEM component.
/dx-figma-all <figma-url> Orchestrates all four phases. Or run each phase individually for more control.
/dx-figma-extract /dx-figma-prototype /dx-figma-verify /dx-plan + /dx-step-all What Stakeholders See
Design fidelity is verified before production code is written -- no surprises at the end.
Visual Proof
Side-by-side comparison: Figma design next to the generated prototype. Well-structured Figma files produce exceptional results — but the pipeline adapts to any input quality.
Acceptance Checklist
Binary pass/fail assertions with concrete values — “title font-size 26px”, “button background #000”. QA can verify without Figma access.
Faster Feedback
Prototype is ready in minutes, not days. Stakeholders review a working HTML page, not a static screenshot. Iterate before committing to production code.
Figma Extract
/dx-figma-extract -- Pulls everything from Figma so it never needs to be consulted again.
Smart Node Selection
Auto-matches the story requirements against the Figma frame structure. Detects multi-viewport designs (desktop + mobile) and extracts each separately.
Design Quality Analysis
Classifies each Figma node as designed, screenshot-context, or decoration. Adapts the extraction strategy based on what it finds.
Token Extraction
Captures all design variables (colors, spacing, typography), reference screenshots, and image assets. Downloads everything locally for offline use.
Output: figma-extract.md
Cleaned reference code (screenshot layers removed), design tokens, dynamic content annotations (values marked with approximate for content-dependent sizing), asset manifest, and Figma reference screenshots. This file is the single source of truth for all downstream steps.
Structured Figma
Proper components, auto-layout, design tokens. The pipeline extracts everything directly — exceptional accuracy, near-complete token coverage.
Hybrid Figma
Mix of structured elements and pasted screenshots for context. The pipeline separates real design from reference material — strong results with minor gaps.
Screenshot-Based Figma
Primarily pasted screenshots with minimal structure. The pipeline reconstructs elements from images — solid starting point that saves significant manual effort.
Figma Prototype
/dx-figma-prototype -- Two parallel agents discover conventions, then a template-based generator produces a standalone prototype.
Convention Research
Two agents run in parallel: dx-figma-styles discovers CSS/SCSS conventions (tokens, breakpoints, typography) and dx-figma-markup discovers HTML/accessibility patterns.
Template Scaffold
An HTML template provides the comparison layout — side-by-side for mobile, stacked for desktop. The skill fills two placeholders: component HTML and Figma reference images.
Token Mapping
Every Figma design token is mapped to the closest project equivalent. Exact matches, close matches (within 10%), and unmapped values are all documented in the CSS output.
Output
figma-conventions.md with discovered project patterns, plus prototype/index.html,
styles.css, and script.js. The prototype uses the project’s actual design tokens —
not generic CSS. Open it in any browser, no build system required.
Figma Verify
/dx-figma-verify -- Opens the prototype in a real browser, compares against the Figma reference, and auto-fixes discrepancies.
Browser Rendering
Opens the prototype in Chrome via Chrome DevTools MCP. Hides the Figma reference column, takes a clean screenshot of just the component output.
Visual Comparison
Compares the prototype screenshot against figma-reference.png side by side. Identifies
layout shifts, color mismatches, spacing gaps, and missing elements.
Auto-Fix Loop
If differences are found, the skill patches CSS/HTML and re-screenshots — up to 2 iterations. Each round narrows the gap without manual intervention.
Output: figma-gaps.md
An acceptance checklist with binary pass/fail assertions — concrete values like “title font-size 26px”, “button background #000”, “padding-top 40px”. QA can verify the component without Figma access. Verdict: PASS, PASS WITH MINOR GAPS, or NEEDS ATTENTION.
Production AEM Component
The verified prototype is the quality gate. The real output is a production-ready AEM component built from concrete code, not guesswork.
Prototype as Spec
/dx-plan references the prototype/ directory when generating the
implementation plan. The planner works from concrete HTML, CSS classes, and design tokens.
Convention Continuity
figma-conventions.md carries forward into every implementation step. Same naming
patterns, breakpoints, and token mappings — consistency from Figma to AEM.
Design-Accurate Result
Good input, good output. A well-structured Figma file produces an accurate component with minimal rework. The pipeline catches mismatches early, not after deployment.
End-to-End Flow
From Figma URL to verified prototype and implementation plan.
/dx-figma-all <figma-url> The complete flow from Figma URL to production component.
/dx-figma-extract /dx-figma-prototype /dx-figma-verify /dx-plan /dx-step-all