Skills
.Work. You
Rest

create-design-system-rules

Community

Generate design-system rules for your codebase

Design & Creative#frontend#figma#mcp#tokens#rules#design-system
AuthorAsylcreek
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Generates structured, project-specific guidelines to align code implementation with a design system, reducing drift between design and development.

Core Features & Use Cases

  • Automates creation of comprehensive rules for component organization, styling approaches, design tokens, and MCP integration.
  • Produces guidelines mapping design tokens to code conventions and promotes reuse of existing components.
  • Use Case: onboarding a new project requiring a cohesive design system aligned with Figma designs.

Quick Start

Run the Create Design System Rules Tool against your codebase, specifying clientLanguages and clientFrameworks, then review and apply the generated rules to your project.

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/Asylcreek/home-manager/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 223,000+ vetted skills library on demand.