AgentSkillsCN

figma

直接从Figma设计中实现UI，借助Figma MCP，以像素级的精确度呈现设计效果。 当收到Figma链接，被要求“从Figma实现”“匹配设计”，或在构建需精确契合设计规范的UI时，可使用此方法。

SKILL.md
--- frontmatter
name: figma
description: |
  Implement UI directly from Figma designs using the Figma MCP with pixel-perfect fidelity.
  Use when given a Figma URL, asked to "implement from Figma", "match the design",
  or when building UI that needs to precisely match design specs.
license: MIT
metadata:
  author: howells
  argument-hint: <figma-url-or-description>

Figma Implementation Workflow

Implement UI components directly from Figma designs using the Figma MCP.

Process

Follow the instructions in /agents/design/figma-implement.md:

  1. •

    Extract Design Intent — Use Figma MCP to get specs (colors, typography, spacing, shadows, component hierarchy)

  2. •

    Understand Codebase Context — Find existing design system, component patterns, styling methodology

  3. •

    Implement with Fidelity — Write code using existing tokens, get padding/spacing right (most commonly missed)

  4. •

    Review and Compare — Screenshot the result, compare against Figma, fix discrepancies, iterate until matching

Required Input

  • •Figma URL (file or specific node)
  • •OR description of what to find in an already-shared Figma file

Usage

code
/arc:figma https://figma.com/design/xxx/yyy?node-id=123-456

Or if Figma file already shared:

code
/arc:figma "the header component"

Figma MCP Commands

Get design context:

code
mcp__figma__get_design_context: fileKey, nodeId

Get screenshot for comparison:

code
mcp__figma__get_screenshot: fileKey, nodeId

Extract specific values:

  • •Colors, gradients
  • •Typography (font, size, weight, line-height)
  • •Spacing (padding, margins, gaps)
  • •Shadows, borders, radii
  • •Component structure

Interop

  • •Use /arc:design if you need to create a design from scratch (no Figma reference)
  • •Use /arc:build for quick implementations without Figma
  • •Use /arc:implement for planned multi-step implementations