Figma Create Design System Rules
Capture Figma tokens, naming, and lint rules in one project-specific ruleset for design-to-code handoff.
Overview
Figma Create Design System Rules is an agent skill most often used in Build (also Ship review) that generates project-specific Figma-to-code rules capturing tokens, naming, and lint conventions.
Install
npx skills add https://github.com/nexu-io/open-design --skill figma-create-design-system-rulesWhat is this skill?
- Curated from Figma upstream skills / MCP server guide
- Produces project-specific design system rules for Figma-to-code
- Consolidates tokens, naming conventions, and lint rules in one source
- Open Design catalogue entry—install upstream bundle for full assets
Adoption & trust: 791 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Figma handoff drifts because tokens and component names are implicit, so generated code does not match the design system.
Who is it for?
Builders using Figma MCP or agent codegen who need one authoritative rules file before sprinting on components.
Skip if: Pure mockup exploration with no code path, or teams without Figma in the workflow.
When should I use this skill?
User says figma rules, design system rules, figma to code rules, or figma tokens, or invokes figma-create-design-system-rules during planning.
What do I get? / Deliverables
You get a documented rules source agents can apply when implementing or reviewing UI from Figma frames.
- Project-specific design system rules document
- Token, naming, and lint convention reference for agents
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is Build frontend because rules bridge Figma specs to implementation, though teams reuse them during Ship review. Frontend subphase is where token naming, component mapping, and lint expectations land in the repo.
Where it fits
Draft token and component naming rules before the agent implements the first dashboard from Figma.
Compare merged UI against the same rules file during a design QA pass.
How it compares
Design-system documentation skill for Figma pipelines—not a Figma API integration or visual codegen server by itself.
Common Questions / FAQ
Who is figma-create-design-system-rules for?
Solo and indie developers and designers shipping UI from Figma who want consistent token and naming rules for Claude Code, Cursor, or similar agents.
When should I use figma-create-design-system-rules?
Use it in Build when starting a design system or Figma-to-code pass; reuse in Ship review when lint or naming drift appears after implementation.
Is figma-create-design-system-rules safe to install?
Check the Security Audits panel on this page; install rules from the trusted upstream github.com/figma/skills bundle and review files before agent execution.
SKILL.md
READMESKILL.md - Figma Create Design System Rules
# 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: ```bash # 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.