Figma Create Design System Rules
This generates custom rule files that tell AI coding agents how to implement your Figma designs according to your team's actual conventions. Instead of getting generic React components, you get code that follows your naming patterns, component architecture, and styling approach. It supports Claude Code (CLAUDE.md), Codex CLI (AGENTS.md), and Cursor (.cursor/rules). The idea is to encode the unwritten knowledge experienced developers have about your codebase so the AI stops making decisions that don't match your standards. Useful if you're doing repeated Figma to code work and tired of manually fixing the same structural issues every time.
- skills.sh installs
- 1.6K
- GitHub stars
- 2.2K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add figma/mcp-server-guide --skill figma-create-design-system-rules --agent claude-codeInstalls into .claude/skills of the current project.
Files
This generates custom rule files that tell AI coding agents how to implement your Figma designs according to your team's actual conventions. Instead of getting generic React components, you get code that follows your naming patterns, component architecture, and styling approach. It supports Claude Code (CLAUDE.md), Codex CLI (AGENTS.md), and Cursor (.cursor/rules). The idea is to encode the unwritten knowledge experienced developers have about your codebase so the AI stops making decisions that don't match your standards. Useful if you're doing repeated Figma to code work and tired of manually fixing the same structural issues every time.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/figma/mcp-server-guide
- Categories
- Backend & APIs, Documentation, AI & Agent Building, Design & UI/UX
- First seen
- Apr 16, 2026
More from figma/mcp-server-guide
All 14- Create Design System Rules1.3K
- Code Connect Components870
- Figma Code Connect Components330
- Figma Use9.8K
- Figma Generate Design6.4K
- Implement Design5.9K
- Figma Generate Library4.7K
- Figma Implement Design4K
- Figma Create New File3.7K
- Figma Code Connect3.6K
- Figma Generate Diagram2.2K
- Figma Use Figjam2.2K
- Figma Use Slides1.9K
Recommended
More Backend & APIs
create-design-system-rulesfigma/mcp-server-guideGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design r1.3Kskills.sh installs
excel-clisbroenne/mcp-server-excelExcel CLI automation skill for Windows workbooks. Use when a coding agent needs token-efficient, scriptable, or unattended Excel automation via excelcli command1Kskills.sh installscode-connect-componentsfigma/mcp-server-guideConnects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to c870skills.sh installs
skill-creatorsupabase/agent-skillsGuide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabil691skills.sh installs
generate-translationspayloadcms/payloadUse when new translation keys are added to packages to generate new translations strings578skills.sh installs