figma-dev
CommunityPixel-perfect UI from Figma designs
Authorthomasttvo
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Translates Figma designs into production-ready UI implementations and verifies visual parity so engineers do not guess asset placement, icon shapes, colors, or layer structure.
Core Features & Use Cases
- Figma parsing & context retrieval: extract file key and node id, call get_design_context and get_screenshot to obtain layout, tokens, and a reference image for validation.
- Asset mapping & SVG verification: enumerate every asset variable, fetch SVGs, compare path data and viewBox to find exact codebase matches or create new assets.
- Design-to-code translation & visual QA: convert MCP output into project conventions, replace Tailwind with design tokens, ensure layer-by-layer fidelity, and run device comparisons via ask_screen for targeted discrepancies.
Quick Start
Provide a Figma URL and ask the skill to fetch design context, build the complete asset mapping table, and run visual QA against the Figma screenshot.
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-dev Download link: https://github.com/thomasttvo/claude-skills/archive/main.zip#figma-dev 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 223,000+ vetted skills library on demand.