figma-implement-design
Translate Figma designs into production UI code with close visual fidelity, from Figma URLs or a component spec.
- Kind
- Skill
- Works with
- Codex, Claude Code
- Source
- openai/skills @ 49f948faa925
- Path
- skills/.curated/figma-implement-design/SKILL.md
- License
- Apache-2.0
- Jobs
- UI/UX work, Implementation
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# Implement Design ## 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. ## Skill Boundaries - Use this skill when the deliverable is code in the user's repository. - If the user asks to create/edit/delete nodes inside Figma itself, switch to [figma-use](../figma-use/SKILL.md). - If the user asks to build or update a full-page screen in Figma from code or a description, switch to [figma-generate-design](../figma-generate-design/SKILL.md). - If the user asks only for Code Connect mappings, switch to [figma-code-connect-components](../figma-code-connect-components/SKILL.md). - If the user asks to author reusable agent rules (`CLAUDE.md`/`AGENTS.md`), switch to [figma-create-design-system-rules](../figma-create-design-system-rules/SKILL.md). ## 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` - `:fileKey` is the file key …