Claude MarketplacesSubmit
figma avatar

Create Design System Rules

figma/mcp-server-guideOfficial

This generates project-specific rules that teach AI agents how your codebase handles Figma designs. It analyzes your existing patterns for components, styling, and tokens, then writes them down as CLAUDE.md, AGENTS.md, or Cursor rules files. The workflow is opinionated: connect to Figma MCP, scan your code to discover conventions, then generate rules that enforce those conventions automatically. Think of it as capturing the unwritten knowledge your senior devs would normally explain to new team members, except now your AI agent gets that context upfront. It's most useful if you already have Figma-to-code patterns worth codifying. If you're still figuring out your design system, you're probably too early for this.

skills.sh installs
1.3K
GitHub stars
2.2K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add figma/mcp-server-guide --skill create-design-system-rules --agent claude-code

Installs into .claude/skills of the current project.

Files

This generates project-specific rules that teach AI agents how your codebase handles Figma designs. It analyzes your existing patterns for components, styling, and tokens, then writes them down as CLAUDE.md, AGENTS.md, or Cursor rules files. The workflow is opinionated: connect to Figma MCP, scan your code to discover conventions, then generate rules that enforce those conventions automatically. Think of it as capturing the unwritten knowledge your senior devs would normally explain to new team members, except now your AI agent gets that context upfront. It's most useful if you already have Figma-to-code patterns worth codifying. If you're still figuring out your design system, you're probably too early for this.

Browse the repository on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/figma/mcp-server-guide
Categories
Backend & APIs, Documentation, AI & Agent Building, Design & UI/UX

More from figma/mcp-server-guide

All 14

Recommended

More Backend & APIs
1api avataragent-memoryapi/gitagent memory1.1Kskills.sh installs
2sbroenne avatarexcel-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 installs
3figma avatarcode-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
4supabase avatarskill-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
5payloadcms avatargenerate-translationspayloadcms/payloadUse when new translation keys are added to packages to generate new translations strings578skills.sh installs
6figma avatarfigma-code-connect-componentsfigma/mcp-server-guideConnects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map 330skills.sh installs