Create Design System Rules

What Is This?

Overview

This skill analyzes your codebase to understand existing patterns and generates design system rules that guide Figma-to-code implementations. These rules capture institutional knowledge about which components to use, where files belong, naming conventions, and architectural decisions that experienced developers understand.

The generation process analyzes project structure to identify component organization, styling approaches, naming patterns, and architectural decisions. Then it creates formatted rules covering layout primitives, component structure, design token usage, and project-specific patterns ensuring team standards are followed.

Who Should Use This

Development teams implementing Figma designs regularly into production. Frontend engineers establishing conventions for new projects. Technical leads standardizing workflows across growing teams. Design system maintainers ensuring consistent implementation quality across products.

Why Use It?

Problems It Solves

Inconsistent implementation creates maintenance headaches when each design translation makes different choices about structure, naming, and organization. This skill standardizes decisions by encoding them as reusable rules applied automatically to implementations.

Repetitive prompting wastes time explaining the same preferences for every component created. Once rules are established, conventions apply without restating them, reducing prompting overhead significantly.

New team members lack context about project patterns and conventions. Design system rules transfer institutional knowledge explicitly, ensuring consistent implementation regardless of experience level.

Core Highlights

Automated codebase analysis identifies existing patterns and conventions. Comprehensive rule generation covers components, styling, naming, and architecture. Template-based structure ensures complete coverage of decisions. Figma workflow integration enables seamless design-to-code conversion. Reusable rule sets apply across all implementations.

How to Use It?

Basic Usage

Request design system rule creation, providing project languages and frameworks. The skill analyzes codebase structure and generates tailored rules.

Create design system rules for my React TypeScript project
Generate Figma implementation rules for this Vue application

Specific Scenarios

For new projects establishing initial conventions:

Set up design system rules for this Next.js app,
use Tailwind, keep components in src/components

For existing projects with established patterns:

Analyze codebase and create rules matching conventions,
React with styled-components, feature-based organization

Real World Examples

A startup implementing Figma designs notices inconsistent component organization. Some developers use /components, others /ui, and naming varies between PascalCase and kebab-case. They run this skill, which analyzes existing code, identifies the most common patterns, and generates rules codifying these conventions. Future implementations automatically follow this structure.

An established team onboards new developers frequently and finds implementation quality varies widely. They use this skill to analyze their codebase, generating comprehensive rules covering component library usage, design token patterns, file organization by feature, and TypeScript interface conventions. New team members reference these rules and immediately produce code matching veteran developer standards.

A design system team maintains multiple projects with different conventions per project. They generate separate rules for each project independently, ensuring the correct conventions apply automatically based on which project context is active.

Advanced Tips

Run initial analysis without modifications to see detected patterns before customizing rules. Review and adjust generated rules to match aspirational conventions if the current codebase has inconsistencies you want to correct. Update rules periodically as architectural decisions evolve.

When to Use It?

Use Cases

New project initialization establishing design-to-code workflows from scratch. Existing project standardization to codify previously informal conventions. Team onboarding to transfer institutional knowledge explicitly. Design system implementation across multiple projects. Collaboration enhancement between designers and developers.

Related Topics

Figma API integration for design data access and manipulation. Component libraries and design systems for reusable patterns. Code generation tools and templates for scaffolding. Style guide enforcement and linters for automated checking. Design tokens and theming systems for consistent styling.

Important Notes

Requirements

Figma MCP server connection for accessing design data and generating rules. Project codebase access for pattern analysis and convention detection. Understanding of current or desired team conventions and standards. Framework and language information such as React, Vue, or TypeScript.

Usage Recommendations

Analyze the codebase thoroughly before generating rules to capture patterns accurately. Involve team members in rule review to ensure alignment with shared conventions. Start with general rules then add project-specific details as needed. Update rules when architectural decisions change or new patterns emerge. Reference rules during code reviews for consistency enforcement.

Limitations

Cannot enforce rules automatically without integration into development workflow and tooling. Quality depends on codebase consistency during the analysis phase. Works best with established conventions rather than codebases lacking clear patterns. Requires a Figma MCP server connection for full functionality.