figma-create-design-system-rules
nexu-io/open-design
Generate project-specific design system rules for Figma-to-code workflows.
What is figma-create-design-system-rules?
Creates design system rules that capture tokens, naming conventions, and lint rules for Figma-to-code workflows. Use this when you need to establish consistent design system governance across your project.
- Generate project-specific design system rules
- Capture design tokens in a structured format
- Define naming conventions for design elements
- Establish lint rules for design consistency
- Support Figma-to-code automation workflows
How to install figma-create-design-system-rules
npx skills add https://github.com/nexu-io/open-design --skill figma-create-design-system-rules- Access to Figma workspace
- Figma MCP server or upstream bundle installed
How to use figma-create-design-system-rules
- 1.Install the upstream bundle from https://github.com/figma/skills
- 2.Invoke the skill by name (figma-create-design-system-rules) or use trigger phrases like 'figma rules' or 'design system rules'
- 3.Provide your project context and design system requirements
- 4.Review and customize the generated rules for your project
- 5.Apply the rules to your Figma-to-code workflow
Use cases
- Setting up design system governance for a new project
- Documenting token standards before code generation
- Creating lint rules to enforce design consistency across teams
- Establishing naming conventions for Figma components and variables
- Preparing design systems for automated code generation
- Design system managers
- Product designers working with code generation
- Frontend developers implementing design systems
- Design ops professionals
- Teams using Figma-to-code workflows
figma-create-design-system-rules FAQ
This skill is curated from Figma's official MCP server guide at https://github.com/figma/skills.
Yes, the rules are project-specific and generated based on your input, so you can review and customize them for your needs.
The skill generates rules suitable for Figma-to-code workflows, capturing tokens, naming conventions, and lint rules in a structured format.
You need access to your Figma workspace and the Figma MCP server or upstream bundle installed in your agent's skills directory.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: figma-create-design-system-rules description: | Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source. triggers:
- "figma rules"
- "design system rules"
- "figma to code rules"
- "figma tokens" od: mode: design-system category: figma upstream: "https://github.com/figma/skills"
figma-create-design-system-rules
Curated from Figma's MCP server guide.
What it does
Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.
Source
- Upstream: https://github.com/figma/skills
- Category:
figma
How to use
This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:
# Inspect the upstream README for exact paths
open https://github.com/figma/skills
Then ask the agent to invoke this skill by name (figma-create-design-system-rules) or with
one of the trigger phrases listed in this skill's frontmatter.
Related skills
More from nexu-io/open-design and the wider catalog.
figma-create-new-file
Create a new blank Figma Design or FigJam file for design workflows.
figma-generate-design
Build or update Figma screens from code or descriptions using design system components.
figma-generate-library
Build and sync professional design system libraries in Figma from your codebase.
figma-implement-design
Translate Figma designs into production-ready code with 1:1 visual fidelity.
figma-use
Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work.
flutter-animating-apps
Implement animated effects, transitions, and motion in Flutter apps for native iOS/Android.