figma · davila7 — Claude Code skill: Figma designs into code
This skill wires Claude to the Figma MCP server: it pulls node context, a screenshot and assets, then turns the frame into code that matches your project.
npx claude-code-templates@latest --skill creative-design/figmaWhat figma does
The skill sets the order of operations. get_design_context runs first for the exact node, get_metadata follows if the response is too large, then get_screenshot gives a visual reference. Assets are downloaded only once both the context and the screenshot are in hand.
What comes back is React with Tailwind. The skill treats that as a description of design and behavior rather than final style: utility classes give way to your tokens and components, existing buttons, inputs and typography get reused, and routing plus state management stay as they are. When tokens and the mock disagree, the design system wins and spacing is nudged minimally.
The server is link-based. The client never opens the URL itself, it extracts the node ID, so the link has to point at the exact frame or variant you mean. Setup, environment variables and debugging live in references/figma-mcp-config.md; with no MCP server running there is nothing to fetch.
What it helps with
- turn a Figma frame into a project component
- grab a node screenshot for visual comparison
- pull icons and images out of the mock without new packages
- work through an oversized server response via the node map
- check the finished UI against the design
Example prompts for the agent
- build this screen from the Figma frame link
- take the node ID from the link and make a component with our tokens
- compare the finished page against the Figma screenshot
How to install figma
1claude-code-templates
npx claude-code-templates@latest --skill creative-design/figma2Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill figma -a claude-code3Manually: put the files in place
~/.claude/skills/figma/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/figma/
Manually: put the files in place
.agents/skills/figma/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/figma/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates figma2Manually: put the files in place
.github/skills/figma/SKILL.mdPlatform CLI
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/figmaManually: put the files in place
.devin/skills/figma/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about figma
How do I install figma in Claude?
Use the templates CLI: npx claude-code-templates@latest --skill creative-design/figma. Or run npx skills add davila7/claude-code-templates --skill figma -a claude-code. The skill file lands at ~/.claude/skills/figma/SKILL.md.
What does the figma skill do?
It lays out how to fetch node context, a screenshot and assets through the Figma MCP server, then translate them into code that follows your project conventions.
What does the figma skill need to work?
A running Figma MCP server and a link to a specific frame or variant. The client does not browse the URL, it reads the node ID out of it.
Similar skills
Everything for Design →figma by other authors comes first.
