create-design-system-rules

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

Updated Mar 13, 2026

Search Tags:#developer tools #code generation #design system #figma #component library #ai coding

Ready to run

npx skills add https://github.com/DavidGD616/Running-app --skill create-design-system-rules-davidgd616

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-design-system-rules
Source: https://github.com/DavidGD616/Running-app/tree/main/.agents/skills/create-design-system-rules
Command: npx skills add https://github.com/DavidGD616/Running-app --skill create-design-system-rules-davidgd616

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 and architectural patterns.

Core Features & Use Cases

Automated Rule Generation: Creates tailored rules for component organization, styling, design tokens, and asset handling.
Figma-to-Code Consistency: Enforces project standards for AI-driven Figma implementations.
Use Case: When starting a new React project with Tailwind CSS, use this Skill to generate rules that ensure all new components are placed in src/components/ui, use Tailwind classes, and reference design tokens from tailwind.config.js.

Quick Start

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

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

Generate design system rules by analyzing your project's languages and frameworks to produce tailored guidelines for component structure, styling, design tokens, and asset handling. This ensures AI coding agents consistently implement Figma designs within your codebase.

Why does my AI coding agent ignore my Figma design tokens when generating React components?▼

AI coding agents ignore Figma design tokens without custom design system rules defining how to reference them. Generate project-specific rules to enforce consistent styling and ensure all new components reference tokens from your configuration files.

Can I use this to create Tailwind CSS component structure rules for a TypeScript project?▼

Yes, you can create Tailwind CSS component structure rules for TypeScript projects. The skill analyzes your specific languages and frameworks to generate tailored guidelines for component organization, ensuring components are placed in correct directories and use appropriate styling.

What's the best way to standardize Figma-to-code component organization for AI code generation?▼

Standardize Figma-to-code organization by generating custom rules that define component structure conventions. These rules integrate with Figma MCP server workflows to ensure AI coding agents consistently implement designs according to your project's specific architectural patterns.

Do I need a Figma MCP server to generate design system rules for my codebase?▼

A Figma MCP server is required for the design implementation workflow. The generated design system rules integrate with Figma MCP server workflows to enforce project standards for AI-driven Figma implementations, ensuring design tokens and asset handling match your conventions.