figma-implement-design Skill
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via usef Published by openai in skills.
What is figma-implement-design Skill?
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via usef Published by openai in skills. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Design and media
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use figma-implement-design Skill
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: openai
- Repository: openai/skills
- Skill file: skills/.curated/figma-implement-design/SKILL.md
What it does
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via usef
Skill instructions
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. - If the user asks to build or update a full-page screen in Figma from code or a description, switch to figma-generate-design. - If the user asks only for Code Connect mappings, switch to figma-code-connect-components. - If the user asks to author reusable agent rules (CLAUDE.md/AGENTS.md), switch to figma-create-design-system-rules. 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 - 1-2 is t
Explore related resources
Frequently asked questions
What is figma-implement-design?
figma-implement-design is a open-source AI agent skill with Copy skill directory. Translates Figma designs into production-ready application code with 1:1 visual fidelity.
Who is figma-implement-design best for?
figma-implement-design is best for reusing agent instructions, scripts, and references, design and media workflows.
How do I install figma-implement-design?
Install or run figma-implement-design using Copy skill directory. Check figma-implement-design for the latest setup command.
Is figma-implement-design actively maintained?
figma-implement-design may need a closer maintenance check before production use.
Auto-fetched from GitHub.
