Skills
.Work. You
Rest

create-design-system-rules

Official

Define design system rules for Figma builds.

Design & Creative#automation#codebase#design-system#design-tokens#design-rules#Figma MCP
Authorfigma
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill helps teams establish consistent design-system conventions by generating tailored rules that guide Figma-to-code implementations and reduce drift across projects.

Core Features & Use Cases

  • Generates project-specific design system rules from your codebase analysis to codify team conventions.
  • Encapsulates component organization, styling approaches, token usage, and Figma integration patterns to streamline design-to-code workflows.
  • Use Case: Starting a new project or onboarding Claude to an existing repository to ensure standardized design-system rules across platforms and teams.

Quick Start

  1. Provide project details such as target languages/frameworks and the MCP server connection status.
  2. Connect to the Figma MCP server and verify access.
  3. Run the tool to generate a CLAUDE.md-ready rule set and save it to CLAUDE.md at the project root.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: create-design-system-rules
Download link: https://github.com/figma/mcp-server-guide/archive/main.zip#create-design-system-rules

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.