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?
This skill generates design system rules tailored to your project, capturing tokens, naming conventions, and lint rules in a single source. Use it when you need to establish consistent design-to-code standards for Figma workflows.
- Generate project-specific design system rules
- Capture design tokens for code generation
- Define naming conventions for design elements
- Create lint rules for design system compliance
- Establish Figma-to-code workflow standards
How to install figma-create-design-system-rules
npx skills add https://github.com/nexu-io/open-design --skill figma-create-design-system-rulesHow to use figma-create-design-system-rules
- 1.Invoke the skill by name (figma-create-design-system-rules) or use trigger phrases like 'figma rules' or 'design system rules'
- 2.Provide project-specific context such as your design tokens, naming conventions, and code generation requirements
- 3.Review the generated design system rules
- 4.Apply the rules to your Figma workspace and code generation pipeline
Use cases
- Setting up design tokens for a new project's Figma-to-code pipeline
- Documenting naming conventions across design and engineering teams
- Creating lint rules to enforce design system consistency
- Generating rules that bridge Figma designs and code output
- Establishing standards for multi-team design system adoption
- Design system managers
- Frontend developers working with Figma
- Design engineers
- Teams implementing Figma-to-code workflows
figma-create-design-system-rules FAQ
This skill is curated from Figma's official MCP server guide and upstream repository at https://github.com/figma/skills.
Yes, the skill generates project-specific rules based on the context and requirements you provide.
The skill generates rules suitable for Figma-to-code workflows, capturing tokens, naming conventions, and lint rules in a unified format.
No prerequisites are required beyond the skill installation. Refer to the upstream repository README for detailed implementation guidance.
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 Open Design 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 and tokens.
figma-generate-library
Build or update a professional-grade design system library in Figma from a 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.