C✳CODEZ.WIN
🌐 English

Localized reading guide

figma-implement-designPurpose, usage and source

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via use_figma, use figma-use.

Source retrieved:

Source repository
openai/skills
SKILL.md
skills/.curated/figma-implement-design/SKILL.md
Repository stars
28,420
Repository updated
2026-10-29
Categories
Design
Last collected

License: License file needs review

Source SKILL.md

Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.

The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.

What this Skill does

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via use_figma, use figma-use.

How the upstream workflow works

Required Workflow

Follow these steps in order. Do not skip steps.

Upstream passage · L29 ↗

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.

Upstream passage · L8 ↗

Step 2: Fetch Design Context

Run get_design_context with the extracted file key and node ID. This provides the structured data including: Layout properties (Auto Layout, constraints, sizing) Color values and design tokens

Upstream passage · L60 ↗
Upstream passage · ↗
get_design_context(fileKey=":fileKey", nodeId="1-2")

Requirements and setup

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

Upstream passage · L20 ↗

Limits and quality checks

Code Quality

Avoid hardcoded values - extract to constants or design tokens Keep components composable and reusable

Upstream passage · L156 ↗

Start with a safe trial

  1. Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
  2. Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
  3. Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
  4. Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.

Skill format and directory specification ↗

Read further in the source

Translation and scope

This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.

This introduction refers to the pinned version below; current repository activity and collection time are shown separately.

Source retrieved
Source commit
49f948faa9258a0c61caceaf225e179651397431
Source SHA-256
63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad
Back to the full Skill catalog