figma-implement-design
OfficialTurn Figma designs into production-ready UI.
Authortech-leads-club
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Translate Figma designs into production-ready code with pixel-perfect fidelity, leveraging the Figma MCP workflow to ensure alignment with design tokens, assets, and project conventions.
Core Features & Use Cases
- Structured workflow: set up and validate a Figma MCP integration, fetch design context, capture screenshots, and download assets for implementation.
- Design system alignment: map Figma tokens to the project design system and reuse existing components to ensure consistency.
- Use Case: A designer provides a Figma URL and node ID; the skill generates production-ready UI code that matches the design specs and tokens.
Quick Start
Provide a Figma URL or select a node via the Figma MCP desktop workflow to initiate the translation process. The agent will fetch design context, screenshots, and assets, then translate them into the project’s conventions.
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-implement-design Download link: https://github.com/tech-leads-club/agent-skills/archive/main.zip#figma-implement-design 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 510,000+ vetted skills library on demand.