figma-create-design-system-rules

Generate project-specific Figma MCP design system rules for React and Vue.

Updated Aug 23, 2026

Search Tags:#automation #design-system #design-tokens #figma-mcp #component-conventions #rules-generation

Ready to run

npx skills add https://github.com/izo/Ulk --skill figma-create-design-system-rules-izo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/izo/Ulk/tree/main/community-skills/figma/figma-create-design-system-rules
Command: npx skills add https://github.com/izo/Ulk --skill figma-create-design-system-rules-izo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams establish consistent Figma-to-code conventions by generating project-specific design system rules that codify component patterns, design tokens, and MCP workflows across codebases.

Core Features & Use Cases

Generates design system rules tailored to your project, covering component organization, styling decisions, and token usage.
Maps Figma MCP outputs to project conventions, enabling automated rule application for new designs.
Use Case: When starting a new product, generate rules to standardize tokens, component layouts, and MCP steps to reduce setup time.

Quick Start

Run the generator with your project languages and frameworks to produce a complete Figma MCP ruleset tailored to your codebase.

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 generate design system rules for Figma MCP?▼

You can generate design system rules for Figma MCP by running this skill with your project languages and frameworks. It produces a tailored ruleset covering component organization, token usage, styling guidelines, and MCP workflow steps.

What are Figma MCP component conventions and design tokens?▼

Figma MCP component conventions and design tokens are standardized patterns and variables mapped from Figma to code. This skill codifies them into project-specific rules to ensure consistent Figma-to-code automation across frameworks like React and Vue.

Does this design system rules generator work with Vue and React?▼

Yes, this design system rules generator works with React, Vue, and beyond. It applies project-specific design system rules to map Figma MCP outputs directly to your codebase conventions across multiple frameworks.

Do I need a Figma MCP server to use these generated rules?▼

Yes, a Figma MCP server is required. Satisfying prerequisite connectivity to a Figma MCP server is necessary to apply the generated design system rules, design tokens, and component conventions to your codebase.

When do I need to create design system rules for a new project?▼

You need to create design system rules when starting a new product to standardize tokens, component layouts, and MCP workflow steps. Generating these rules early reduces setup time and establishes consistent Figma-to-code conventions across your codebase.