skills.rest
Luohao-Yan
Luohao-YanCOMMUNITY
Explore all skills by this author →
GitHub

figma-create-design-system-rules

Generate custom design system rules for Figma-to-code workflows.

6|Updated May 10, 2026
Search Tags:#code generation#design system#figma#design rules#figma mcp
One-click install
npx skills add https://github.com/Luohao-Yan/warp-cn --skill figma-create-design-system-rules-luohao-yan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/Luohao-Yan/warp-cn/tree/main/resources/bundled/mcp_skills/figma/figma-create-design-system-rules
Command: npx skills add https://github.com/Luohao-Yan/warp-cn --skill figma-create-design-system-rules-luohao-yan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of maintaining consistency across Figma-to-code workflows by generating custom design system rules for project-specific conventions and guidelines.

Core Features & Use Cases

  • Generate Design System Rules: Create project-specific rules for component organization, styling, and Figma MCP integration.
  • Support for Multiple Agents: Works with Claude Code, Codex CLI, and Cursor agents.
  • Use Case: For a React project, use this Skill to define component naming conventions, styling approaches, and Figma-to-code implementation flows.

Quick Start

Run the 'create_design_system_rules' tool and follow the steps to analyze your codebase and generate rules for your project.

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 create custom design system rules for Figma-to-code workflows?▼

This Skill generates custom design system rules for Figma-to-code workflows by analyzing your project codebase to create project-specific conventions and guidelines for component organization and styling.

Does the generated Figma design system rules work with Cursor agents?▼

Yes, the generated Figma design system rules work with Cursor agents, as well as Claude Code and Codex CLI, ensuring consistent Figma-to-code implementation across multiple agent platforms.

Do I need a Figma MCP server connection to generate design system rules?▼

Yes, a Figma MCP server connection is required to generate design system rules, ensuring the created guidelines properly integrate Figma MCP data with your project-specific codebase conventions.

What is the best way to maintain consistency across Figma-to-code workflows?▼

The best way to maintain consistency across Figma-to-code workflows is generating custom design system rules that define component naming conventions, styling approaches, and implementation flows for your project.

How to generate React component naming conventions from a project codebase?▼

You can generate React component naming conventions from a project codebase by running the rule creation tool, which analyzes your existing code to produce project-specific design system guidelines.

Related Skills

Explore More Software Engineering Skills→
happycapy-aihappycapy-ai
137

create-design-system-rules

Generate design system rules from codebase analysis and Figma MCP tools.

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
xlelibertyxleliberty

figma-create-design-system-rules

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

Community
Intermediate