skills.rest
phoenicisf
phoenicisfCOMMUNITY
Explore all skills by this author →
GitHub

figma-create-design-system-rules

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

Updated Nov 7, 2025
Search Tags:#figma#design-system#design-tokens#mcp-server#ui-patterns#code-guidelines
One-click install
npx skills add https://github.com/phoenicisf/forex-analyzer --skill figma-create-design-system-rules-phoenicisf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/phoenicisf/forex-analyzer/tree/main/.agents/skills/figma-create-design-system-rules
Command: npx skills add https://github.com/phoenicisf/forex-analyzer --skill figma-create-design-system-rules-phoenicisf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams establish standardized design system rules for Figma-driven code generation, ensuring consistent design token usage, component structures, and implementation guidelines across projects.

Core Features & Use Cases

  • Generate project-wide design system rules tailored to your codebase and tooling.
  • Align design tokens, component organization, and styling conventions with Figma MCP workflows.
  • Onboard new teams quickly by enforcing consistent design-system guidelines across codebases.

Quick Start

Draft a comprehensive set of design-system rules for your Figma-to-code workflow and specify the target agent to begin exporting rules.

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 create design system rules for Figma-to-code generation?▼

Automate creation of project-specific design system rules for Figma-driven code generation by defining token usage, component organization, and styling conventions in a structured, agent-friendly format.

Can I export Figma design system rules to CLAUDE.md or Cursor-compatible files?▼

Export generated design system rules to CLAUDE.md, AGENTS.md, or Cursor-compatible files depending on your CI/CD setup to enforce consistent design-to-code workflows.

What are design tokens in Figma MCP workflows and how do I standardize them?▼

Standardize design tokens within Figma MCP workflows by generating comprehensive guidelines that align token usage, component structures, and styling conventions across your codebase.

Does Figma MCP work with existing codebases to enforce design system guidelines?▼

Apply Figma MCP design system rules to both new and existing codebases to guide token usage, component organization, and design-to-code implementation workflows consistently.

Why do I need structured rules for Figma-driven code generation?▼

Structured rules ensure consistent design token usage, component structures, and implementation guidelines across projects, enabling quick team onboarding and standardized Figma-to-code workflows.

What is the best way to onboard new teams to Figma design-to-code workflows?▼

Generate project-wide design system rules tailored to your codebase and tooling to enforce consistent design-system guidelines and quickly onboard new teams to Figma MCP workflows.

Related Skills

Explore More Design & Creative Skills→
FacuMFacuM

create-design-system-rules

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

Community
Advanced
d0d012d0d012
9

figma-design

Extract tokens, styles, and constraints from Figma design files.

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
elsolalelsolal
1

figma-create-design-system-rules

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

Community
Advanced