技能 implement-design
📦

implement-design

安全

Implement Figma Designs into Code

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.

支援: Claude Codex Code(CC)
📊 70 充足
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「implement-design」。 Implement this button: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15

預期結果:

Button component with primary/secondary variants, hover states, matching Figma design tokens, integrated with project design system

正在使用「implement-design」。 Build the dashboard layout from Figma

預期結果:

Complete responsive dashboard with header, sidebar, content area, and card components using project conventions

安全審計

安全
v1 • 2/13/2026

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.

1
已掃描檔案
253
分析行數
4
發現項
1
審計總數

高風險問題 (2)

SKILL.md:17-20SKILL.md:33-46SKILL.md:56-60SKILL.md:72-74SKILL.md:78-82SKILL.md:165-167SKILL.md:182-186SKILL.md:198SKILL.md:221
External Commands Flag - FALSE POSITIVE
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.
SKILL.md:2-5SKILL.md:8-12SKILL.md:17-21SKILL.md:31-40SKILL.md:44-46SKILL.md:50-52SKILL.md:161-171
Weak Cryptographic Algorithm - FALSE POSITIVE
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.
中風險問題 (1)
SKILL.md:17SKILL.md:33SKILL.md:44SKILL.md:161SKILL.md:178SKILL.md:250-252
Hardcoded URLs - FALSE POSITIVE
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.
低風險問題 (1)
SKILL.md:116SKILL.md:141SKILL.md:152
System Reconnaissance - FALSE POSITIVE
Static analyzer detected 'system reconnaissance' at 3 locations. The terms 'metadata' and 'context' refer to Figma design metadata and node context, not system enumeration.
審計者: claude

品質評分

38
架構
100
可維護性
87
內容
50
社群
78
安全
91
規範符合性

你能建構什麼

Building UI Components from Figma

Convert a single Figma component (button, card, input) into production-ready code that matches design specs exactly.

Creating Page Layouts

Take a complete Figma page design and build the full responsive layout with all sections, using existing project components.

Design System Updates

Update existing components when design specs change in Figma, ensuring consistency across the codebase.

試試這些提示

Basic Component Implementation 
Implement this Figma component: https://figma.com/design/FILE_KEY/PROJECT_NAME?node-id=NODE_ID
Full Page Implementation 
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.
Component with Variants 
Implement the button component at https://figma.com/design/FILE_KEY/PROJECT_NAME?node-id=NODE_ID including all variants (primary, secondary, disabled states).
Asset Extraction 
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.

最佳實務

  • 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

避免

  • 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

常見問題

What is required to use this skill?
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.
Does this work with any framework?
Yes, the skill translates Figma output to your project's specific framework, whether React, Vue, or other frameworks.
Can it implement entire applications?
This skill focuses on components and pages, not full applications. Complex pages may need to be broken into smaller parts.
How does it handle design tokens?
The skill maps Figma design values to your project's design tokens for colors, typography, and spacing.
What if my design is too complex?
Use get_metadata to see the node structure, then fetch specific child nodes individually instead of the whole design.
Does it support Figma variables?
Yes, the get_design_context tool returns variable values which the skill maps to project tokens.

開發者詳情

作者

figma

授權

MIT

儲存庫

https://github.com/figma/mcp-server-guide/tree/main/skills/implement-design/

引用

main

檔案結構

📄 SKILL.md