create-design-system-rules

Name: create-design-system-rules
Availability: InStock
Author: Happycapy

Generate design system rules from codebase analysis and Figma MCP tools.

137|29|Updated Feb 4, 2026

Search Tags:#automation #code generation #design system #figma #frontend development #rules engine

Ready to run

npx skills add https://github.com/happycapy-ai/Happycapy-skills --skill create-design-system-rules-happycapy-ai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-design-system-rules
Source: https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/create-design-system-rules
Command: npx skills add https://github.com/happycapy-ai/Happycapy-skills --skill create-design-system-rules-happycapy-ai

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

Tailored Rule Generation: Creates rules based on project languages, frameworks, and existing codebase patterns.
Figma MCP Integration: Defines clear workflows for using Figma MCP tools like create_design_system_rules, get_design_context, and get_screenshot.
Use Case: When starting a new React project, use this Skill to generate rules that enforce your team's component structure, styling approach (e.g., Tailwind CSS), and design token usage, ensuring Claude consistently implements Figma designs according to these standards.

Quick Start

Use the create-design-system-rules skill to generate rules for a React project using TypeScript and Tailwind CSS.

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 from Figma for a React project?▼

To generate design system rules from Figma, this Skill analyzes your React project requirements and integrates with Figma MCP server tools to establish component conventions, styling, and token usage instructions.

What are Figma MCP server tools and how do they enforce codebase conventions?▼

Figma MCP server tools provide design context and screenshots directly to your development environment. This Skill uses them to generate rules that enforce your team's specific component structure, styling approach, and design token usage, ensuring consistent Figma-to-code implementation across your project.

Do I need a Figma MCP server connection to automate design token usage in my codebase?▼

Yes, a Figma MCP server connection is required. This Skill relies on Figma MCP tools like get_design_context and get_screenshot to analyze your project requirements and generate the custom rules that automate and standardize design token usage in your frontend codebase.

Can I customize frontend development rules for specific frameworks like Tailwind CSS and TypeScript?▼

Yes, you can customize frontend development rules for frameworks like Tailwind CSS and TypeScript. The Skill generates tailored rules by analyzing your project's existing languages, frameworks, and codebase patterns to ensure Claude consistently implements Figma designs according to your standards.

What is the best way to maintain consistency when converting Figma designs to code?▼

The best way to maintain Figma-to-code consistency is to generate project-specific design system rules. This Skill automates that process by analyzing your codebase and establishing clear workflows for component conventions, styling, and Figma implementation, preventing design drift across your frontend.

Why does my generated design system rule not match my existing codebase patterns?▼

Generated design system rules might not match existing codebase patterns if the project analysis is incomplete or the Figma MCP connection lacks sufficient design context. Ensure the Skill accurately detects your project languages, frameworks, and styling approaches to generate rules that align with your conventions.