初始化项目版本

2026-07-29 16:04:39 +08:00
commit 4305a1082b
2629 changed files with 760590 additions and 0 deletions
--- a/.agents/skills/stitch-extract-design-md/SKILL.md
+++ b/.agents/skills/stitch-extract-design-md/SKILL.md
@@ -0,0 +1,365 @@
+---
+name: stitch::extract-design-md
+description: >-
+  Extract a comprehensive design system (DESIGN.md) directly from frontend source
+  code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes
+  component files, stylesheets, Tailwind configs, theme definitions, and design tokens
+  to produce a rich, Stitch-compatible design system document. Use this skill whenever
+  the user wants to reverse-engineer a design system from an existing codebase, audit
+  the visual language of a project, extract design tokens from source files, or
+  understand the styling patterns in a frontend repo — even if they just say "what
+  does this app look like?" or "pull out the design from this code."
+allowed-tools:
+  - "stitch*:*"
+  - "Bash"
+  - "Read"
+  - "Write"
+  - "web_fetch"
+---
+
+# Extract Design System from Frontend Code
+
+Analyze frontend source code to extract a comprehensive design system document
+(DESIGN.md) that captures the project's visual language — colors, typography,
+spacing, component patterns, and layout principles — directly from the source
+files, without needing to build or render the application.
+
+## Why This Exists
+
+The `design-md` skill works from rendered HTML. But often you have a codebase
+and want to understand its design system before you can even run the app —
+maybe dependencies are missing, the build is broken, or you just want a quick
+audit. This skill reads the source files themselves: stylesheets, component
+files, theme configs, and Tailwind setups. It's faster and works anywhere.
+
+## When to Use
+
+- User has a frontend codebase and wants to extract or document its design system
+- User wants to migrate a project's visual identity into Stitch
+- User asks to "audit the styling" or "understand the design language" of a repo
+- User wants to create a DESIGN.md from existing source code
+- The app can't be built/rendered but the source is available
+- User wants to unify or reconcile inconsistent styles across a codebase
+
+## Prerequisites
+
+- Access to the frontend project's source directory
+- No build or runtime dependencies needed — this skill reads source files only
+
+---
+
+## Workflow
+
+### Phase 1: Project Discovery
+
+Start by understanding what you're working with. This determines which
+extraction patterns to use.
+
+#### 1. Detect the Framework and Stack
+
+Scan the project root for telltale files:
+
+| Signal File | Framework / Tool |
+|:---|:---|
+| `package.json` with `react` | React / Next.js |
+| `package.json` with `vue` | Vue / Nuxt |
+| `package.json` with `svelte` | Svelte / SvelteKit |
+| `package.json` with `@angular/core` | Angular |
+| `tailwind.config.js/ts` | Tailwind CSS |
+| `postcss.config.js` | PostCSS pipeline |
+| `styled-components` or `@emotion` in deps | CSS-in-JS |
+| `.css` / `.scss` / `.less` files only | Plain CSS / SASS |
+| `theme.js` / `theme.ts` / `tokens.js` | Design token files |
+
+Read `package.json` first — it reveals the framework, CSS tooling, and any
+design-token libraries (e.g., `style-dictionary`, `@chakra-ui/react`,
+`@mui/material`, `ant-design`). This context tells you *where* to look for
+styling information.
+
+#### 2. Map the Source Tree
+
+Identify the key directories and files you'll analyze:
+
+```
+src/
+├── components/     ← Component-level styles
+├── styles/         ← Global stylesheets
+├── theme/          ← Theme definitions, tokens
+├── assets/         ← Fonts, images
+├── app.css         ← Root styles
+└── index.css       ← Entry CSS
+```
+
+Also check for:
+- `tailwind.config.js` / `tailwind.config.ts` — Custom colors, fonts, spacing
+- `globals.css` / `global.css` — CSS custom properties (variables)
+- Any `theme.*` or `tokens.*` files
+- Component library config (e.g., `chakra-theme.ts`, `vuetify.config.ts`)
+
+#### 3. Read Framework-Specific Guidance
+
+Consult the appropriate reference for extraction patterns:
+
+- **React / Next.js / Tailwind** → [references/react-tailwind.md](references/react-tailwind.md)
+- **Vue / Nuxt** → [references/vue.md](references/vue.md)
+- **Svelte / SvelteKit** → [references/svelte.md](references/svelte.md)
+- **Angular** → [references/angular.md](references/angular.md)
+- **Plain CSS / SASS / Less** → [references/plain-css.md](references/plain-css.md)
+
+These references contain framework-specific patterns for locating colors,
+typography, spacing, and component styles. Read the one that matches before
+proceeding.
+
+---
+
+### Phase 2: Deep Extraction
+
+Work through each design dimension systematically. For each one, gather raw
+data from the source files, then synthesize it into descriptive language.
+
+The goal isn't to dump every CSS property — it's to understand the *intent*
+behind the styling choices and describe them in human, editorial language that
+another designer (or Stitch) can use to recreate the same visual feel.
+
+#### 1. Visual Theme & Atmosphere
+
+Read the broadest styling first to understand the overall mood:
+
+- **Root background**: What's the `body` or root element background? Light
+  cream (#f-range) signals airy/clean; dark (#0-#2 range) signals moody/dramatic.
+- **Whitespace philosophy**: Are spacing values generous (32px+) or tight?
+  Check padding/margin values on root containers, section wrappers, and card components.
+- **Density**: Count the components per page/section. Few with space = minimal;
+  many packed tight = information-dense.
+- **Color temperature**: Are the neutrals warm (creams, tans) or cool (blue-grays, slates)?
+- **Overall feel**: Synthesize into 1-2 rich sentences that capture the mood.
+
+Look for these signals in the source:
+
+| Source Location | What It Tells You |
+|:---|:---|
+| Root `background-color` or Tailwind `bg-*` on layouts | Overall lightness/darkness |
+| Spacing scale in Tailwind config or CSS vars | Whitespace philosophy |
+| Number of components vs. wrapper padding | Density |
+| Custom property naming (`--warm-*` vs `--cool-*`) | Color temperature intent |
+| Comments in theme files | Design intent in the developer's own words |
+
+#### 2. Color Palette & Roles
+
+Extract every unique color from the codebase and assign functional roles.
+Search across all layers:
+
+**Where to find colors:**
+
+| Layer | What to Search |
+|:---|:---|
+| CSS custom properties | `--color-*`, `--primary`, `--bg-*` |
+| Tailwind config | `theme.extend.colors` |
+| Theme/token files | Color objects, palettes |
+| Component styles | `background-color`, `color`, `border-color` |
+| Inline/scoped styles | `bg-*`, `text-*` classes in templates |
+| CSS-in-JS theme objects | `colors`, `palette` keys |
+
+**How to organize:** Group colors by function, not by hue:
+
+1. **Primary Foundation** — Background and surface colors
+2. **Accent & Interactive** — CTA buttons, active states, links
+3. **Typography & Text Hierarchy** — Primary, secondary, tertiary text
+4. **Functional States** — Success, error, warning, info
+
+For each color, create a descriptive name that evokes the color's character
+rather than its raw hex value:
+
+- ❌ `#294056` → "Blue"
+- ✅ `#294056` → **"Deep Muted Teal-Navy"** — Primary CTA, active navigation
+
+**Deduplication matters.** Codebases often have near-duplicate colors (e.g.,
+`#333` and `#2C2C2C`). Consolidate them under one name that best represents
+the intended color.
+
+#### 3. Typography Rules
+
+Extract the complete typographic system:
+
+**Font families:**
+- Check CSS `font-family`, Tailwind `fontFamily`, Google Fonts links, or
+  local `@font-face` declarations.
+- Note the **character** of each font: geometric vs humanist, serif vs sans,
+  the feeling it evokes.
+
+**Type scale (hierarchy):**
+- Find every heading level (H1-H6) and body text, noting:
+  - `font-size` (in rem or px)
+  - `font-weight` (numeric value + descriptive name)
+  - `letter-spacing` (and why — elegance? compactness?)
+  - `line-height` (generous for readability? tight for display?)
+- Map component usage: Which heading level do product cards use? What about
+  hero sections?
+
+**Spacing principles:**
+- How does text spacing relate to the overall spacing scale?
+- Letter-spacing patterns on headings vs body
+- Line-height philosophy (generous/relaxed for body, tighter for display)
+
+#### 4. Component Stylings
+
+Analyze the 4-5 most important UI primitives:
+
+**Buttons:**
+- Corner radius (and what it communicates — playful? professional? minimal?)
+- Color scheme for primary, secondary, and ghost variants
+- Hover/focus/active states and transition timing
+- Padding ratios (horizontal vs vertical)
+
+**Cards / Containers:**
+- Corner radius (often different from buttons — slightly rounder)
+- Shadow strategy: flat, subtle hover shadows, or always elevated?
+- Border treatment: hairline borders, colored accents, or none?
+- Internal padding (generous or compact?)
+- Image treatment within cards (full-bleed, padded, rounded?)
+
+**Navigation:**
+- Layout pattern (horizontal bar, vertical sidebar, drawer)
+- Typography treatment (uppercase, letter-spacing, weight)
+- Active/hover state indicators (underline, color, background)
+- Mobile behavior (hamburger, bottom nav, drawer)
+
+**Inputs & Forms:**
+- Border style and focus state behavior
+- Corner style consistency with buttons
+- Padding and touch-target sizing
+
+**Domain-Specific Components:**
+- Identify 1-2 components unique to this project (e.g., product cards,
+  dashboard widgets, chat bubbles) and describe their styling patterns.
+
+#### 5. Layout Principles
+
+Extract the structural system:
+
+**Grid & Structure:**
+- Max content width (from `max-width` on containers)
+- Column system (CSS Grid, Flexbox patterns, defined breakpoints)
+- Responsive breakpoints (from media queries or Tailwind config)
+
+**Whitespace Strategy:**
+- Base spacing unit (8px grid? 4px? custom?)
+- Section margins (how much space between major sections)
+- Edge padding (page margins at different breakpoints)
+
+**Alignment & Visual Balance:**
+- Text alignment patterns (centered heroes, left-aligned body)
+- Image-to-text ratios
+- Visual weight distribution
+
+**Responsive Behavior:**
+- Mobile-first or desktop-first?
+- How do grids collapse? Padding scale?
+- Touch target sizing
+
+#### 6. Stitch Generation Notes
+
+Synthesize the extraction into actionable prompts for Stitch:
+
+- **Atmosphere language**: Translate the mood into natural descriptors
+- **Color references**: List colors by descriptive name + hex
+- **Component prompts**: Write 2-3 example prompts that would recreate
+  key components in Stitch
+- **Iteration guidance**: Tips for refining screens in this design system
+
+---
+
+### Phase 3: Write the DESIGN.md
+
+Assemble everything into the standard DESIGN.md format. Place it at
+`.stitch/DESIGN.md` in the project directory (create the `.stitch/` directory
+if it doesn't exist).
+
+> [!IMPORTANT]
+> You **MUST** include the YAML frontmatter at the top of the file with `name` and `colors` mapping, exactly as shown in the example at [examples/DESIGN.md](examples/DESIGN.md). This structured data is required for other skills to parse the design system.
+>
+> Failure to include this YAML block with at least the core color tokens is a failure to use this skill correctly.
+
+Use the format from the example at [examples/DESIGN.md](examples/DESIGN.md) as your template. The file must start with the YAML block, followed by the markdown sections:
+
+```markdown
+# Design System: [Project Name]
+**Project ID:** [If known, otherwise omit]
+
+## 1. Visual Theme & Atmosphere
+[Rich 2-paragraph description of mood, philosophy, and key characteristics]
+
+## 2. Color Palette & Roles
+### Primary Foundation
+### Accent & Interactive
+### Typography & Text Hierarchy
+### Functional States
+
+## 3. Typography Rules
+### Hierarchy & Weights
+### Spacing Principles
+
+## 4. Component Stylings
+### Buttons
+### Cards & [Domain-Specific Containers]
+### Navigation
+### Inputs & Forms
+### [Domain-Specific Components]
+
+## 5. Layout Principles
+### Grid & Structure
+### Whitespace Strategy
+### Alignment & Visual Balance
+### Responsive Behavior & Touch
+
+## 6. Design System Notes for Stitch Generation
+### Language to Use
+### Color References
+### Component Prompts
+### Incremental Iteration
+```
+
+---
+
+### Phase 4: Integration (Optional)
+
+If the user wants to push the design system into Stitch:
+
+1. Hand off to the `manage-design-system` skill for the MCP create/update calls
+2. The DESIGN.md you wrote is the input — the manage-design-system skill handles
+   the Stitch API integration
+
+If the user just wants the document, you're done after Phase 3.
+
+---
+
+## Quality Checklist
+
+Before delivering the DESIGN.md, verify:
+
+- [ ] Every color has a descriptive name, hex code, and functional role
+- [ ] Typography includes font family, character description, and full hierarchy
+- [ ] Component styles describe shape, color, states, and transitions
+- [ ] Layout includes max-width, grid, breakpoints, and spacing strategy
+- [ ] Stitch generation notes use natural language, not CSS syntax
+- [ ] The atmosphere section reads like editorial copy, not technical docs
+- [ ] Near-duplicate colors are consolidated
+- [ ] The document captures the *intent* behind styling, not just raw values
+
+## Tips for Better Extraction
+
+- **Read comments and commit messages.** Developers often document design
+  intent in code comments (`/* hero section — breathable */`) and commit
+  messages. These are gold for understanding the *why*.
+- **Check for design-token libraries.** If the project uses `style-dictionary`,
+  `@tokens-studio`, or similar, these files are the most authoritative
+  source of design values.
+- **Theme files are higher-signal than component styles.** A `theme.ts` that
+  defines a palette tells you the intended design system; scattered inline
+  styles in components tell you what actually shipped. Both matter, but
+  start from the theme.
+- **Tailwind config is a design system.** If a project has a customized
+  `tailwind.config.js`, that *is* the design system — extract from it first,
+  then spot-check components for overrides.
+- **CSS custom properties are intentional.** If a developer defined
+  `--brand-primary`, they're telling you this is a design token. Respect that.
--- a/.agents/skills/stitch-extract-design-md/examples/DESIGN.md
+++ b/.agents/skills/stitch-extract-design-md/examples/DESIGN.md
@@ -0,0 +1,210 @@
+---
+name: Alpine Peak
+colors:
+  surface: '#fcf8fa'
+  surface-dim: '#dcd9db'
+  surface-bright: '#fcf8fa'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f6f3f5'
+  surface-container: '#f0edef'
+  surface-container-high: '#eae7e9'
+  surface-container-highest: '#e4e2e4'
+  on-surface: '#1b1b1d'
+  on-surface-variant: '#45464d'
+  inverse-surface: '#303032'
+  inverse-on-surface: '#f3f0f2'
+  outline: '#76777d'
+  outline-variant: '#c6c6cd'
+  surface-tint: '#565e74'
+  primary: '#000000'
+  on-primary: '#ffffff'
+  primary-container: '#131b2e'
+  on-primary-container: '#7c839b'
+  inverse-primary: '#bec6e0'
+  secondary: '#5c5f61'
+  on-secondary: '#ffffff'
+  secondary-container: '#e0e3e5'
+  on-secondary-container: '#626567'
+  tertiary: '#000000'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#161c22'
+  on-tertiary-container: '#7e848c'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dae2fd'
+  primary-fixed-dim: '#bec6e0'
+  on-primary-fixed: '#131b2e'
+  on-primary-fixed-variant: '#3f465c'
+  secondary-fixed: '#e0e3e5'
+  secondary-fixed-dim: '#c4c7c9'
+  on-secondary-fixed: '#191c1e'
+  on-secondary-fixed-variant: '#444749'
+  tertiary-fixed: '#dde3eb'
+  tertiary-fixed-dim: '#c1c7cf'
+  on-tertiary-fixed: '#161c22'
+  on-tertiary-fixed-variant: '#41474e'
+  background: '#fcf8fa'
+  on-background: '#1b1b1d'
+  surface-variant: '#e4e2e4'
+typography:
+  display-lg:
+    fontFamily: Inter
+    fontSize: 48px
+    fontWeight: '800'
+    lineHeight: 56px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Inter
+    fontSize: 24px
+    fontWeight: '700'
+    lineHeight: 32px
+    letterSpacing: -0.01em
+  body-base:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: 24px
+    letterSpacing: '0'
+  body-bold:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '600'
+    lineHeight: 24px
+    letterSpacing: '0'
+  label-caps:
+    fontFamily: Lexend
+    fontSize: 12px
+    fontWeight: '700'
+    lineHeight: 16px
+    letterSpacing: 0.05em
+  stat-lg:
+    fontFamily: Lexend
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: 40px
+    letterSpacing: -0.02em
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  unit: 4px
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  gutter: 16px
+  margin-mobile: 20px
+  margin-desktop: 40px
+---
+
+## Brand & Style
+
+The brand personality is high-performance, sophisticated, and dependable. It is
+designed for the modern skier who demands clarity and precision in harsh
+environments. The visual language evokes the crystalline beauty of a mountain
+peak while prioritizing the rugged utility required for outdoor navigation.
+
+The design system utilizes **Glassmorphism** to achieve a "frozen" aesthetic,
+mimicking the properties of ice and packed snow. This is paired with a
+**High-Contrast** philosophy to ensure that critical data—like trail status and
+weather alerts—remains legible under intense mountain sunlight or the
+low-visibility conditions of a snowstorm.
+
+## Colors
+
+The palette is anchored by **Deep Peak Blue**, a dark navy that provides a
+grounding contrast for white text and maps. **Powder White** serves as the
+primary canvas, ensuring the interface feels airy and cold.
+
+**Safety Orange** is reserved strictly for primary calls to action, hazard
+warnings, and emergency trail closures, ensuring immediate eye-tracking.
+**Electric Blue** (the info status) is used for weather updates and general
+interactivity. For trail difficulty levels, standard industry colors (Green,
+Blue, Black) are used but rendered with high-saturation values to pop against
+the white backgrounds.
+
+## Typography
+
+The typography system uses **Inter** for core functional text and body copy due
+to its exceptional x-height and legibility at small sizes. **Lexend** is
+introduced for labels and statistics; its hyper-readable, athletic character
+suits the "active" nature of skiing data like speed and vertical drop.
+
+To combat outdoor glare, font weights are generally heavier than standard web
+applications. Display styles use tight tracking and heavy weights to create a
+sense of strength. Labels always utilize high-contrast coloring against their
+backgrounds.
+
+## Layout & Spacing
+
+This design system uses a **Fluid Grid** model with generous safe areas.
+Elements are spaced using a strict 4px/8px baseline rhythm to maintain a
+disciplined, professional appearance.
+
+Touch targets are intentionally oversized (minimum 48x48px) to accommodate users
+wearing gloves. Padding within cards and containers is kept spacious (`lg` or
+`xl`) to prevent the interface from feeling cluttered when displaying complex
+trail data.
+
+## Elevation & Depth
+
+Depth is conveyed through **Glassmorphism** and backdrop filters rather than
+traditional heavy shadows. Surfaces use a hierarchy of transparency:
+
+1.  **Base Layer:** Solid 'Powder White' or 'Deep Peak Blue'.
+2.  **Middle Layer (Cards/Modals):** 70% opacity white with a 20px backdrop blur
+    and a thin 1px 'Ice' border (white at 40% opacity).
+3.  **Top Layer (Floating Actions):** 90% opacity with a subtle 4px ambient
+    shadow to separate the element from the blurred background.
+
+This creates a "stacked ice" effect that maintains visual clarity while giving
+the UI a premium, modern feel.
+
+## Shapes
+
+The shape language is defined by modern, organic **rounded corners**. This
+softens the high-contrast color palette and makes the app feel approachable.
+
+Interactive elements like buttons and chips utilize `rounded-lg` (1rem) or
+`rounded-xl` (1.5rem) to suggest a tactile, "pebble" feel. Large containers like
+map overlays use 1rem corners, while small status indicators for trail
+difficulty may use pill shapes for instant recognition.
+
+## Components
+
+### Buttons
+
+Primary buttons use a solid 'Safety Orange' or 'Deep Peak Blue' fill with white
+text. High-contrast outlines are used for secondary actions. All buttons must
+feature a minimum height of 52px for gloved-hand accessibility.
+
+### Cards & Modals
+
+Cards utilize the glassmorphism effect—semi-transparent backgrounds with a 1px
+white border. This ensures that map imagery or photos underneath remain slightly
+visible, maintaining the "frozen" aesthetic.
+
+### Trail Status Chips
+
+Pill-shaped indicators with high-saturation icons. Green (Easy), Blue
+(Intermediate), Black (Expert), and Double Black (Extreme). These must include
+text labels alongside icons to ensure accessibility for colorblind users.
+
+### Input Fields
+
+Fields feature a 'Cloud Gray' background with a thick bottom border that
+transforms into 'Electric Blue' on focus. Labels are always visible above the
+field to ensure the user doesn't lose context in bright environments.
+
+### Weather Widgets
+
+Bold, thick-stroke iconography (minimum 2pt stroke) to represent sun, snow, or
+wind. These icons should be large and accompanied by 'Lexend' typography for
+temperature and wind speed.
--- a/.agents/skills/stitch-extract-design-md/references/angular.md
+++ b/.agents/skills/stitch-extract-design-md/references/angular.md
@@ -0,0 +1,114 @@
+# Angular Extraction Patterns
+
+Angular projects use a structured, convention-heavy approach to styling.
+Design systems often live in SCSS/CSS files with clear separation between
+global themes and component-scoped styles.
+
+## File Discovery Order
+
+1. **`angular.json`** — Lists global style files under
+   `projects.*.architect.build.options.styles`. These are the entry-point
+   CSS/SCSS files.
+
+2. **`src/styles.scss` / `src/styles.css`** — Global stylesheet. CSS custom
+   properties, font imports, and base styles live here.
+
+3. **`src/theme.scss` / `src/theme/`** — Explicit theme directory. Custom
+   Material/component palettes.
+
+4. **`tailwind.config.js`** (if Tailwind) — Same extraction as React.
+
+5. **`src/app/app.component.scss`** — Root component styles, reveals global
+   layout patterns.
+
+6. **Component `.scss` / `.css` files** — Co-located styles (ViewEncapsulation
+   scoped by default).
+
+## Angular Material Theme Extraction
+
+Angular Material is the most common component library. Themes are SCSS-based:
+
+```scss
+// src/theme.scss
+@use '@angular/material' as mat;
+
+$primary-palette: mat.m2-define-palette(mat.$m2-teal-palette, 800);
+$accent-palette: mat.m2-define-palette(mat.$m2-blue-grey-palette);
+$warn-palette: mat.m2-define-palette(mat.$m2-red-palette);
+
+$theme: mat.m2-define-light-theme((
+  color: (
+    primary: $primary-palette,
+    accent: $accent-palette,
+    warn: $warn-palette,
+  ),
+  typography: mat.m2-define-typography-config(
+    $font-family: 'Manrope, sans-serif',
+    $headline-1: mat.m2-define-typography-level(3.5rem, 4rem, 600),
+    $headline-5: mat.m2-define-typography-level(1.5rem, 2rem, 500),
+    $body-1: mat.m2-define-typography-level(1rem, 1.7, 400),
+  ),
+));
+
+@include mat.all-component-themes($theme);
+```
+
+**What to extract:**
+- Palette choices → map to functional color roles
+- Typography config → maps directly to the hierarchy section
+- Light vs dark theme → atmosphere
+
+For Angular Material 3 (MDC-based), look for `mat.define-theme()` using
+the new token system with `--mat-*` CSS custom properties.
+
+## SCSS Variable Patterns
+
+Many Angular projects use SCSS variables for tokens:
+
+```scss
+// _variables.scss
+$color-primary: #294056;
+$color-background: #FCFAFA;
+$color-surface: #F5F5F5;
+$color-text: #2C2C2C;
+
+$font-heading: 'Manrope', sans-serif;
+$font-body: 'Inter', sans-serif;
+
+$radius-button: 8px;
+$radius-card: 12px;
+
+$breakpoint-mobile: 768px;
+$breakpoint-desktop: 1024px;
+
+$spacing-section: 5rem;
+$spacing-component: 2rem;
+```
+
+These are explicit design tokens. Map them directly.
+
+## ViewEncapsulation and Scoped Styles
+
+Angular scopes styles by default (similar to Vue's `scoped`). When scanning
+component styles:
+
+- Look for `:host` selectors — these style the component's root element
+- `::ng-deep` (deprecated but still used) — styles that pierce encapsulation
+- Repeated values across components indicate design system conventions
+
+## PrimeNG / Nebular / NG-ZORRO
+
+If component libraries are used:
+- **PrimeNG**: Theme SCSS in `node_modules/primeng/resources/themes/` —
+  look for custom theme or `styles.scss` overrides.
+- **Nebular**: `nb-theme()` in `styles.scss` with custom theme object.
+- **NG-ZORRO (Ant Design for Angular)**: `ng-zorro-antd.less` variables
+  or custom theme config in `angular.json`.
+
+## Responsive Patterns
+
+Check for:
+- `@media` queries in `styles.scss` and component styles
+- Angular CDK `BreakpointObserver` usage in components
+- Tailwind responsive prefixes if Tailwind is configured
+- Angular Flex-Layout directives (`fxLayout`, `fxFlex`) in templates
--- a/.agents/skills/stitch-extract-design-md/references/plain-css.md
+++ b/.agents/skills/stitch-extract-design-md/references/plain-css.md
@@ -0,0 +1,161 @@
+# Plain CSS / SASS / Less Extraction Patterns
+
+For projects without a JavaScript framework — static sites, WordPress
+themes, vanilla HTML/CSS, or CSS preprocessor-heavy projects.
+
+## File Discovery Order
+
+1. **`index.html` / `*.html`** — Check `<link>` tags and `<style>` blocks
+   for stylesheet references, inline styles, and font loading.
+
+2. **Main stylesheet** (`style.css`, `main.css`, `app.css`) — The primary
+   CSS file. Look for custom properties, base styles, and typography.
+
+3. **`_variables.scss` / `_tokens.scss` / `variables.less`** — Preprocessor
+   variable files containing design tokens.
+
+4. **`_mixins.scss`** — Reusable style patterns reveal design conventions.
+
+5. **Component/module stylesheets** — Individual CSS files for UI components.
+
+## CSS Custom Properties (Modern CSS)
+
+Modern vanilla CSS projects often define a design system via custom properties:
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #294056;
+  --color-bg: #FCFAFA;
+  --color-surface: #F5F5F5;
+  --color-text: #2C2C2C;
+  --color-text-secondary: #6B6B6B;
+  --color-border: #E0E0E0;
+  --color-success: #10B981;
+  --color-error: #EF4444;
+
+  /* Typography */
+  --font-heading: 'Manrope', sans-serif;
+  --font-body: 'Inter', sans-serif;
+  --font-size-base: 1rem;
+  --line-height-body: 1.7;
+
+  /* Spacing */
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 2rem;
+  --spacing-lg: 4rem;
+  --spacing-xl: 6rem;
+
+  /* Shapes */
+  --radius-button: 8px;
+  --radius-card: 12px;
+
+  /* Shadows */
+  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
+}
+```
+
+This is the cleanest source of truth. Extract directly and name each token.
+
+## SASS/SCSS Token Patterns
+
+```scss
+// _variables.scss
+$colors: (
+  'primary': #294056,
+  'background': #FCFAFA,
+  'surface': #F5F5F5,
+  'text': #2C2C2C,
+  'text-muted': #6B6B6B,
+);
+
+$font-stack-heading: 'Manrope', sans-serif;
+$font-stack-body: 'Inter', sans-serif;
+
+$breakpoints: (
+  'mobile': 768px,
+  'tablet': 1024px,
+  'desktop': 1280px,
+);
+
+$spacers: (
+  'section': 5rem,
+  'component': 2rem,
+  'element': 1rem,
+);
+```
+
+SASS maps are essentially design token dictionaries. Extract all values.
+
+## Less Variable Patterns
+
+```less
+@primary-color: #294056;
+@bg-color: #FCFAFA;
+@text-color: #2C2C2C;
+@font-heading: 'Manrope', sans-serif;
+@border-radius-base: 8px;
+```
+
+Same extraction approach — map each variable to a descriptive name and role.
+
+## Static Sites and WordPress
+
+For static sites or WordPress themes:
+
+- **WordPress**: Check `style.css` header comment for theme metadata.
+  Look for `wp-content/themes/<name>/assets/css/` for stylesheets.
+  `functions.php` may enqueue Google Fonts.
+- **Jekyll/Hugo**: Check `_sass/` or `assets/css/` directories.
+- **Static HTML**: Everything is in the CSS files and `<style>` blocks.
+
+## Inline Style Scanning
+
+For projects heavy on inline styles (legacy codebases, email templates):
+
+Search HTML files for `style="..."` attributes. Group unique values by
+property type:
+
+```
+background-color: #FCFAFA, #F5F5F5, #294056
+color: #2C2C2C, #6B6B6B, white
+border-radius: 8px, 12px
+font-family: 'Manrope', 'Inter'
+```
+
+Then deduplicate and assign roles.
+
+## Color Extraction Strategy
+
+When there's no explicit token system, you need to discover colors across
+all stylesheets. Search for:
+
+```
+background-color:
+background:
+color:
+border-color:
+border:
+outline-color:
+box-shadow:
+fill:
+stroke:
+```
+
+Collect all unique hex values, `rgb()`, `rgba()`, and `hsl()` values.
+Group by proximity (similar colors within a few shades) and assign roles
+based on context (which selectors use them).
+
+## Responsive Patterns
+
+Look for `@media` queries in all stylesheets. Common patterns:
+
+```css
+@media (max-width: 768px) { ... }   /* Mobile-first breakpoint */
+@media (min-width: 1024px) { ... }  /* Desktop enhancement */
+@media (prefers-color-scheme: dark) { ... } /* Dark mode support */
+```
+
+Document all breakpoints and the content strategy at each (column
+changes, padding adjustments, navigation transformations).
--- a/.agents/skills/stitch-extract-design-md/references/react-tailwind.md
+++ b/.agents/skills/stitch-extract-design-md/references/react-tailwind.md
@@ -0,0 +1,157 @@
+# React / Next.js / Tailwind Extraction Patterns
+
+This reference covers the most common frontend stack: React components with
+Tailwind CSS (and optionally CSS Modules, styled-components, or Emotion).
+
+## File Discovery Order
+
+Read these files in priority order — higher-priority files give you the
+intended design system, lower-priority files show what actually shipped:
+
+1. **`tailwind.config.js` / `tailwind.config.ts`** — The single most
+   important file. Custom `theme.extend.colors`, `fontFamily`, `spacing`,
+   `borderRadius`, and `screens` are the design system definition.
+
+2. **`globals.css` / `global.css` / `index.css`** — CSS custom properties
+   (`--*`), `@layer` directives, `@font-face` declarations, and base styles.
+
+3. **`theme.ts` / `theme.js` / `tokens.ts`** — Explicit design token files.
+   May export objects consumed by Tailwind config or CSS-in-JS providers.
+
+4. **`src/app/layout.tsx` or `src/App.tsx`** — Root layout. Shows the global
+   font setup (via `next/font` or `<link>`), body background, and overall
+   structure.
+
+5. **Component files (`*.tsx` / `*.jsx`)** — Look at 5-8 representative
+   components to understand usage patterns.
+
+## Tailwind Config Extraction
+
+The Tailwind config is structured and machine-readable. Extract directly:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: '#294056',      // → "Deep Muted Teal-Navy" — Primary CTA
+        background: '#FCFAFA',   // → "Warm Barely-There Cream" — Page BG
+      },
+      fontFamily: {
+        sans: ['Manrope', 'sans-serif'],
+      },
+      borderRadius: {
+        card: '12px',
+        button: '8px',
+      },
+      spacing: {
+        section: '5rem',
+      }
+    }
+  }
+}
+```
+
+Map each custom value to a descriptive name and role.
+
+## CSS Custom Properties
+
+Look for `:root` or `html` blocks in global CSS:
+
+```css
+:root {
+  --color-primary: #294056;
+  --color-bg: #FCFAFA;
+  --font-heading: 'Manrope', sans-serif;
+  --radius-card: 12px;
+  --spacing-section: 5rem;
+}
+```
+
+These are explicitly declared tokens — use their names as clues for
+their intended role.
+
+## Next.js Font Patterns
+
+Next.js uses `next/font` for optimized font loading:
+
+```tsx
+import { Inter, Playfair_Display } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-display' })
+```
+
+The `variable` names hint at usage: `--font-display` for headlines,
+`--font-inter` for body.
+
+## Component Scanning Strategy
+
+Don't read every component. Focus on these archetypes:
+
+| Component Type | What to Extract |
+|:---|:---|
+| Layout / Shell | Max-width, padding, grid structure |
+| Button / CTA | Border radius, colors, hover states, padding |
+| Card | Shadow, border, radius, internal spacing |
+| Nav / Header | Typography treatment, active states |
+| Form / Input | Border, focus state, padding |
+| Hero / Landing section | Spacing, typography scale, alignment |
+
+For each, look at the `className` prop for Tailwind classes or the
+`styled()` / `css()` calls for CSS-in-JS values.
+
+## CSS-in-JS Patterns (styled-components / Emotion)
+
+If the project uses CSS-in-JS, look for theme providers:
+
+```tsx
+// ThemeProvider wrapping the app
+const theme = {
+  colors: {
+    primary: '#294056',
+    background: '#FCFAFA',
+  },
+  fonts: {
+    heading: 'Manrope, sans-serif',
+  },
+  radii: {
+    card: '12px',
+    button: '8px',
+  }
+}
+```
+
+This theme object *is* the design system. Extract directly.
+
+## Component Library Integration
+
+If the project uses Chakra UI, Material UI, Ant Design, or shadcn/ui:
+
+- **Chakra**: Look for `extendTheme()` calls — these override defaults.
+- **MUI**: Look for `createTheme()` — palette, typography, and spacing overrides.
+- **Ant Design**: Look for `ConfigProvider` theme prop or `theme.ts` overrides.
+- **shadcn/ui**: Colors are defined as CSS custom properties in `globals.css`.
+  Check `components.json` for the style configuration.
+
+The overrides are the design system — default values are the library's generic
+styling and should be noted but not emphasized.
+
+## Responsive Patterns
+
+Check Tailwind's `screens` config and look for responsive class prefixes
+(`sm:`, `md:`, `lg:`, `xl:`) in components:
+
+```js
+screens: {
+  sm: '640px',   // Mobile landscape
+  md: '768px',   // Tablet
+  lg: '1024px',  // Desktop
+  xl: '1280px',  // Large desktop
+  '2xl': '1536px'
+}
+```
+
+Look for `container` configuration and `max-width` patterns on layout
+components to determine content width strategy.
--- a/.agents/skills/stitch-extract-design-md/references/svelte.md
+++ b/.agents/skills/stitch-extract-design-md/references/svelte.md
@@ -0,0 +1,101 @@
+# Svelte / SvelteKit Extraction Patterns
+
+Svelte co-locates styles even more tightly than Vue. Every `.svelte` file
+has a `<style>` block that is scoped by default. Design systems in Svelte
+projects typically live in global CSS, CSS custom properties, or a shared
+theme store.
+
+## File Discovery Order
+
+1. **`src/app.css` / `src/app.postcss`** — Global styles and CSS custom
+   properties. The most important file.
+
+2. **`svelte.config.js`** — May reference CSS preprocessors, Tailwind, or
+   UnoCSS configuration.
+
+3. **`tailwind.config.js`** (if Tailwind/UnoCSS) — Same extraction as React.
+
+4. **`src/lib/theme.ts` / `src/lib/tokens.ts`** — Shared design tokens
+   exported as JS objects.
+
+5. **`src/routes/+layout.svelte`** — Root layout. Shows global font loading,
+   background, and structural patterns.
+
+6. **Component `<style>` blocks** — Scoped styles revealing component patterns.
+
+## Svelte Component Style Patterns
+
+```svelte
+<script>
+  export let variant = 'primary'
+</script>
+
+<button class="btn btn-{variant}">
+  <slot />
+</button>
+
+<style>
+  .btn {
+    border-radius: 8px;
+    padding: 0.875rem 2rem;
+    font-weight: 500;
+    transition: all 250ms ease-in-out;
+  }
+
+  .btn-primary {
+    background-color: var(--color-primary);
+    color: white;
+  }
+
+  .btn-primary:hover {
+    filter: brightness(0.9);
+  }
+</style>
+```
+
+**Extraction points:**
+- Component props (like `variant`) reveal the intended variant system
+- `var(--*)` references → trace to `app.css`
+- Transition values reveal the interaction design philosophy
+
+## SvelteKit Layout Patterns
+
+- **`+layout.svelte`** at route root — Global header, footer, font loading
+- **`+layout.ts/js`** — May load theme data or tokens
+- **`$lib/`** directory — Reusable components and shared utilities
+
+## CSS Custom Properties Strategy
+
+Svelte projects heavily use CSS custom properties for theming:
+
+```css
+/* app.css */
+:root {
+  --color-primary: #294056;
+  --color-bg: #FCFAFA;
+  --color-surface: #F5F5F5;
+  --color-text: #2C2C2C;
+  --color-text-muted: #6B6B6B;
+
+  --font-heading: 'Manrope', sans-serif;
+  --font-body: 'Inter', sans-serif;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-full: 9999px;
+
+  --shadow-hover: 0 2px 8px rgba(0,0,0,0.06);
+  --spacing-section: 5rem;
+}
+```
+
+These variable names are highly intentional. Use them as the foundation
+of your design system extraction.
+
+## Skeleton UI / DaisyUI / Flowbite-Svelte
+
+If component libraries are used:
+- **Skeleton UI**: Theme defined in `tailwind.config.js` using Skeleton's
+  design token system. Look for custom theme config object.
+- **DaisyUI**: Theme in `tailwind.config.js` → `daisyui.themes` array.
+- **Flowbite-Svelte**: Standard Tailwind theming.
--- a/.agents/skills/stitch-extract-design-md/references/vue.md
+++ b/.agents/skills/stitch-extract-design-md/references/vue.md
@@ -0,0 +1,107 @@
+# Vue / Nuxt Extraction Patterns
+
+Vue projects have a distinctive styling architecture. Styles are often
+co-located with components inside `<style>` blocks, and Nuxt adds
+convention-based directories.
+
+## File Discovery Order
+
+1. **`nuxt.config.ts` / `nuxt.config.js`** — May contain global CSS paths,
+   font configuration, and Tailwind/UnoCSS module config.
+
+2. **`assets/css/main.css`** (or similar) — Global styles, CSS custom
+   properties, and font imports.
+
+3. **`tailwind.config.js`** (if Tailwind is used) — Same as React; extract
+   custom theme values directly.
+
+4. **`plugins/vuetify.ts`** (if Vuetify) — Theme definition with custom
+   palette and typography.
+
+5. **Component `<style>` blocks** — Co-located styles (scoped or global).
+
+## Single-File Component (SFC) Patterns
+
+Vue components bundle template, script, and style together:
+
+```vue
+<template>
+  <div class="card">
+    <h2 class="card__title">{{ title }}</h2>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  background: var(--color-surface);
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+
+.card__title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+</style>
+```
+
+**Key extraction points:**
+- `var(--*)` references → trace back to global CSS for the actual values
+- `scoped` styles → component-specific, but reveal consistent patterns
+- BEM naming (`.card__title`) → hints at component hierarchy
+
+## Vuetify Theme Extraction
+
+Vuetify projects define their design system explicitly:
+
+```ts
+// plugins/vuetify.ts
+export default createVuetify({
+  theme: {
+    defaultTheme: 'light',
+    themes: {
+      light: {
+        colors: {
+          primary: '#294056',
+          secondary: '#6B6B6B',
+          background: '#FCFAFA',
+          surface: '#F5F5F5',
+          error: '#EF4444',
+          success: '#10B981',
+        }
+      }
+    }
+  }
+})
+```
+
+This is the design system declaration. Map each key to a functional role
+and descriptive name.
+
+## Quasar / PrimeVue / Element Plus
+
+These component libraries use their own theming systems:
+
+- **Quasar**: `quasar.config.js` → `framework.config.brand` for colors
+- **PrimeVue**: CSS themes in `assets/` or theme preset configuration
+- **Element Plus**: SCSS variables in `element-variables.scss`
+
+Look for the override file — that's where the project's unique values live.
+
+## CSS Scoping Behavior
+
+Vue's `scoped` attribute adds data attributes for CSS isolation. When
+scanning for patterns, look at multiple components to find repeated values
+(same `border-radius`, similar `padding`, consistent color references).
+Repeated patterns across scoped styles = design system conventions.
+
+## Nuxt-Specific Patterns
+
+- **`app.vue`** or **`layouts/default.vue`** — Root layout, reveals
+  global background, font loading, and overall structure.
+- **`assets/`** — Global CSS, fonts, and images.
+- **`composables/`** — May contain `useTheme` or `useDesignTokens`.
+- **`nuxt.config.ts`** `css` array — Lists global stylesheets automatically
+  injected into every page.