design-system-referencelisted

# Design System Reference ## When This Skill Applies - Creating a new visual design system for a project - Generating a DESIGN.md specification from scratch - Referencing established brand design patterns (Stripe, Vercel, Linear, Supabase, Apple) - Specifying color palettes, typography, and component styles for AI agents - Converting design intent into structured, machine-readable format - Reviewing or auditing an existing design system ## Core Guidance ### 1. DESIGN.md Workflow ``` Identify Design Intent -> Select Reference Style -> Load Schema -> Generate DESIGN.md -> Validate 9 Sections -> Apply to Implementation ``` ### 2. Schema Structure Every DESIGN.md follows the **9-Section Schema** (see `references/design-md-schema.md`): | Section | Purpose | |---------|---------| | 1. Visual Theme & Atmosphere | Overall feel, key characteristics | | 2. Color Palette & Roles | Every color with semantic name + hex + role | | 3. Typography Rules | Full hierarchy table with metrics | | 4. Component Stylings | Buttons, cards, inputs with states | | 5. Layout Principles | Grid, spacing, content widths | | 6. Depth & Elevation | Shadows, borders, layering | | 7. Do's and Don'ts | Specific guidance with reasoning | | 8. Responsive Behavior | Breakpoints, scaling, adaptation | | 9. Agent Prompt Guide | Ready-to-use prompts for key sections | ### 3. Reference Selection Guide | If the project is... | Use reference | Why | |---------------------|---------------|-----| | SaaS / fintech