skills.rest
DavidGD616
DavidGD616COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/DavidGD616/Running-app --skill create-design-system-rules-davidgd616
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
FacuMFacuM

create-design-system-rules

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

Community
Advanced
Camilo8902Camilo8902

design-to-component-translator

Translate Figma design specifications into React components with Tailwind CSS and design tokens.

Community
Advanced
calvingitcalvingit
2

figma-create-design-system-rules

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

Community
Advanced
89jobrien89jobrien

figma-create-design-system-rules

Generate project-specific Figma-to-code design system rules from codebase and token analysis.

Community
Advanced