figma-create-design-system-rules
Generate project-specific design system rules for Figma-to-code wor...
Developer Setup
Setup & Installation
npx skills add https://github.com/figma/mcp-server-guide --skill figma-create-design-system-rulesnpx skills add https://github.com/figma/mcp-server-guide --skill figma-create-design-system-rulesOverview
What This Skill Does
Generate project-specific design system rules for Figma-to-code workflows
Application
When to use this Skill
- Integrating figma create design system rules into your development workflow.
- Following best practices for generate project-specific design system rules for figma-to-code workflows.
- Automating repetitive tasks with AI-assisted tooling.
- Building production-grade applications with proper standards.
- Debugging and troubleshooting common implementation issues.
Documentation
Show Skills.md file
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
Recommendations
Explore other random skills
pptx
Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.
skill-creator
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
slack-gif-creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack.