@aexol/spectral 0.9.230 → 0.9.234

package/dist/designer/data/skills/critique.ts

@@ -0,0 +1,112 @@
+import type { DesignSkill } from "./design-skill.js";
+
+export const critique: DesignSkill = {
+    name: "critique",
+    scenario: "design",
+    description:
+      "5-dimension expert design review. Scores any HTML artifact on Philosophy Consistency, Visual Hierarchy, Detail Execution, Functionality, and Innovation (each 0-10). Outputs an HTML report with a radar chart, evidence-backed scores, and three action lists: Keep / Fix / Quick-wins.",
+    outputKind: "html",
+    workflow: `# Critique Skill · 5-Dimension Expert Review
+
+Produce a single-file HTML design review report that scores any artifact across 5 dimensions and proposes actionable fixes.
+
+## When to use
+- After generating an artifact (deck, prototype, landing page) and the user asks "what's wrong with this?" or "review this"
+- As a self-check loop before emitting output
+- For comparing two variants of the same design
+
+## The 5 Dimensions
+
+### 1. Philosophy Consistency
+> Does the artifact pick a clear direction and stick to it through every micro-decision?
+
+Look for: one declared design direction vs three styles fighting; chrome/kicker vocabulary in one register; accent/serif/mono used by the same rule throughout.
+0-4: Three styles fighting. 5-6: One direction but elements drift. 7-8: Coherent, occasional drift. 9-10: Every element argues for the same thesis.
+
+### 2. Visual Hierarchy
+> Can a stranger figure out what to read first, second, third — without being told?
+
+Look for: largest type = most important thing; mono/serif/sans roles match information roles; clear primary/secondary/tertiary tiers.
+0-4: Everything shouts. 5-6: Works on hero pages but breaks on body. 7-8: Clear tiers, occasional collision. 9-10: Eye moves with zero friction.
+
+### 3. Detail Execution
+> Alignment, leading, kerning at large sizes, image framing, edge-case spacing.
+
+Look for: big numbers on baseline or floating; left/right column tops aligned; proportions consistent across pages; orphaned <br> causing single-character lines.
+0-4: Visible tape and string. 5-6: Most pages clean, 1-2 ragged. 7-8: Polished, expert eye finds 2-3 misses. 9-10: Magazine-grade polish.
+
+### 4. Functionality
+> Does the artifact work for its intended use?
+
+Look for: keyboard/wheel/touch nav working in decks; CTAs above the fold; phone numbers tappable on mobile; code blocks copyable; critical info readable from 4m away.
+0-4: Visually fine but doesn't accomplish its job. 5-6: Core flow works, edge cases broken. 7-8: Robust through normal use. 9-10: Defensively engineered — handles iframe / fullscreen / paste / print.
+
+### 5. Innovation
+> Does this push past the median? Is there one element that makes people lean in?
+
+Look for: one unexpected layout/motion/typographic move not required; or 100% safe generic output; innovation earned (matches direction) or grafted on.
+0-4: Generic AI-slop median. 5-6: Competent and unmemorable. 7-8: One memorable moment, the rest solid. 9-10: Multiple moves you'd steal — each serving the thesis.
+
+## Scoring Discipline
+- **Always cite evidence** — "scored 4 because hero page mixes Playfair display with Inter sans on the same line" beats "feels inconsistent"
+- **Don't average up** — if Hierarchy is 5 because page 3 is broken, don't bump to 7 because pages 1-2 are fine. The score is the worst sustained band.
+- **Don't grade-inflate** — a 7 means strong, not acceptable. If every score is 7+, you're not reviewing critically.
+- **Innovation is allowed to be low** — 5/10 is fine for production deliverables.
+
+## Workflow
+
+### Step 1 — Acquire the artifact
+1. **Project file** — user said "review the index.html I just made": read it from the project folder.
+2. **Pasted HTML** — user pasted code in chat: read it from the message.
+3. **Self-critique** — you just emitted an artifact and want to self-critique: re-read your own output.
+
+### Step 2 — Read enough to score
+Skim the entire <style>, then read 6-8 representative content blocks. Do not score from intent alone — the score depends on executed design, not declared intent.
+
+### Step 3 — Score with evidence
+For each of the 5 dimensions, write the score and a 30-80 word evidence paragraph naming specific elements. Example:
+\`\`\`
+Dimension: Detail execution
+Score: 6 / 10
+Evidence: Stat-cards on page 3 align cleanly, but on page 8 the right column sits 2vh higher than the left because .callout has 3vh top margin while the figure doesn't. Image captions use mono on page 5 but sans on page 7 — pick one.
+\`\`\`
+
+### Step 4 — Build action lists
+- **Keep** (3-5 bullets) — concrete things working that the user must not break. Cite by class/page/element.
+- **Fix** (3-6 bullets) — must-do, ordered by visual cost saved per minute. Each bullet ≤ 1 sentence.
+- **Quick wins** (3-5 bullets) — 5-15 minutes each, high signal-to-noise.
+
+### Step 5 — Emit the report HTML
+Build a single file with:
+- Header: artifact name + date + reviewer + 1-line verdict
+- Big radar chart (inline SVG, no library)
+- 5 dimension cards in a 1-column or 2-column grid
+- Three action lists at the bottom with checkbox affordance
+
+Use the active design system tokens if one exists; otherwise default to a neutral light theme (white background, near-black text, one accent for radar fill).
+
+## Radar Chart SVG Template
+\`\`\`svg
+<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+  <!-- Pentagon grid lines -->
+  <polygon points="200,40 352,152 294,340 106,340 48,152" fill="none" stroke="#e0e0e0" stroke-width="1"/>
+  <polygon points="200,80 314,166 267,306 133,306 86,166" fill="none" stroke="#e0e0e0" stroke-width="1"/>
+  <polygon points="200,120 276,180 240,272 160,272 124,180" fill="none" stroke="#e0e0e0" stroke-width="1"/>
+  <!-- Score polygon (fill with accent at 20% opacity) -->
+  <polygon points="..." fill="var(--accent, #3B82F6)" fill-opacity="0.2" stroke="var(--accent, #3B82F6)" stroke-width="2"/>
+  <!-- Labels at each vertex -->
+  <text x="200" y="30" text-anchor="middle" font-size="11">Philosophy</text>
+  <text x="360" y="155" text-anchor="start" font-size="11">Hierarchy</text>
+  <text x="300" y="355" text-anchor="middle" font-size="11">Detail</text>
+  <text x="100" y="355" text-anchor="middle" font-size="11">Function</text>
+  <text x="40" y="155" text-anchor="end" font-size="11">Innovation</text>
+</svg>
+\`\`\`
+
+## Hard Rules
+- **5 scores, every time** — partial reports are not allowed.
+- **Evidence per score** — no "feels off" / "needs work". If you can't cite an element, the score is not justified.
+- **Don't grade-inflate** — overall mean above 8 is suspicious.
+- **Single-file HTML only** — no external CSS/JS. Inline everything.
+- **Radar chart is mandatory** — gives the report a recognizable silhouette.`,
+  };

package/dist/designer/data/skills/dashboard.d.ts

@@ -0,0 +1,3 @@
+import type { DesignSkill } from "./design-skill.js";
+export declare const dashboard: DesignSkill;
+//# sourceMappingURL=dashboard.d.ts.map

package/dist/designer/data/skills/dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/dashboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,WAqKrB,CAAC"}

package/dist/designer/data/skills/dashboard.js

@@ -0,0 +1,165 @@
+export const dashboard = {
+    name: "dashboard",
+    scenario: "design",
+    description: "Data dashboard with cards, charts, tables, and KPIs. Clean information hierarchy with grid layout.",
+    outputKind: "html",
+    workflow: `# Dashboard Skill
+
+Produce a data dashboard as a single HTML file. Card-based layout with KPIs, charts (CSS-only or SVG), tables, and activity feeds.
+
+## Phase 0 — Pre-flight
+
+1. Read the design system. Dashboards work best with clean, muted systems (Linear, Notion, Vercel).
+2. Determine: dashboard name, key metrics, sections needed.
+3. Vocalize: "I'll build a [name] dashboard with [N] sections: [section names]."
+
+## Phase 1 — Shell
+
+Create \`dashboard.html\` with sidebar + main content layout:
+
+\`\`\`html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Dashboard</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+    :root {
+      --sidebar-w: 240px;
+      /* Design system tokens */
+    }
+
+    body {
+      display: flex;
+      min-height: 100vh;
+      font-family: var(--font-sans);
+      background: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+    }
+
+    .sidebar {
+      width: var(--sidebar-w);
+      background: var(--color-bg-primary);
+      border-right: 1px solid var(--color-border);
+      padding: 24px 16px;
+      display: flex;
+      flex-direction: column;
+      position: sticky;
+      top: 0;
+      height: 100vh;
+    }
+    .sidebar-logo { font-size: 18px; font-weight: 700; margin-bottom: 32px; }
+    .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
+    .sidebar-link {
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      cursor: pointer;
+    }
+    .sidebar-link:hover, .sidebar-link.active { background: var(--color-bg-hover, rgba(0,0,0,0.04)); color: var(--color-text-primary); }
+
+    .main {
+      flex: 1;
+      padding: 32px;
+      overflow-y: auto;
+    }
+    .main-header { margin-bottom: 32px; }
+    .main-header h1 { font-size: 28px; font-weight: 700; }
+    .main-header p { color: var(--color-text-secondary); margin-top: 4px; }
+  </style>
+</head>
+<body>
+  <aside class="sidebar">
+    <div class="sidebar-logo">Dashboard</div>
+    <nav class="sidebar-nav">
+      <a class="sidebar-link active">Overview</a>
+      <a class="sidebar-link">Analytics</a>
+      <a class="sidebar-link">Reports</a>
+      <a class="sidebar-link">Settings</a>
+    </nav>
+  </aside>
+  <main class="main">
+    <div class="main-header">
+      <h1>Overview</h1>
+      <p>Last updated: just now</p>
+    </div>
+    <!-- Content sections here -->
+  </main>
+</body>
+</html>
+\`\`\`
+
+## Phase 2 — Component Patterns
+
+### KPI Cards (4-up row)
+\`\`\`css
+.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
+.kpi-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 8px); padding: 20px; }
+.kpi-label { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+.kpi-value { font-size: 32px; font-weight: 700; margin-top: 8px; }
+.kpi-change { font-size: 13px; margin-top: 4px; }
+.kpi-change.up { color: var(--color-success, #30a46c); }
+.kpi-change.down { color: var(--color-danger, #e5484d); }
+\`\`\`
+
+### Chart (CSS-only bar chart)
+\`\`\`css
+.chart-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 8px); padding: 24px; margin-bottom: 24px; }
+.chart-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
+.bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding-top: 8px; }
+.bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--color-accent); min-height: 4px; position: relative; transition: height 0.3s; }
+.bar:hover { opacity: 0.8; }
+.bar-label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--color-text-secondary); }
+\`\`\`
+
+### Table
+\`\`\`css
+.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+.data-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--color-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--color-border); }
+.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
+.data-table tr:hover td { background: var(--color-bg-hover, rgba(0,0,0,0.02)); }
+\`\`\`
+
+### Activity Feed
+\`\`\`css
+.activity-feed { display: flex; flex-direction: column; }
+.activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
+.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); margin-top: 6px; flex-shrink: 0; }
+.activity-content { flex: 1; }
+.activity-text { font-size: 14px; }
+.activity-time { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
+\`\`\`
+
+## Phase 3 — Layout Patterns
+
+### Two-column main area
+\`\`\`css
+.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
+\`\`\`
+
+### Responsive
+\`\`\`css
+@media (max-width: 1200px) {
+  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
+  .dashboard-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 768px) {
+  .sidebar { display: none; }
+  .main { padding: 16px; }
+  .kpi-grid { grid-template-columns: 1fr; }
+}
+\`\`\`
+
+## Phase 4 — Dashboard Design Rules
+
+- Information hierarchy: KPIs → Main chart → Detail tables → Activity
+- Use consistent card padding (24px)
+- Numbers should be right-aligned in table columns
+- Color code only the most important KPI change (1-2 per row max)
+- Tables: max 6 columns, zebra striping optional, hover row highlight`,
+};

