skills.rest
Asylcreek
AsylcreekCOMMUNITY
Explore all skills by this author →
𝕏@acrysleekGitHub

create-design-system-rules

Generate project-specific design system rules for component organization and token usage.

Updated Sep 7, 2024
Search Tags:#frontend#figma#mcp#tokens#rules#design-system
One-click install
npx skills add https://github.com/Asylcreek/home-manager --skill create-design-system-rules-asylcreek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-system-rules
Source: https://github.com/Asylcreek/home-manager/tree/main/dots/agents/skills/create-design-system-rules
Command: npx skills add https://github.com/Asylcreek/home-manager --skill create-design-system-rules-asylcreek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generates structured, project-specific guidelines to align code implementation with a design system, reducing drift between design and development.

Core Features & Use Cases

  • Automates creation of comprehensive rules for component organization, styling approaches, design tokens, and MCP integration.
  • Produces guidelines mapping design tokens to code conventions and promotes reuse of existing components.
  • Use Case: onboarding a new project requiring a cohesive design system aligned with Figma designs.

Quick Start

Run the Create Design System Rules Tool against your codebase, specifying clientLanguages and clientFrameworks, then review and apply the generated rules to your project.

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 my codebase to align with Figma?▼

To generate design system rules for your codebase, run the tool against your repository while specifying client languages and frameworks. It analyzes your context to produce structured guidelines mapping Figma designs to code conventions.

What are design tokens and how do I map them to frontend code conventions?▼

Design tokens are visual design variables mapped to frontend code conventions. This tool converts your Figma tokens into project-specific rules, ensuring consistent UI implementation by avoiding hard-coded values and promoting component reuse.

Can I use Figma MCP to enforce design system rules in a frontend project?▼

Yes, you can use Figma MCP to enforce design system rules in a frontend project. The tool produces guidelines that integrate MCP, mapping design tokens directly into your component organization and styling approach.

What is the best way to prevent design drift between Figma and frontend components?▼

The best way to prevent design drift between Figma and frontend components is to codify project-specific design system rules. This aligns code implementation with design by standardizing styling approaches and token usage.

Do I need to specify client languages and frameworks to create design system rules?▼

Yes, you need to specify client languages and frameworks to create design system rules. The tool uses these inputs to analyze your repository context and generate rules tailored to your specific coding environment.

Related Skills

Explore More Design & Creative Skills→
stevengonsalvezstevengonsalvez

teach-impeccable

Gather design context from a repository and persist it to AI configuration.

Community
Intermediate
FacuMFacuM

create-design-system-rules

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

Community
Advanced
Moliboy5000Moliboy5000

figma

Generates Tailwind-CSS-based React components from Figma designs and user stories.

Community
Intermediate
docaohieu2808docaohieu2808

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

Community
Advanced