AgentSkillsCN

implement-design

将Figma设计精准转译为生产就绪的代码，视觉保真度达到1:1。

SKILL.md
--- frontmatter
name: implement-design
description: Translates Figma designs into production-ready code with 1:1 visual fidelity

Implement Design

You are translating a Figma design into production-ready code with pixel-perfect accuracy.

Important: Figma URL Requirements

The Figma URL must include the node-id parameter: https://figma.com/design/:fileKey/:fileName?node-id=1-2

Format conversion needed:

  • •URL format uses hyphens: node-id=1-2
  • •MCP tools expect colons: nodeId=1:2

Prerequisites

  • •Figma MCP server must be connected (available at http://127.0.0.1:3845/mcp)
  • •Project should have established design system or component library

Required Workflow

Step 1: Extract Node ID from Figma URL

Parse the Figma URL:

  • •Extract file key: segment after /design/
  • •Extract node ID: convert 1-2 to 1:2 for tools
  • •Example: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
    • •fileKey: kL9xQn2VwM8pyrTb4ZcHjF
    • •nodeId: 42:15

Note: User must provide Figma URL with node-id parameter.

Step 2: Fetch Design Context

Run get_design_context with fileKey and nodeId to get:

  • •Layout properties (Auto Layout, constraints, sizing)
  • •Typography specifications
  • •Color values and design tokens
  • •Component structure and variants
  • •Spacing and padding values

If response is too large or truncated:

  1. •Run get_metadata(fileKey=":fileKey", nodeId="1:2") for high-level map
  2. •Identify specific child nodes needed
  3. •Fetch individual nodes with get_design_context(fileKey=":fileKey", nodeId=":childNodeId")

Step 3: Capture Visual Reference

Run get_screenshot with same fileKey and nodeId for visual reference. This serves as source of truth for validation.

Step 4: Download Required Assets

Download assets from Figma MCP server's assets endpoint:

  • •IMPORTANT: If server returns localhost source, use it directly
  • •DO NOT import new icon packages - use Figma assets
  • •DO NOT use placeholders if localhost source provided

Step 5: Translate to Project Conventions

Translate Figma output to project's framework, styles, and conventions:

  • •Treat Figma output (React + Tailwind) as design representation, not final code
  • •Replace with project's preferred utilities or design system tokens
  • •Reuse existing components instead of duplicating
  • •Use project's color system, typography, spacing tokens
  • •Respect existing routing, state management, data-fetch patterns

Step 6: Achieve 1:1 Visual Parity

Strive for pixel-perfect visual fidelity:

  • •Prioritize Figma fidelity to match designs exactly
  • •Avoid hardcoded values - use design tokens
  • •Prefer design system tokens when conflicts arise, adjust spacing minimally to match visuals
  • •Follow WCAG accessibility requirements

Step 7: Validate Against Figma

Before marking complete, validate against screenshot:

  • • Layout matches (spacing, alignment, sizing)
  • • Typography matches (font, size, weight, line height)
  • • Colors match exactly
  • • Interactive states work as designed
  • • Responsive behavior follows Figma constraints
  • • Assets render correctly
  • • Accessibility standards met

Implementation Rules

Component Organization

  • •Place components in designated design system directory
  • •Follow project's naming conventions
  • •Avoid inline styles unless necessary for dynamic values

Design System Integration

  • •ALWAYS use project's design system components when possible
  • •Map Figma tokens to project design tokens
  • •Extend existing components rather than creating new ones
  • •Document new components added to design system

Code Quality

  • •Avoid hardcoded values - extract to constants or tokens
  • •Keep components composable and reusable
  • •Add TypeScript types for component props
  • •Include JSDoc comments for exports

MCP Tools Available

You have access to Figma MCP tools through the figma MCP server:

  • •get_metadata - Get node structure and hierarchy
  • •get_design_context - Get detailed component structure
  • •get_screenshot - Get visual reference
  • •Assets endpoint - Download images, icons, SVGs

Best Practices

  • •Always start with context - Never implement based on assumptions
  • •Incremental validation - Validate frequently during implementation
  • •Document deviations - Comment on why you deviated from design
  • •Reuse over recreation - Check for existing components first
  • •Design system first - Prefer project patterns over literal translation