skills.rest
GGGODLIN
GGGODLINCOMMUNITY
Explore all skills by this author →
GitHub

create-design-system-rules

Generate design system rules from Figma MCP connections for codebases.

Updated Feb 12, 2026
Search Tags:#automation#developer tools#code generation#design system#figma#frontend development
One-click install
npx skills add https://github.com/GGGODLIN/skill_share --skill create-design-system-rules-gggodlin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-system-rules
Source: https://github.com/GGGODLIN/skill_share/tree/main/create-design-system-rules
Command: npx skills add https://github.com/GGGODLIN/skill_share --skill create-design-system-rules-gggodlin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of project-specific design system rules, ensuring consistency and adherence to established conventions in Figma-to-code workflows.

Core Features & Use Cases

  • Automated Rule Generation: Creates foundational rules based on project languages and frameworks.
  • Codebase Analysis Guidance: Guides users to analyze their project's structure, styling, and patterns.
  • Figma MCP Integration: Defines clear steps for integrating Figma designs with project-specific code.
  • Use Case: When starting a new project or onboarding an AI to an existing one, use this Skill to generate a CLAUDE.md file that dictates how Figma designs should be translated into code, ensuring components are reused, styling is consistent, and design tokens are correctly applied.

Quick Start

Run the create_design_system_rules tool with your project's client languages and frameworks to begin generating rules.

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 Figma to code workflows?▼

To generate design system rules, run the create_design_system_rules tool with your project's client languages and frameworks. It guides you through analyzing your codebase structure, styling, and patterns to produce tailored instructions for AI code generation.

What are design system rules for frontend development and when do I need them?▼

Design system rules are project-specific instructions that ensure consistency in Figma-to-code workflows by enforcing component reuse and correct design token application. You need them when onboarding AI to an existing project or starting a new one to maintain styling conventions.

Can I use this to integrate Figma MCP server with my codebase?▼

Yes, this skill defines clear steps for integrating Figma designs with your project-specific code. It requires a connection to a Figma MCP server to translate Figma designs into code accurately based on your generated rules.

How do I ensure AI code generation adheres to my existing frontend components?▼

You can ensure AI code generation adheres to your components by generating a CLAUDE.md file with this skill. It analyzes your project's architecture and creates foundational rules dictating how Figma designs should translate into code, ensuring components are reused.

Do I need to manually write CLAUDE.md files for design tokens?▼

No, you do not need to manually write CLAUDE.md files for design tokens. The skill automates the creation of this project documentation, generating foundational rules based on your specific project languages and frameworks to correctly apply design tokens.

Related Skills

Explore More Software Engineering Skills→
figmafigma
1.9k

create-design-system-rules

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

Official
Intermediate
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
Jordi-JaspersJordi-Jaspers
1

eventify-svelte-standards

Define SvelteKit project conventions for Eventify frontend development.

Community
Intermediate
openaiopenai
24.7k

figma-create-design-system-rules

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

Official
Advanced