converting-figma-to-html
CommunityTurn Figma designs into maintainable HTML/CSS.
Authorfarmanlab
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
referencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: converting-figma-to-html Download link: https://github.com/farmanlab/ai_agent_orchestra/archive/main.zip#converting-figma-to-html Please download this .zip file, extract it, and install it in the .claude/skills/ directory.