skills.rest
filipesf
filipesfCOMMUNITY
Explore all skills by this author →
Website𝕏@filipesfGitHub

create-design-system-rules

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

Updated Aug 23, 2026
Search Tags:#tokens#design-system#code-conventions#design-rules#component-organization#Figma-MCP
One-click install
npx skills add https://github.com/filipesf/dotfiles --skill create-design-system-rules-filipesf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-system-rules
Source: https://github.com/filipesf/dotfiles/tree/main/agents/skills/create-design-system-rules
Command: npx skills add https://github.com/filipesf/dotfiles --skill create-design-system-rules-filipesf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams codify their design and implementation conventions into a reusable rule-set, ensuring Figma-driven work adheres to project standards.

Core Features & Use Cases

  • Define component organization, naming, and folder structure tailored to the project's codebase.
  • Map design tokens, color systems, typography, and spacing to a single source of truth.
  • Use with the Figma MCP server to auto-generate or validate rules during design-to-code tasks.

Quick Start

Use this skill to generate a complete Design System Rules guide for your repository. Then save the results to CLAUDE.md in your project root.

Frequently Asked Questions about 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 a Figma-to-code workflow?▼

To generate design system rules, this skill analyzes your repository patterns and Figma MCP server data to produce actionable guidelines for component organization, tokens, typography, and spacing that you save to CLAUDE.md.

What are design tokens and how do they map to code conventions?▼

Design tokens are centralized variables for color, typography, and spacing. This skill maps these tokens from your Figma MCP project to a single source of truth within your codebase naming conventions.

Do I need a Figma MCP server to define project-wide design rules?▼

Yes, a connected Figma MCP server is required. The skill uses the server alongside your repository access to analyze existing patterns and generate standardized Figma-to-code component organization rules.

How do I standardize component organization and folder structure from Figma?▼

You can standardize component organization by running this skill to analyze your codebase, which then generates tailored rules for folder structure and naming conventions that you save to CLAUDE.md.

What is the best way to maintain design consistency across Figma and code?▼

The best way to maintain design consistency is codifying your conventions into a reusable rule-set. This skill generates project-specific guidelines for typography and spacing to standardize Figma-driven work.

Can I use this skill to validate existing design tokens during development?▼

Yes, you can use this skill with the Figma MCP server to auto-generate or validate rules during design-to-code tasks, ensuring your implementation adheres to the established project standards.

Related Skills

Explore More Design & Creative Skills→
openaiopenai
24.7k

figma-create-design-system-rules

Generate custom design system rules from Figma designs via Figma MCP API.

Official
Advanced
niallr12niallr12

create-design-system-rules

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

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
89jobrien89jobrien

figma-create-design-system-rules

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

Community
Advanced