Localized reading guide
figma-create-design-system-rulesPurpose, usage and source
Generates 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 rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.
Source retrieved:
- Source repository
- openai/skills
- SKILL.md
skills/.curated/figma-create-design-system-rules/SKILL.md- Repository stars
- 28,420
- Repository updated
- 2026-10-29
- Categories
- Design
- Last collected
License: Unspecified
Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.
The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.
What this Skill does
Generates 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 rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.
How the upstream workflow works
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.
Upstream passage · L8 ↗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
Upstream passage · L39 ↗- IMPORTANT: Always use components from `[YOUR_PATH]` when possible
- Place new UI components in `[COMPONENT_DIRECTORY]`
- Follow `[NAMING_CONVENTION]` for component names
- Components must export as `[EXPORT_PATTERN]`Requirements and setup
Prerequisites
Figma MCP server must be connected and accessible Access to the project codebase for analysis
Upstream passage · L33 ↗Limits and quality checks
Use IMPORTANT for Critical Rules
Prefix rules that must never be violated with "IMPORTANT:" to ensure the agent prioritizes them.
Upstream passage · L452 ↗Start with a safe trial
- Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
- Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
- Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
- Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.
Read further in the source
- Overview
- What Are Design System Rules?
- Prerequisites
- When to Use This Skill
- Required Workflow
- Step 1: Run the Create Design System Rules Tool
- Step 2: Analyze the Codebase
- Step 3: Generate Project-Specific Rules
- Step 4: Save Rules to the Appropriate Rule File
- Step 5: Validate and Iterate
- Essential Rules (Always Include)
- Recommended Rules (Highly Valuable)
- Optional Rules (Project-Specific)
- Example 1: React + Tailwind Project
- Example 2: Vue + Custom CSS Project
- Example 3: Design System Team
- Start Simple, Iterate
- Be Specific
- Make Rules Actionable
- Use IMPORTANT for Critical Rules
- Document the Why
- Issue: The agent isn't following the rules
- Issue: Rules conflict with each other
- Issue: Too many rules increase latency
- Issue: Rules become outdated as project evolves
- Understanding Design System Rules
- Additional Resources
Related Skills
Translation and scope
This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.
This introduction refers to the pinned version below; current repository activity and collection time are shown separately.
- Pinned source
- Read the original ↗
- Source retrieved
- Source commit
49f948faa9258a0c61caceaf225e179651397431- Source SHA-256
1f4d7e16ba5325a80da32e2e6bde0ea850ba9287f35f4675d51d55d2f0dc6e2a