skills.rest
Himanshu040604
Himanshu040604COMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-design-system-rules

Generate custom design system rules for AI coding agents.

Updated Mar 5, 2026
Search Tags:#code generation#design system#figma#frontend development#ai coding#rules engine
One-click install
npx skills add https://github.com/Himanshu040604/codex-skills-setup --skill create-design-system-rules-himanshu040604
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-system-rules
Source: https://github.com/Himanshu040604/codex-skills-setup/tree/main/assets/codex/skills/claude-import/skills/plugins/figma%40claude-plugins-official/skills/create-design-system-rules
Command: npx skills add https://github.com/Himanshu040604/codex-skills-setup --skill create-design-system-rules-himanshu040604

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

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

Core Features & Use Cases

  • Tailored Rule Generation: Creates rules based on your project's languages, frameworks, and existing codebase structure.
  • Figma-to-Code Consistency: Enforces project-specific styling, component usage, and asset handling for Figma-driven development.
  • Use Case: When starting a new React project, use this Skill to generate rules that dictate component placement in src/components/ui/, enforce Tailwind CSS usage, and specify how design tokens should be applied, ensuring all future Figma implementations adhere to these standards.

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

This skill generates custom design system rules by analyzing your project's languages, frameworks, and codebase structure to produce tailored instructions for component organization, styling, and Figma MCP integration. It ensures AI coding agents consistently implement Figma designs according to your conventions.

What are design system rules and why do I need them for frontend development?▼

Design system rules are project-specific instructions dictating component placement, styling, and asset handling. You need them to enforce consistent Figma-to-code implementation and maintain architectural patterns when using AI coding agents for frontend development.

Can I use this to create rules for a React project using TypeScript and Tailwind CSS?▼

Yes, you can generate rules for a React project using TypeScript. The skill creates tailored instructions dictating component placement in directories like src/components/ui/ and enforcing Tailwind CSS usage so all Figma implementations adhere to your project standards.

Where are the generated design system rules saved in my codebase?▼

Generated design system rules are saved to agent-specific files in your codebase. The skill outputs instructions to files like CLAUDE.md, AGENTS.md, or .cursor/rules/figma-design-system.mdc, ensuring your AI coding agent reads and applies them correctly.

Does this skill support Figma MCP integration for AI coding workflows?▼

Yes, the skill supports Figma MCP integration by generating rules that specify how design tokens are applied and how assets are handled. This ensures seamless Figma-driven development within your AI coding workflow and consistent design implementation.

Related Skills

Explore More Design & Creative Skills→
FacuMFacuM

create-design-system-rules

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

Community
Advanced
figmafigma
1.9k

create-design-system-rules

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

Official
Intermediate
Moliboy5000Moliboy5000

figma

Generates Tailwind-CSS-based React components from Figma designs and user stories.

Community
Intermediate
phoenicisfphoenicisf

figma-create-design-system-rules

Generate project-specific design system rules for Figma-driven code generation.

Community
Advanced