skills.rest
filipesf
filipesfCOMMUNITY
Explore all skills by this author →
Website𝕏@filipesfGitHub

implement-design

Translate Figma designs into reusable, token-driven UI code via MCP server.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill translates Figma designs into production-ready UI code, enabling developers to implement interfaces precisely from design specs.

Core Features & Use Cases

  • Figma to code translation: Converts design tokens, typography, and layout into code aligned with the project design system.
  • MCP server integration: Works with figma MCP server to fetch design data, assets, and node context.
  • Use Case: When a designer hands off a Figma design, this skill helps generate component scaffolding and token-driven styles that match visuals 1:1.

Quick Start

Provide a Figma URL and node-id, or select a node in figma-desktop MCP to begin translation. The skill will fetch context and generate UI code following project conventions.

Frequently Asked Questions about implement-design

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

FAQPage Schema
How do I turn Figma designs into production-ready UI code?▼

To turn Figma designs into production-ready UI code, provide a Figma URL and node-id, or select a node in figma-desktop MCP. The skill fetches design context and generates token-driven, reusable UI code matching your project conventions.

Do I need an active Figma MCP server connection to implement designs?▼

Yes, an active Figma MCP server connection is required to implement designs. You also need access to your project's design tokens and component library to ensure the generated UI code achieves 1:1 visual fidelity.

Can I use design tokens to map Figma layouts to my existing component library?▼

Yes, you can map design tokens to your existing component library. The skill translates Figma typography, layout, and tokens into code aligned with your project's design system to generate reusable, token-driven components.

What's the best way to ensure 1:1 fidelity when translating Figma handoffs?▼

The best way to ensure 1:1 fidelity during Figma handoffs is to fetch design data via the figma MCP server. This provides exact node context, assets, and token mapping needed for precise UI implementation.

Why does my Figma to code translation require access to the component library?▼

Figma to code translation requires access to the component library to generate reusable code. Without it, the skill cannot accurately map design tokens and structural context to your project's established UI conventions.

How does figma-desktop MCP integration work for UI implementation?▼

Figma-desktop MCP integration works by fetching design data, assets, and node context directly from your selections. This context feeds the skill to automate the generation of production-ready UI code.

Related Skills

Explore More Design & Creative Skills→
pkoka888pkoka888
1

figma-implement-design

Translate Figma designs into UI code using the Figma MCP workflow.

Community
Advanced
amijadoamijadoamijadoamijado

implement-design

Translate Figma designs into UI components with design-token mapping.

Community
Advanced
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
tech-leads-clubtech-leads-club
5.0k

figma-implement-design

Translate Figma designs into production-ready UI code via Figma MCP.

Official
Advanced