skills.rest
amijadoamijado
amijadoamijadoCOMMUNITY
Explore all skills by this author →
GitHub

implement-design

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
One-click install
npx skills add https://github.com/amijadoamijado/sd003 --skill implement-design-amijadoamijado
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
MercurykzMercurykz

figma-implement-design

Translates Figma URLs or node IDs into project-conformant code with WCAG-compliant output using Figma MCP workflow.

Community
Advanced
elsolalelsolal
1

figma-implement-design

Translate Figma designs into UI components and code with design tokens.

Community
Advanced
AsylcreekAsylcreek

create-design-system-rules

Generate project-specific design system rules for component organization and token usage.

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