implement-design

Name: implement-design
Availability: InStock
Author: amijadoamijado

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

Updated Feb 11, 2026

Search Tags:#frontend #figma #ui-design #design-system #implement #design-to-code #token-mapping

Ready to run

npx skills add https://github.com/amijadoamijado/sd003 --skill implement-design-amijadoamijado

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: implement-design
Source: https://github.com/amijadoamijado/sd003/tree/main/.qwen/skills/implement-design
Command: npx skills add https://github.com/amijadoamijado/sd003 --skill implement-design-amijadoamijado

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates Figma designs into production-ready UI code with pixel-perfect accuracy.

Core Features & Use Cases

Figma-to-code translation: Convert designs into UI components aligned with the project design system.
MCP server integration: Interfaces with figma MCP servers to fetch design context and assets.
Design-token mapping: Maps Figma tokens to project tokens to ensure consistent styling.

Quick Start

Provide a Figma URL or select a node in the Figma Desktop app, then run the translation workflow to generate UI components.

Frequently Asked Questions about implement-design

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

FAQPage Schema

How do I convert Figma designs to production-ready frontend code?▼

To convert Figma designs to frontend code, provide a Figma URL or select a node via figma-desktop MCP. The workflow fetches design context and assets, translating them into pixel-perfect UI components.

How does design-to-code token mapping work with Figma?▼

Design-to-code token mapping works by extracting Figma styling tokens and matching them to project design system tokens. This ensures consistent styling and maintains visual accuracy across generated UI components.

Can I use figma-desktop MCP to fetch design context for UI components?▼

Yes, you can use figma-desktop MCP to fetch design context for UI components. The workflow interfaces with figma MCP servers to retrieve design assets and context directly from selected nodes.

What is the best way to ensure design-system alignment when translating Figma to code?▼

The best way to ensure design-system alignment is by enforcing token mappings and component reuse during the Figma to code translation. Visual validation against source designs confirms pixel-perfect accuracy.

Does Figma to code translation support visual validation against source designs?▼

Yes, Figma to code translation supports visual validation against source designs. The workflow includes validation steps to verify that generated UI components accurately match the original Figma layouts.

Do I need a Figma URL to generate UI components from a design?▼

No, you do not strictly need a Figma URL to generate UI components. You can also select a node directly in the Figma Desktop app and use the figma-desktop MCP integration to fetch context and assets.