figma-bridge-html-export
OfficialConvert Figma designs into LLM-friendly code
Software Engineering#figma#design to code#ui tokens#html export#css generation#semantic ui#local preview
AuthorAradotso
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Figma designs are hard for AI and developers to interpret and implement directly, because their layout, typography, and styling are not available as clean, semantic HTML/CSS. This Skill turns Figma nodes into LLM-friendly output so you can speed up accurate UI reconstruction.
Core Features & Use Cases
- Figma-to-semantic HTML/CSS conversion: Produces readable, structure-preserving markup and styles suitable for AI-assisted implementation.
- Local server with live preview: Runs a bridge server and provides a browser preview workflow for rapid verification.
- Token-aware styling (fonts/colors/layout): Extracts layout properties (including flex/auto-layout hints) and handles common style elements for implementation fidelity.
- Use Case: When you have a new landing page from a designer, you can convert key Figma components into HTML/CSS and feed the result to an LLM to generate React (or similar) code that matches the design intent.
Quick Start
Use the figma-bridge-html-export skill to convert a selected Figma component into semantic HTML and generated CSS, then open the local preview to verify layout and styling.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: figma-bridge-html-export Download link: https://github.com/Aradotso/design-skills/archive/main.zip#figma-bridge-html-export Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.