skills.rest
raphaelmans
raphaelmansCOMMUNITY
Explore all skills by this author →
GitHub

implement-design

Translate Figma designs into UI code with token-driven styling and MCP server integration.

Updated Feb 28, 2026
Search Tags:#ui#figma#tokens#design-system#implement#design-to-code#mcp-server
One-click install
npx skills add https://github.com/raphaelmans/agent-skills --skill implement-design-raphaelmans
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implement-design
Source: https://github.com/raphaelmans/agent-skills/tree/main/implement-design
Command: npx skills add https://github.com/raphaelmans/agent-skills --skill implement-design-raphaelmans

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates Figma designs into production-ready UI code with pixel-perfect fidelity, enabling seamless handoff from design to implementation.

Core Features & Use Cases

  • Figma-to-code translation: Converts design files into componentized UI code aligned with the project's design system.
  • MCP server integration: Ensures proper connection and data exchange with the Figma MCP server for design context, tokens, and assets.
  • Use Case: When a designer shares a Figma URL, the system generates UI scaffolding and tokens to implement the component as specified.

Quick Start

Provide a Figma URL and let the system extract fileKey and nodeId, fetch design context, and generate production-ready UI code with 1:1 visual fidelity.

Frequently Asked Questions about implement-design

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

FAQPage Schema
How do I convert a Figma design to code using an MCP server?▼

To convert Figma designs to code, extract the fileKey and nodeId from the Figma URL, fetch the design context via the MCP server, and generate production-ready UI code with token-driven styling. This ensures 1:1 visual fidelity between the design and the implemented component.

What is the best way to implement Figma design tokens in UI components?▼

The best way to implement Figma design tokens is to fetch them via the MCP server and map them directly to your project's existing design system tokens. This token-driven styling approach ensures pixel-perfect fidelity and consistency across components and layouts during the design-to-code translation.

Can I achieve pixel-perfect fidelity when translating Figma files to production UI?▼

Yes, you can achieve pixel-perfect fidelity when translating Figma files to production UI by capturing visual references and validating the generated code against the original design. The system extracts the design context and maps styling tokens to ensure the output matches the Figma file exactly.

Do I need a Figma URL to generate UI scaffolding and design system code?▼

Yes, you need a Figma URL to generate UI scaffolding and design system code. The system extracts the fileKey and nodeId from the provided URL to fetch the necessary design context, tokens, and assets via the MCP server for accurate component implementation.

What are the limitations of automated Figma to code translation?▼

Automated Figma to code translation relies on MCP server integration to fetch design context and map tokens. Limitations include the need for properly structured Figma files, accurate token mapping within the project's design system, and visual validation to ensure the generated UI code meets the required pixel-perfect fidelity.

Related Skills

Explore More Design & Creative Skills→
EstomEstom

figma-implement-design

Translate Figma designs into frontend code with visual parity.

Community
Advanced
andebet07-ossandebet07-oss

figma-implement-design

Translate Figma designs into UI code using project design tokens.

Community
Advanced
Signet-AISignet-AI
237

signet-design

Standardize Signet UI visuals with design tokens, typography, and icons.

Official
Intermediate
thanhquan3010thanhquan3010

figma

Convert Figma designs into React and Tailwind CSS code.

Community
Intermediate