skills.rest
xleliberty
xlelibertyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-create-design-system-rules

Generate project-specific design system rules for AI coding agents.

Updated Nov 3, 2016
Search Tags:#automation#workflow#figma#mcp#design-system#code-generation
One-click install
npx skills add https://github.com/xleliberty/mydotfiles --skill figma-create-design-system-rules-xleliberty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/xleliberty/mydotfiles/tree/main/.config/.claude/plugins/cache/claude-plugins-official/figma/2.1.3/skills/figma-create-design-system-rules
Command: npx skills add https://github.com/xleliberty/mydotfiles --skill figma-create-design-system-rules-xleliberty

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the manual effort of defining and maintaining project-specific design conventions, ensuring that AI coding agents consistently follow your team's architectural patterns and styling guidelines when implementing Figma designs.

Core Features & Use Cases

  • Standardized Rule Generation: Automatically creates project-level rule files (CLAUDE.md, AGENTS.md, or .cursor/rules) tailored to your specific framework and language.
  • Workflow Enforcement: Codifies the required Figma-to-code workflow, including design context retrieval, asset handling, and visual validation.
  • Use Case: When onboarding a new developer or starting a new feature, use this skill to instantly generate a comprehensive rule set that forces the AI to use your project's specific design tokens, component paths, and naming conventions.

Quick Start

Use the figma-create-design-system-rules skill to generate and save the necessary design system guidelines for this project.

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 AI coding agents translating Figma designs?▼

To generate design system rules for AI coding agents, use this skill to automatically create project-level rule files like CLAUDE.md or .cursor/rules. It analyzes your codebase and Figma MCP server to codify required component patterns and styling guidelines.

Do I need a Figma MCP server to automate Figma-to-code workflow enforcement?▼

Yes, a connected Figma MCP server is required to automate Figma-to-code workflow enforcement. The skill needs it to retrieve design context and analyze structural patterns for generating strict design token usage rules.

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

Figma-to-code design system rules are project-level conventions that force AI agents to use specific component paths and naming conventions. You need them when onboarding new developers or starting features to ensure consistent code generation from Figma designs.

Can I create .cursor/rules or AGENTS.md files tailored to my specific styling framework?▼

Yes, you can create .cursor/rules, AGENTS.md, or CLAUDE.md files tailored to your specific styling framework. The skill generates these standardized rule files based on your project's architectural patterns and design tokens.

How do I stop AI coding agents from ignoring my project's design tokens?▼

To stop AI coding agents from ignoring design tokens, generate project-specific rule files that codify required asset handling and visual validation workflows. This forces strict adherence to your component patterns during Figma-to-code translation.

What are the limitations of automating Figma design system rule generation?▼

The main limitation of automating Figma design system rule generation is the strict dependency on a connected Figma MCP server and direct access to the project codebase for structural analysis. Rule quality depends entirely on the structural context provided.

Related Skills

Explore More Software Engineering Skills→
wiltaylorwiltaylor

figma-code-connect-components

Automate mapping between Figma design components and code components.

Community
Intermediate
allofmengallofmeng
12

figma-create-design-system-rules

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

Community
Advanced
pathtoresiliencebvpathtoresiliencebv

figma-create-design-system-rules

Generate custom design system rules for Figma-to-code workflows via the Figma MCP server.

Community
Advanced
andebet07-ossandebet07-oss

figma-create-design-system-rules

Generates project-specific design system rules for AI coding agents from Figma designs.

Community
Advanced