Skip to main content
affpapa.org
RU EN
skill CX Codex official · OpenAI

figma-implement-design · openai — Claude Code skill: what it does, install

This skill turns Figma nodes into application UI code while preserving layout, tokens, assets, and visual details. Use it when building components or screens from Figma.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/skills --skill figma-implement-design -a claude-code
Open on GitHub

What figma-implement-design does

The skill reads a selected Figma node, fetches its structured design context and screenshot, then maps the result to the project’s code conventions. It covers layout, spacing, typography, colors, component variants, assets, responsive constraints, and existing design-system components. The generated result is treated as design guidance, so project tokens and reusable components remain part of the implementation.

Its workflow extracts fileKey and nodeId, calls get_design_context, captures the reference with get_screenshot, downloads returned assets, and validates the finished UI against the design. Large responses can be narrowed with get_metadata and separate child-node requests. A connected Figma MCP server is required; remote use needs a URL such as https://figma.com/design/:fileKey/:fileName?node-id=1-2, while figma-desktop MCP can use the currently selected node.

What it helps with

  • turn a Figma screen into project code
  • build a component from a selected design node
  • map Figma tokens to an existing design system
  • compare implemented UI with a Figma screenshot
  • reuse assets returned by the Figma MCP server

Example prompts for the agent

  • Implement the component from this Figma URL: https://figma.com/design/:fileKey/:fileName?node-id=1-2, using the conventions already present in the project.
  • Build the selected Figma node and compare the result with its reference screenshot.
  • Translate this design into the existing component library, reusing matching components and adding typed props.

How to install figma-implement-design

1Skills CLI (Vercel)

npx skills add openai/skills --skill figma-implement-design -a claude-code

2Manually: put the files in place

~/.claude/skills/figma-implement-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/figma-implement-design/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about figma-implement-design

How do I install figma-implement-design in Claude Code?

Run npx skills add openai/skills --skill figma-implement-design -a claude-code, then check ~/.claude/skills/figma-implement-design/SKILL.md.

What does figma-implement-design do?

It turns a selected Figma node into application UI code using design context, screenshots, returned assets, and project tokens. It also guides checks for layout, typography, colors, states, responsiveness, and accessibility.

Do I need a Figma URL to use the skill?

A remote Figma MCP server needs a URL containing the fileKey and node-id. With figma-desktop MCP, you can select a node in the open Figma desktop app instead.

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set25

The whole set →
pdf A skill for reading, creating and reviewing PDFs where layout matters. Useful when the agent builds a document and needs to see how it renders. CX Codex +1 13,400installs gh-fix-ci Finds failing GitHub Actions checks on a pull request, inspects logs, and drafts a fix plan. The skill modifies code only after explicit approval. CX Codex +1 11,500installs openai-docs The skill finds current OpenAI guidance for API work, Codex, model selection, migrations, and prompt updates, using official documentation. CX Codex +1 6,100installs imagegen This skill creates and edits raster images such as illustrations, textures, sprites, and mockups. Use it when the output should be a bitmap asset. CX Codex +1 5,700installs jupyter-notebook Scaffolds reproducible Jupyter notebooks for experiments and tutorials using bundled templates and a helper script. It prevents manual raw JSON editing errors. CX Codex +1 5,600installs playwright-interactive Keeps a Playwright session alive for local web and Electron debugging. Use it for functional and visual QA after code changes. CX Codex +1 5,500installs skill-creator Official guide for drafting and updating agent skills. It structures procedures, bundled scripts, and documentation while keeping token overhead low. CX Codex +1 4,900installs gh-address-comments This skill finds the open pull request for the current branch, lists review comments, and applies the fixes you select through gh. CX Codex +1 4,800installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor