| 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 |
