figma-create-design-system-rules

Generate custom design system rules for Figma projects via the Figma MCP server.

1|12|Updated Feb 23, 2026
One-click install
npx skills add https://github.com/ChatAndBuild/chatchat-skills --skill figma-create-design-system-rules-chatandbuild
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/ChatAndBuild/chatchat-skills/tree/main/skills/figma-create-design-system-rules
Command: npx skills add https://github.com/ChatAndBuild/chatchat-skills --skill figma-create-design-system-rules-chatandbuild

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-mcp, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of design system rules for Figma projects, ensuring consistent code generation and adherence to project-specific conventions.

Core Features & Use Cases

  • Design System Rule Generation: Generates custom design system rules based on the project's codebase and conventions.
  • Figma MCP Integration: Works with the Figma MCP server to translate Figma designs into code.
  • Use Case: Use this Skill to set up design system rules for a new project or to onboarding AI coding agents to an existing project.

Quick Start

Generate design system rules for your project using the 'figma-create-design-system-rules' skill.

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 automate design system rule generation for Figma projects?

Automating design system rule generation for Figma projects requires connecting to the Figma MCP server and accessing the project codebase. This ensures generated rules align with project-specific conventions for consistent code generation.

What are design system rules and when do I need them for AI coding?

Design system rules are project-specific conventions that guide AI coding agents to generate consistent code from Figma designs. You need them when onboarding AI coding agents to a new or existing project to ensure automated translation adheres to your standards.

Does generating Figma design system rules require a connection to the Figma MCP server?

Yes, generating Figma design system rules requires a connection to the Figma MCP server. The Figma MCP server integration is necessary to translate Figma designs into code and analyze the project codebase for convention adherence.

How do I onboard AI coding agents to an existing project's design conventions?

To onboard AI coding agents to an existing project, use automated rule generation to analyze the codebase and create custom design system rules. These rules ensure the AI agent adheres to established project conventions during code generation.

Can I translate Figma designs into code using Figma MCP and project-specific conventions?

Yes, you can translate Figma designs into code by integrating the Figma MCP server with custom design system rules. The rules are generated based on your project codebase, ensuring the translated code adheres to your specific design conventions.

What are the limitations of automating design system rules for Figma projects?

Automating design system rules for Figma projects is limited by its dependency on the Figma MCP server and requires access to the project codebase. Without both connections, it cannot generate rules or translate designs into code.