skills.rest
FacuM
FacuMCOMMUNITY
Explore all skills by this author →
GitHub

create-design-system-rules

Generate design system rules for AI coding agents from Figma designs.

1|Updated Feb 24, 2026
Search Tags:#code generation#design system#figma#ai agent#component library#rules engine
One-click install
npx skills add https://github.com/FacuM/yolo-agent --skill create-design-system-rules-facum
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-system-rules
Source: https://github.com/FacuM/yolo-agent/tree/main/.claude/skills/create-design-system-rules
Command: npx skills add https://github.com/FacuM/yolo-agent --skill create-design-system-rules-facum

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 specific conventions, component patterns, and architectural decisions.

Core Features & Use Cases

  • Tailored Rule Generation: Creates project-specific rules for AI agents based on codebase analysis and Figma MCP server output.
  • Consistency Enforcement: Standardizes how AI agents handle component usage, styling, design tokens, and asset management.
  • Use Case: When starting a new React project, use this Skill to generate rules that ensure all new UI components are placed in src/components/ui, Tailwind CSS is used for styling, and Figma colors are mapped to your project's design tokens.

Quick Start

Use the create-design-system-rules skill to generate rules for a React project using TypeScript.

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 Figma?▼

To generate design system rules, this Skill analyzes your existing project patterns and outputs tailored instructions for AI coding agents to ensure consistent Figma design implementation. It requires a Figma MCP server connection to analyze codebase conventions.

Why does my AI agent inconsistently implement Figma designs in my codebase?▼

AI agents implement Figma designs inconsistently when they lack project-specific rules for component organization, styling, and design token usage. Generating custom design system rules standardizes how the AI handles your specific architectural decisions and UI conventions.

What do I need to connect Figma to my codebase for design token mapping?▼

You need a Figma MCP server connection to map Figma colors to your project's design tokens. The Skill analyzes your project languages and frameworks to generate instructions ensuring AI agents apply styling and tokens correctly.

Can I use this to enforce React component organization and Tailwind CSS styling rules?▼

Yes, you can generate rules that enforce React component organization, such as placing UI components in specific directories, and standardize Tailwind CSS styling. It analyzes your project to produce tailored instructions for consistent implementation.

What's the best way to standardize asset handling and component library usage for AI agents?▼

The best way to standardize asset handling and component library usage is to generate custom design system rules. By analyzing your project's existing patterns, it creates tailored instructions that enforce consistent architectural decisions across AI-generated code.

Related Skills

Explore More Design & Creative Skills→
figmafigma
1.9k

create-design-system-rules

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

Official
Intermediate
DavidGD616DavidGD616

create-design-system-rules

Generate design system rules for AI coding agents from Figma designs.

Community
Advanced
sandeshbagmaresandeshbagmare

design-system-patterns

Generate design tokens and implement theme switchers for web and mobile UIs.

Community
Advanced
vuralserhat86vuralserhat86
43

form_builder

Build accessible React forms with React Hook Form and Zod validation.

Community
Advanced