skills.rest
elsolal
elsolalCOMMUNITY
Explore all skills by this author →
GitHub

figma-create-design-system-rules

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

1|Updated Jan 20, 2026
Search Tags:#automation#workflow#design#figma#rules#design-system
One-click install
npx skills add https://github.com/elsolal/Skillz-Claude-Codex-And-More --skill figma-create-design-system-rules-elsolal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/elsolal/Skillz-Claude-Codex-And-More/tree/main/.claude/skills/figma-create-design-system-rules
Command: npx skills add https://github.com/elsolal/Skillz-Claude-Codex-And-More --skill figma-create-design-system-rules-elsolal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This tool helps teams create and enforce project-specific design system rules to ensure consistent Figma-to-code implementations across repositories and agents.

Core Features & Use Cases

  • Automates generation of design-system guidelines tailored to a project's conventions (components, tokens, naming).
  • Provides structured rule templates for integration with Figma MCP workflows and multiple code generation agents.
  • Use Case: A design team wants to standardize component patterns and styling tokens before starting a new React project, ensuring consistent output from AI coding agents.

Quick Start

Start by running the Figma MCP integration to generate a foundational rule template, then customize it to reflect your project conventions.

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 from Figma for AI coding agents?▼

Design system rules from Figma are generated by running a Figma MCP integration to create a foundational rule template, which you then customize to enforce standardized component naming, styling tokens, and layout conventions for AI agents.

What are Figma-to-code design rules and why do I need them?▼

Figma-to-code design rules are project-specific guidelines that enforce token-based styling and component directory conventions. They ensure consistent code implementations across multiple repositories and AI agents during design-to-code workflows.

Can I use these generated design rules with Cursor, CLAUDE.md, or AGENTS.md?▼

Yes, the generated design rules provide structured templates designed for integration with multiple code generation agents, including specific mappings for CLAUDE.md, AGENTS.md, and Cursor rules depending on the agent you use.

What's the best way to standardize Figma component naming and styling tokens?▼

The best way to standardize Figma component naming and styling tokens is to generate a project-specific design system rule template that enforces token-based styling and defines explicit mappings between Figma assets and code assets.

Do I need a Figma MCP integration to create project-specific design guidelines?▼

Yes, a Figma MCP integration is required to start the process, as it generates the foundational rule template which you then customize to reflect your specific project conventions for styling tokens and component directories.

Does this design system rule generation work for multidisciplinary workflows?▼

Yes, the generated design system rules are applicable to multidisciplinary design-to-code workflows across Figma MCP integrations, ensuring standardized component patterns and styling tokens across multiple AI coding agents.

Related Skills

Explore More Design & Creative Skills→
idontcarlidontcarl

figma-implement-design

Convert Figma designs into UI code with design-token integration.

Community
Advanced
phoenicisfphoenicisf

figma-create-design-system-rules

Generate project-specific design system rules for Figma-driven code generation.

Community
Advanced
altrupetsaltrupets

Figma Dev Mode Integration

Extract assets, components, and design tokens from Figma via MCP.

Official
Intermediate
PosteriotPosteriot

design-system

Translate design specifications into structured CSS variables and Tailwind tokens.

Community
Intermediate