figma-implement-design
Turn Figma designs into production-ready application code that matches your specifications pixel-for-pixel. This skill extracts design context, assets, and visual references from Figma, then translates them into code following your project's conventions and design system. Validates every implementation against the original design to ensure complete visual parity.
figma-implement-design translates Figma designs into production-ready code with pixel-perfect visual accuracy.
AI-generated summary based on this skill's SKILL.md
Install
PracticalSwan/agent-skills/figma-implement-design · repository language: Python
git clone https://github.com/PracticalSwan/agent-skills
cp -r agent-skills/figma-implement-design ~/.claude/skills/figma-implement-designFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does figma-implement-design convert Figma designs to code?
figma-implement-design extracts design context, assets, and visual references directly from your Figma file, then translates them into production-ready application code that matches your specifications pixel-for-pixel. The skill validates every implementation against the original design to ensure complete visual parity and follows your project's conventions and design system throughout the process.
Can figma-implement-design turn Figma into production code?
Yes. figma-implement-design is built to convert Figma designs into production-ready application code with exact visual fidelity. It implements Figma components and frames using your project design system conventions, translates design tokens and layout specifications into working code, and validates the implemented UI against Figma screenshots for pixel-perfect accuracy.
What does figma-implement-design do with design tokens?
figma-implement-design translates Figma design tokens and layout specifications into working code that integrates seamlessly with your application. It respects your project's design system conventions, ensuring that colors, typography, spacing, and other token values are accurately reflected in the generated code.
How does figma-implement-design ensure visual parity?
figma-implement-design validates implemented UI against Figma screenshots to maintain pixel-perfect accuracy. By comparing the generated code output directly against your original design, the skill confirms that every visual element matches your Figma specifications before delivering production-ready code.
Does figma-implement-design support component implementation?
Yes. figma-implement-design implements Figma components and frames using your project design system conventions. It can work with individual components, entire frames, and design system structures, translating them into code that follows your established patterns and standards.
What role does the Figma MCP server play in figma-implement-design?
figma-implement-design integrates the Figma MCP server to retrieve structured design context and assets directly from your Figma files. This integration enables reliable access to design specifications, node IDs, and visual references needed to generate accurate, production-ready code.
SKILL.md
rendered from the published skill — quoted content, verbatim
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.
- Use figma first for general MCP setup, design-context retrieval, screenshots, variables, and asset guidance.
- When the requested Figma operation is not covered by either local skill, inspect the active host's Figma tools and use only the operations actually exposed there.
- Do not refer to optional upstream companion skills as installed unless they are present in the current catalog.
Prerequisites
- Figma
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 7 files
figma-implement-design/CHANGELOG.md
figma-implement-design/LICENSE.txt
figma-implement-design/SKILL.md
figma-implement-design/agents/openai.yaml
figma-implement-design/assets/figma-small.svg
figma-implement-design/assets/figma.png
figma-implement-design/assets/icon.svg