skills.rest
zniihgnexy
zniihgnexyCOMMUNITY
Explore all skills by this author →
GitHub

figma-create-design-system-rules

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

Updated Apr 1, 2026
Search Tags:#code generation#design system#figma#design tokens#agents.md#MCP server#rules
One-click install
npx skills add https://github.com/zniihgnexy/vid_tokenizer --skill figma-create-design-system-rules-zniihgnexy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/zniihgnexy/vid_tokenizer/tree/main/.ds/codex-home/plugins/cache/openai-curated/figma/314574a046f21938025ae443f9c6dbbd0c2c9b7a/skills/figma-create-design-system-rules
Command: npx skills add https://github.com/zniihgnexy/vid_tokenizer --skill figma-create-design-system-rules-zniihgnexy

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? AI coding agents produce inconsistent code when implementing Figma designs because they lack knowledge of your project's component conventions, styling approach, and design tokens. This Skill generates custom design system rules that encode those conventions into agent-readable rule files. ## Core Features & Use Cases - Codebase Analysis: Inspects component organization, styling frameworks, design tokens, and naming conventions before writing rules. - Multi-Agent Rule Files: Saves generated rules to CLAUDE.md, AGENTS.md, or .cursor/rules/figma-design-system.mdc depending on the agent in use. - Figma MCP Integration: Uses the create_design_system_rules tool from the Figma MCP server to obtain a foundational template. - Use Case: A team starting Figma-driven development on a React + Tailwind project runs this Skill once so every subsequent Figma implementation follows the same component paths, token usage, and asset handling rules. ## Quick Start Ask the agent to create design system rules for your project after connecting the Figma MCP server.

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 design system rules for my project?▼

Connect the Figma MCP server, then ask the agent to create design system rules. The Skill runs the create_design_system_rules tool, analyzes your codebase structure and styling conventions, and saves tailored rules to your agent's rule file.

What rule files does the Figma design system skill support?▼

It supports CLAUDE.md for Claude Code, AGENTS.md for Codex CLI, and .cursor/rules/figma-design-system.mdc for Cursor. The Skill detects which agent you use or asks, then writes rules in the correct format.

Does this skill require the Figma MCP server?▼

Yes, the Figma MCP server must be connected and accessible. The Skill calls its create_design_system_rules tool with your project's languages and frameworks to obtain the foundational prompt and template.

Can I use design system rules with Vue or non-React frameworks?▼

Yes, the Skill accepts a clientFrameworks parameter covering React, Vue, Svelte, Angular, or unknown. Generated rules include framework-specific guidance such as translating Figma MCP React output into Vue 3 Composition API conventions.

Why is the agent not following my design system rules?▼

Rules may be too vague, saved in the wrong file, or not reloaded. Make rules specific and actionable, verify the correct configuration file location, restart the agent or IDE, and prefix critical rules with IMPORTANT.

Related Skills

Explore More Design & Creative Skills→
happycapy-aihappycapy-ai
137

create-design-system-rules

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

Community
Advanced
2good4me2good4me

figma

Translate Figma designs into React and Tailwind code via the Figma MCP server.

Community
Advanced
GuicedEEGuicedEE
5

figma

Translate Figma designs into React components styled with Tailwind.

Official
Advanced
dain-agencydain-agency

write-agent

Create new project-specific agents with standardized structure and deduplication checks.

Official
Intermediate