figma-create-design-system-rules

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

30|4|Updated May 3, 2026
One-click install
npx skills add https://github.com/OniroHuaver/openwarp --skill figma-create-design-system-rules-onirohuaver
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/OniroHuaver/openwarp/tree/main/resources/bundled/mcp_skills/figma/figma-create-design-system-rules
Command: npx skills add https://github.com/OniroHuaver/openwarp --skill figma-create-design-system-rules-onirohuaver

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of custom design system rules for Figma-to-code workflows, ensuring consistency and efficiency in implementing Figma designs.

Core Features & Use Cases

  • Custom Rule Generation: Generates project-specific design system rules.
  • Figma MCP Integration: Integrates with the Figma MCP server for seamless implementation.
  • Use Case: For a team starting a new project with Figma designs, this Skill can establish and enforce design system conventions.

Quick Start

Run the 'create_design_system_rules' tool to generate design system 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 automate design system rule generation for Figma-to-code workflows?

You can automate design system rule generation by running the 'create_design_system_rules' tool, which connects to a Figma MCP server and your project codebase to establish custom conventions. It requires connection to a Figma MCP server and access to the project codebase to generate project-specific rules.

What are design system rules and when do I need them for Figma projects?

Design system rules are project-specific conventions that ensure consistency and efficiency when translating Figma designs into code. You need them when starting a new project with Figma designs to establish and enforce design system conventions across your codebase.

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

Yes, a connection to a Figma MCP server is required. The Skill utilizes this connection alongside access to your project codebase to automate the generation and implementation of custom design system rules for your workflows.

Can I use Claude Code, Codex CLI, and Cursor agents for Figma design implementation?

Yes, the Skill utilizes Claude Code, Codex CLI, and Cursor agents for rule implementation. It integrates these tools with the Figma MCP server to automate the generation and enforcement of design system rules in your codebase.

What's the best way to enforce design system conventions from Figma in my codebase?

The best way to enforce conventions is to automate custom rule generation using a Figma MCP server connection. This ensures consistency and efficiency in implementing Figma designs by generating project-specific rules directly within your codebase.

Does Figma MCP integration support automated rule generation for existing codebases?

Yes, Figma MCP integration supports automated rule generation for existing codebases. The Skill requires access to your project codebase to generate and implement custom design system rules tailored to your specific Figma-to-code workflows.