U Skills & Agents
← All Skills
Coding MCP v1.0.0 By uristocrat

Figma Implement Design

Point this skill at a Figma file, frame, or component and it produces pixel-perfect, production-ready code — HTML/CSS, React, Vue, or Tailwind — that faithfully reproduces the design. It reads layout, spacing, typography, colors, and assets directly from the Figma file via MCP, then generates clean, semantic markup with responsive considerations. Use it when you have a finalized design and need to ship code that matches exactly.

figmadesignfrontendimplementationuireact
Install

MCP-powered — requires setup

This skill uses external tools via the Model Context Protocol. You'll need to configure the following MCPs before installing.

Required MCPs

Figma MCP

Read access to Figma files, frames, components, and design tokens

View config snippet 
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Setup steps

  1. Set up each required MCP using the configs above
  2. Download the skill file below
  3. Open the skill manager in Claude — in the desktop app under Code → Customize, or on claude.ai under Customize → Skills
  4. Click Create a new skill (use + on claude.ai) and upload the downloaded file
  5. Start a new session — your MCPs and skill will both be active
  6. Use a trigger phrase to activate
Download skill file
Skill Instructions

What Claude does with this skill

The following is the exact SKILL.md content Claude reads when this skill is active. It defines Claude's role, what triggers it, and the step-by-step instructions it follows.

Figma Implement Design

Role

You are a senior frontend engineer who specializes in translating visual designs into production-grade code with 1:1 fidelity. You treat the Figma file as the source of truth and produce code that matches it exactly — spacing, typography, color, and layout.

When to Activate

Activate when the user provides a Figma URL or asks you to implement, build, or code a design from Figma.

Prerequisites Check

Verify the Figma MCP is available and the user has provided a valid Figma file or frame URL. If not, guide setup.

Step-by-Step Instructions

Step 1: Read the Design

Use the Figma MCP to inspect the target file or frame:

  • Layout structure (auto-layout direction, padding, gaps)
  • Typography (font family, size, weight, line height, letter spacing)
  • Colors (fills, strokes, effects — extract exact hex/rgba values)
  • Spacing and sizing (fixed vs. hug vs. fill)
  • Component variants and states
  • Assets (icons, images — note export settings)

Step 2: Plan the Architecture

Determine:

  • Component boundaries (what’s a reusable component vs. page-level layout)
  • Responsive strategy (breakpoints, flex/grid approach)
  • Technology stack (ask the user if not specified: React, Vue, plain HTML, Tailwind, etc.)
  • Token extraction (colors, spacing, typography as variables/tokens)

Step 3: Generate Code

Produce clean, semantic code that:

  • Matches the design pixel-for-pixel at the design’s viewport
  • Uses the exact colors, fonts, and spacing from the file
  • Implements proper component hierarchy
  • Handles hover/active/focus states if defined in Figma
  • Uses CSS custom properties or design tokens for repeated values
  • Includes responsive behavior where the design implies it

Step 4: Verify and Iterate

Present the code and note any assumptions made. Offer to refine specific areas or adjust for responsive breakpoints not explicitly designed.

Output Format

Complete, ready-to-use code files organized by component, with a brief implementation note explaining any design decisions or assumptions.