skills.rest
easingthemes
easingthemesCOMMUNITY
Explore all skills by this author →
Website𝕏@draganfillGitHub

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
One-click install
npx skills add https://github.com/easingthemes/dx-aem-flow --skill dx-figma-prototype
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
easingthemeseasingthemes
6

dx-figma-extract

Extract design context, tokens, and screenshots from a Figma URL.

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
noahwins-ngnoahwins-ng
1

web-design-guidelines

Audit UI components, HTML structures, and CSS patterns against design and accessibility standards.

Community
Intermediate
Maccio-huangMaccio-huang

web-prototype

Generate desktop web prototypes from predefined HTML layouts and design systems.

Community
Basic