skills.rest
farmanlab
farmanlabCOMMUNITY
Explore all skills by this author →
GitHub

converting-figma-to-html

Convert Figma MCP design data into Tailwind-based HTML/CSS with data attributes.

1|Updated Dec 16, 2025
Search Tags:#html#figma#conversion#tailwind#design-to-code#data-attributes
One-click install
npx skills add https://github.com/farmanlab/ai_agent_orchestra --skill converting-figma-to-html
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: converting-figma-to-html
Source: https://github.com/farmanlab/ai_agent_orchestra/tree/main/.agents/skills/converting-figma-to-html
Command: npx skills add https://github.com/farmanlab/ai_agent_orchestra --skill converting-figma-to-html

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill converts Figma MCP design data into HTML/CSS with Tailwind-based markup, embedding data attributes for content tracking and facilitating downstream content analysis and previews.

Core Features & Use Cases

  • Figma MCP Data Retrieval: Extracts design_context, screenshot, metadata from Figma MCP.
  • HTML/CSS Generation with Data Attributes: Produces data-attribute-rich markup suitable for tracing content.
  • Content Analysis Documentation: Generates a content analysis document for data requirements.
  • Preview HTML: Optional device-frame preview generation.

Quick Start

Provide a Figma design URL and request the HTML/CSS output with data-embedded markup and optional preview.

Frequently Asked Questions about converting-figma-to-html

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

FAQPage Schema
How do I convert a Figma design to HTML and CSS code?▼

Converting Figma designs to HTML extracts your design data through Figma MCP, generates Tailwind-based responsive markup with embedded data attributes for tracking, and produces production-ready code. Provide your Figma design URL and request HTML/CSS output with data instrumentation.

Can I add data attributes to HTML converted from Figma designs?▼

Yes. This Skill embeds data-figma-* attributes throughout the generated markup to enable content tracking and downstream analysis. Data attributes are automatically populated from your Figma design metadata and design context.

What's the best way to generate responsive HTML from Figma designs using Tailwind?▼

Extract your Figma design through MCP, then convert it to Tailwind-based responsive HTML with automatic breakpoint handling and utility-class generation. The Skill produces mobile-first markup that respects your design system and layout constraints.

Does Figma-to-HTML conversion work with design-to-code workflows?▼

Yes. This Skill integrates into design-to-code workflows by extracting design_context and metadata from Figma MCP, generating semantic HTML/CSS, and optionally producing device-frame previews for validation and handoff.

Can I generate a preview of converted Figma designs in device frames?▼

Optional device-frame preview generation is supported. After HTML/CSS conversion, you can request preview artifacts that display your design in context, enabling quick validation before deployment.

What information does the Skill extract from Figma designs?▼

The Skill extracts design screenshots, design context metadata, and component structure from Figma MCP. It performs content analysis to document data requirements and generates corresponding HTML markup with instrumented attributes.

Related Skills

Explore More Design & Creative Skills→
tech-leads-clubtech-leads-club
5.0k

figma

Translate Figma design nodes into React and Tailwind components.

Official
Advanced
itallstartedwithaideaitallstartedwithaidea
31

ci-cd-pipelines

Deploy Cloudflare Workers or Pages to staging and preview environments with validation gates.

Community
Advanced
PL-Coding-GmbHPL-Coding-GmbH
6

android-preview-figma-verify

Compare Android Compose previews with Figma frames for design consistency.

Official
Advanced
silentbalanceyhsilentbalanceyh
2

r2-dev-html

Generate layout.html, components.html, and mockup.html from page specifications.

Community
Advanced