design-system-selector

What problem does it solve?

Projects often pick a design system because it is popular or familiar rather than because it fits their users and brand; this Skill provides a measurable, dimensioned comparison that matches design systems to project requirements so teams choose an appropriate visual language and interaction philosophy.

Core Features & Use Cases

• Inventories available DESIGN.md reference files and maps each system's tokens, philosophy, and usage notes.
• Classifies project requirements across five dimensions (color, typography, density, personality, interaction), scores each reference on a 0–3 scale per dimension, and produces a weighted scoring matrix.
• Presents top three matches with fit rationale, divergence notes, and concrete adaptation guidance, then applies selected tokens by copying token files, generating CSS custom properties, creating a project DESIGN.md, and validating sample components.
• Use cases include selecting an initial visual direction for a new UI, evaluating token fit for a redesign, comparing options for client presentations, and planning migrations between systems.

Quick Start

Use the design-system-selector with your project's requirements to get a ranked recommendation, adaptation notes, and generated CSS tokens.