figma-to-code
Generate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. **CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design.** Never attempt manual implementation without invoking this skill first.
pinned to #ccb4c17updated last month
Ask your AI client: “install skills/figma-to-code”.
Requires the metahub MCP server installed in your client. Set up MCP.
mh install skills/figma-to-codemetahub onboarded this repo on the author's behalf.
If you own github.com/scoobynko/claude-code-design-skills on GitHub, claim the listing to take over publishing. Your claim preserves the existing eval history and badges; only the curator label is replaced with verified-publisher on your next publish.
Stars
37
Last commit
last month
Latest release
published
- #claude-code
- #claude-skill
- #claude-skills
- #design
- #figma
- #product
Evaluation report
WarningsAutomated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.ccb4c17· last month
Kind-specific
31Skill: SKILL.md present
found at figma-to-code/SKILL.md · frontmatter source: SKILL.md
Skill: body content present
1,689 words · 12,044 chars · 38 sections · 15 code blocks
Skill: triggers declaredwarn
No `trigger` phrases in SKILL.md frontmatter
Add `trigger:` lines so Claude knows when to activate this skill — e.g. `when building MCP servers` or `for diagram creation`.
Skill: allowed-tools scope
no allowed-tools restriction (Claude may use anything)
Release history
1- releasecurrentccb4c17warnlast month
Contents
Claude Code Design Skills
A collection of Claude Code skills for streamlining design-to-code workflows.
About
This repository contains custom skills for Claude Code that help automate and improve the process of converting designs into production-ready code.
Available Skills
Figma to Code
Generate production-ready React/Next.js code from Figma designs with systematic workflows, component reuse strategies, and variant mapping.
Features:
- Systematic Figma MCP tool usage workflow
- Component reuse prioritization
- Automatic Figma variant to code prop mapping
- Frontend/backend boundary enforcement
- TypeScript type safety
- Accessibility support
- Mock data patterns
Installation
Prerequisites
- Claude Code CLI installed
- For Figma to Code skill: Figma MCP Server installed
Install Skills
For Claude Code CLI:
-
Clone this repository:
git clone https://github.com/scoobynko/claude-code-design-skills.git -
Copy skills to your Claude Code skills directory:
# macOS/Linux cp -r claude-code-design-skills/figma-to-code ~/.claude-code/skills/ # Windows xcopy claude-code-design-skills\figma-to-code %USERPROFILE%\.claude-code\skills\figma-to-code\ /E /I -
Configure the skill according to its documentation
-
Restart Claude Code
For Claude Desktop:
-
Download or clone this repository
-
Configure according to its documentation
-
Create a .zip file of the configured
figma-to-codefolder -
Open Claude Desktop app → Settings → Capabilities → Skills → Upload skill
-
Select your
figma-to-code.zipfile and the skill will be validated and activated
Usage
Each skill includes detailed documentation in its respective directory. Skills are automatically available in Claude Code once installed and can be invoked when relevant to your task.
Configuration
Each skill requires customization for your specific project. Check the individual skill's README for required configuration placeholders.
Contributing
Contributions are welcome! If you'd like to add new skills or improve existing ones:
- Fork this repository
- Create a feature branch
- Make your changes (for creating new skills, see Claude Skills documentation)
- Submit a pull request
When creating a new skill, ensure it's generalized with placeholders so others can easily customize it for their projects.
License
MIT License - See LICENSE file for details
Author
Created by @scoobynko
Support
For issues or questions:
- Open an issue in this repository
- Check Claude Code documentation
- For Figma-specific issues, see Figma MCP documentation
Reviews
No reviews yet. Be the first.
Related
Frontend Slides
Create beautiful slides on the web using Claude's frontend skills
Planning With Files
Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B acquisition.
Guizang Ppt Skill
AI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.
mh install skills/figma-to-code