figma-implement-design

figma-implement-design26 wordsInspect firstinspect-then-install

Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping `openai/skills` Figma variants.

Quick Start

Install:

npx skills add figma/mcp-server-guide --skill figma-implement-design --skill figma-generate-design --skill figma-code-connect -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode

Use: /figma-implement-design

Works with Claude Code, Gemini CLI, OpenCode, and other agentskills.io-compatible agents.

Curated external (hand-maintained)

Composed compose-external-wave-4 using authoring SSOT (docs/src/authoring/skills/figma-implement-design.mdx) + research. Do not run wagents docs generate on this file (HAND-MAINTAINED sentinel). Run external-skill-auditor before using in production or promoting.

What It Does

Figma skill for implementing designs from Figma into production code. Guides agent through using Figma context/MCP to translate designs to components, respecting design tokens, variants, and system rules. Part of Figma MCP + skills suite.

Harness Coverage

Targets verified harnesses: antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode.

Portable multi-harness install command:

npx skills add figma/mcp-server-guide --skill figma-implement-design --skill figma-generate-design --skill figma-code-connect -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode

Trust / Audit

Trust tier: Inspect first (needs-inspection)

Curated status: inspect-then-install

Risk notes: Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping openai/skills Figma variants.

Entry maintained via authoring + research for compose-external-wave-4; provenance and audit notes are authoritative there (research context is advisory).

Install Prerequisites

Install: npx skills add figma/mcp-server-guide --skill figma-code-connect --skill figma-generate-design --skill figma-implement-design -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode; status=inspect-then-install; selector=named (inferred); policy=Inspect source, hooks, scripts, credentials, and dedupe before install.

Public Metadata

Field	Value
Source Type	curated-external
Display Source	figma/mcp-server-guide
Source Kind	github
Installability	portable command
Review State	curated
Trust Tier	needs-inspection
Target Agents	antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode

General

Field	Value
Name	figma-implement-design

Curated catalog entry

docs/src/authoring/skills/figma-implement-design.mdx (full SSOT excerpt)

---
name: "figma-implement-design"
description: "Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping `openai/skills` Figma variants."
title: "Figma Implement Design"
source_kind: "curated-external"
source: "figma/mcp-server-guide"
install_source: "figma/mcp-server-guide"
status: "inspect-then-install"
trust_tier: "needs-inspection"
provenance_status: "verified-install-command"
install_command: "npx skills add figma/mcp-server-guide --skill figma-implement-design --skill figma-generate-design --skill figma-code-connect -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode"
target_agents: [antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode]
source_url: "https://github.com/figma/mcp-server-guide"
notes: "Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping `openai/skills` Figma variants."
risk_notes: "Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping `openai/skills` Figma variants."
promotion_policy: "Inspect source, hooks, scripts, credentials, and dedupe before install."
provenance_evidence: "Curated `npx skills add` command with named `--skill` selectors under `inspect-then-install` in config/external-skills.md."
---

{/* GENERATED-AUTHORING: source=config/external-skills.md; entry=figma-implement-design; re-run migration to refresh */}

Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping `openai/skills` Figma variants.

Install / provenance (from authoring frontmatter + research):

Field	Value
install_command	npx skills add figma/mcp-server-guide --skill figma-implement-design --skill figma-generate-design --skill figma-code-connect -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode
source	figma/mcp-server-guide
source_url	https://github.com/figma/mcp-server-guide
trust_tier	needs-inspection
curated_status	inspect-then-install
target_agents	antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode

Resources

Skill Catalog Browse custom and external skills.

CLI Reference Install and manage skills.