design-system-selector

name	design-system-selector
model	sonnet
description	Produces a scored comparison of available DESIGN.md design systems against a project's requirements and delivers a recommended selection with adaptation notes. Use when: 'which design system fits this project', 'pick a design reference for me', 'match a design system to this brand', 'compare design system options for this client'.
category	continuous-learning
triggers	["which design system fits this project","pick a design reference for me","match a design system to this brand","compare design system options for this client"]
tier	1
agents	["primary"]
tool_dependencies	["file_system"]
inputs	[{"name":"project_requirements","type":"string","description":"Project requirements and brand constraints to match against design systems","required":true}]
outputs	[{"name":"selection_report","type":"string","description":"Scored comparison of available design systems with a recommended selection and adaptation notes"}]

Design System Selector

I. Philosophy

Design systems are not interchangeable. Stripe's authority differs from Notion's warmth differs from Linear's precision. Each embeds a philosophy about who the user is, what they value, and how they should feel while working.

The selector prevents the common mistake of picking a design system because it's popular rather than because it fits. A fintech dashboard wearing Notion's soft pastels sends the wrong message. A community platform dressed in Stripe's sharp minimalism feels cold.

Fit is not aesthetic preference -- it is alignment between brand intent and visual language. This skill makes that alignment measurable.

II. When to Use

• Starting a new UI project and choosing visual direction
• Evaluating whether a project's current design tokens match its brand
• Comparing multiple design system options for a client presentation
• Migrating between design systems (need to know what you're moving toward)
• Building a custom design system by compositing traits from multiple references

Do NOT use when:

• The client has an existing brand guide with defined tokens (use those directly)
• You need to implement a specific design system (use the system's docs instead)
• You are doing a visual redesign within an existing system (audit the system instead)
• The project is a prototype where visual polish doesn't matter yet

III. Workflow

Step 1: Inventory Available DESIGN.md Files

Scan the design system reference library for available options:

Primary location: HTMLCraftStudio/templates/design-systems/
Structure: each system has a DESIGN.md with tokens, philosophy, and usage notes

Currently imported (8 systems):

System	Personality	Primary Use Case
Linear	Precise, focused, developer-tool aesthetic	Task management, dev tools
Stripe	Authoritative, clean, trust-building	Fintech, payments, enterprise
Vercel	Minimal, performant, developer-first	Developer platforms, deployment
Notion	Warm, flexible, content-first	Productivity, wikis, collaboration
Resend	Modern, bold, API-developer aesthetic