@damiangilgonzalez/harness 1.3.7

package/skills/ingeniero-diseno-web/references/critique-guide.md

@@ -0,0 +1,226 @@
+# Critique Mode — Detailed Reference
+
+Read this when running Step 7 of the workflow (user asked for review, or self-check before delivery). The main `SKILL.md` already covers the **5 dimensions and output format**. This file provides **scoring rubrics, per-output-type weighting, and the common-issue catalog**.
+
+**Critique the design, not the designer.** Be specific, actionable, and grounded in design language — not vague taste claims.
+
+---
+
+## The Five Dimensions — Detailed Rubrics
+
+### 1. Philosophy Alignment
+
+How well does every detail trace back to the chosen design direction (Pentagram-style information architecture, Kenya Hara-style minimalism, etc.)?
+
+| Score | Standard |
+|---|---|
+| 9–10 | Every detail embodies the chosen philosophy; nothing reads as "borrowed from elsewhere" |
+| 7–8 | Direction is correct, signature traits land, 1–2 minor drift moments |
+| 5–6 | Intent visible, but mixed-in foreign elements dilute purity (e.g., "minimalism" with 6 cards per row) |
+| 3–4 | Surface mimicry only; the underlying values aren't understood |
+| 1–2 | No discernible relationship to any stated direction |
+
+**What to look for**:
+- Are signature moves of the chosen designer/studio actually present?
+- Do color, type, layout, motion all agree on the same philosophy?
+- Any "self-contradicting" elements? (Picked Kenya Hara then crammed the page full → contradiction)
+
+### 2. Visual Hierarchy
+
+Does the eye flow where the designer intends?
+
+| Score | Standard |
+|---|---|
+| 9–10 | Eye flows naturally along the intended path; zero friction reading the information |
+| 7–8 | Primary/secondary clear; 1–2 spots where hierarchy is muddy |
+| 5–6 | Title vs. body distinguishable, but middle layers (subtitles, captions) collapse together |
+| 3–4 | Information sits flat with no clear entry point |
+| 1–2 | Chaotic — viewer doesn't know where to look first |
+
+**What to look for**:
+- Title vs. body size ratio ≥ 2.5× (ideally 4–6× for hero)?
+- Color / weight / size building 3–4 clear levels?
+- Whitespace actively guiding the eye?
+- **Squint test**: squint at the screen — is the hierarchy still legible?
+
+### 3. Craft Quality
+
+Pixel-level execution: alignment, spacing, color discipline.
+
+| Score | Standard |
+|---|---|
+| 9–10 | Pixel-perfect; alignment, spacing, color all flawless |
+| 7–8 | Refined overall; 1–2 minor alignment or spacing issues |
+| 5–6 | Basically aligned, but spacing is inconsistent and color use is unsystematic |
+| 3–4 | Obvious alignment errors, chaotic spacing, too many colors |
+| 1–2 | Sloppy — looks like a draft |
+
+**What to look for**:
+- Consistent spacing system (8pt grid: 8 / 16 / 24 / 32 / 48 / 64)?
+- Same-class elements use identical spacing?
+- Color count controlled (typically ≤ 4 — primary + accent + neutral scale + 1 emphasis)?
+- Font families ≤ 2 (1 display + 1 body)?
+- Edges align precisely?
+
+### 4. Functionality
+
+Does each element earn its place?
+
+| Score | Standard |
+|---|---|
+| 9–10 | Every element serves a goal; zero redundancy |
+| 7–8 | Function-led overall, with minor decoration that could be cut |
+| 5–6 | Usable, but obvious decorative elements compete for attention |
+| 3–4 | Form > function; users have to work to find information |
+| 1–2 | Decoration drowns the content's ability to communicate |
+
+**What to look for**:
+- The deletion test: "If I delete this element, does the design get worse?" If no → delete
+- Is the CTA / key information in the most prominent position?
+- Anything added "because it looked good"?
+- Is the information density appropriate for the medium? (PPT sparse; PDF can be denser; landing page conversion-focused)
+
+### 5. Originality
+
+Avoids clichés while staying coherent within the philosophy.
+
+| Score | Standard |
+|---|---|
+| 9–10 | Refreshing; finds a unique expression *within* the chosen philosophy |
+| 7–8 | Has its own ideas; not template-by-numbers |
+| 5–6 | Average; reads as a template execution |
+| 3–4 | Heavy use of clichés (gradient orbs for "AI", chat bubbles for "conversation") |
+| 1–2 | Pure template / stock-asset assembly |
+
+**What to look for**:
+- Has it avoided the AI-slop list (purple gradients, emoji icons, left-border accent cards, Inter as display)?
+- Is there at least one "unexpected but right" decision?
+- Any element that screams "made by AI"?
+
+---
+
+## Per-Output-Type Weighting
+
+Different outputs need different priorities. When scoring, weight these dimensions higher for each context:
+
+| Output type | Most important | Secondary | Can relax |
+|---|---|---|---|
+| Landing page / marketing site | Functionality, Visual hierarchy | Originality | — (must be all-around) |
+| Dashboard / data product | Functionality, Craft quality | Visual hierarchy | Originality (clarity wins) |
+| HTML slide deck | Visual hierarchy, Functionality | Craft | Originality (legibility wins) |
+| Mobile app prototype | Functionality, Craft | Visual hierarchy | Philosophy alignment (usability wins) |
+| Brand launch animation / hero film | Originality, Visual hierarchy | Philosophy | Functionality (it's the moment, not the form) |
+| Editorial / portfolio | Originality, Philosophy | Visual hierarchy | Functionality (vibe matters most) |
+| Documentation site | Functionality, Visual hierarchy | Craft | Originality (find-the-answer wins) |
+| Interactive prototype for user testing | Functionality, Visual hierarchy | Craft | Originality (testing the flow, not the look) |
+
+---
+
+## Common Issues — Top 10 Catalog
+
+Use these as a checklist when running a critique. Each entry has the issue, why it matters, and the fix.
+
+### 1. AI-tech cliché
+**Issue**: Gradient orbs, digital rain, blue circuit boards, robot faces
+**Why it's a problem**: Audience is exhausted by these — your product becomes indistinguishable
+**Fix**: Use abstract metaphors instead of literal symbols (e.g., a "conversation" metaphor instead of a chat bubble icon)
+
+### 2. Insufficient type-size hierarchy
+**Issue**: Title and body are too similar in size (< 2.5×)
+**Why**: Users can't find key information quickly
+**Fix**: Title at least 3× body (16px body → 48–64px title; for hero, 6× is normal)
+
+### 3. Too many colors
+**Issue**: 5+ colors in use without a clear primary/secondary structure
+**Why**: Visual chaos; weak brand identity
+**Fix**: Limit to 1 primary + 1 secondary + 1 accent + grayscale; everything else has to justify itself
+
+### 4. Inconsistent spacing
+**Issue**: Element spacing chosen ad-hoc with no system
+**Why**: Reads as unprofessional; visual rhythm broken
+**Fix**: Adopt an 8pt grid (only use spacing values from {8, 16, 24, 32, 48, 64, 96})
+
+### 5. Insufficient whitespace
+**Issue**: Every region is filled with content
+**Why**: Cognitive overload reduces information transfer; dense ≠ informative
+**Fix**: Whitespace should be at least 40% of total area (60%+ for minimalist)
+
+### 6. Too many fonts
+**Issue**: 3+ font families in use
+**Why**: Visual noise; weakens unity
+**Fix**: At most 2 (1 display + 1 body); use weight and size variation for richness
+
+### 7. Inconsistent alignment
+**Issue**: Mixed left-, center-, and right-aligned blocks
+**Why**: Breaks visual order
+**Fix**: Pick one alignment (typically left) and apply globally; centered alignment only for hero / pull-quote moments
+
+### 8. Decoration eclipses content
+**Issue**: Background patterns / gradients / shadows steal focus from primary content
+**Why**: Inverts the priority — users came for information, not for decoration
+**Fix**: Apply the deletion test: "if I remove this decoration, does the design get worse?" If no → remove
+
+### 9. Cyber-neon overuse
+**Issue**: Dark navy `#0D1117` + neon-glow accents
+**Why**: This is the GitHub-dark / "AI dev tool" cliché — every clone looks the same
+**Fix**: Pick a more distinctive palette; if dark mode is mandatory, choose a non-default base (deep warm gray, near-black with hint of color)
+
+### 10. Information density mismatched to medium
+**Issue**: A wall of text on a slide; 10 elements crammed into a social cover
+**Why**: Different media have different optimal density
+**Fix**:
+- Slides: 1 core idea per page
+- Cover image: 1 visual focal point
+- Infographic: layered (overview → detail)
+- PDF / docs: can be dense, but needs clear navigation
+
+---
+
+## Output Template (copy this when delivering a critique)
+
+```markdown
+## Design Critique
+
+**Overall: X.X / 10** [Excellent (8+) / Good (6–7.9) / Needs work (4–5.9) / Failing (<4)]
+
+**By dimension**:
+- Philosophy alignment: X / 10 — [one-sentence reason]
+- Visual hierarchy: X / 10 — [one-sentence reason]
+- Craft quality: X / 10 — [one-sentence reason]
+- Functionality: X / 10 — [one-sentence reason]
+- Originality: X / 10 — [one-sentence reason]
+
+### Keep
+- [Specific things done well, in design language — not "the colors are nice", say "the muted terracotta against warm off-white reads as confident and editorial"]
+
+### Fix (sorted by severity)
+
+**1. [Issue name]** — ⚠️ Critical / ⚡ Important / 💡 Polish
+- Current: [what it looks like now]
+- Why: [why it's a problem, anchored in a principle above]
+- Fix: [concrete change with specific values — "increase title size from 32px to 56px", not "make titles bigger"]
+
+**2. [Issue name]** — ⚠️ / ⚡ / 💡
+…
+
+### Quick Wins (top 3 if you only have 5 minutes)
+- [ ] [Highest-impact change that takes the least time]
+- [ ] [Second]
+- [ ] [Third]
+```
+
+---
+
+## Critique Anti-Patterns
+
+❌ **Vague taste claims**: "the colors are off" → bad. "The accent saturation is too high — at oklch(0.65 0.25 25) it competes with the primary; reduce to 0.18 chroma to subordinate it" → good.
+
+❌ **Praise without specifics**: "looks great!" provides zero learning. Always say *what* is great and *why*.
+
+❌ **Mixing severity**: putting a critical hierarchy bug next to a polish-level color tweak in the same list. Always sort by ⚠️ → ⚡ → 💡.
+
+❌ **More than 7 fix items**: cognitive overload. If there are more, group them — "five spacing inconsistencies" as one item, not five.
+
+❌ **Critiquing without grounding**: every "Fix" should reference a principle (hierarchy, craft, philosophy, etc.) so the user understands the *why*, not just the *what*.
+
+❌ **Critiquing the designer instead of the design**: "you didn't think this through" is unhelpful and not the agent's role. "This element doesn't earn its place — consider removing" is the right framing.

package/skills/ingeniero-diseno-web/references/design-calibration.md

@@ -0,0 +1,136 @@
+# Design Calibration
+
+Use this reference after gathering context and before declaring the design system. Its purpose is to turn a brief into visible decisions, not to decorate the response with scores.
+
+## Contents
+
+1. Design Read
+2. Five Dials
+3. Presets
+4. Resolve Conflicts
+5. Optional Image-First Branch
+6. Completion Test
+
+## 1. Design Read
+
+Write a compact read containing:
+
+- **Artifact**: landing page, dashboard, prototype, slide deck, visualization, campaign page, and so on.
+- **Audience**: who must understand, trust, or act.
+- **Visual language**: a specific family such as restrained builder SaaS, kinetic editorial, warm humanist, or institutional data-first. Avoid empty labels such as “modern” or “clean.”
+- **Mode**: greenfield, extension, redesign-preserve, or redesign-overhaul.
+- **Constraints**: brand, accessibility, platform, viewport, content, deadline, and supplied assets.
+
+If two plausible readings would produce materially different work, ask one focused question. Otherwise state the read and proceed.
+
+## 2. Five Dials
+
+Use whole numbers from 1 to 10.
+
+### Visual Variance
+
+Controls compositional departure from familiar patterns.
+
+| Band | Behavior |
+|---|---|
+| 1–3 | Stable grids, symmetry, familiar navigation, low surprise |
+| 4–6 | One or two asymmetric moves, varied section rhythm, controlled novelty |
+| 7–8 | Strong art direction, off-grid moments, multiple layout families |
+| 9–10 | Experimental composition; use only when comprehension and brand permit |
+
+### Motion Intensity
+
+Controls how much meaning is carried through time.
+
+| Band | Behavior |
+|---|---|
+| 1–2 | Static; state feedback only |
+| 3–4 | Hover, focus, short entry transitions |
+| 5–7 | Sequenced reveals, state choreography, restrained scroll response |
+| 8–10 | Cinematic transitions, pinning, scrubbing, spatial storytelling |
+
+Every animation must communicate hierarchy, feedback, causality, or narrative. Honor reduced motion whenever motion exceeds simple state feedback.
+
+### Information Density
+
+Controls useful information per viewport, not visual clutter.
+
+| Band | Behavior |
+|---|---|
+| 1–3 | Gallery-like, one dominant idea, generous pauses |
+| 4–6 | Balanced marketing/product density |
+| 7–8 | Analytical, operational, comparison-heavy |
+| 9–10 | Cockpit-like; requires strong grouping, scanning, and progressive disclosure |
+
+### Asset Dependence
+
+Controls how much the result relies on real imagery, screenshots, illustration, identity assets, or generated visual references.
+
+| Band | Behavior |
+|---|---|
+| 1–3 | Typography, data, or interface structure can carry the artifact |
+| 4–6 | A few key visuals materially improve recognition or explanation |
+| 7–10 | The product, brand, campaign, or story fails without high-fidelity assets |
+
+At 7+, inventory assets before layout. Do not hide missing assets with decorative CSS.
+
+### Brand Fidelity
+
+Controls how strictly existing identity and interaction language must be preserved.
+
+| Band | Behavior |
+|---|---|
+| 1–3 | New or intentionally exploratory identity |
+| 4–6 | Adapt recognizable cues while allowing meaningful evolution |
+| 7–8 | Preserve core assets, tokens, voice, and signature patterns |
+| 9–10 | Extension-level fidelity; new work should appear native to the existing system |
+
+## 3. Presets
+
+Treat these as starting points, not mandatory values.
+
+| Brief | Variance | Motion | Density | Assets | Fidelity |
+|---|---:|---:|---:|---:|---:|
+| Mainstream SaaS landing | 6 | 5 | 4 | 6 | 5 |
+| Creative studio / campaign | 8 | 7 | 3 | 8 | 4 |
+| Developer tool landing | 6 | 5 | 5 | 6 | 6 |
+| Data dashboard | 4 | 3 | 8 | 3 | 7 |
+| Public-sector service | 3 | 2 | 6 | 3 | 9 |
+| Editorial presentation | 7 | 5 | 4 | 7 | 5 |
+| Existing-product extension | match | match | match | match | 10 |
+| Redesign · Preserve | current + 1 max | current + 1 max | match | match | 9 |
+| Redesign · Overhaul | 6–8 | 4–7 | match content | 6–9 | 5–7 |
+
+## 4. Resolve Conflicts
+
+- **High variance + high density**: preserve a stable navigation and grid spine; concentrate experimentation in one layer.
+- **High motion + high density**: animate transitions or focus, not every element.
+- **High assets + low fidelity**: establish a new visual bible before generating or sourcing a set.
+- **High assets + high fidelity**: source official assets first; generation may extend the world but must not replace identity-critical material.
+- **High fidelity + overhaul request**: explicitly identify which brand invariants survive before changing the visual language.
+- **Accessibility constraints** override aesthetic scores. Reduce motion, clarify hierarchy, and preserve contrast without asking permission.
+
+## 5. Optional Image-First Branch
+
+Use image-first exploration only when it materially improves a visually important greenfield or overhaul task, such as a campaign landing page, brand launch, product hero, or highly art-directed portfolio.
+
+Skip it when:
+
+- the user supplied Figma, screenshots, or a mature design system;
+- the task is an extension, repair, dashboard, form, or data table;
+- the main uncertainty is behavior rather than visual direction;
+- image generation would add cost without reducing design risk.
+
+When used:
+
+1. Define a visual bible: palette, typography character, radius, material, image treatment, and forbidden drift.
+2. Generate only the critical references needed to resolve uncertainty; one image per section is not a requirement.
+3. Prefer fresh, readable section references over cropping tiny details from a compressed full-page board.
+4. Extract implementation decisions from the references.
+5. Treat code and supplied brand assets as higher-authority sources when they conflict with generated pixels.
+
+Use `gpt-image-2` when available for structured generation; otherwise follow the host's image workflow or leave honest asset requirements.
+
+## 6. Completion Test
+
+The calibration is successful only if someone can point from each dial to concrete consequences in the artifact. If changing a score would not change the plan, remove the score or make the mapping explicit.

package/skills/ingeniero-diseno-web/references/design-directions.md

@@ -0,0 +1,188 @@
+# Design Direction Advisor — Extended Reference
+
+Read this when the request is vague ("make something nice", "I don't know what style I want") and no design context exists. The main `SKILL.md` already covers the **mechanism** (3 differentiated directions, named designer references, hard rule against same-school picks). This file provides the **school taxonomy** — six high-level philosophical lenses, each with named anchors and the sample copy you use to recommend it.
+
+> **Terminology lock**: this file deals in **schools** (six high-level lenses) and **anchors** (named studios / brands / designers per school). The companion folder `style-recipes/` contains 25 **recipe** files — one file per anchor — with concrete, ready-to-paste configurations. When a user picks a school here, hand them off to the recipe files in that school for concrete palette / typography / spacing values. Load only the recipe files you actually need; the catalog index is at `style-recipes/INDEX.md`.
+
+---
+
+## How to Use This File
+
+1. Read the user's request and the four positioning questions (narrative role / viewing distance / visual temperature / capacity)
+2. Pick **3 schools from different rows** below that genuinely fit the user's context
+3. Recommend each with: named designer/studio + 2–3 lines of "why this fits you" + 3–4 signature visual cues + (optional) one famous touchstone work
+4. Wait for the user to pick one (or remix two)
+5. **After the user picks a school → read 2–3 recipe files from `style-recipes/` in that school** (e.g., picked *Information Architecture* → read `style-recipes/pentagram.md` + `style-recipes/bloomberg-terminal.md` + `style-recipes/tufte-dataink.md`). The recipe files carry the concrete values; this file does not duplicate them.
+6. The chosen recipe becomes the design context — write it into `brand-spec.md` and proceed to the main workflow
+
+---
+
+## The Six Schools (1 of 3 must come from each different row)
+
+### 1. Information Architecture
+
+**Vibe**: Rational, data-driven, restrained, hierarchy-led
+**Best for**: Safe / professional / B2B / data products / institutional
+**Why it works**: Treats the page as a *system* of typographic and grid relationships. The "design" disappears so the information speaks.
+
+| Anchor | What to borrow |
+|---|---|
+| **Pentagram** (Paula Scher, Michael Bierut) | Bold typography as image; identity through type relationships; sparing color use |
+| **Edward Tufte** | Maximum data-ink ratio; small multiples; smallest sufficient difference |
+| **Massimo Vignelli** | Helvetica-style restraint; strict grid; 6 typefaces is enough for a lifetime |
+| **Bloomberg Terminal** | Mission-critical density; amber-on-near-black; monospaced data |
+| **NYT / Broadsheet editorial** | Multi-deck hierarchy; serif headlines; place-rich photography |
+
+**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`pentagram`](./style-recipes/pentagram.md) · [`vignelli-swiss-helvetica`](./style-recipes/vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./style-recipes/bloomberg-terminal.md) · [`tufte-dataink`](./style-recipes/tufte-dataink.md) · [`nyt-the-daily`](./style-recipes/nyt-the-daily.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
+
+**Sample copy when recommending**:
+> "Pentagram-style information architecture — your dashboard becomes a system of typographic relationships rather than a UI. Headlines do the heavy visual lifting; everything else recedes. Best when you want institutional credibility and your data is the hero."
+
+---
+
+### 2. Editorial / Minimalist
+
+**Vibe**: Whitespace, refined typography, quiet luxury, considered
+**Best for**: Premium / high-end / quiet / lifestyle / prestige B2C
+**Why it works**: Treats whitespace as the primary design material. The reader/viewer gets room to breathe; restraint reads as confidence.
+
+| Anchor | What to borrow |
+|---|---|
+| **Kenya Hara (MUJI)** | Whiteness as a value; *ex-formation*; emptiness as fullness |
+| **Apple HIG / Marketing** | Generous negative space; hero product on white; one-thought-per-screen |
+| **Dieter Rams (Braun)** | "Less but better"; honest materials; functional decoration is a contradiction |
+| **Aesop** | Cream/sage palette; serif copy as conversation; product as protagonist |
+| **Monocle** | Magazine-grade kicker / headline / dek hierarchy; international considered |
+
+**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`apple-hig`](./style-recipes/apple-hig.md) · [`muji-kenya-hara`](./style-recipes/muji-kenya-hara.md) · [`aesop`](./style-recipes/aesop.md) · [`dieter-rams-braun`](./style-recipes/dieter-rams-braun.md) · [`monocle-magazine`](./style-recipes/monocle-magazine.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
+
+**Sample copy when recommending**:
+> "Kenya Hara-style editorial minimalism — the page is mostly whitespace, with one serif headline carrying emotional weight and the product anchored in a single hero shot. Best when premium positioning matters more than feature density."
+
+---
+
+### 3. Motion / Experimental
+
+**Vibe**: Bold, generative, sensory, kinetic, technical
+**Best for**: Distinctive / launch films / brand moments / awwwards-style / tech storytelling
+**Why it works**: Movement and surprise are the brand. Static screenshots can't capture the experience.
+
+| Anchor | What to borrow |
+|---|---|
+| **Field.io** | Generative type and form; data-driven motion; the page is a system that *makes* itself |
+| **Active Theory** | WebGL hero moments; physics-driven interactions; cinematic transitions |
+| **Resn** | Storytelling through scroll; payoff for exploration; surprise is the reward |
+
+**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`field-io`](./style-recipes/field-io.md) · [`active-theory`](./style-recipes/active-theory.md) · [`resn-storytelling`](./style-recipes/resn-storytelling.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
+
+> Note: Vercel / Linear marketing pages use motion *as restraint*, not as the show — they live in the **Modern Tool / Builder SaaS** school below, not here. Reach for this school only when motion is genuinely the brand.
+
+**Sample copy when recommending**:
+> "Field.io-style motion-led identity — the page generates itself in front of the visitor through choreographed scroll-driven sequences. Best when the launch *moment* matters and your audience will share clips. Note: this is the most labor-intensive of the three; budget accordingly."
+
+---
+
+### 4. Brutalist / Raw
+
+**Vibe**: Anti-design, honest, unpolished, confrontational
+**Best for**: Differentiated / confident / counter-culture / publishing / artist platforms
+**Why it works**: Ugly-on-purpose reads as authentic in a sea of polished AI defaults. The lack of consensus aesthetic *is* the aesthetic.
+
+| Anchor | What to borrow |
+|---|---|
+| **Are.na** | Raw HTML feel; system fonts on purpose; content > chrome |
+| **Bloomberg Businessweek covers** (Richard Turley era) | Typographic violence; magazine grid abused; copy as image |
+| **Balenciaga** (post-2017) | Default browser styling weaponized; hero text in Helvetica at absurd scale |
+| **Craigslist (yes, really)** | Information density without apology; everything is a link |
+
+**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`are-na`](./style-recipes/are-na.md) · [`bloomberg-businessweek-turley`](./style-recipes/bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./style-recipes/balenciaga-post-2017.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
+
+**Sample copy when recommending**:
+> "Are.na/Bloomberg-style brutalism — system fonts, harsh type contrast, no rounded corners, no shadows. Confrontational on purpose. Best when you're a strong contrarian voice and want to repel the crowd that wants 'modern SaaS.' Warning: half-measures here look broken, not bold."
+
+---
+
+### 5. Warm Humanist
+
+**Vibe**: Approachable, organic, hand-touched, friendly without being childish
+**Best for**: Lifestyle / education / approachable B2C / community products / health
+**Why it works**: Conveys that real humans made this for real humans. Counters the "robot wrote my landing page" perception.
+
+| Anchor | What to borrow |
+|---|---|
+| **Mailchimp** (early Freddie era) | Hand-drawn marks; warm illustration; personality in microcopy |
+| **Stripe Press** | Editorial serif + warm palette + tactile object photography |
+| **Studio Dumbar** | Identity through movement and personality, not through restraint |
+| **Headspace / Calm** | Soft pastels, rounded everything, breathing-pace motion |
+
+**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`mailchimp-freddie`](./style-recipes/mailchimp-freddie.md) · [`stripe-press`](./style-recipes/stripe-press.md) · [`headspace-meditation`](./style-recipes/headspace-meditation.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
+
+> Note: Notion (pre-AI era) borrows from this school's friendly tone but lives in the **Modern Tool / Builder SaaS** school below — it's a tool first, warmth second.
+
+**Sample copy when recommending**:
+> "Stripe Press / early Mailchimp warmth — humanist serifs, cream palette, illustrations that feel hand-touched. Best when you want trust and approachability over institutional polish. Tone is 'friend who happens to be expert,' not 'expert addressing client.'"
+
+---
+
+### 6. Modern Tool / Builder SaaS
+
+**Vibe**: Quiet luxury for tools, hairline detail, warm dark + monospace accents
+**Best for**: Developer tools, B2B SaaS, AI tools, infrastructure / platform products, productivity apps
+**Why it works**: Confident restraint reads as "made by people who use tools," not "made by marketers." Hairline borders, monospace shortcut chips, and a single accent color signal craft-led culture without shouting. This is the most under-served school in AI-default output — every model wants to reach for the purple-pink-blue gradient instead.
+
+| Anchor | What to borrow |
+|---|---|
+| **Linear** | Hairline 1px borders, warm dark ground, selective purple accent < 5% of pixels, keyboard-first chips |
+| **Vercel** (recent) | Black + white precision broken by *one* feathered gradient mesh; deploy-log realism in the hero |
+| **Raycast** | Glassy command-palette as hero; per-extension color dots used as small accents |
+| **Notion** (pre-AI era) | Friendly serif headlines + emoji-as-icon on cream surfaces; structure first, warmth second |
+
+**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`linear`](./style-recipes/linear.md) · [`vercel-mesh`](./style-recipes/vercel-mesh.md) · [`raycast`](./style-recipes/raycast.md) · [`notion-pre-ai`](./style-recipes/notion-pre-ai.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
+
+**Sample copy when recommending**:
+> "Linear-style modern-tool aesthetic — warm dark ground, hairline 1px borders, a single purple accent used on less than 5% of pixels, monospace shortcut chips. Best when your audience is technical and 'serious but designed' matters more than 'fun and accessible.' This is the recipe that defends most directly against AI-default Inter + blue button + 16px-radius output."
+
+---
+
+## When the User Picks (or Remixes)
+
+Common user responses:
+
+- **"I'll go with #2."** → Direction confirmed. Write it into `brand-spec.md`. Proceed to Step 2 with this as design context.
+- **"I like A's color but C's layout."** → Confirm the remix in writing ("So: minimalist editorial palette + motion-led layout choreography. Right?"), then proceed.
+- **"None of these feel right — show me more."** → Ask one targeted question to narrow ("Are you closer to formal/institutional or playful/expressive?"), then offer 3 fresh directions from rows you didn't show before.
+- **"I don't know, you pick."** → Pick the safest one (usually Editorial / Minimalist), state your reasoning, and propose a 5-minute v0 to validate before committing.
+
+---
+
+## AI-Prompt Templates (when generating imagery to support a direction)
+
+Format: `[philosophy DNA] + [content description] + [technical params]`
+
+✅ **Good** (specific characteristics):
+> "Kenya Hara-influenced minimalism with 80% whitespace, single muted terracotta (#C04A1A) accent, GT Sectra serif headline, single product hero on warm off-white (#F2EFE8) ground, soft top-down lighting, 3:2 aspect"
+
+❌ **Bad** (style names without DNA):
+> "minimalist style, premium feel, high quality"
+
+Always include:
+- Color HEX (not "warm" / "cool")
+- Aspect ratio and dimensions
+- Composition rules (rule-of-thirds, centered, asymmetric)
+- What to *avoid* (e.g., "no purple gradient, no emoji, no rounded cards")
+
+> Each recipe file in `style-recipes/` ships a pre-written **AI prompt seed** tuned to that recipe's DNA — start from the one you're using rather than writing prompts from scratch.
+
+---
+
+## Anti-Patterns in Direction Recommendation
+
+❌ **Recommending 3 picks from the same row** — the user can't tell them apart; the entire point of "differentiated directions" collapses
+
+❌ **Recommending "minimalism" / "modern" / "clean"** as the direction name — these are not directions, they are AI-default words. Always anchor on a named designer/studio.
+
+❌ **Recommending without any "why this fits you"** — the user wanted *guidance*, not a multiple-choice quiz. Each option must explain its fit to their context (audience, purpose, budget, brand maturity).
+
+❌ **Showing 5+ directions** — choice paralysis. 3 is the sweet spot. If the first 3 all miss, ask one narrowing question and offer 3 fresh ones.
+
+❌ **Asking the user to score each direction 1–10** — that's offloading the recommendation back to them. Make a recommendation; the user will agree or push back.