Create Design System Rules
Generate project-specific design-system rules so agents implement Figma designs with your team’s component paths, tokens, and naming conventions.
Overview
create-design-system-rules is an agent skill most often used in Build (also Validate scope) that generates tailored design-system rule files for Figma-to-code workflows via the Figma MCP server.
Install
npx skills add https://github.com/figma/mcp-server-guide --skill create-design-system-rulesWhat is this skill?
- Tailored rules for layout primitives, component location, naming, and anti-hardcoding patterns
- Agent-specific outputs: CLAUDE.md, AGENTS.md, and .cursor/rules/figma-design-system.mdc
- Encodes design tokens, styling, and architectural patterns for Figma MCP workflows
- Requires an active Figma MCP server connection
- Reduces inconsistent codegen when agents translate designs to code
- Emits rules for 3 agent targets: CLAUDE.md, AGENTS.md, and .cursor/rules/figma-design-system.mdc
Adoption & trust: 1.3k installs on skills.sh; 1.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Agents implementing Figma screens invent their own folder structure, tokens, and components because your design system knowledge lives only in people’s heads.
Who is it for?
Solo builders or tiny teams standardizing Figma MCP handoffs across Claude Code, Codex, or Cursor before scaling UI work.
Skip if: Projects with no Figma MCP connection, one-off pages with no repeating components, or teams that only need a static style guide PDF with no agent enforcement.
When should I use this skill?
User says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants Figma-to-code project conventions (Figma MCP required).
What do I get? / Deliverables
You get agent-readable rules in CLAUDE.md, AGENTS.md, or Cursor figma-design-system rules so codegen consistently follows your project’s design conventions.
- CLAUDE.md or AGENTS.md design system section
- .cursor/rules/figma-design-system.mdc
- Project-specific convention checklist encoded as agent rules
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Rules are created while setting up the product UI stack and Figma-to-code workflow, before or during implementation. Frontend conventions (layout primitives, styling, component structure) are the core output, even though rules also land in agent config files.
Where it fits
Lock UI conventions in rules before committing to a multi-screen Figma implementation.
Generate figma-design-system.mdc so Cursor agents stop inventing duplicate button components.
Align CLAUDE.md and AGENTS.md with the same layout and token rules for mixed-agent repos.
Point reviewers at written rules when judging whether agent PRs match the design system.
How it compares
Use this to codify enforceable agent rules—not as a substitute for Figma’s design library or a full component Storybook audit.
Common Questions / FAQ
Who is create-design-system-rules for?
Indie and solo developers shipping UI from Figma who want Claude, Codex, or Cursor to follow the same component and token conventions every time.
When should I use create-design-system-rules?
At the start of a Figma-to-code pipeline in Build/frontend, when validating scope before a big UI push, or when onboarding a new agent stack to an existing design system.
Is create-design-system-rules safe to install?
It writes project rule files and depends on Figma MCP access; review the Security Audits panel on this page and confirm you are comfortable with design-context exposure before connecting.
SKILL.md
READMESKILL.md - Create Design System Rules
# Create Design System Rules ## Overview This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are followed automatically. ### Supported Rule Files | Agent | Rule File | |-------|-----------| | Claude Code | `CLAUDE.md` | | Codex CLI | `AGENTS.md` | | Cursor | `.cursor/rules/figma-design-system.mdc` | ## What Are Design System Rules? Design system rules are project-level instructions that encode the "unwritten knowledge" of your codebase - the kind of expertise that experienced developers know and would pass on to new team members: - Which layout primitives and components to use - Where component files should be located - How components should be named and structured - What should never be hardcoded - How to handle design tokens and styling - Project-specific architectural patterns Once defined, these rules dramatically reduce repetitive prompting and ensure consistent output across all Figma implementation tasks. ## Prerequisites - Figma MCP server must be connected and accessible - Before proceeding, verify the Figma MCP server is connected by checking if Figma MCP tools (e.g., `create_design_system_rules`) are available. - If the tools are not available, the Figma MCP server may not be enabled. Guide the user to enable the Figma MCP server that is included with the plugin. They may need to restart their MCP client afterward. - Access to the project codebase for analysis - Understanding of your team's component conventions (or willingness to establish them) ## When to Use This Skill Use this skill when: - Starting a new project that will use Figma designs - Onboarding an AI coding agent to an existing project with established patterns - Standardizing Figma-to-code workflows across your team - Updating or refining existing design system conventions - Users explicitly request: "create design system rules", "set up Figma guidelines", "customize rules for my project" ## Required Workflow **Follow these steps in order. Do not skip steps.** ### Step 1: Run the Create Design System Rules Tool Call the Figma MCP server's `create_design_system_rules` tool to get the foundational prompt and template. **Parameters:** - `clientLanguages`: Comma-separated list of languages used in the project (e.g., "typescript,javascript", "python", "javascript") - `clientFrameworks`: Framework being used (e.g., "react", "vue", "svelte", "angular", "unknown") This tool returns guidance and a template for creating design system rules. Structure your design system rules following the template format provided in the tool's response. ### Step 2: Analyze the Codebase Before finalizing rules, analyze the project to understand existing patterns: **Component Organization:** - Where are UI components located? (e.g., `src/components/`, `app/ui/`, `lib/components/`) - Is there a dedicated design system directory? - How are components organized? (by feature, by type, flat structure) **Styling Approach:** - What CSS framework or approach is used? (Tailwind, CSS Modules, styled-components, etc.) - Where are design tokens defined? (CSS variables, theme files, config files) - Are there existing color, typography, or spacing tokens? **Component Patterns:** - What naming conventions are used? (PascalCase, kebab-case, prefixes) - How are component props typically structured? - Are there common composit