skills.rest
UlaYuga
UlaYugaCOMMUNITY
Explore all skills by this author →
GitHub

figma-create-design-system-rules

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

Updated May 5, 2026
Search Tags:#code generation#design system#figma#mcp#design tokens#rules#figma-to-code
One-click install
npx skills add https://github.com/UlaYuga/promo-preflight --skill figma-create-design-system-rules-ulayuga
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/UlaYuga/promo-preflight/tree/main/.agents/skills/figma-create-design-system-rules
Command: npx skills add https://github.com/UlaYuga/promo-preflight --skill figma-create-design-system-rules-ulayuga

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI coding agents implementing Figma designs often guess at project conventions, producing inconsistent component structure, hardcoded values, and misplaced files. This Skill captures your codebase's unwritten conventions as explicit rule files so agents follow them automatically on every Figma implementation task. ## Core Features & Use Cases - Codebase Analysis: Inspects component organization, styling approach, design tokens, naming conventions, and architecture decisions before writing rules. - Multi-Agent Rule Output: Saves generated rules to the correct file for Claude Code (CLAUDE.md), Codex CLI (AGENTS.md), or Cursor (.cursor/rules/figma-design-system.mdc with YAML frontmatter). - Figma MCP Workflow Rules: Encodes the required get_design_context, get_screenshot, and asset-handling flow so implementations match designs 1:1. - Use Case: A React + Tailwind team asks the agent to create design system rules; the Skill analyzes src/components and tailwind.config.js, then writes rules enforcing token usage and component reuse for all future Figma tasks. ## Quick Start Ask the agent to create design system rules for your project, specifying your languages and framework so it can analyze the codebase and save the rules file.

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?▼

Run the Figma MCP server's create_design_system_rules tool with your languages and framework, then analyze the codebase for component locations, styling approach, and tokens. Save the generated rules to CLAUDE.md, AGENTS.md, or a Cursor .mdc file depending on your agent.

What are design system rules for AI coding agents?▼

Design system rules are project-level instruction files that tell AI agents which components to reuse, where files belong, and how to handle tokens and styling. They remove repetitive prompting and keep Figma implementations consistent with team conventions.

Which rule file does Claude Code, Codex, or Cursor use?▼

Claude Code reads CLAUDE.md in the project root, Codex CLI reads AGENTS.md with a 32 KiB combined limit, and Cursor uses .cursor/rules/figma-design-system.mdc with YAML frontmatter containing description, globs, and alwaysApply fields.

Does this require the Figma MCP server?▼

Yes, the Figma MCP server must be connected because the workflow starts by calling its create_design_system_rules tool to get the foundational prompt and template. Without the server connection, the required first step cannot run.

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

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

Related Skills

Explore More Design & Creative Skills→
warpdotdevwarpdotdev
64.1k

figma-create-design-system-rules

Generate project-specific design system rules from Figma MCP outputs.

Official
Advanced
therealityreporttherealityreport

figma-frontend-design-engineer

Validate TRR-APP UI implementation against a Figma source of truth.

Community
Intermediate
artosetrovartosetrov

figma-create-design-system-rules

Generate project-specific design system rules from Figma MCP server connections.

Community
Advanced
TyrizxTyrizx

create-instructions

Create .instructions.md files that codify project rules and coding conventions.

Official
Intermediate