package/dist/designer/data/skills/dashboard.ts

@@ -0,0 +1,168 @@
+import type { DesignSkill } from "./design-skill.js";
+
+export const dashboard: DesignSkill = {
+    name: "dashboard",
+    scenario: "design",
+    description:
+      "Data dashboard with cards, charts, tables, and KPIs. Clean information hierarchy with grid layout.",
+    outputKind: "html",
+    workflow: `# Dashboard Skill
+
+Produce a data dashboard as a single HTML file. Card-based layout with KPIs, charts (CSS-only or SVG), tables, and activity feeds.
+
+## Phase 0 — Pre-flight
+
+1. Read the design system. Dashboards work best with clean, muted systems (Linear, Notion, Vercel).
+2. Determine: dashboard name, key metrics, sections needed.
+3. Vocalize: "I'll build a [name] dashboard with [N] sections: [section names]."
+
+## Phase 1 — Shell
+
+Create \`dashboard.html\` with sidebar + main content layout:
+
+\`\`\`html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Dashboard</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+    :root {
+      --sidebar-w: 240px;
+      /* Design system tokens */
+    }
+
+    body {
+      display: flex;
+      min-height: 100vh;
+      font-family: var(--font-sans);
+      background: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+    }
+
+    .sidebar {
+      width: var(--sidebar-w);
+      background: var(--color-bg-primary);
+      border-right: 1px solid var(--color-border);
+      padding: 24px 16px;
+      display: flex;
+      flex-direction: column;
+      position: sticky;
+      top: 0;
+      height: 100vh;
+    }
+    .sidebar-logo { font-size: 18px; font-weight: 700; margin-bottom: 32px; }
+    .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
+    .sidebar-link {
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      cursor: pointer;
+    }
+    .sidebar-link:hover, .sidebar-link.active { background: var(--color-bg-hover, rgba(0,0,0,0.04)); color: var(--color-text-primary); }
+
+    .main {
+      flex: 1;
+      padding: 32px;
+      overflow-y: auto;
+    }
+    .main-header { margin-bottom: 32px; }
+    .main-header h1 { font-size: 28px; font-weight: 700; }
+    .main-header p { color: var(--color-text-secondary); margin-top: 4px; }
+  </style>
+</head>
+<body>
+  <aside class="sidebar">
+    <div class="sidebar-logo">Dashboard</div>
+    <nav class="sidebar-nav">
+      <a class="sidebar-link active">Overview</a>
+      <a class="sidebar-link">Analytics</a>
+      <a class="sidebar-link">Reports</a>
+      <a class="sidebar-link">Settings</a>
+    </nav>
+  </aside>
+  <main class="main">
+    <div class="main-header">
+      <h1>Overview</h1>
+      <p>Last updated: just now</p>
+    </div>
+    <!-- Content sections here -->
+  </main>
+</body>
+</html>
+\`\`\`
+
+## Phase 2 — Component Patterns
+
+### KPI Cards (4-up row)
+\`\`\`css
+.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
+.kpi-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 8px); padding: 20px; }
+.kpi-label { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+.kpi-value { font-size: 32px; font-weight: 700; margin-top: 8px; }
+.kpi-change { font-size: 13px; margin-top: 4px; }
+.kpi-change.up { color: var(--color-success, #30a46c); }
+.kpi-change.down { color: var(--color-danger, #e5484d); }
+\`\`\`
+
+### Chart (CSS-only bar chart)
+\`\`\`css
+.chart-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 8px); padding: 24px; margin-bottom: 24px; }
+.chart-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
+.bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding-top: 8px; }
+.bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--color-accent); min-height: 4px; position: relative; transition: height 0.3s; }
+.bar:hover { opacity: 0.8; }
+.bar-label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--color-text-secondary); }
+\`\`\`
+
+### Table
+\`\`\`css
+.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+.data-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--color-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--color-border); }
+.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
+.data-table tr:hover td { background: var(--color-bg-hover, rgba(0,0,0,0.02)); }
+\`\`\`
+
+### Activity Feed
+\`\`\`css
+.activity-feed { display: flex; flex-direction: column; }
+.activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
+.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); margin-top: 6px; flex-shrink: 0; }
+.activity-content { flex: 1; }
+.activity-text { font-size: 14px; }
+.activity-time { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
+\`\`\`
+
+## Phase 3 — Layout Patterns
+
+### Two-column main area
+\`\`\`css
+.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
+\`\`\`
+
+### Responsive
+\`\`\`css
+@media (max-width: 1200px) {
+  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
+  .dashboard-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 768px) {
+  .sidebar { display: none; }
+  .main { padding: 16px; }
+  .kpi-grid { grid-template-columns: 1fr; }
+}
+\`\`\`
+
+## Phase 4 — Dashboard Design Rules
+
+- Information hierarchy: KPIs → Main chart → Detail tables → Activity
+- Use consistent card padding (24px)
+- Numbers should be right-aligned in table columns
+- Color code only the most important KPI change (1-2 per row max)
+- Tables: max 6 columns, zebra striping optional, hover row highlight`,
+  };

