What does this skill do, and when should you use it?
This skill turns components or screens from Figma files into production-ready code in the user's application repository. It requires an accessible Figma MCP server, plus a Figma URL containing a file key and node ID, unless the user selects a node in Figma Desktop. Its workflow retrieves structured design context, screenshots, and assets before adapting the result to the project's design system, routing, and state conventions. It is a strong fit for high-fidelity frontend implementation, but it does not edit the Figma canvas itself.
Parses the file key and node ID from a Figma URL; calls get_design_context for layout, typography, colors, design tokens, component structure, and spacing; calls get_screenshot for visual reference; uses image, icon, and SVG assets returned through the Figma MCP server's localhost endpoint; checks for reusable project components and tokens; implements components or screens in the project repository; and validates layout, typography, colors, interaction states, responsive behavior, assets, and accessibility against the design.
- A frontend developer implements a Figma button component and integrates it with an existing design system.
- A product team converts a Figma dashboard screen into a responsive application page.
- A design-system maintainer extends an existing component with a Figma-defined variant.
- An engineering team compares an implementation with a Figma screenshot to locate spacing, typography, color, or asset discrepancies.
How do you install this skill?
- Core functionality depends on the external Figma MCP service; the supplied files do not establish stable reachability from mainland-China networks.
- No explicit user-confirmation, design-data-flow disclosure, sensitive-data handling, or rollback procedure is provided.
- License, versioning, changelog, and maintenance/update path are not established by the supplied evidence.
- The 1:1 visual-fidelity and production-ready claims are goals; the static material does not verify actual outputs.
- Network access
- Local filesystem
- MCP Server
Figma MCP server
The skill is located at skills/.curated/figma-implement-design in openai/skills. The README documents installation through Codex: run $skill-installer figma-implement-design, then restart Codex. The README does not state the individual skill's license; it says to check LICENSE.txt in the skill directory.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/openai/skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/.curated/figma-implement-design" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Provide a Figma URL in the form https://figma.com/design/:fileKey/:fileName?node-id=1-2, such as https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15, and describe the component or screen to implement. The skill then retrieves design context, screenshots, and assets, adapts the result to project conventions, and validates the implementation. With the Figma Desktop MCP, the user may select a node directly in the desktop app instead of providing a URL.
What are this skill's strengths and limitations?
- Defines a concrete seven-step workflow from design inspection through visual validation.
- Prioritizes existing design-system components, tokens, routing, and state conventions.
- Explicitly covers Figma assets, responsive constraints, interaction states, and accessibility.
- Includes concrete component and full-page implementation examples.
- Requires a connected and accessible Figma MCP server.
- Remote MCP usage requires a Figma URL with a node ID.
- The skill does not create, edit, or delete nodes inside Figma.
- The source provides no test suite, platform test results, or individual skill license information.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Figma Design Implementer this page ✓ OpenAI · Official | 53 · Use with care | ★ 28k | 4mo ago | — |
| Design Auditor Skill | 53 · Use with care | ★ 86 | 5mo ago | — |
| Figma Design System Rules Builder ✓ OpenAI · Official | 50 · Use with care | ★ 28k | 4mo ago | — |
| AnyDesign | 58 · Recommended | ★ 219 | 1mo ago | MIT |
| Figma Code Connect Mapper ✓ OpenAI · Official | 54 · Use with care | ★ 28k | 4mo ago | — |
How did FollowSkills review this skill?
The workflow scopes work to fetching a specified Figma node, downloading MCP-provided assets, and modifying the user's codebase, and it explicitly forbids adding new icon packages; however, it does not specify user confirmation, data flows, handling of sensitive design content, external-request boundaries, rollback, or independent source verification, so 8 points are deducted.
The ordered procedure, URL parsing, truncation fallback, and common-issue guidance are internally coherent; however, there are no committed tests, CI evidence, detailed input validation, or diagnosable error-message requirements. Under static calibration, 2 points are deducted.
The intended audience, inputs, outputs, and boundaries with neighboring Figma skills are clearly described, including URL and desktop-selection paths; however, use requires accessible Figma MCP services, Chinese-language support is unspecified, and the core figma.com/mcp.figma.com dependency has no mainland-China reachability evidence, so 5 points are deducted.
The document includes overview, boundaries, prerequisites, ordered workflow, rules, examples, best practices, and troubleshooting. Repository context indicates OpenAI provenance, but maintenance ownership is not explicit within the skill; license metadata is unknown, and versioning, changelog, and update path are absent, so 7 points are deducted.
The workflow covers design context, screenshots, assets, project conventions, visual validation, and accessibility, so it plausibly addresses the core implementation task; however, there is no file-contained third-party execution evidence or verified representative output, and the claimed 1:1 production result depends on external MCP access and project-specific implementation, so 1 point is deducted.
Concrete tool calls, parameter formats, checklists, and troubleshooting paths make some claims auditable; however, there is no test suite, CI result, third-party execution record, or corroborating evidence. One point is deducted under static calibration.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →