create-design-system-rules

Name: create-design-system-rules
Availability: InStock
Author: Michel

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

Ready to run

npx skills add https://github.com/michelve/hugin-cowork --skill create-design-system-rules-michelve

💬 Prompt for ChatGPT / Claude Chat▼

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.