skills.rest
DevPelumi
DevPelumiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-create-design-system-rules

Generate design system rule files for Claude Code, Cursor, and Codex CLI.

Updated May 13, 2026
Search Tags:#frontend#figma#design-system#ai-agents#code-conventions#rule-generation#figma-mcp
One-click install
npx skills add https://github.com/DevPelumi/sleeqma --skill figma-create-design-system-rules-devpelumi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/DevPelumi/sleeqma/tree/main/backend/figma-plugin-bundle/skills/figma-create-design-system-rules
Command: npx skills add https://github.com/DevPelumi/sleeqma --skill figma-create-design-system-rules-devpelumi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the tedious manual work of configuring AI coding agents to follow project-specific design system conventions when implementing Figma designs, removing repetitive prompting and inconsistent output across team members.

Core Features & Use Cases

  • Multi-Agent Rule Generation: Creates compatible rule files for Claude Code (CLAUDE.md), Codex CLI (AGENTS.md), and Cursor (.cursor/rules/figma-design-system.mdc).
  • Codebase-Aware Rules: Analyzes your project's existing component structure, styling approach, and design token system to generate tailored, actionable rules.
  • Use Case: A frontend team using Figma for design and Claude Code for implementation can use this Skill to automatically generate rules that ensure all Figma-derived components use the team's existing UI library, Tailwind configuration, and component naming conventions without manual instruction each time.

Quick Start

Use the figma-create-design-system-rules skill to generate custom design system rules for my React project that uses Tailwind CSS and stores UI components in src/components/ui/.

Frequently Asked Questions about figma-create-design-system-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make Claude Code follow my existing Figma design system conventions?▼

To make Claude Code follow Figma design system conventions, you need project-specific agent-readable rule files. This Skill analyzes your codebase to automatically generate tailored rules for component organization, styling, and design token usage.

Can I generate Figma design system rules for both Cursor and Codex CLI?▼

Yes, you can generate Figma design system rules for multiple AI coding agents. This Skill creates compatible rule files for Cursor (.cursor/rules/figma-design-system.mdc) and Codex CLI (AGENTS.md) to ensure consistent design implementation.

What is the best way to stop inconsistent Figma-to-code implementations across my team?▼

The best way to stop inconsistent Figma-to-code implementations is encoding architectural patterns into agent-readable rule files. This eliminates repetitive manual configuration and ensures convention-compliant output across team members using AI agents.

How do I configure AI coding agents to use my project's Tailwind and component structure?▼

You configure AI coding agents by generating codebase-aware rules that analyze your existing Tailwind configuration and component structure. This automatically encodes your specific styling approach and naming conventions into agent instruction files.

Does this Figma design system rule generator require manual prompting for every new component?▼

No, this Figma design system rule generator removes repetitive manual prompting. It encodes your project-specific architectural patterns and Figma MCP integration workflows into permanent rule files for automatic, consistent component generation.

When do I need custom rule files for Figma MCP integration with AI coding agents?▼

You need custom rule files for Figma MCP integration when your software development workflow requires consistent, convention-compliant design implementation. This ensures AI agents properly map Figma designs to your existing UI library and design tokens.

Related Skills

Explore More Software Engineering Skills→
lasswelltlasswellt
1

codebase-map

Analyze a codebase across technology, architecture, quality, and concerns to generate CODEBASE-MAP.md.

Community
Advanced
allofmengallofmeng
12

figma-create-design-system-rules

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

Community
Advanced
raphaelmansraphaelmans

create-design-system-rules

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

Community
Advanced
ncrmroncrmro

deepwork_rules.define

Generate .deepwork/rules/*.md files with YAML frontmatter for file-change triggers.

Community
Advanced