skills.rest
pawan0631
pawan0631COMMUNITY
Explore all skills by this author →
GitHub

figma-create-design-system-rules

Generate project-specific Figma design system rules for component organization, styling, tokens, and assets.

Updated May 25, 2026
Search Tags:#workflow#frontend#figma#mcp#rules#design-system#design-tokens
One-click install
npx skills add https://github.com/pawan0631/AI_OpenAISkill --skill figma-create-design-system-rules-pawan0631
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/pawan0631/AI_OpenAISkill/tree/main/skills/.curated/figma-create-design-system-rules
Command: npx skills add https://github.com/pawan0631/AI_OpenAISkill --skill figma-create-design-system-rules-pawan0631

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Automatically generates project-specific Figma design system rules to standardize how teams implement design data from Figma into code, reducing drift and rework across projects.

Core Features & Use Cases

  • Generates tailored design system rules for component organization, styling conventions, design tokens, and asset handling.
  • Provides templates and workflows to align multi-tool pipelines (e.g., token mapping, component naming, and token sourcing).
  • Use Case: A new project kick-off where teams need consistent Figma-to-code conventions and onboarding of AI agents.

Quick Start

Run the Figma MCP tool to generate project-specific design system rules for 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 standardize Figma design system rules for component organization and tokens?▼

To standardize Figma design system rules, you can automatically generate project-specific conventions for component organization, styling, design tokens, and asset handling to reduce drift across codebases.

What are design tokens and how do they fit into a Figma-to-code workflow?▼

Design tokens are standardized variables for styling properties. In a Figma-to-code workflow, generated rules define token mapping and sourcing to ensure consistent styling implementation across the codebase.

Do I need Figma MCP integration to generate design system rules?▼

Yes, Figma MCP integration is required. The rules generation process runs the Figma MCP tool to query design data and output standardized conventions for your codebase.

Can I use this for standardizing design system onboarding in a new project?▼

Yes, this is designed for new project kick-offs and design-system onboarding. It generates tailored templates and workflows to align multi-tool pipelines and establish consistent Figma-to-code conventions.

What's the best way to align AI agents with Figma component naming conventions?▼

The best way to align AI agents is to generate project-specific design system rules that define component naming and asset handling conventions, standardizing how agents implement Figma design data into code.

Related Skills

Explore More Design & Creative Skills→
89jobrien89jobrien

figma-create-design-system-rules

Generate project-specific Figma-to-code design system rules from codebase and token analysis.

Community
Advanced
figmafigma
1.9k

create-design-system-rules

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

Official
Intermediate
cornmanwtfcornmanwtf

cli-tool-builder

Scaffold CLI tools with command parsing, help messages, and completion structures.

Community
Intermediate
lalaABClalaABC

figma-create-design-system-rules

Generates Markdown-based design system rules for Figma-driven codebases.

Community
Advanced