Figma Create Design System Rules

This generates a single source of truth for your Figma design tokens, component naming conventions, and linting rules when you're automating Figma-to-code workflows. It's curated from Figma's official MCP server guide, so it follows their recommended patterns. Use it when you need to document how your design system maps to code, like "buttons use semantic tokens" or "spacing follows 8px grid" or "icons must be outlined strokes." The skill outputs structured rules that both designers and developers can reference. It won't write your design system for you, but it gives you a standard format to capture the decisions you've already made so your toolchain can enforce them consistently.

skills.sh installs: 2.9K
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill figma-create-design-system-rules --agent claude-code

Installs into .claude/skills of the current project.

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 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.

SKILL.md on GitHub