import type { DesignSkill } from "./design-skill.js";

export const designBrief: DesignSkill = {
    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.`,
  };