skills.rest
michelve
michelveCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-design-system-rules

Generate project-specific design system rules for AI coding agents.

1|Updated Mar 16, 2026
Search Tags:#code generation#design system#figma#component library#ai coding#rules engine
One-click install
npx skills add https://github.com/michelve/hugin-cowork --skill create-design-system-rules-michelve
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-system-rules
Source: https://github.com/michelve/hugin-cowork/tree/main/skills/create-design-system-rules
Command: npx skills add https://github.com/michelve/hugin-cowork --skill create-design-system-rules-michelve

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill automates the creation of custom design system rules, ensuring AI coding agents consistently implement Figma designs according to your project's unique conventions and architectural patterns.

Core Features & Use Cases

  • Custom Rule Generation: Creates tailored rules for Figma-to-code workflows based on your codebase.
  • Agent Compatibility: Supports rule generation for various AI coding agents like Claude Code, Codex CLI, Cursor, and GitHub Copilot.
  • Use Case: When starting a new React project, use this skill to generate rules that enforce your team's preferred component structure, styling approach (e.g., Tailwind CSS), and design token usage, ensuring all future Figma implementations adhere to these standards.

Quick Start

Run the create_design_system_rules tool with your project's client languages and frameworks.

Frequently Asked Questions about create-design-system-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate design system rules for AI coding agents from my codebase?▼

You can generate design system rules by running the tool with your project's client languages and frameworks. It analyzes your codebase structure, styling approaches, and component patterns to create tailored instructions for AI coding agents.

Can I use this to create Figma-to-code rules for Cursor and GitHub Copilot?▼

Yes, this Skill supports rule generation for various AI coding agents including Cursor, GitHub Copilot, Claude Code, and Codex CLI, ensuring consistent Figma-to-code implementation across different tools.

Do I need a Figma MCP server connection to generate project-specific design rules?▼

Yes, generating project-specific design rules requires a Figma MCP server connection and access to your project codebase to accurately analyze styling approaches and component patterns.

What is the best way to ensure consistent Tailwind CSS component structure in AI-generated code?▼

The best way to ensure consistent Tailwind CSS component structure is to generate custom design system rules that enforce your team's preferred styling approach and design token usage before AI agents begin Figma implementations.

What limitations should I expect when automating custom rule generation for Figma designs?▼

Limitations include the dependency on a Figma MCP server connection and direct access to the project codebase, meaning rule generation cannot function in isolated environments without codebase access.

Related Skills

Explore More Software Engineering Skills→
figmafigma
1.9k

create-design-system-rules

Generate project-specific design system rules for Figma-to-code implementations.

Official
Intermediate
DevPelumiDevPelumi

figma-create-design-system-rules

Generate design system rule files for Claude Code, Cursor, and Codex CLI.

Community
Intermediate
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
etherplayetherplay
7

tools-conquest

Automate Conquest.eth game interactions for planet, fleet, and territory management.

Official
Advanced