package/dist/designer/data/skills/design-brief.d.ts

@@ -0,0 +1,3 @@
+import type { DesignSkill } from "./design-skill.js";
+export declare const designBrief: DesignSkill;
+//# sourceMappingURL=design-brief.d.ts.map

package/dist/designer/data/skills/design-brief.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-brief.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/design-brief.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,WAAW,EAAE,WA6IvB,CAAC"}

package/dist/designer/data/skills/design-brief.js

@@ -0,0 +1,141 @@
+export const designBrief = {
+    name: "design-brief",
+    scenario: "design",
+    description: "Parse a design brief into concrete tokens. Resolves 8 design dimensions (palette, accent, typography, display, layout, mood, density, constraints) from natural language or I-Lang structured format, then generates a DESIGN.md and visual preview.",
+    outputKind: "html",
+    workflow: `# Design Brief Skill
+
+Parse a structured or natural-language design brief into a concrete DESIGN.md and optional visual preview HTML.
+
+## Background
+
+This skill resolves the 8 key design dimensions that every design artifact needs, using a closed vocabulary of symbolic values that map to concrete CSS tokens. It eliminates ambiguity from vague requests like "make it clean" or "make it professional."
+
+## Phase 1 — Accept input
+
+The user provides a design brief in one of two formats:
+
+### Option A: I-Lang structured brief
+\`\`\`
+[PLAN:@DESIGN|type=saas_landing]
+  |palette=navy_and_white|accent=coral
+  |typography=inter|display=space_grotesk
+  |layout=single_column|max_width=1200px
+  |mood=professional_minimal
+  |density=spacious|section_gap=96px
+  |hero=headline+subhead+cta
+  |sections=features,pricing,testimonials,footer
+  |exclude=animations,parallax,gradients
+  |responsive=mobile_first
+\`\`\`
+
+### Option B: Natural language
+> "I need a landing page for a developer tool. Clean, minimal, dark mode. Inter font. No flashy animations."
+
+If the user provides Option B, convert it using the mapping table below, then proceed.
+
+### Natural language → I-Lang mapping
+
+| Natural language phrase | Dimension | I-Lang value |
+|------------------------|-----------|-------------|
+| "dark mode", "dark theme" | palette | \`monochrome_dark\` |
+| "light", "white background" | palette | \`light_clean\` |
+| "earthy", "warm tones" | palette | \`earth_tones\` |
+| "pop of color", "vibrant" | accent | \`electric_blue\` or \`coral\` |
+| "subtle accent" | accent | \`muted_sage\` or \`slate\` |
+| "clean", "minimal", "simple" | mood | \`professional_minimal\` |
+| "playful", "fun", "friendly" | mood | \`playful\` |
+| "bold", "brutalist", "raw" | mood | \`brutalist\` |
+| "editorial", "magazine-like" | mood | \`editorial\` |
+| "spacious", "lots of whitespace" | density | \`spacious\` |
+| "compact", "dense", "information-rich" | density | \`compact\` |
+| "Inter", "system font" | typography | \`inter\` or \`system_ui\` |
+| "serif", "traditional" | typography | \`georgia\` or \`playfair\` |
+| "monospace", "code-like" | typography | \`jetbrains_mono\` |
+| "no animations", "static" | exclude | \`animations\` |
+| "no gradients" | exclude | \`gradients\` |
+| "single page" | layout | \`single_column\` |
+| "two columns", "sidebar" | layout | \`two_column\` |
+| "mobile first" | responsive | \`mobile_first\` |
+
+## Phase 2 — Validate 8 dimensions
+
+Every design brief must resolve these 8 dimensions. If any are missing, select sensible defaults:
+
+| # | Dimension | Key | Example values |
+|---|-----------|-----|---------------|
+| 1 | Color palette | \`palette\` | navy_and_white, earth_tones, monochrome_dark, light_clean |
+| 2 | Accent color | \`accent\` | coral, electric_blue, emerald, muted_sage, slate |
+| 3 | Body typography | \`typography\` | inter, system_ui, dm_sans, georgia |
+| 4 | Display typography | \`display\` | space_grotesk, clash_display, same_as_body, playfair |
+| 5 | Layout model | \`layout\` | single_column, two_column, asymmetric |
+| 6 | Mood | \`mood\` | professional_minimal, playful, brutalist, editorial |
+| 7 | Density | \`density\` | compact, balanced, spacious |
+| 8 | Constraints | \`exclude\` | animations, gradients, stock_photos, carousel |
+
+### Symbolic → concrete token resolution
+
+| Symbolic value | Concrete tokens |
+|---------------|----------------|
+| \`palette=navy_and_white\` | Background: #0F172A, Surface: #1E293B, Text: #F8FAFC, Secondary: #94A3B8 |
+| \`palette=monochrome_dark\` | Background: #09090B, Surface: #18181B, Text: #FAFAFA, Secondary: #A1A1AA |
+| \`palette=light_clean\` | Background: #FFFFFF, Surface: #F8FAFC, Text: #0F172A, Secondary: #64748B |
+| \`palette=earth_tones\` | Background: #FFFBEB, Surface: #FEF3C7, Text: #451A03, Secondary: #92400E |
+| \`accent=coral\` | Accent: #F97316, Hover: #EA580C |
+| \`accent=electric_blue\` | Accent: #3B82F6, Hover: #2563EB |
+| \`accent=emerald\` | Accent: #10B981, Hover: #059669 |
+| \`accent=muted_sage\` | Accent: #84A98C, Hover: #6B8F73 |
+| \`accent=slate\` | Accent: #64748B, Hover: #475569 |
+| \`density=compact\` | Section spacing: 48px, Content padding: 16px/24px |
+| \`density=balanced\` | Section spacing: 72px, Content padding: 24px/40px |
+| \`density=spacious\` | Section spacing: 96px, Content padding: 24px/48px |
+
+### Default resolution rules
+
+| Unspecified dimension | Default rule |
+|----------------------|-------------|
+| \`palette\` | If mood=editorial → \`light_clean\`. If mood=brutalist → \`monochrome_dark\`. Else → \`light_clean\`. |
+| \`accent\` | If palette is dark → \`coral\`. If palette is light → \`electric_blue\`. |
+| \`typography\` | Always → \`inter\` (highest cross-platform legibility). |
+| \`display\` | If mood=editorial → \`playfair\`. If mood=brutalist → \`space_grotesk\`. Else → \`same_as_body\`. |
+| \`layout\` | Always → \`single_column\`. |
+| \`mood\` | Always → \`professional_minimal\`. |
+| \`density\` | Always → \`balanced\`. |
+| \`exclude\` | Always → none (no constraints unless specified). |
+
+## Phase 3 — Generate DESIGN.md
+
+Produce a DESIGN.md with these sections:
+1. **Visual Theme & Atmosphere** — mood, feel, references
+2. **Color Palette & Roles** — background, surface, text, accent, semantic colors
+3. **Typography Rules** — display, body, mono font specs with sizes
+4. **Component Stylings** — buttons, cards, inputs with concrete CSS values
+5. **Layout Principles** — max width, grid, section spacing, content padding
+6. **Depth & Elevation** — shadows, borders
+7. **Do's and Don'ts** — 5-6 rules for agents
+8. **Responsive Behavior** — breakpoints at 640px, 768px, 1024px, 1280px
+9. **Agent Prompt Guide** — constraints for code generation
+
+All color hex values, font stacks, and spacing values must come from the resolved tokens in Phase 2 — do not invent values.
+
+## Phase 4 — Generate brief-preview.html
+
+Create a single HTML file visualizing the resolved tokens with 4 sections:
+1. **Color palette swatches** — labeled with role and hex code
+2. **Typography specimens** — Display, Body, and Mono at declared sizes
+3. **Spacing ruler** — section spacing and content padding, labeled
+4. **Component preview** — 2-3 live components (button, card, input) using the resolved tokens
+
+Style the preview itself with the resolved design system tokens.
+
+## Phase 5 — Report defaults applied
+
+List any dimensions the user did not specify and the defaults applied:
+\`\`\`
+Dimensions resolved from defaults:
+- display: set to "same_as_body" (rule: mood=professional_minimal → same_as_body)
+- density: set to "balanced" (rule: no spacing preference given)
+\`\`\`
+
+This transparency prevents silent assumptions from propagating into the final design.`,
+};