Figma Create Design System Rules
- 1.8k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
A skill that generates Figma-specific design system rules, tokens, and naming conventions to automate design-to-code workflows.
About
This skill generates project-specific design system rules for Figma workflows, capturing design tokens, naming conventions, and linting rules in a single source. Developers use it during frontend build phases to establish a bridge between Figma designs and code output, ensuring design consistency across projects. The skill integrates with Figma's MCP server to automate rule generation, reducing manual token definition and supporting automated code generation from design files.
- Generates project-specific design system rules from Figma
- Captures design tokens, naming conventions, and lint rules
- Supports Figma-to-code workflows and automation
- Integrates with Figma's MCP server guide
- Centralizes design system rules as single source of truth
Figma Create Design System Rules by the numbers
- 1,765 all-time installs (skills.sh)
- +124 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #166 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
figma-create-design-system-rules capabilities & compatibility
- Capabilities
- generate design tokens from figma · create naming convention rules · define linting rules for design system · automate figma to code rule generation
- Works with
- figma
- Use cases
- ui design · web design
- Platforms
- macOS · Windows · Linux
- Runs
- Remote server
What figma-create-design-system-rules says it does
Generate project-specific design system rules for Figma-to-code workflows.
Useful for capturing tokens, naming, and lint rules in one source.
Curated from Figma's MCP server guide.
npx skills add https://github.com/nexu-io/open-design --skill figma-create-design-system-rulesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Generate design system rules and tokens for Figma-to-code workflows to enforce consistency.
Who is it for?
Teams using Figma-to-code pipelines, design system maintenance, token standardization.
Skip if: Non-Figma design tools, designers without code generation workflows.
When should I use this skill?
Setting up Figma tokens, defining design system rules, automating design-to-code handoff.
What you get
Project-specific design system rules generated automatically from Figma for consistent code generation.
- Design system rules file
- Token definitions
- Linting rules
Files
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/skillsThen 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
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick figma-create-design-system-rules over manual style guides when you need machine-readable Figma-to-code rules that capture tokens and lint standards together.
FAQ
What are design system rules in this context?
Project-specific rules that capture design tokens, naming conventions, and linting rules to bridge Figma designs and code output.
Does this require Figma plugin installation?
The skill uses Figma's MCP server guide; install the upstream bundle from https://github.com/figma/skills.
Is Figma Create Design System Rules safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.