Content & Writing · Official
figma-implement-design
Translates Figma designs into production-ready application code with 1:1 visual fidelity.
Composite
C 4.6 · A 3.1
How we got there
Our evaluation
Tier-2 Review: figma-implement-design
What We Attempted
We evaluated the figma-implement-design skill, which is a structured workflow designed to translate Figma designs into production-ready application code with pixel-perfect fidelity. The skill is intended for use when a user asks to implement UI code from Figma files, generate components, or build interfaces matching Figma specifications. Our test harness attempted to install the skill and perform a smoke-invocation to verify it runs cleanly in a standard environment.
What Failed
Both tests in our harness failed:
Install (fail): The skill does not provide an install command in its SKILL.md. It is not a pip package, npm module, or any form of installable artifact. It is a workflow description—a prompt or agent instruction set—not software that can be installed.
Smoke-invocation (fail): There is no CLI entry point, executable script, or programmatic interface defined. The skill is a set of steps for an AI agent to follow when interacting with Figma MCP servers and a codebase. It cannot be invoked as a standalone tool.
What We Observed
The SKILL.md is well-structured and clearly written. It defines precise triggers (e.g., "implement design", Figma URLs), explicit scope boundaries (distinguishing from figma-use, figma-generate-design, etc.), and a detailed, step-by-step workflow. The skill assumes the presence of a Figma MCP server (remote or desktop) and an existing design system in the user's project. It does not attempt to be a self-contained software package—it is a protocol for an AI agent to follow.
The test harness failure is not a bug in the skill's logic; it is a mismatch between the harness's expectation (installable, invocable tool) and the skill's nature (agent workflow). The skill is designed for use within an AI coding assistant (e.g., Claude Code), not as a standalone utility.
Rating Acknowledgment
The composite score of 4.6 / 5.0 and the auto-summary ("Excellent skill with clear triggers, specific output, precise scope, self-contained, and broadly reusable") are therefore theoretical until the skill can be physically re-run in its intended environment—an AI agent with access to a Figma MCP server and a user's code repository. In that context, the score is plausible: the trigger clarity (5.0), output specificity (4.5), scope precision (4.5), self-containment (5.0), and reusability (4.0) all reflect a well-designed workflow. However, we cannot confirm any of these dimensions from our harness alone.
Value in Principle
Despite the test failures, this skill is valuable in principle. It codifies a complex, multi-step process (extracting node IDs, fetching design context, capturing screenshots, generating code) that an AI agent would otherwise need to improvise. The explicit boundaries prevent the agent from misinterpreting the user's intent (e.g., editing Figma nodes instead of generating code). The workflow includes fallback logic for large responses, which is a practical touch. For teams using Figma with an AI coding assistant, this skill would likely reduce errors and improve consistency. It is not a tool you install—it is a recipe you follow. Our harness simply wasn't built to test that.
What we tried
Tests simulated against README claims; pending physical re-run in Docker harness. Ran 2026-06-20.
Overall: broken. 0 tests passed, 0 partial, 2 failed; key blocker: skill is a workflow description, not an installable or invocable package.
Inferred dependencies: figma MCP server, figma-desktop MCP (optional).
| Test | Status | Notes |
|---|---|---|
| install | fail | No install command documented in SKILL.md; skill is a workflow definition, not a pip package. |
| smoke-invocation | fail | No CLI entry point defined; skill is a prompt/agent workflow, not a standalone executable. |
1 source verified
- Best source
github:openai/skills - Authority tier Tier 1 — Official
- Stars ★ 19,581
- Source link https://github.com/openai/skills/blob/main/skills/.curated/figma-implement-design/SKILL.md ↗
- First published 2026-05-19
- Last modified 2026-06-20
Use this skill
/plugin install figma-implement-design Head-to-head pages featuring figma-implement-design
More in Content & Writing
github-swyxio-spark-joy
✨😂 2000+ ways to add design flair, user delight, and whimsy to your product.
algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields,…
- philosophy → expression
github-swyxio-swyxio
<!--<h3 align="center"  </h3 --
doc-coauthoring
Guide users through a structured workflow for co-authoring documentation.