---
context: fork
name: design-system-reference
platforms: [claude-code, gemini-cli, codex-cli, cursor]
description: "Provides structured DESIGN.md schema and curated brand references for AI-native visual design specification. Use when user asks about design system, DESIGN.md, visual design, UI design language, design tokens, color palette, typography system, 디자인 시스템, 비주얼 디자인, 디자인 토큰, or UI 디자인."
level: 3
triggers:
  - "design system"
  - "DESIGN.md"
  - "visual design"
  - "UI design"
  - "design tokens"
  - "color palette"
  - "typography system"
  - "design language"
  - "design reference"
  - "디자인 시스템"
  - "비주얼 디자인"
  - "디자인 토큰"
agents:
  - "frontend-developer"
  - "presentation-designer"
tokens: "~4K"
category: "design"
---

# 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 / dashboard | `stripe.md` | Premium light theme, financial-grade typography |
| Developer tools / CLI / docs | `vercel.md` | Monochrome minimal, shadow-as-border technique |
| Dark-mode SaaS / project tool | `linear.md` | Dark-native, single accent color system |
| Developer platform / open-source | `supabase.md` | Terminal aesthetic, HSL token system |
| Consumer product / landing page | `apple.md` | Cinematic sections, product-as-hero |

### 4. Usage Patterns

#### Generate a New DESIGN.md
1. Read `references/design-md-schema.md` for the 9-section template
2. Optionally read a reference file for style inspiration (e.g., `references/stripe.md`)
3. Fill each section based on project requirements
4. Validate: all 9 sections present, every color has name + hex + role, typography table complete

#### Apply a Reference Style
1. Read the relevant reference file
2. Extract color palette, typography, and component patterns
3. Adapt to project-specific brand colors and content
4. Generate implementation CSS/Tailwind config

#### Audit an Existing Design
1. Read `references/design-md-schema.md` for the quality bar
2. Check: all 9 sections present, colors have semantic names, typography table is complete
3. Report gaps and suggest improvements

### 5. Quality Checklist

- [ ] All 9 sections present
- [ ] Every color: Semantic Name (`#hex`) + functional role
- [ ] Typography: full hierarchy table (size, weight, line-height, letter-spacing)
- [ ] Components: hover/focus states + transition timing included
- [ ] Do's/Don'ts: specific examples with reasoning (not generic)
- [ ] Agent Prompt Guide: at least 3 ready-to-use section prompts

## References
- **`references/design-md-schema.md`** -- 9-section DESIGN.md template and writing standards
- **`references/stripe.md`** -- Stripe design system (premium fintech, light theme)
- **`references/vercel.md`** -- Vercel design system (monochrome minimal, developer tools)
- **`references/linear.md`** -- Linear design system (dark-mode-first, indigo accent)
- **`references/supabase.md`** -- Supabase design system (dark terminal, emerald green)
- **`references/apple.md`** -- Apple design system (cinematic binary, product hero)