Implement Design
- 1 installs
- 404 repo stars
- Updated August 5, 2026
- aiskillstore/marketplace
implement-design is a Claude Code skill that converts Figma designs into production-ready UI code with 1:1 visual parity using the Figma MCP server.
About
implement-design is a Claude Code skill that translates Figma designs into production-ready code with 1:1 visual fidelity. A developer uses it when building UI from a Figma URL or a selected node, requiring the Figma MCP server. It follows a fixed 7-step workflow that fetches design context and a screenshot, downloads assets, translates output to the project's conventions, and validates against Figma.
- Translates Figma designs into production code via the Figma MCP server
- 7-step workflow: node ID, design context, screenshot, assets, translate, parity, validate
- Maps Figma tokens to the project's design system for 1:1 fidelity
Implement Design by the numbers
- 1 all-time installs (skills.sh)
- Ranked #1,609 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
implement-design capabilities & compatibility
- Capabilities
- figma to code · design token mapping · visual validation
- Works with
- figma
- Use cases
- frontend · ui design · web design
- Runs
- Runs locally
What implement-design says it does
Translates Figma designs into production-ready code with 1:1 visual fidelity.
Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style
npx skills add https://github.com/aiskillstore/marketplace --skill implement-designAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1 |
|---|---|
| repo stars | ★ 404 |
| Last updated | August 5, 2026 |
| Repository | aiskillstore/marketplace ↗ |
What it does
Translate Figma designs into production-ready UI code with 1:1 fidelity via the Figma MCP server.
Who is it for?
Building pixel-accurate UI components directly from Figma files via the Figma MCP.
Skip if: Design work without Figma or when the Figma MCP server is unavailable.
When should I use this skill?
When implementing UI from a Figma URL or selected node with 1:1 fidelity.
By the numbers
- 7-step required workflow
- 7-item validation checklist
Files
Implement Design
Overview
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
Prerequisites
- Figma MCP server must be connected and accessible
- User must provide a Figma URL in the format:
https://figma.com/design/:fileKey/:fileName?node-id=1-2 :fileKeyis the file key1-2is the node ID (the specific component or frame to implement)- OR when using
figma-desktopMCP: User can select a node directly in the Figma desktop app (no URL required) - Project should have an established design system or component library (preferred)
Required Workflow
Follow these steps in order. Do not skip steps.
Step 1: Get Node ID
Option A: Parse from Figma URL
When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.
URL format: https://figma.com/design/:fileKey/:fileName?node-id=1-2
Extract:
- File key:
:fileKey(the segment after/design/) - Node ID:
1-2(the value of thenode-idquery parameter)
Note: When using the local desktop MCP (figma-desktop), fileKey is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only nodeId is needed.
Example:
- URL:
https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15 - File key:
kL9xQn2VwM8pYrTb4ZcHjF - Node ID:
42-15
Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only)
When using the figma-desktop MCP and the user has NOT provided a URL, the tools automatically use the currently selected node from the open Figma file in the desktop app.
Note: Selection-based prompting only works with the figma-desktop MCP server. The remote server requires a link to a frame or layer to extract context. The user must have the Figma desktop app open with a node selected.
Step 2: Fetch Design Context
Run get_design_context with the extracted file key and node ID.
get_design_context(fileKey=":fileKey", nodeId="1-2")This provides the structured data including:
- Layout properties (Auto Layout, constraints, sizing)
- Typography specifications
- Color values and design tokens
- Component structure and variants
- Spacing and padding values
If the response is too large or truncated:
1. Run get_metadata(fileKey=":fileKey", nodeId="1-2") to get the high-level node map 2. Identify the specific child nodes needed from the metadata 3. Fetch individual child nodes with get_design_context(fileKey=":fileKey", nodeId=":childNodeId")
Step 3: Capture Visual Reference
Run get_screenshot with the same file key and node ID for a visual reference.
get_screenshot(fileKey=":fileKey", nodeId="1-2")This screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation.
Step 4: Download Required Assets
Download any assets (images, icons, SVGs) returned by the Figma MCP server.
IMPORTANT: Follow these asset rules:
- If the Figma MCP server returns a
localhostsource for an image or SVG, use that source directly - DO NOT import or add new icon packages - all assets should come from the Figma payload
- DO NOT use or create placeholders if a
localhostsource is provided - Assets are served through the Figma MCP server's built-in assets endpoint
Step 5: Translate to Project Conventions
Translate the Figma output into this project's framework, styles, and conventions.
Key principles:
- Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style
- Replace Tailwind utility classes with the project's preferred utilities or design system tokens
- Reuse existing components (buttons, inputs, typography, icon wrappers) instead of duplicating functionality
- Use the project's color system, typography scale, and spacing tokens consistently
- Respect existing routing, state management, and data-fetch patterns
Step 6: Achieve 1:1 Visual Parity
Strive for pixel-perfect visual parity with the Figma design.
Guidelines:
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values - use design tokens from Figma where available
- When conflicts arise between design system tokens and Figma specs, prefer design system tokens but adjust spacing or sizes minimally to match visuals
- Follow WCAG requirements for accessibility
- Add component documentation as needed
Step 7: Validate Against Figma
Before marking complete, validate the final UI against the Figma screenshot.
Validation checklist:
- [ ] Layout matches (spacing, alignment, sizing)
- [ ] Typography matches (font, size, weight, line height)
- [ ] Colors match exactly
- [ ] Interactive states work as designed (hover, active, disabled)
- [ ] Responsive behavior follows Figma constraints
- [ ] Assets render correctly
- [ ] Accessibility standards met
Implementation Rules
Component Organization
- Place UI components in the project's designated design system directory
- Follow the project's component naming conventions
- Avoid inline styles unless truly necessary for dynamic values
Design System Integration
- ALWAYS use components from the project's design system when possible
- Map Figma design tokens to project design tokens
- When a matching component exists, extend it rather than creating a new one
- Document any new components added to the design system
Code Quality
- Avoid hardcoded values - extract to constants or design tokens
- Keep components composable and reusable
- Add TypeScript types for component props
- Include JSDoc comments for exported components
Examples
Example 1: Implementing a Button Component
User says: "Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15"
Actions:
1. Parse URL to extract fileKey=kL9xQn2VwM8pYrTb4ZcHjF and nodeId=42-15 2. Run get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") 3. Run get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") for visual reference 4. Download any button icons from the assets endpoint 5. Check if project has existing button component 6. If yes, extend it with new variant; if no, create new component using project conventions 7. Map Figma colors to project design tokens (e.g., primary-500, primary-hover) 8. Validate against screenshot for padding, border radius, typography
Result: Button component matching Figma design, integrated with project design system.
Example 2: Building a Dashboard Layout
User says: "Build this dashboard: https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5"
Actions:
1. Parse URL to extract fileKey=pR8mNv5KqXzGwY2JtCfL4D and nodeId=10-5 2. Run get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") to understand the page structure 3. Identify main sections from metadata (header, sidebar, content area, cards) and their child node IDs 4. Run get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId") for each major section 5. Run get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") for the full page 6. Download all assets (logos, icons, charts) 7. Build layout using project's layout primitives 8. Implement each section using existing components where possible 9. Validate responsive behavior against Figma constraints
Result: Complete dashboard matching Figma design with responsive layout.
Best Practices
Always Start with Context
Never implement based on assumptions. Always fetch get_design_context and get_screenshot first.
Incremental Validation
Validate frequently during implementation, not just at the end. This catches issues early.
Document Deviations
If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.
Reuse Over Recreation
Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.
Design System First
When in doubt, prefer the project's design system patterns over literal Figma translation.
Common Issues and Solutions
Issue: Figma output is truncated
Cause: The design is too complex or has too many nested layers to return in a single response. Solution: Use get_metadata to get the node structure, then fetch specific nodes individually with get_design_context.
Issue: Design doesn't match after implementation
Cause: Visual discrepancies between the implemented code and the original Figma design. Solution: Compare side-by-side with the screenshot from Step 3. Check spacing, colors, and typography values in the design context data.
Issue: Assets not loading
Cause: The Figma MCP server's assets endpoint is not accessible or the URLs are being modified. Solution: Verify the Figma MCP server's assets endpoint is accessible. The server serves assets at localhost URLs. Use these directly without modification.
Issue: Design token values differ from Figma
Cause: The project's design system tokens have different values than those specified in the Figma design. Solution: When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing/sizing to maintain visual fidelity.
Understanding Design Implementation
The Figma implementation workflow establishes a reliable process for translating designs to code:
For designers: Confidence that implementations will match their designs with pixel-perfect accuracy. For developers: A structured approach that eliminates guesswork and reduces back-and-forth revisions. For teams: Consistent, high-quality implementations that maintain design system integrity.
By following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.
Additional Resources
{
"schema_version": "2.0",
"meta": {
"generated_at": "2026-02-13T08:54:11.198Z",
"slug": "figma-implement-design",
"source_url": "https://github.com/figma/mcp-server-guide/tree/main/skills/implement-design/",
"source_ref": "main",
"model": "claude",
"analysis_version": "3.0.0",
"source_type": "community",
"content_hash": "e4d9aec8b721192d53bef34fb53303372bb234b4da678b6f7615b74c69d5bfc9",
"tree_hash": "c611ca59cae32ad34befde2f69ffb90da098362e90c694dc90439809436ea89d"
},
"skill": {
"name": "implement-design",
"description": "Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", \"build Figma design\", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.",
"summary": "Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing ...",
"icon": "📦",
"version": "1.0.0",
"author": "figma",
"license": "MIT",
"category": "coding",
"tags": [
"figma",
"ui-implementation",
"design-to-code",
"frontend",
"mcp"
],
"supported_tools": [
"claude",
"codex",
"claude-code"
],
"risk_factors": []
},
"security_audit": {
"risk_level": "safe",
"is_blocked": false,
"safe_to_publish": true,
"summary": "All static findings are FALSE POSITIVES. The skill is a legitimate Figma design implementation workflow. External commands flagged are MCP tool call examples in markdown (not shell execution). Network URLs are Figma examples and documentation links. Weak crypto and system reconnaissance flags are spurious pattern matches on placeholder text. No actual security risks identified.",
"risk_factor_evidence": [
{
"factor": "external_commands",
"evidence": [
{
"file": "SKILL.md",
"line_start": 17,
"line_end": 17
},
{
"file": "SKILL.md",
"line_start": 18,
"line_end": 18
},
{
"file": "SKILL.md",
"line_start": 19,
"line_end": 19
},
{
"file": "SKILL.md",
"line_start": 20,
"line_end": 20
},
{
"file": "SKILL.md",
"line_start": 33,
"line_end": 33
},
{
"file": "SKILL.md",
"line_start": 37,
"line_end": 37
},
{
"file": "SKILL.md",
"line_start": 37,
"line_end": 37
},
{
"file": "SKILL.md",
"line_start": 38,
"line_end": 38
},
{
"file": "SKILL.md",
"line_start": 38,
"line_end": 38
},
{
"file": "SKILL.md",
"line_start": 40,
"line_end": 40
},
{
"file": "SKILL.md",
"line_start": 40,
"line_end": 40
},
{
"file": "SKILL.md",
"line_start": 40,
"line_end": 40
},
{
"file": "SKILL.md",
"line_start": 44,
"line_end": 44
},
{
"file": "SKILL.md",
"line_start": 45,
"line_end": 45
},
{
"file": "SKILL.md",
"line_start": 46,
"line_end": 46
},
{
"file": "SKILL.md",
"line_start": 50,
"line_end": 50
},
{
"file": "SKILL.md",
"line_start": 52,
"line_end": 52
},
{
"file": "SKILL.md",
"line_start": 56,
"line_end": 56
},
{
"file": "SKILL.md",
"line_start": 58,
"line_end": 60
},
{
"file": "SKILL.md",
"line_start": 60,
"line_end": 72
},
{
"file": "SKILL.md",
"line_start": 72,
"line_end": 74
},
{
"file": "SKILL.md",
"line_start": 74,
"line_end": 78
},
{
"file": "SKILL.md",
"line_start": 78,
"line_end": 80
},
{
"file": "SKILL.md",
"line_start": 80,
"line_end": 82
},
{
"file": "SKILL.md",
"line_start": 82,
"line_end": 92
},
{
"file": "SKILL.md",
"line_start": 92,
"line_end": 94
},
{
"file": "SKILL.md",
"line_start": 94,
"line_end": 165
},
{
"file": "SKILL.md",
"line_start": 165,
"line_end": 165
},
{
"file": "SKILL.md",
"line_start": 165,
"line_end": 166
},
{
"file": "SKILL.md",
"line_start": 166,
"line_end": 167
},
{
"file": "SKILL.md",
"line_start": 167,
"line_end": 171
},
{
"file": "SKILL.md",
"line_start": 171,
"line_end": 171
},
{
"file": "SKILL.md",
"line_start": 171,
"line_end": 182
},
{
"file": "SKILL.md",
"line_start": 182,
"line_end": 182
},
{
"file": "SKILL.md",
"line_start": 182,
"line_end": 183
},
{
"file": "SKILL.md",
"line_start": 183,
"line_end": 185
},
{
"file": "SKILL.md",
"line_start": 185,
"line_end": 186
},
{
"file": "SKILL.md",
"line_start": 186,
"line_end": 198
},
{
"file": "SKILL.md",
"line_start": 198,
"line_end": 198
},
{
"file": "SKILL.md",
"line_start": 198,
"line_end": 221
},
{
"file": "SKILL.md",
"line_start": 221,
"line_end": 221
},
{
"file": "SKILL.md",
"line_start": 221,
"line_end": 231
}
]
},
{
"factor": "network",
"evidence": [
{
"file": "SKILL.md",
"line_start": 17,
"line_end": 17
},
{
"file": "SKILL.md",
"line_start": 33,
"line_end": 33
},
{
"file": "SKILL.md",
"line_start": 44,
"line_end": 44
},
{
"file": "SKILL.md",
"line_start": 161,
"line_end": 161
},
{
"file": "SKILL.md",
"line_start": 178,
"line_end": 178
},
{
"file": "SKILL.md",
"line_start": 250,
"line_end": 250
},
{
"file": "SKILL.md",
"line_start": 251,
"line_end": 251
},
{
"file": "SKILL.md",
"line_start": 252,
"line_end": 252
}
]
}
],
"critical_findings": [],
"high_findings": [
{
"title": "External Commands Flag - FALSE POSITIVE",
"description": "Static analyzer detected 'Ruby/shell backtick execution' at 42 locations. These are MCP tool call examples in markdown code blocks (e.g., `get_design_context(fileKey=\"...\")`), not actual shell commands. No command injection risk exists.",
"locations": [
{
"file": "SKILL.md",
"line_start": 17,
"line_end": 20
},
{
"file": "SKILL.md",
"line_start": 33,
"line_end": 46
},
{
"file": "SKILL.md",
"line_start": 56,
"line_end": 60
},
{
"file": "SKILL.md",
"line_start": 72,
"line_end": 74
},
{
"file": "SKILL.md",
"line_start": 78,
"line_end": 82
},
{
"file": "SKILL.md",
"line_start": 165,
"line_end": 167
},
{
"file": "SKILL.md",
"line_start": 182,
"line_end": 186
},
{
"file": "SKILL.md",
"line_start": 198,
"line_end": 198
},
{
"file": "SKILL.md",
"line_start": 221,
"line_end": 221
}
],
"verdict": "FALSE_POSITIVE",
"confidence": 0.95,
"confidence_reasoning": "MCP tool call syntax in backticks is documentation, not actual command execution. No shell interpretation occurs."
},
{
"title": "Weak Cryptographic Algorithm - FALSE POSITIVE",
"description": "Static analyzer detected 85 instances of 'weak cryptographic algorithm' (blocker level). This is a spurious pattern match - the analyzer misinterprets placeholder text like ':fileKey', 'node-id', 'fileKey=' as cryptographic references. There is NO cryptographic code in this skill.",
"locations": [
{
"file": "SKILL.md",
"line_start": 2,
"line_end": 5
},
{
"file": "SKILL.md",
"line_start": 8,
"line_end": 12
},
{
"file": "SKILL.md",
"line_start": 17,
"line_end": 21
},
{
"file": "SKILL.md",
"line_start": 31,
"line_end": 40
},
{
"file": "SKILL.md",
"line_start": 44,
"line_end": 46
},
{
"file": "SKILL.md",
"line_start": 50,
"line_end": 52
},
{
"file": "SKILL.md",
"line_start": 161,
"line_end": 171
}
],
"verdict": "FALSE_POSITIVE",
"confidence": 0.98,
"confidence_reasoning": "Placeholders like ':fileKey' and 'node-id' are URL parameters, not cryptographic keys. No encryption algorithms present."
}
],
"medium_findings": [
{
"title": "Hardcoded URLs - FALSE POSITIVE",
"description": "Static analyzer detected 'hardcoded URLs' at 8 locations. These are legitimate Figma URL examples and official Figma documentation links. No sensitive data exfiltration or malicious network behavior.",
"locations": [
{
"file": "SKILL.md",
"line_start": 17,
"line_end": 17
},
{
"file": "SKILL.md",
"line_start": 33,
"line_end": 33
},
{
"file": "SKILL.md",
"line_start": 44,
"line_end": 44
},
{
"file": "SKILL.md",
"line_start": 161,
"line_end": 161
},
{
"file": "SKILL.md",
"line_start": 178,
"line_end": 178
},
{
"file": "SKILL.md",
"line_start": 250,
"line_end": 252
}
],
"verdict": "FALSE_POSITIVE",
"confidence": 0.95,
"confidence_reasoning": "URLs are example Figma URLs for demonstration and official documentation links. No user data or credentials involved."
}
],
"low_findings": [
{
"title": "System Reconnaissance - FALSE POSITIVE",
"description": "Static analyzer detected 'system reconnaissance' at 3 locations. The terms 'metadata' and 'context' refer to Figma design metadata and node context, not system enumeration.",
"locations": [
{
"file": "SKILL.md",
"line_start": 116,
"line_end": 116
},
{
"file": "SKILL.md",
"line_start": 141,
"line_end": 141
},
{
"file": "SKILL.md",
"line_start": 152,
"line_end": 152
}
],
"verdict": "FALSE_POSITIVE",
"confidence": 0.9,
"confidence_reasoning": "Figma API methods 'get_metadata' and 'get_design_context' are design data queries, not system reconnaissance."
}
],
"dangerous_patterns": [],
"files_scanned": 1,
"total_lines": 253,
"audit_model": "claude",
"audited_at": "2026-02-13T08:54:11.198Z"
},
"content": {
"user_title": "Implement Figma Designs into Code",
"value_statement": "Translating Figma designs into production-ready code manually is time-consuming and error-prone. This skill provides a structured workflow for pixel-perfect UI implementation with automated design token mapping.",
"seo_keywords": [
"Claude Code",
"Codex",
"Claude",
"Figma implementation",
"design to code",
"UI implementation",
"Figma MCP",
"pixel perfect",
"front-end development",
"component conversion"
],
"actual_capabilities": [
"Parse Figma URLs to extract file keys and node IDs for targeted component extraction",
"Fetch design context including layout, typography, colors, and component structure from Figma",
"Capture visual screenshots for reference during implementation",
"Download assets (images, icons, SVGs) directly from Figma MCP server",
"Map Figma design tokens to project design system tokens automatically",
"Validate implemented UI against Figma designs for 1:1 visual parity"
],
"limitations": [
"Requires Figma MCP server to be connected and accessible",
"Cannot work without a valid Figma file URL or desktop app selection",
"Complex designs may require fetching individual nodes due to response size limits",
"Does not generate entire applications - focuses on individual components or pages"
],
"use_cases": [
{
"title": "Building UI Components from Figma",
"description": "Convert a single Figma component (button, card, input) into production-ready code that matches design specs exactly.",
"target_user": "Frontend developers implementing design system components"
},
{
"title": "Creating Page Layouts",
"description": "Take a complete Figma page design and build the full responsive layout with all sections, using existing project components.",
"target_user": "Full-stack developers building new application pages"
},
{
"title": "Design System Updates",
"description": "Update existing components when design specs change in Figma, ensuring consistency across the codebase.",
"target_user": "Design system maintainers keeping components in sync"
}
],
"prompt_templates": [
{
"title": "Basic Component Implementation",
"prompt": "Implement this Figma component: https://figma.com/design/FILE_KEY/PROJECT_NAME?node-id=NODE_ID",
"scenario": "User provides a Figma URL and wants the component built"
},
{
"title": "Full Page Implementation",
"prompt": "Build this page from Figma: https://figma.com/design/FILE_KEY/PROJECT_NAME?node-id=NODE_ID. Use our existing design system components where possible.",
"scenario": "User wants a complete page layout implemented"
},
{
"title": "Component with Variants",
"prompt": "Implement the button component at https://figma.com/design/FILE_KEY/PROJECT_NAME?node-id=NODE_ID including all variants (primary, secondary, disabled states).",
"scenario": "User needs multiple component states or variants"
},
{
"title": "Asset Extraction",
"prompt": "Extract all icons and images from this Figma frame: https://figma.com/design/FILE_KEY/PROJECT_NAME?node-id=NODE_ID and create the necessary component code.",
"scenario": "User needs assets downloaded along with component code"
}
],
"output_examples": [
{
"input": "Implement this button: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15",
"output": "Button component with primary/secondary variants, hover states, matching Figma design tokens, integrated with project design system"
},
{
"input": "Build the dashboard layout from Figma",
"output": "Complete responsive dashboard with header, sidebar, content area, and card components using project conventions"
}
],
"best_practices": [
"Always fetch design context and screenshot before starting implementation to ensure accurate translation",
"Check for existing design system components before creating new ones to maintain consistency",
"Validate implementation against the Figma screenshot frequently during development, not just at the end"
],
"anti_patterns": [
"Implementing from assumptions without fetching actual Figma design context first",
"Creating duplicate components instead of extending existing design system components",
"Using hardcoded values instead of design tokens from Figma, which breaks future updates"
],
"faq": [
{
"question": "What is required to use this skill?",
"answer": "You need the Figma MCP server connected and either a Figma URL with a node ID or the Figma desktop app with a selected node."
},
{
"question": "Does this work with any framework?",
"answer": "Yes, the skill translates Figma output to your project's specific framework, whether React, Vue, or other frameworks."
},
{
"question": "Can it implement entire applications?",
"answer": "This skill focuses on components and pages, not full applications. Complex pages may need to be broken into smaller parts."
},
{
"question": "How does it handle design tokens?",
"answer": "The skill maps Figma design values to your project's design tokens for colors, typography, and spacing."
},
{
"question": "What if my design is too complex?",
"answer": "Use get_metadata to see the node structure, then fetch specific child nodes individually instead of the whole design."
},
{
"question": "Does it support Figma variables?",
"answer": "Yes, the get_design_context tool returns variable values which the skill maps to project tokens."
}
]
},
"file_structure": [
{
"name": "SKILL.md",
"type": "file",
"path": "SKILL.md",
"lines": 253
}
]
}
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
What does implement-design require?
A connected Figma MCP server and either a Figma URL with a node ID or a node selected in the Figma desktop app.
Should I use the Figma MCP output as final code?
No, treat its React + Tailwind output as a representation of design and behavior, then translate to the project's conventions and design tokens.