skills.rest
ironkid90-s
ironkid90-sOFFICIAL
Explore all skills by this author →
GitHub

figma-create-design-system-rules

Generates project-specific design system rules for Figma-to-code workflows.

Updated Jun 14, 2026
Search Tags:#code generation#design system#figma#design tokens#mcp server#agent rules#figma-to-code
One-click install
npx skills add https://github.com/ironkid90-s/lucky5-v7 --skill figma-create-design-system-rules-ironkid90-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/ironkid90-s/lucky5-v7/tree/main/.github/skills/figma-create-design-system-rules
Command: npx skills add https://github.com/ironkid90-s/lucky5-v7 --skill figma-create-design-system-rules-ironkid90-s

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? AI coding agents produce inconsistent code when implementing Figma designs because they lack knowledge of your project's component conventions, styling approach, and design token system. This Skill generates custom design system rules that encode those conventions into agent-readable rule files. ## Core Features & Use Cases - Codebase Analysis: Inspects component organization, styling approach, design tokens, and architecture patterns to derive accurate rules. - Multi-Agent Rule Output: Writes rules to CLAUDE.md for Claude Code, AGENTS.md for Codex CLI, or .cursor/rules/figma-design-system.mdc for Cursor. - Figma MCP Integration: Uses the Figma MCP server's create_design_system_rules tool as the foundation and defines the required get_design_context and get_screenshot workflow. - Use Case: A team starting Figma-driven development on a React and Tailwind project runs this Skill once so every subsequent Figma implementation automatically reuses existing components and design tokens. ## Quick Start Ask the agent to create design system rules for your project using the Figma MCP server and save them to your agent's rule file.

Frequently Asked Questions about figma-create-design-system-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create design system rules for my project?▼

Connect the Figma MCP server, then ask the agent to create design system rules. The skill runs the create_design_system_rules tool, analyzes your codebase for components, tokens, and styling patterns, and writes the rules to your agent's rule file.

How to set up Figma MCP rules for Cursor or Claude Code?▼

For Claude Code, rules are saved to CLAUDE.md in the project root. For Cursor, they go to .cursor/rules/figma-design-system.mdc with YAML frontmatter including description, globs, and alwaysApply fields.

Does this skill require the Figma MCP server?▼

Yes, the Figma MCP server must be connected and accessible. The skill calls its create_design_system_rules tool to obtain the foundational prompt and template before generating project-specific rules.

What frameworks and languages are supported for rule generation?▼

The create_design_system_rules tool accepts clientLanguages such as typescript or javascript and clientFrameworks such as react, vue, svelte, or angular. The generated rules are then tailored to the conventions found in your codebase.

Why is the agent not following my design system rules?▼

Rules may be too vague or saved in the wrong configuration file. Make rules specific and actionable, verify the correct rule file location for your agent, restart the agent to reload rules, and prefix critical rules with IMPORTANT.

Related Skills

Explore More Design & Creative Skills→
happycapy-aihappycapy-ai
137

create-design-system-rules

Generate design system rules from codebase analysis and Figma MCP tools.

Community
Advanced
kaone31056789kaone31056789
2

figma

Translate Figma designs into React and Tailwind code via MCP.

Community
Advanced
strongeronstrongeron
18

sb-figma

Synchronize Figma design tokens and components with Storybook.

Community
Advanced
UlaYugaUlaYuga

figma-create-design-system-rules

Generates project-specific design system rules for Figma-to-code workflows.

Community
Intermediate