From dx-core
Research project conventions and generate a high-fidelity standalone HTML/CSS prototype from Figma extraction data. Produces figma-conventions.md and prototype files. Use after /dx-figma-extract. Trigger on "figma prototype", "generate prototype", "create prototype from figma". Do NOT use without figma-extract.md or for non-design tasks.
npx claudepluginhub easingthemes/dx-aem-flow --plugin dx-coreThis skill is limited to using the following tools:
You research the consumer project's frontend conventions, then generate a standalone high-fidelity HTML/CSS prototype that replaces Figma as the visual reference for all downstream implementation steps.
Creates high-fidelity HTML prototypes including slide decks, interactive prototypes, landing pages, UI mockups, animations, and brand style clones with Playwright verification.
Translates Figma designs into production-ready UI code with 1:1 visual fidelity using MCP server. Use for Figma node URLs, selections, or 'implement design' requests.
Mandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
Share bugs, ideas, or general feedback.
You research the consumer project's frontend conventions, then generate a standalone high-fidelity HTML/CSS prototype that replaces Figma as the visual reference for all downstream implementation steps.
Use ultrathink for prototype generation — mapping design tokens to project conventions and producing pixel-accurate output requires deep reasoning.
SPEC_DIR=$(bash .ai/lib/dx-common.sh find-spec-dir $ARGUMENTS)
If the script exits with error, ask the user for the work item ID.
$SPEC_DIR/figma-extract.md MUST exist. If not: print figma-extract.md not found — run /dx-figma-extract first and STOP.figma-extract.md to confirm it has content.$SPEC_DIR/figma-conventions.md AND $SPEC_DIR/prototype/index.html both exist:figma-extract.md changed since prototype was generatedprototype already up to date — skipping and STOPLaunch three subagents in parallel using the Agent tool:
Subagent 1 — Styles (dx-figma-styles):
Agent tool:
subagent_type: dx-core:dx-figma-styles
prompt: |
Discover CSS/SCSS conventions for this project.
spec_dir: <$SPEC_DIR>
Figma design tokens to map against (from figma-extract.md):
<paste the Design Tokens section from figma-extract.md>
Return the full Styles Conventions report.
Subagent 2 — Markup (dx-figma-markup):
Agent tool:
subagent_type: dx-core:dx-figma-markup
prompt: |
Discover HTML and accessibility conventions for this project.
spec_dir: <$SPEC_DIR>
component_name: <component name from figma-extract.md>
Return the full Markup Conventions report.
Subagent 3 — Component Reuse (dx-figma-components):
Agent tool:
subagent_type: dx-core:dx-figma-components
prompt: |
Analyze the Figma design and find existing codebase components to reuse.
spec_dir: <$SPEC_DIR>
Figma design reference (from figma-extract.md):
<paste the Reference Code section and component name from figma-extract.md>
Identify every UI building block in the design (buttons, images, cards, inputs, etc.)
and search the codebase for existing components that match. Return the Component Reuse Map.
Wait for all three to complete. Combine results into $SPEC_DIR/figma-conventions.md:
# Project Conventions (auto-discovered)
**Generated:** <ISO date>
**Project:** <from .ai/config.yaml project.name>
<Styles Conventions section from dx-figma-styles agent>
<Markup Conventions section from dx-figma-markup agent>
<Component Reuse Map section from dx-figma-components agent>
Determine the layout mode from figma-extract.md:
**Viewports:** field — extract the design width (e.g., 360px for mobile, 1440px for desktop)row layout (prototype + Figma reference side by side — both fit)col layout (stacked — too wide for side by side)Run the scaffold script:
bash skills/dx-figma-prototype/scripts/scaffold-prototype.sh "$SPEC_DIR" <row|col>
This creates prototype/index.html (from template), empty styles.css, and empty script.js. The HTML contains two placeholders: {{PROTOTYPE_CONTENT}} and {{FIGMA_REFERENCES}}.
$SPEC_DIR/figma-extract.md — design data, reference code, tokens, screenshots$SPEC_DIR/figma-conventions.md — project conventions (just created in Phase A)$SPEC_DIR/explain.md — requirements (what the component should do)Replace {{PROTOTYPE_CONTENT}} in prototype/index.html with the component HTML:
<section class="prototype-section"> blocks with <h2 class="prototype-section-label"> headers for each state)<section className="screenshot-reconstructed"> elements from the design quality step. These are real UI reconstructed from screenshot regions in the Figma design — the designer pasted screenshots instead of creating proper elements. Render them as full HTML with proper styling matching the project conventions. They should look like normal page sections, not placeholders. The data-source-node attribute and comment indicate the origin, but the HTML content is real and should be styled to match.Replace {{FIGMA_REFERENCES}} with Figma reference image tag(s):
<img class="prototype-figma-ref" src="figma-reference.png" alt="Figma reference screenshot" /><img> per viewport with a label:
<p class="prototype-figma-ref-label">Desktop (1440px)</p>
<img class="prototype-figma-ref" src="figma-reference-desktop.png" alt="Figma reference — desktop" />
<p class="prototype-figma-ref-label">Mobile (375px)</p>
<img class="prototype-figma-ref" src="figma-reference-mobile.png" alt="Figma reference — mobile" />
IMPORTANT: Do NOT modify the scaffold structure (.prototype-wrapper, .prototype-compare, .prototype-compare-col elements or the inline <style> block). Only replace the two {{...}} placeholders with content. The comparison layout is provided by the template — do not reinvent it.
Before generating any HTML/CSS, consult the Component Reuse Map in figma-conventions.md.
The Figma design is composed of multiple UI building blocks — buttons, images, cards, form inputs, etc. Most of these already exist in the codebase. The prototype must reflect the reuse strategy:
/* EXTEND: <component> — added <what> */This ensures the prototype is grounded in the actual component library and implementation can reuse existing code rather than rebuilding from scratch.
CSS (prototype/styles.css):
.prototype-wrapper, .prototype-compare-*, .prototype-section-*, .sr-only) — these are already in the template's inline <style>@media query valuesJS (prototype/script.js):
Map Figma design tokens to the closest project equivalent:
Include a token mapping table as an HTML comment at the top of styles.css:
/*
* Token Mapping: Figma → Project
* ─────────────────────────────────
* Figma #3a7bd5 → $color-primary (exact match)
* Figma 16px → $font-size-md (exact match)
* Figma 24px → $spacing-lg (close: project has 20px)
* Figma #f5f5f5 → NO MATCH (using Figma value)
*/
Files are already scaffolded by Step 5a. Write content to:
index.html — already exists from template; replace {{PROTOTYPE_CONTENT}} and {{FIGMA_REFERENCES}} placeholders using the Edit toolstyles.css — write component styles (no scaffold styles — those are inline in the template)script.js — write interaction JS, or leave empty if purely visualEnsure figma-reference.png (from dx-figma-extract) is already in the directory.
Consult references/quality-check.md for details. Quick one-pass check:
figma-extract.md reference code are present in the generated HTMLexplain.md are representedThis is a structural check only — real visual verification happens in /dx-figma-verify.
Skip if: design is very simple (< 3 visual elements).
## Prototype generated
**Component:** <name>
- `prototype/index.html` — <line count> lines
- `prototype/styles.css` — <line count> lines, <N> token mappings (<M> exact, <K> close, <J> no match)
- `prototype/script.js` — <line count> lines (or "not needed")
- `figma-conventions.md` — <section count> convention categories discovered
**Token coverage:** <percentage>% of Figma tokens mapped to project equivalents
### To preview: open `<full path>/prototype/index.html` in a browser
### Next: `/dx-figma-verify` to visually verify prototype against Figma, then `/dx-plan`