Design System Generator

Overview

This skill generates a project-specific DESIGN_SYSTEM.md that enforces consistent UI/UX across:

• SPAs (React/Vue/Svelte/Angular)
• Traditional server-rendered sites (Laravel, Rails, Django, WordPress, etc.)
• Hybrid systems (admin + marketing + docs)

The design system must be component-based, portable, and practical for real implementation.

When to use this skill:

• Setting up UI consistency rules for a new project
• Standardizing component patterns across teams
• Establishing design tokens (colors, typography, spacing)
• Defining accessibility and performance requirements

Interactive Workflow