skills.rest
izo
izoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/izo/Ulk --skill figma-create-design-system-rules-izo
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
DavidGD616DavidGD616

create-design-system-rules

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

Community
Advanced
happycapy-aihappycapy-ai
137

create-design-system-rules

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

Community
Advanced
windyskywindysky

moai-design-tools

Generate React/Tailwind components from Figma and Pencil designs.

Community
Advanced
v1nizxv1nizx

stitch::extract-design-md

Extract color palettes, typography scales, and component styling patterns from frontend source code.

Community
Advanced