dx-figma-prototype

Generate a standalone HTML/CSS prototype from Figma extraction data.

6|3|Updated Mar 21, 2026

Search Tags:#html #accessibility #css #figma #prototype #design-to-code #token-mapping

Ready to run

npx skills add https://github.com/easingthemes/dx-aem-flow --skill dx-figma-prototype

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dx-figma-prototype
Source: https://github.com/easingthemes/dx-aem-flow/tree/main/plugins/dx-core/skills/dx-figma-prototype
Command: npx skills add https://github.com/easingthemes/dx-aem-flow --skill dx-figma-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Research project conventions and generate a standalone high-fidelity 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.

Core Features & Use Cases

Conventions discovery for CSS/HTML and accessibility patterns based on Figma data.
Scaffold and generate a standalone prototype from Figma extraction data into ready HTML/CSS artifacts.
Output figma-conventions.md and prototype files to guide downstream development.

Quick Start

Trigger the dx-figma-prototype after completing /dx-figma-extract to generate the standalone HTML/CSS prototype from the Figma data.

Frequently Asked Questions about dx-figma-prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate an HTML prototype from Figma data?▼

To generate an HTML prototype from Figma data, this Skill processes Figma extraction data to produce a standalone, high-fidelity HTML and CSS prototype that mirrors your original design references.

What is needed to convert Figma designs to HTML and CSS?▼

Converting Figma designs to HTML and CSS requires a figma-extract.md file containing the extraction data. The prototype generation will not work without this prerequisite file from a prior Figma data extraction step.

How does design-to-code handoff handle accessibility and token mapping?▼

Design-to-code handoff handles accessibility and token mapping by researching project conventions. It outputs a figma-conventions.md file to document CSS, HTML, naming, and accessibility patterns for downstream development.

Can I create a standalone CSS prototype for a component library?▼

Yes, you can create a standalone CSS prototype for component-library projects. It scaffolds ready-to-run HTML and CSS artifacts from the Figma extraction data, adhering to your specific project token conventions.

When should I avoid using an automated Figma to HTML prototype generator?▼

You should avoid using a Figma to HTML prototype generator for non-design tasks or when you lack the required figma-extract.md data, as the convention discovery and prototype generation logic strictly depends on valid Figma extraction inputs.