skills.rest
allofmeng
allofmengCOMMUNITY
Explore all skills by this author →
GitHub

figma-create-design-system-rules

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

12|7|Updated Sep 15, 2025
Search Tags:#frontend#figma#mcp#rules#design-system#code-generation#design-guidelines
One-click install
npx skills add https://github.com/allofmeng/streamline_project --skill figma-create-design-system-rules-allofmeng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/allofmeng/streamline_project/tree/main/.agents/skills/figma-create-design-system-rules
Command: npx skills add https://github.com/allofmeng/streamline_project --skill figma-create-design-system-rules-allofmeng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are followed automatically.

Core Features & Use Cases

  • Prerequisites: Figma MCP server must be connected and accessible; access to the project codebase for analysis
  • Supported Rule Files: guidance and templates for CLAUDE.md, AGENTS.md, and .cursor/rules/figma-design-system.mdc to standardize agent interactions
  • Required Workflow: begin with get_design_context/get_screenshot, map tokens to project conventions, and generate project-specific rules aligned with existing architecture
  • Figma MCP Integration Rules: enforce translation of Figma inputs into code that adheres to project conventions across components, styling, tokens, and assets
  • When to Use This Skill: use when starting a new project with Figma-driven design systems or updating guidelines for an evolving codebase

Quick Start

Run the Create Design System Rules Tool to fetch foundational prompts, then tailor rules to your codebase.

Quick Start

Use the Create Design System Rules Tool to generate foundational prompts and templates, then tailor them to your project’s 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 for AI coding agents from Figma?▼

To generate design system rules from Figma, you use this Skill to fetch foundational prompts via the Figma MCP server and tailor them into rule files. This produces standardized guidelines for agents to implement designs consistently.

What are design system rules and how do they guide AI code generation?▼

Design system rules are project-specific instructions that guide AI code generation by enforcing team conventions for component organization, styling, token usage, and asset handling. They ensure Figma designs are translated into consistent, high-quality code.

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

Yes, a connected Figma MCP server is a prerequisite to create project-specific design guidelines. You also need access to your project codebase so the Skill can analyze existing architecture and map design tokens accurately.

Which AI agent rule files are supported for Figma design system integration?▼

Supported AI agent rule files for Figma design system integration include CLAUDE.md, AGENTS.md, and .cursor/rules/figma-design-system.mdc. The Skill generates templated content to standardize interactions across these specific environments.

What's the best way to map Figma design tokens to existing project conventions?▼

The best way to map Figma design tokens is to begin by fetching design context and screenshots via Figma MCP. The Skill then analyzes your codebase architecture to generate rules that align tokens with your specific project conventions.

When should I update design system rules for an evolving codebase?▼

You should update design system rules for an evolving codebase when your team's conventions, component patterns, or architectural decisions change. This ensures AI coding agents continue producing compliant code from Figma inputs.

Related Skills

Explore More Design & Creative Skills→
MercurykzMercurykz

figma-implement-design

Translates Figma URLs or node IDs into project-conformant code with WCAG-compliant output using Figma MCP workflow.

Community
Advanced
phoenicisfphoenicisf

figma-create-design-system-rules

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

Community
Advanced
jiitojiito
1

figma

Fetch Figma design context and generate React and Tailwind code.

Community
Intermediate
samcannassamcannas

extract

Extract reusable UI components and design tokens into a unified design system.

Community
Intermediate