start-vibing 4.4.7 → 4.4.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -49,18 +49,18 @@ Every match contributes `weight` to a vertical score and an audience score. Fina
49
49
 
50
50
  Certain dependency co-occurrences collapse ambiguity instantly:
51
51
 
52
- | Co-occurrence | Inferred positioning |
53
- |---|---|
54
- | `next` + `tailwindcss` + `@radix-ui/*` + `cva` + `tailwind-merge` + `lucide-react` | shadcn indie SaaS, dev-forward B2B |
55
- | `next` + `@mui/material` + `@mui/x-data-grid` + `auth0` | enterprise admin/dashboard |
56
- | `next` + `@chakra-ui/react` | mid-market US SaaS |
57
- | `next` + `antd` + `dayjs` | China-tech enterprise |
58
- | `next` + `ai` + `@ai-sdk/*` + `@vercel/kv` | AI chat product, Vercel stack |
59
- | `next` + `stripe` + `@clerk/*` + `drizzle-orm` | the canonical "2024–2026 indie B2B SaaS" stack |
60
- | `next` + `@sanity/client` + `@portabletext/react` | editorial / content-led |
61
- | `next` + `gsap` + `three` + `lenis` | premium agency marketing site |
62
- | `expo` + `nativewind` + `@supabase/*` | indie consumer mobile |
63
- | `wagmi` + `viem` + `@rainbow-me/rainbowkit` | consumer web3 dApp |
52
+ | Co-occurrence | Inferred positioning |
53
+ | ---------------------------------------------------------------------------------- | ---------------------------------------------- |
54
+ | `next` + `tailwindcss` + `@radix-ui/*` + `cva` + `tailwind-merge` + `lucide-react` | shadcn indie SaaS, dev-forward B2B |
55
+ | `next` + `@mui/material` + `@mui/x-data-grid` + `auth0` | enterprise admin/dashboard |
56
+ | `next` + `@chakra-ui/react` | mid-market US SaaS |
57
+ | `next` + `antd` + `dayjs` | China-tech enterprise |
58
+ | `next` + `ai` + `@ai-sdk/*` + `@vercel/kv` | AI chat product, Vercel stack |
59
+ | `next` + `stripe` + `@clerk/*` + `drizzle-orm` | the canonical "2024–2026 indie B2B SaaS" stack |
60
+ | `next` + `@sanity/client` + `@portabletext/react` | editorial / content-led |
61
+ | `next` + `gsap` + `three` + `lenis` | premium agency marketing site |
62
+ | `expo` + `nativewind` + `@supabase/*` | indie consumer mobile |
63
+ | `wagmi` + `viem` + `@rainbow-me/rainbowkit` | consumer web3 dApp |
64
64
 
65
65
  ### 1.4 Semantic signals from README and CLAUDE.md
66
66
 
@@ -115,11 +115,11 @@ Given raw candidates, select the final 5–10:
115
115
 
116
116
  1. **Filter for live**: domain resolves, site responds in <10s, copyright year within two years. Drop zombies.
117
117
  2. **Bucket by posture**, aiming for representation in each:
118
- - **Category king** (1–2): the incumbent every buyer considers. Highest G2 review count or most-mentioned in "alternatives to" searches.
119
- - **Direct peers** (2–4): same audience, same core JTBD, similar stage (±1 funding round).
120
- - **Adjacent/challenger** (1–2): same audience, different value prop or opposite posture (open-source vs proprietary; all-in-one vs focused).
121
- - **Emerging/indie** (1–2): Product Hunt last-6-months top 10 in the category; reveals the design-language future.
122
- - **Enterprise anchor** (1): the "safe corporate" option — reveals category conventions.
118
+ - **Category king** (1–2): the incumbent every buyer considers. Highest G2 review count or most-mentioned in "alternatives to" searches.
119
+ - **Direct peers** (2–4): same audience, same core JTBD, similar stage (±1 funding round).
120
+ - **Adjacent/challenger** (1–2): same audience, different value prop or opposite posture (open-source vs proprietary; all-in-one vs focused).
121
+ - **Emerging/indie** (1–2): Product Hunt last-6-months top 10 in the category; reveals the design-language future.
122
+ - **Enterprise anchor** (1): the "safe corporate" option — reveals category conventions.
123
123
  3. **Score** each candidate: `fame = log(g2_reviews + ph_upvotes + 1)`; `similarity = jaccard(audience_tokens)`; `design_signal = has_modern_site ? 1 : 0`. Rank by `0.5·fame + 0.4·similarity + 0.1·design_signal`.
124
124
  4. **Final gate**: the set must include at least one brand from each vibe quadrant the agent believes is plausibly applicable, so category-code analysis has variance to measure.
125
125
 
@@ -131,7 +131,193 @@ Before finalizing, run Neumeier's insertion test: drop each competitor's name in
131
131
 
132
132
  ## 3. Extracting brand and design language from competitors
133
133
 
134
- For each finalist competitor, visit four pages: homepage, primary product page, pricing, about. Playwright MCP (via `browser_navigate`, `browser_snapshot`, `browser_take_screenshot`, `browser_evaluate`) drives everything.
134
+ For each finalist competitor, visit four pages: homepage, primary product page, pricing, about. Playwright MCP (via `browser_navigate`, `browser_snapshot`, `browser_take_screenshot`, `browser_evaluate`, `browser_click`, `browser_press_key`, `browser_hover`) drives everything.
135
+
136
+ ### 3.0 Mandatory interactive crawl protocol (do this BEFORE §3.1–3.10 extractions)
137
+
138
+ A site rendered without interaction tells you nothing about its UI language — you only see what loaded above the fold of the homepage. The §3bis component catalog REQUIRES element-cropped screenshots of buttons, modals, focused inputs, expanded mobile nav, and below-fold cards. None of that exists without clicks, scrolls, and key presses. **Every competitor visit MUST execute the loop below, per page, per viewport.** The protocol is **adaptive** — if a step's target doesn't exist in the snapshot, skip it immediately (one probe, no retry) and record `<step>=not-exposed`. Never fabricate.
139
+
140
+ **Speed budget per competitor × viewport: ~90 seconds.** If you exceed 3 minutes you're doing it wrong — re-read the adaptive rules below.
141
+
142
+ 1. **Land + snapshot ONCE for refs.** `browser_navigate({url})` → `browser_resize` → `browser_wait_for({time:0.8})` → `browser_snapshot()`. Hold the snapshot in working memory; **do not** save the YAML to disk by default (those files are huge and rarely re-read). Save only when the snapshot reveals an unusually rich vocabulary worth re-grepping later (rare).
143
+
144
+ 2. **Dismiss intercepts** (one pass, ≤2s). From the snapshot, find a button whose accessible name matches `/^(accept|aceitar|got it|ok|allow all|continue|close|×|dismiss|agree)/i` and `browser_click` it. If `role="dialog"` is still present, `browser_press_key({key:"Escape"})` once. Do NOT loop searching for additional banners — one pass is enough. Append a single line to `.cache/evidence/<slug>/<viewport>/intercepts.md`: `home: dismissed "Accept all" | none-found | escape-fallback`.
145
+
146
+ 3. **Discover internal URLs from the rendered page** (one `browser_evaluate`, results cached for the whole competitor session):
147
+
148
+ ```js
149
+ const here = new URL(location.href);
150
+ const links = new Map();
151
+ for (const a of document.querySelectorAll('a[href]')) {
152
+ try {
153
+ const u = new URL(a.href, here);
154
+ if (u.host !== here.host) continue;
155
+ const path = u.pathname.replace(/\/+$/, '') || '/';
156
+ if (!links.has(path)) links.set(path, a.innerText.trim().slice(0, 60));
157
+ } catch {}
158
+ }
159
+ return [...links.entries()].slice(0, 80);
160
+ ```
161
+
162
+ Match against intent keywords (case-insensitive, both label and path):
163
+ - product/features → `/(product|features|platform|capabilities|how[-_ ]?it[-_ ]?works)/`
164
+ - pricing → `/(pricing|plans|tarifas|precos)/`
165
+ - about → `/(about|company|sobre|team|story)/`
166
+ - docs/auth surface → `/(docs|developers|api|app|dashboard|tour|demo)/`
167
+
168
+ **Page-budget rule:** visit AT MOST 2 internal pages beyond home (so 3 pages total per competitor: home + best product/features match + best pricing match — about/docs are opportunistic only if discovery cost was zero). If a category yields no match, mark `page=missing`; do NOT guess a path.
169
+
170
+ 4. **Adaptive scroll loop.** Compute `scrollHeight` once per page; pick band count from this table — do NOT do "≥3 bands always":
171
+
172
+ | scrollHeight / viewport.height | band count | what to capture |
173
+ | ------------------------------ | ------------------------ | --------------------------- |
174
+ | ≤ 1.2 | 0 (just `fullPage:true`) | full page only |
175
+ | 1.2 – 2.5 | 1 mid-page band | 50% scroll → screenshot |
176
+ | 2.5 – 5 | 2 bands | 33% and 66% → screenshots |
177
+ | > 5 | 3 bands MAX (cap) | 25%, 55%, 85% → screenshots |
178
+
179
+ Use `behavior:'instant'` and **skip the `browser_wait_for` between scrolls** — instant scroll + immediate screenshot is fine for the still-image comparison we need. Below-fold sections still appear because lazy-load is paint-driven, not scroll-debounced. Then take the `fullPage:true` shot per §3.1.
180
+
181
+ ```js
182
+ // browser_evaluate (single call returns scroll plan)
183
+ const h = document.documentElement.scrollHeight;
184
+ const vh = window.innerHeight;
185
+ const ratio = h / vh;
186
+ return { ratio, h, vh };
187
+ ```
188
+
189
+ 5. **Mobile-only: open the hamburger nav.** Single probe — from the post-load snapshot, find `role="button"` with accessible name matching `/^(menu|navigation|toggle|hamburger|☰|≡)/i` OR `aria-label*=menu`. If found: `browser_click({ref})` → `browser_take_screenshot({fullPage:true, filename:"nav_mobile_open.png"})` → click again or `Escape` to close. If not found in the snapshot: skip silently (mark `nav_mobile_open=not-exposed`). Do NOT re-snapshot to look harder.
190
+
191
+ 6. **ONE component-revealing interaction per page.** Pick the FIRST option from the priority list whose target appears in the existing snapshot — do not try multiple options on the same page:
192
+
193
+ | Priority | Target | Trigger | Output file |
194
+ | -------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
195
+ | 1 | Open primary CTA modal | first `link\|button` matching `/^(sign[-_ ]?up\|get started\|try free\|book a demo\|talk to sales\|contact sales\|request demo)/i` → click → wait 0.5s → screenshot | `modal_<page>.png` |
196
+ | 2 | Pricing toggle (only on `/pricing`) | first `switch\|tab` near "monthly/annual" → click → screenshot the toggled state | `pricing_toggle.png` |
197
+ | 3 | Hover state on primary CTA | `browser_hover({ref})` on hero CTA → screenshot | `button_primary_hover.png` |
198
+ | 4 | Focused input | first `textbox` → click → screenshot | `input_focus.png` |
199
+ | 5 | Mega-menu (desktop) | hover first nav item that is a `combobox\|menuitem` → if panel paints, screenshot | `mega_menu.png` |
200
+
201
+ No match in any of the 5 → mark `component_interaction=not-exposed` and continue. Don't burn time hunting.
202
+
203
+ 7. **Console + network capture ONCE per competitor × viewport** (NOT per page). After the last page is visited, run `browser_console_messages({onlyErrors:true})` and `browser_network_requests()` once → save to `<slug>/<viewport>/console.json` and `<slug>/<viewport>/network.json`. Per-page captures were overkill; consolidated capture still feeds §3.6 motion detection (`gsap`/`framer-motion`/`lottie`/`.glb` URLs) and framework fingerprinting.
204
+
205
+ 8. **Single-session reuse.** Open ONE Playwright browser session per competitor × viewport. Reuse across all visited pages. Close with `browser_close` only after the competitor is fully audited at that viewport. No parallel tabs.
206
+
207
+ **Hard rule:** an entry in `component-catalog.md` (or any narrative doc) that lacks a corresponding screenshot file on disk is a fabrication. If §3.0 didn't expose a component, it goes under `## Not exposed during interactive crawl` — never under "Components".
208
+
209
+ ### 3ter. Per-competitor design-narrative.md (mandatory deliverable)
210
+
211
+ Screenshots and a token table do not communicate design. After §3.0 finishes for a competitor (BOTH viewports done), write **`.cache/evidence/<slug>/design-narrative.md`** following this template exactly. This is the file the user actually reads — the catalog is for traceability, the narrative is for understanding.
212
+
213
+ ```markdown
214
+ # <Competitor> — design narrative
215
+
216
+ **Audited:** <ISO date> · **Viewports:** desktop 1440×900, mobile 390×844
217
+ **Pages visited:** home, <product-path>, <pricing-path> · **Pages missing:** <list or "none">
218
+
219
+ ## Aesthetic at a glance (2–3 sentences)
220
+
221
+ What is the _feeling_ of this site? Lead with mood, not specs. e.g. "Cold,
222
+ authoritative, Bloomberg-terminal posture. Heavy on dense data viz, sparse
223
+ on photography. Reads like an investor deck, not a marketing site."
224
+
225
+ ## Color story
226
+
227
+ - **Brand spine:** <hex> <hex> <hex> — describe the relationship (mono / dual /
228
+ triadic / palette + accent), and what it telegraphs (trust / energy /
229
+ premium / playful)
230
+ - **Where each color earns its keep:** primary on … / accent only on … /
231
+ background hierarchy uses …
232
+ - **Surface posture:** dark-default / light-default / dark-on-mobile-only /
233
+ hybrid sections
234
+ - **Divergence from §3.3 CSS-vs-Vibrant:** if brand tokens disagree with
235
+ perceived palette, name the gap (rebrand-in-progress signal)
236
+
237
+ ## Typography voice
238
+
239
+ - **Display vs body pairing:** family + class (modern-sans / editorial-serif /
240
+ brutalist / mono / custom) — what does the pairing _say_ (corporate
241
+ reassurance / editorial confidence / dev-tool credibility / premium
242
+ intimacy)?
243
+ - **Hierarchy rhythm:** how aggressive is size jump h1→h2→body? Tight
244
+ (corporate) / dramatic (editorial) / playful (consumer)?
245
+ - **One memorable detail** — the unusual choice (italic display, variable
246
+ weight, custom ligature, oversized numerals)
247
+
248
+ ## Layout & section taxonomy
249
+
250
+ Walk the homepage top-to-bottom. For each section name what it is and what
251
+ job it does:
252
+
253
+ | Order | Section type | What it contains | Layout pattern | Why it's there |
254
+ | ----- | ------------ | -------------------------- | ----------------------------------------- | ------------------ |
255
+ | 1 | Hero | <copy gist> + <CTA count> | left-copy / centered / split / full-bleed | Anchor positioning |
256
+ | 2 | Social proof | logo bar / quoted customer | logos-strip / quote-card | Trust before pitch |
257
+ | 3 | … | … | … | … |
258
+
259
+ Repeat the same table for the visited product page and pricing page if their
260
+ section vocabulary diverges. If the site reuses the same section pattern
261
+ across pages, say so once and don't repeat the table.
262
+
263
+ ## Component vocabulary (tied to screenshots)
264
+
265
+ For each component family present, ONE descriptive sentence + the screenshot
266
+ filename. No screenshot = not in this section (move to "Not exposed").
267
+
268
+ - **Buttons:** primary = `<filename>` — radius, weight, hover treatment, label tone (action verb / value-prop / generic)
269
+ - **Cards:** observed variants `<files>` — what shape (flat / elevated / outlined / glass), what content density
270
+ - **Forms:** input style `<file>` — minimal-line / boxed / floating-label, focus treatment
271
+ - **Modals/dialogs:** observed `<file>` — centered / bottom-sheet / drawer, what content (signup / contact / video / disclosure)
272
+ - **Navigation:** desktop `<file>` + mobile `<file>` — top-bar / sidebar / mega-menu, mobile transform (hamburger overlay / drawer / bottom-tabs)
273
+ - **Lists & tables:** if present `<file>` — row density, separator style
274
+
275
+ ## Scroll & motion behavior
276
+
277
+ - Scroll depth: `scrollHeight / viewport ≈ Nx`
278
+ - Reveal pattern: none / fade-in-on-scroll / parallax / sticky-section / pinned-scroll
279
+ - Animation library detected via §3.6 network: <gsap | framer-motion | lottie | none>
280
+ - Motion character: snappy (≤200ms) / cinematic (>500ms) / heavy (continuous)
281
+ - One memorable scroll moment (or "none — purely static")
282
+
283
+ ## UI / UX posture
284
+
285
+ - **CTA hierarchy:** how many primary CTAs above-fold? Hard CTA + soft CTA pair, or single push?
286
+ - **Density:** dense-data / balanced / spacious-marketing
287
+ - **Information shape:** single-column narrative / split-screen alternating / grid-of-cards
288
+ - **Disclosure pattern:** progressive (accordion / tabs) / all-at-once / link-out-to-docs
289
+ - **Trust signals deployed:** logos / quotes / stats / certifications / press / none
290
+
291
+ ## Mobile vs desktop divergence
292
+
293
+ Two-column quick read: what changes structurally, not just "smaller". Examples:
294
+
295
+ - Hero CTA: stacks vertically (mobile) vs side-by-side (desktop)
296
+ - Nav: hamburger overlay vs top mega-menu
297
+ - Pricing: card carousel vs 3-column grid
298
+ - Footer: accordion sections vs columns
299
+
300
+ ## What's ownable vs commodity
301
+
302
+ - **Ownable signals** (would survive Neumeier insertion test): <list 1–3>
303
+ - **Commodity codes** (could swap with any peer): <list 1–3>
304
+ - **Risk** (anti-pattern, dated, brittle): <list or "none">
305
+
306
+ ## Not exposed during interactive crawl
307
+
308
+ - <component>: <reason — element not in snapshot / page missing / dismissed-but-no-trigger>
309
+
310
+ ## Files cited
311
+
312
+ - screenshots: `<slug>/<viewport>/{home.png, *_band_*.png, components/*.png}`
313
+ - catalog: `<slug>/component-catalog.md`
314
+ - console+network: `<slug>/<viewport>/{console.json, network.json}`
315
+ ```
316
+
317
+ This narrative is what powers `market-analysis.md` synthesis (§8) and
318
+ sd-fix's DSC-1 typeui proposals. The competitor catalog without this
319
+ narrative is unreadable; the narrative without the catalog is unverifiable
320
+ — produce both.
135
321
 
136
322
  ### 3.1 Browser setup
137
323
 
@@ -150,11 +336,11 @@ Save the full-page screenshot to `evidence/<competitor>/<page>.png` via `browser
150
336
  // browser_evaluate
151
337
  const counts = new Map();
152
338
  for (const el of document.querySelectorAll('body *:not(script):not(style)')) {
153
- if (!el.innerText?.trim()) continue;
154
- const ff = getComputedStyle(el).fontFamily;
155
- counts.set(ff, (counts.get(ff) ?? 0) + 1);
339
+ if (!el.innerText?.trim()) continue;
340
+ const ff = getComputedStyle(el).fontFamily;
341
+ counts.set(ff, (counts.get(ff) ?? 0) + 1);
156
342
  }
157
- return [...counts.entries()].sort((a,b)=>b[1]-a[1]).slice(0,20);
343
+ return [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 20);
158
344
  ```
159
345
 
160
346
  Interpret top three families: the dominant one is body; a secondary (used <5% but on h1–h2) is display; mono = dev-tool posture. Map family names to classifications: `Inter`, `Geist`, `Söhne`, `SF Pro` → modern sans; `GT Super`, `Canela`, `Tiempos`, `Editorial New`, `Playfair` → editorial serif; `Druk`, `Monument Grotesk` → brutalist/display; `JetBrains Mono`, `Berkeley Mono`, `IBM Plex Mono` → developer.
@@ -166,15 +352,21 @@ Interpret top three families: the dominant one is body; a secondary (used <5% bu
166
352
  ```js
167
353
  const hist = new Map();
168
354
  for (const el of document.querySelectorAll('body *')) {
169
- const cs = getComputedStyle(el);
170
- const r = el.getBoundingClientRect();
171
- const w = Math.log2(Math.max(1, r.width * r.height) + 1);
172
- for (const [prop, weight] of [['backgroundColor',w],['color',1],['borderTopColor',.25],['fill',.5]]) {
173
- const v = cs[prop];
174
- if (v && v !== 'rgba(0, 0, 0, 0)' && v !== 'transparent') hist.set(v, (hist.get(v) ?? 0) + weight);
175
- }
355
+ const cs = getComputedStyle(el);
356
+ const r = el.getBoundingClientRect();
357
+ const w = Math.log2(Math.max(1, r.width * r.height) + 1);
358
+ for (const [prop, weight] of [
359
+ ['backgroundColor', w],
360
+ ['color', 1],
361
+ ['borderTopColor', 0.25],
362
+ ['fill', 0.5],
363
+ ]) {
364
+ const v = cs[prop];
365
+ if (v && v !== 'rgba(0, 0, 0, 0)' && v !== 'transparent')
366
+ hist.set(v, (hist.get(v) ?? 0) + weight);
367
+ }
176
368
  }
177
- return [...hist.entries()].sort((a,b)=>b[1]-a[1]).slice(0,30);
369
+ return [...hist.entries()].sort((a, b) => b[1] - a[1]).slice(0, 30);
178
370
  ```
179
371
 
180
372
  Cluster by RGB distance (ε≈24) and keep the top 6–8 representatives.
@@ -195,8 +387,8 @@ Merge: CSS palette = brand tokens; Vibrant palette = perceived mood. Divergence
195
387
  const out = {};
196
388
  const cs = getComputedStyle(document.documentElement);
197
389
  for (let i = 0; i < cs.length; i++) {
198
- const p = cs.item(i);
199
- if (p.startsWith('--')) out[p] = cs.getPropertyValue(p).trim();
390
+ const p = cs.item(i);
391
+ if (p.startsWith('--')) out[p] = cs.getPropertyValue(p).trim();
200
392
  }
201
393
  return out;
202
394
  ```
@@ -226,11 +418,14 @@ Query `document.querySelectorAll('img, svg, video')`. Count SVG children vs rast
226
418
 
227
419
  ```js
228
420
  return {
229
- hero: document.querySelector('h1')?.innerText.trim(),
230
- subhead: document.querySelector('h1 ~ p')?.innerText.trim(),
231
- ctas: [...document.querySelectorAll('a[role=button], button, a.btn')].map(e => e.innerText.trim()).filter(t => t && t.length < 40).slice(0, 20),
232
- headings: [...document.querySelectorAll('h1,h2,h3')].map(h => h.innerText.trim()),
233
- allText: document.body.innerText.replace(/\s+/g,' ').slice(0, 10000),
421
+ hero: document.querySelector('h1')?.innerText.trim(),
422
+ subhead: document.querySelector('h1 ~ p')?.innerText.trim(),
423
+ ctas: [...document.querySelectorAll('a[role=button], button, a.btn')]
424
+ .map((e) => e.innerText.trim())
425
+ .filter((t) => t && t.length < 40)
426
+ .slice(0, 20),
427
+ headings: [...document.querySelectorAll('h1,h2,h3')].map((h) => h.innerText.trim()),
428
+ allText: document.body.innerText.replace(/\s+/g, ' ').slice(0, 10000),
234
429
  };
235
430
  ```
236
431
 
@@ -254,53 +449,53 @@ evidence/<competitor-slug>/
254
449
 
255
450
  ## 4. Brand archetype and positioning classification
256
451
 
257
- ### 4.1 Mark & Pearson 12 archetypes (Mark & Pearson, *The Hero and the Outlaw*, McGraw-Hill, 2001)
452
+ ### 4.1 Mark & Pearson 12 archetypes (Mark & Pearson, _The Hero and the Outlaw_, McGraw-Hill, 2001)
258
453
 
259
454
  The archetypes cluster in four motivational quadrants. An auditable brand usually presents one primary + one supporting.
260
455
 
261
- | Archetype | Core desire / motto | Visual signals | Copy signals | Example brands |
262
- |---|---|---|---|---|
263
- | **Innocent** | Paradise / safety. "Free to be you and me." | Pastels (white, sky blue, pale yellow); rounded sans or script; high-key photography; whitespace | Short sentences; "pure/simple/happy/natural"; gentle CTAs ("Discover", "Enjoy") | Dove, Innocent Drinks, Aveeno, Method |
264
- | **Sage** | Truth / understanding. "The truth will set you free." | Navy/forest/burgundy + cream; classical serifs; editorial layouts; data viz; monochrome portraits | Authoritative third person; cited stats; long clauses; "Learn more", "Read the report" | Google, BBC, The Economist, Harvard, Bloomberg |
265
- | **Explorer** | Freedom, discovery. "Don't fence me in." | Earthy palettes (rust, olive, slate); geometric sans (Futura); wide landscape hero; maps, compasses | Second person "you"; imperatives; "Find your…"; "Start the journey" | Patagonia, The North Face, Jeep, Airbnb, GoPro |
266
- | **Outlaw** | Revolution. "Rules are made to be broken." | Black + one saturated accent (red, neon); heavy condensed/industrial type; grit textures; high contrast | Short, confrontational; anti-establishment questions; "Join the revolution" | Harley-Davidson, Diesel, Liquid Death, Oatly, Vice |
267
- | **Magician** | Transformation. "I make things happen." | Deep purple/indigo + gold; gradient meshes; particle/glow effects; futuristic sans | "Transform", "unlock", "reveal", "imagine"; before/after demos | Disney, Tesla, Polaroid, Dyson, MasterClass |
268
- | **Hero** | Mastery through courage. "Where there's a will there's a way." | Bold red/black/white or navy/gold; muscular sans (Knockout, Tungsten); athletes mid-motion; dramatic light | 1–3 word imperative taglines; challenge framing; "Push harder", "Rise" | Nike, Under Armour, BMW, FedEx, Adidas |
269
- | **Lover** | Intimacy, sensual pleasure. "You're the only one." | Rich reds/burgundies/blush; Didone serifs (Didot, Bodoni); soft-focus warm light; tactile textures | Sensory adjectives; romantic syntax; "Indulge", "Fall in love" | Chanel, Victoria's Secret, Häagen-Dazs, Alfa Romeo |
270
- | **Jester** | Live in the moment. "You only live once." | Saturated primaries (yellow, hot pink, cyan); rounded display; illustration > photo; mascots, emoji | Puns, exclamations, rhetorical Qs; "Let's play", "Get silly" | M&M's, Old Spice, Dollar Shave Club, Cards Against Humanity, Mailchimp |
271
- | **Everyman** | Belonging. "All people are created equal." | Muted neutrals (denim, warm gray, brick); humanist sans (Helvetica, Open Sans); candid documentary photos | Plainspoken; contractions; "we/us"; "Join us", "Get started" | IKEA, Target, Levi's, Home Depot, eBay |
272
- | **Caregiver** | Protect others. "Love your neighbor as yourself." | Soft blue/pink + white; rounded humanist sans; touching hands, parent-child imagery | Empathetic; "we're here for you"; "Care for…" | Johnson & Johnson, UNICEF, Volvo, Pampers, TOMS |
273
- | **Ruler** | Control, prosperity. "Power is the only thing." | Black, gold, navy, burgundy; Trajan/Bodoni serifs; symmetrical layouts; crests, monograms | Superlatives ("the finest", "world's leading"); formal third person; "Become a member" | Rolex, Mercedes-Benz, AmEx (Centurion), Louis Vuitton, IBM |
274
- | **Creator** | Realize a vision. "If you can imagine it, it can be done." | Monochrome + bold accent; experimental/custom type; whitespace; tools/process imagery | "Make/build/craft"; short aphorisms; "Create", "Build your…" | Apple, LEGO, Adobe, Figma, Canva, Etsy |
456
+ | Archetype | Core desire / motto | Visual signals | Copy signals | Example brands |
457
+ | ------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
458
+ | **Innocent** | Paradise / safety. "Free to be you and me." | Pastels (white, sky blue, pale yellow); rounded sans or script; high-key photography; whitespace | Short sentences; "pure/simple/happy/natural"; gentle CTAs ("Discover", "Enjoy") | Dove, Innocent Drinks, Aveeno, Method |
459
+ | **Sage** | Truth / understanding. "The truth will set you free." | Navy/forest/burgundy + cream; classical serifs; editorial layouts; data viz; monochrome portraits | Authoritative third person; cited stats; long clauses; "Learn more", "Read the report" | Google, BBC, The Economist, Harvard, Bloomberg |
460
+ | **Explorer** | Freedom, discovery. "Don't fence me in." | Earthy palettes (rust, olive, slate); geometric sans (Futura); wide landscape hero; maps, compasses | Second person "you"; imperatives; "Find your…"; "Start the journey" | Patagonia, The North Face, Jeep, Airbnb, GoPro |
461
+ | **Outlaw** | Revolution. "Rules are made to be broken." | Black + one saturated accent (red, neon); heavy condensed/industrial type; grit textures; high contrast | Short, confrontational; anti-establishment questions; "Join the revolution" | Harley-Davidson, Diesel, Liquid Death, Oatly, Vice |
462
+ | **Magician** | Transformation. "I make things happen." | Deep purple/indigo + gold; gradient meshes; particle/glow effects; futuristic sans | "Transform", "unlock", "reveal", "imagine"; before/after demos | Disney, Tesla, Polaroid, Dyson, MasterClass |
463
+ | **Hero** | Mastery through courage. "Where there's a will there's a way." | Bold red/black/white or navy/gold; muscular sans (Knockout, Tungsten); athletes mid-motion; dramatic light | 1–3 word imperative taglines; challenge framing; "Push harder", "Rise" | Nike, Under Armour, BMW, FedEx, Adidas |
464
+ | **Lover** | Intimacy, sensual pleasure. "You're the only one." | Rich reds/burgundies/blush; Didone serifs (Didot, Bodoni); soft-focus warm light; tactile textures | Sensory adjectives; romantic syntax; "Indulge", "Fall in love" | Chanel, Victoria's Secret, Häagen-Dazs, Alfa Romeo |
465
+ | **Jester** | Live in the moment. "You only live once." | Saturated primaries (yellow, hot pink, cyan); rounded display; illustration > photo; mascots, emoji | Puns, exclamations, rhetorical Qs; "Let's play", "Get silly" | M&M's, Old Spice, Dollar Shave Club, Cards Against Humanity, Mailchimp |
466
+ | **Everyman** | Belonging. "All people are created equal." | Muted neutrals (denim, warm gray, brick); humanist sans (Helvetica, Open Sans); candid documentary photos | Plainspoken; contractions; "we/us"; "Join us", "Get started" | IKEA, Target, Levi's, Home Depot, eBay |
467
+ | **Caregiver** | Protect others. "Love your neighbor as yourself." | Soft blue/pink + white; rounded humanist sans; touching hands, parent-child imagery | Empathetic; "we're here for you"; "Care for…" | Johnson & Johnson, UNICEF, Volvo, Pampers, TOMS |
468
+ | **Ruler** | Control, prosperity. "Power is the only thing." | Black, gold, navy, burgundy; Trajan/Bodoni serifs; symmetrical layouts; crests, monograms | Superlatives ("the finest", "world's leading"); formal third person; "Become a member" | Rolex, Mercedes-Benz, AmEx (Centurion), Louis Vuitton, IBM |
469
+ | **Creator** | Realize a vision. "If you can imagine it, it can be done." | Monochrome + bold accent; experimental/custom type; whitespace; tools/process imagery | "Make/build/craft"; short aphorisms; "Create", "Build your…" | Apple, LEGO, Adobe, Figma, Canva, Etsy |
275
470
 
276
471
  **Detection algorithm.** Score each archetype 0–10 by summing: (a) color-palette match against canonical hues; (b) typographic class match; (c) lexical match on ~20 archetype-specific tokens extracted from `copy.allText`; (d) imagery class (photo/illustration/3D match); (e) CTA verb match. Normalize; take top two. Confidence = score[0] − score[1]. Flag `mixed` if < 2.0.
277
472
 
278
- ### 4.2 Aaker Brand Personality Dimensions (Aaker, *Journal of Marketing Research*, 34(3):347–356, August 1997)
473
+ ### 4.2 Aaker Brand Personality Dimensions (Aaker, _Journal of Marketing Research_, 34(3):347–356, August 1997)
279
474
 
280
475
  Five dimensions, 15 facets, 42 traits, validated against Big-Five (OCEAN). A brand typically peaks on one dimension with a strong secondary.
281
476
 
282
- - **Sincerity** (down-to-earth, honest, wholesome, cheerful): warm whites/cream, sky blue, soft yellow; rounded humanist sans or friendly serif; sun-lit candid photography; kraft textures. *Examples:* Hallmark, Dove, Patagonia, Ben & Jerry's.
283
- - **Excitement** (daring, spirited, imaginative, up-to-date): neon/saturated; bold geometric display; motion blur; asymmetric layouts; graphic illustration. *Examples:* Red Bull, MTV, Tesla, Spotify.
284
- - **Competence** (reliable, intelligent, successful): navy + steel gray + white; grotesk sans (Helvetica, Inter); grid-based; data viz; clean product photography on white. *Examples:* IBM, Microsoft, Volvo, FedEx, WSJ.
285
- - **Sophistication** (upper class, charming): black, ivory, gold, blush; high-contrast Didone serifs; generous whitespace; editorial fashion photography. *Examples:* Chanel, Mercedes-Benz, Tiffany & Co., Apple (premium).
286
- - **Ruggedness** (outdoorsy, tough): earth tones; slab serifs or condensed industrial sans; wide landscapes; weathered textures; natural light. *Examples:* Levi's, Jeep, Timberland, Carhartt.
477
+ - **Sincerity** (down-to-earth, honest, wholesome, cheerful): warm whites/cream, sky blue, soft yellow; rounded humanist sans or friendly serif; sun-lit candid photography; kraft textures. _Examples:_ Hallmark, Dove, Patagonia, Ben & Jerry's.
478
+ - **Excitement** (daring, spirited, imaginative, up-to-date): neon/saturated; bold geometric display; motion blur; asymmetric layouts; graphic illustration. _Examples:_ Red Bull, MTV, Tesla, Spotify.
479
+ - **Competence** (reliable, intelligent, successful): navy + steel gray + white; grotesk sans (Helvetica, Inter); grid-based; data viz; clean product photography on white. _Examples:_ IBM, Microsoft, Volvo, FedEx, WSJ.
480
+ - **Sophistication** (upper class, charming): black, ivory, gold, blush; high-contrast Didone serifs; generous whitespace; editorial fashion photography. _Examples:_ Chanel, Mercedes-Benz, Tiffany & Co., Apple (premium).
481
+ - **Ruggedness** (outdoorsy, tough): earth tones; slab serifs or condensed industrial sans; wide landscapes; weathered textures; natural light. _Examples:_ Levi's, Jeep, Timberland, Carhartt.
287
482
 
288
483
  Score each dimension 1–7 by counting trait-evoking signals across home + product pages.
289
484
 
290
- ### 4.3 Kapferer's Brand Identity Prism (Kapferer, *Strategic Brand Management*, 1992; refined eds. through 2012)
485
+ ### 4.3 Kapferer's Brand Identity Prism (Kapferer, _Strategic Brand Management_, 1992; refined eds. through 2012)
291
486
 
292
487
  Six facets on two axes — vertical (Picture of Sender ↔ Picture of Receiver) and horizontal (Externalization ↔ Internalization).
293
488
 
294
- 1. **Physique** (external/sender) — logo, colors, type, packaging, signature visual assets. *Audit:* extracted tokens (§3).
295
- 2. **Personality** (internal/sender) — the brand-as-person. *Audit:* map body copy onto Aaker or the 12 archetypes.
296
- 3. **Culture** (internal/sender) — values, heritage, ideology. *Audit:* About/Mission/Manifesto pages, origin story, ESG statements.
297
- 4. **Relationship** (external/receiver) — mode of brand↔customer conduct. *Audit:* onboarding tone, support copy, community features, promised exchange.
298
- 5. **Reflection** (external/receiver) — stereotyped user portrayed in ads (not actual buyer). *Audit:* every photo of a person: age, gender, ethnicity, lifestyle.
299
- 6. **Self-image** (internal/receiver) — how the customer feels using the brand. *Audit:* testimonial phrasing, identity-laden copy ("for those who…"), community posts.
489
+ 1. **Physique** (external/sender) — logo, colors, type, packaging, signature visual assets. _Audit:_ extracted tokens (§3).
490
+ 2. **Personality** (internal/sender) — the brand-as-person. _Audit:_ map body copy onto Aaker or the 12 archetypes.
491
+ 3. **Culture** (internal/sender) — values, heritage, ideology. _Audit:_ About/Mission/Manifesto pages, origin story, ESG statements.
492
+ 4. **Relationship** (external/receiver) — mode of brand↔customer conduct. _Audit:_ onboarding tone, support copy, community features, promised exchange.
493
+ 5. **Reflection** (external/receiver) — stereotyped user portrayed in ads (not actual buyer). _Audit:_ every photo of a person: age, gender, ethnicity, lifestyle.
494
+ 6. **Self-image** (internal/receiver) — how the customer feels using the brand. _Audit:_ testimonial phrasing, identity-laden copy ("for those who…"), community posts.
300
495
 
301
496
  Score each 1–5 for clarity; flag inconsistencies (e.g., Personality reads playful but Relationship copy is corporate → weak Prism).
302
497
 
303
- ### 4.4 Keller's CBBE pyramid (Keller, *Journal of Marketing*, 1993; MSI WP 01-107, 2001)
498
+ ### 4.4 Keller's CBBE pyramid (Keller, _Journal of Marketing_, 1993; MSI WP 01-107, 2001)
304
499
 
305
500
  Four levels, asked as four questions. Audit by locating each level's cues on the competitor site.
306
501
 
@@ -315,32 +510,32 @@ Bottleneck analysis: score 1–5 per block; the weakest block is the brand's cur
315
510
 
316
511
  ## 5. Category codes analysis
317
512
 
318
- Category codes are the visual and copy patterns nearly every brand in a vertical shares — the "obey for trust" signals. Differentiating is about choosing which codes to **obey**, **extend**, or **subvert** (Neumeier, *Zag*, 2006).
513
+ Category codes are the visual and copy patterns nearly every brand in a vertical shares — the "obey for trust" signals. Differentiating is about choosing which codes to **obey**, **extend**, or **subvert** (Neumeier, _Zag_, 2006).
319
514
 
320
515
  ### 5.1 Building the competitor matrix
321
516
 
322
517
  After §3's extraction for each of the 5–10 finalists, assemble a matrix. Rows = competitors. Columns = dimensions:
323
518
 
324
- | Dimension | Cell value |
325
- |---|---|
326
- | Primary hex | `#0A2540` |
327
- | Accent hex | `#635BFF` |
328
- | Palette saturation | avg HSL S |
329
- | Palette lightness | avg HSL L (reveals light vs dark mode default) |
330
- | Display font class | modern-sans / editorial-serif / grotesque / mono / custom |
331
- | Body font | computed family |
332
- | Radius posture | sharp / subtle / rounded / pill |
333
- | Hero layout | left-copy-right-image / centered / full-bleed / split-screen |
334
- | Imagery | illustration / photo / 3D / hybrid / abstract |
335
- | Motion | none / subtle / moderate / heavy-scroll-driven |
336
- | Archetype (primary) | Sage / Creator / Hero / … |
337
- | Aaker peak | Competence / Sophistication / Excitement / … |
338
- | Vibe | premium / tech-futuristic / calm-corporate / etc. |
339
- | Tone (NN/g 4D) | F-S / F-C / R-I / E-M tuple |
340
- | Hero verb | ship / send / scale / automate / … |
341
- | CTA pattern | hard+soft / enterprise-only / dev-docs-led |
342
- | Social proof | trusted-by bar / testimonials / none |
343
- | Pricing posture | 3-tier / usage / contact-sales |
519
+ | Dimension | Cell value |
520
+ | ------------------- | ------------------------------------------------------------ |
521
+ | Primary hex | `#0A2540` |
522
+ | Accent hex | `#635BFF` |
523
+ | Palette saturation | avg HSL S |
524
+ | Palette lightness | avg HSL L (reveals light vs dark mode default) |
525
+ | Display font class | modern-sans / editorial-serif / grotesque / mono / custom |
526
+ | Body font | computed family |
527
+ | Radius posture | sharp / subtle / rounded / pill |
528
+ | Hero layout | left-copy-right-image / centered / full-bleed / split-screen |
529
+ | Imagery | illustration / photo / 3D / hybrid / abstract |
530
+ | Motion | none / subtle / moderate / heavy-scroll-driven |
531
+ | Archetype (primary) | Sage / Creator / Hero / … |
532
+ | Aaker peak | Competence / Sophistication / Excitement / … |
533
+ | Vibe | premium / tech-futuristic / calm-corporate / etc. |
534
+ | Tone (NN/g 4D) | F-S / F-C / R-I / E-M tuple |
535
+ | Hero verb | ship / send / scale / automate / … |
536
+ | CTA pattern | hard+soft / enterprise-only / dev-docs-led |
537
+ | Social proof | trusted-by bar / testimonials / none |
538
+ | Pricing posture | 3-tier / usage / contact-sales |
344
539
 
345
540
  ### 5.2 Frequency analysis → obey/extend/subvert
346
541
 
@@ -351,26 +546,26 @@ For each column, compute how many of 5–10 competitors share the modal value.
351
546
  - **Fragmented (no mode >40%)** → **open territory**. Any choice is defensible; pick based on archetype and target audience.
352
547
  - **Homogeneous on a bad code** (e.g., everyone uses stock photography) → **subvert**. Challenger brands gain memorability by violating a boring convention.
353
548
 
354
- ### 5.3 Byron Sharp's Distinctive Brand Assets framework (Sharp, *How Brands Grow*, OUP 2010; Romaniuk, *Building Distinctive Brand Assets*, OUP 2018)
549
+ ### 5.3 Byron Sharp's Distinctive Brand Assets framework (Sharp, _How Brands Grow_, OUP 2010; Romaniuk, _Building Distinctive Brand Assets_, OUP 2018)
355
550
 
356
- DBAs are non-brand-name elements that trigger the brand into memory — colors, shapes, mascots, fonts, jingles, taglines, packaging. Romaniuk's Distinctive Asset Grid plots **Fame** (% of category buyers who link the asset to the brand) against **Uniqueness** (% who link it *only* to this brand).
551
+ DBAs are non-brand-name elements that trigger the brand into memory — colors, shapes, mascots, fonts, jingles, taglines, packaging. Romaniuk's Distinctive Asset Grid plots **Fame** (% of category buyers who link the asset to the brand) against **Uniqueness** (% who link it _only_ to this brand).
357
552
 
358
- | | Low Fame | High Fame |
359
- |---|---|---|
360
- | **High Uniqueness** | **Invest** — protect and build exposure | **Use or lose** — defend, deploy widely, can replace brand name |
361
- | **Low Uniqueness** | **Test or ignore** | **Avoid/Solo** — famous but co-owned with category; competitors free-ride |
553
+ | | Low Fame | High Fame |
554
+ | ------------------- | --------------------------------------- | ------------------------------------------------------------------------- |
555
+ | **High Uniqueness** | **Invest** — protect and build exposure | **Use or lose** — defend, deploy widely, can replace brand name |
556
+ | **Low Uniqueness** | **Test or ignore** | **Avoid/Solo** — famous but co-owned with category; competitors free-ride |
362
557
 
363
558
  Canonical DBAs: Coca-Cola red (Pantone 484), Nike Swoosh, McDonald's Golden Arches, Tiffany Blue (PMS custom 1837), Cadbury royal purple (Pantone 2685C), Geico Gecko, Intel's five-note bong.
364
559
 
365
560
  **Audit use**: for each competitor, inventory candidate assets; for the current project, identify one-to-three DBAs worth investing in, avoiding colors/shapes already occupied by the category king.
366
561
 
367
- ### 5.4 Marty Neumeier's *Zag* (2006) — finding whitespace
562
+ ### 5.4 Marty Neumeier's _Zag_ (2006) — finding whitespace
368
563
 
369
564
  Neumeier's thesis: "when everybody zigs, zag." A zag must be **good** (customers value it) and **different** (surprising, fresh). Different alone = quirky failure; good alone = me-too.
370
565
 
371
566
  **The onliness statement formula:**
372
567
 
373
- > Our ___[WHAT]___ is the only ___[WHAT]___ that ___[HOW]___ for ___[WHO]___ in ___[WHERE]___ who ___[WHY]___ in an era of ___[WHEN]___.
568
+ > Our **_[WHAT]_** is the only **_[WHAT]_** that **_[HOW]_** for **_[WHO]_** in **_[WHERE]_** who **_[WHY]_** in an era of **_[WHEN]_**.
374
569
 
375
570
  Minimal form: "Our X is the only X that Y." Harley-Davidson worked example from the book: "Our motorcycle company is the only one that makes big, loud motorcycles for macho guys (and macho wannabes) mostly in the US who want to join a gang of cowboys in an era of decreasing personal freedom."
376
571
 
@@ -392,7 +587,7 @@ For each category code identified:
392
587
 
393
588
  The clearest signals: second-person addressing ("you" = direct user), first-person-plural pitch ("we help you" = service posture), third-person institutional ("organizations can" = enterprise B2B). CTAs are the B2B/B2C classifier: "Request a demo" / "Contact sales" / "Book a call" = B2B-enterprise. "Get started free" / "Try free for 14 days" = B2B SMB or PLG. "Sign up" / "Download the app" = consumer. Pricing visibility: public tiered = PLG; "Contact us" only = enterprise; no pricing page = pre-revenue or agency.
394
589
 
395
- ### 6.2 Hofstede's six cultural dimensions (Hofstede, *Culture's Consequences*, Sage 1980; Hofstede, Hofstede & Minkov, *Cultures and Organizations*, 3rd ed., McGraw-Hill 2010)
590
+ ### 6.2 Hofstede's six cultural dimensions (Hofstede, _Culture's Consequences_, Sage 1980; Hofstede, Hofstede & Minkov, _Cultures and Organizations_, 3rd ed., McGraw-Hill 2010)
396
591
 
397
592
  Each scored 0–100 per country at hofstede-insights.com.
398
593
 
@@ -409,26 +604,26 @@ Localize by scoring the brand site 1–5 against each dimension's target-country
409
604
 
410
605
  Three canonical schools:
411
606
 
412
- - **Christensen** (HBS, *Competing Against Luck*, 2016) — the milkshake study; "customers hire products to make progress in a particular circumstance."
413
- - **Tony Ulwick** (Strategyn, *Jobs to be Done: Theory to Practice*, 2016) — Outcome-Driven Innovation (ODI). Universal Job Map: Define → Locate → Prepare → Confirm → Execute → Monitor → Modify → Conclude. Desired outcomes written as: "[minimize/increase] [unit: time, likelihood] [object] [context]." 50–150 outcomes per typical market; opportunities = `importance + max(importance − satisfaction, 0)`.
414
- - **Bob Moesta** (Re-Wired Group, *Demand-Side Sales 101*, 2020) — Switch Interview and Four Forces of Progress:
607
+ - **Christensen** (HBS, _Competing Against Luck_, 2016) — the milkshake study; "customers hire products to make progress in a particular circumstance."
608
+ - **Tony Ulwick** (Strategyn, _Jobs to be Done: Theory to Practice_, 2016) — Outcome-Driven Innovation (ODI). Universal Job Map: Define → Locate → Prepare → Confirm → Execute → Monitor → Modify → Conclude. Desired outcomes written as: "[minimize/increase] [unit: time, likelihood] [object] [context]." 50–150 outcomes per typical market; opportunities = `importance + max(importance − satisfaction, 0)`.
609
+ - **Bob Moesta** (Re-Wired Group, _Demand-Side Sales 101_, 2020) — Switch Interview and Four Forces of Progress:
415
610
 
416
- | Force | Direction |
417
- |---|---|
418
- | **Push** of the situation | drives away from current solution |
419
- | **Pull** of the new solution | attracts to alternative |
420
- | **Anxiety** of the new | resists change |
421
- | **Habit** of the present | resists change |
611
+ | Force | Direction |
612
+ | ---------------------------- | --------------------------------- |
613
+ | **Push** of the situation | drives away from current solution |
614
+ | **Pull** of the new solution | attracts to alternative |
615
+ | **Anxiety** of the new | resists change |
616
+ | **Habit** of the present | resists change |
422
617
 
423
- Demand exists when *Push + Pull > Anxiety + Habit*.
618
+ Demand exists when _Push + Pull > Anxiety + Habit_.
424
619
 
425
620
  **Job taxonomy:** functional ("get a healthy meal on the table in 20 minutes"), emotional ("feel like a competent parent"), social ("be seen as a thoughtful host").
426
621
 
427
- **Job Story format** (Klement/Intercom): *When [SITUATION], I want to [MOTIVATION], so I can [EXPECTED OUTCOME].* Persona-agnostic and solution-agnostic.
622
+ **Job Story format** (Klement/Intercom): _When [SITUATION], I want to [MOTIVATION], so I can [EXPECTED OUTCOME]._ Persona-agnostic and solution-agnostic.
428
623
 
429
624
  **Agent use.** Infer the competitor's JTBD from hero headline ("Send better email" → "get email opened"), use-case pages (enumerate functional jobs), testimonials (emotional/social). Which competitors are named in "alternatives to" searches reveals the real competitive set — and hence the real job.
430
625
 
431
- ### 6.4 Alan Cooper persona methodology (*The Inmates Are Running the Asylum*, SAMS 1999; *About Face*, 4th ed. 2014)
626
+ ### 6.4 Alan Cooper persona methodology (_The Inmates Are Running the Asylum_, SAMS 1999; _About Face_, 4th ed. 2014)
432
627
 
433
628
  Goal-Directed Design operates on three goal layers: **experience goals** (how the user wants to feel — "not stupid"), **end goals** (outcome to accomplish), **life goals** (long-term self-image).
434
629
 
@@ -481,7 +676,7 @@ Canonical distinction: **voice is constant, tone is variable.** Mailchimp's voic
481
676
 
482
677
  Three formulas, each computed from word/sentence/syllable counts (use the `syllable` npm package for reliable syllable counts).
483
678
 
484
- **Flesch Reading Ease** (Flesch, *J. Applied Psychology*, 32(3):221–233, 1948):
679
+ **Flesch Reading Ease** (Flesch, _J. Applied Psychology_, 32(3):221–233, 1948):
485
680
 
486
681
  > RE = 206.835 − 1.015 × (words/sentences) − 84.6 × (syllables/words)
487
682
 
@@ -493,7 +688,7 @@ Higher = easier. 60–70 = plain English; <30 = academic.
493
688
 
494
689
  Output is a US grade level. Lower = easier. Adopted by US DoD, IRS, and many state regulators.
495
690
 
496
- **Gunning Fog Index** (Gunning, *The Technique of Clear Writing*, McGraw-Hill, 1952):
691
+ **Gunning Fog Index** (Gunning, _The Technique of Clear Writing_, McGraw-Hill, 1952):
497
692
 
498
693
  > Fog = 0.4 × [ (words/sentences) + 100 × (complex words / words) ]
499
694
 
@@ -542,6 +737,7 @@ The agent writes exactly one file at `market-analysis.md` in the repo root (or a
542
737
  _Generated by sd-research on <ISO date>. Confidence: <high|medium|low>._
543
738
 
544
739
  ## 1. Niche identification
740
+
545
741
  - **Detected vertical**: <top vertical> (score <X>, second <Y> at <Z>)
546
742
  - **Detected audience**: <top audience>
547
743
  - **Positioning tier**: <indie | SMB | mid-market | enterprise | consumer>
@@ -549,33 +745,41 @@ _Generated by sd-research on <ISO date>. Confidence: <high|medium|low>._
549
745
  - **Uncertainty flags**: <any signals pointing to alternative interpretations>
550
746
 
551
747
  ## 2. Competitor matrix
552
- | Competitor | Archetype | Aaker peak | Vibe | Primary hex | Display font | Radius | Hero pattern | Tone (4D) | Hero verb |
553
- |---|---|---|---|---|---|---|---|---|---|
554
- | Acme | Creator | Competence | minimalist | #0A2540 | GT America | subtle | left-copy-right-product | −1/+0/−1/+0 | ship |
555
- | Beta | Sage | Competence | calm-corporate | #1E3A8A | Inter | rounded | centered | −1/−1/−1/−1 | learn |
556
- | ... | | | | | | | | | |
748
+
749
+ | Competitor | Archetype | Aaker peak | Vibe | Primary hex | Display font | Radius | Hero pattern | Tone (4D) | Hero verb |
750
+ | ---------- | --------- | ---------- | -------------- | ----------- | ------------ | ------- | ----------------------- | ----------- | --------- |
751
+ | Acme | Creator | Competence | minimalist | #0A2540 | GT America | subtle | left-copy-right-product | −1/+0/−1/+0 | ship |
752
+ | Beta | Sage | Competence | calm-corporate | #1E3A8A | Inter | rounded | centered | −1/−1/−1/−1 | learn |
753
+ | ... | | | | | | | | | |
557
754
 
558
755
  _Source: `evidence/<competitor>/tokens.json` and `copy.json`._
559
756
 
560
757
  ## 3. Category codes — obey, extend, subvert
758
+
561
759
  ### Near-universal codes (≥80% of competitors)
760
+
562
761
  - **<code>**: observed in N/M competitors. Recommendation: **obey** because <rationale>.
563
762
 
564
763
  ### Split codes (40–70%)
764
+
565
765
  - **<code>**: observed in <majority> — recommendation: **extend** by <specific twist>.
566
766
 
567
767
  ### Open territory
768
+
568
769
  - **<dimension>**: no dominant convention. Recommendation: <choice> aligned with target archetype.
569
770
 
570
771
  ### Subversion opportunities
772
+
571
773
  - **<boring code>**: everyone does <thing>; subvert by <alternative> — this fits an Outlaw/Creator positioning.
572
774
 
573
775
  ## 4. Recommended brand archetype for this project
776
+
574
777
  - **Primary**: <archetype> — rationale tied to niche + audience + whitespace.
575
778
  - **Supporting**: <archetype>.
576
779
  - **Why not <alternative>**: <one sentence>.
577
780
 
578
781
  ## 5. Color palette recommendation
782
+
579
783
  - **Primary**: `#<hex>` — HSL <h,s,l>. Rationale: <why>.
580
784
  - **Secondary / accent**: `#<hex>`.
581
785
  - **Neutrals**: `#<hex>` (bg), `#<hex>` (surface), `#<hex>` (border), `#<hex>` (fg).
@@ -583,12 +787,14 @@ _Source: `evidence/<competitor>/tokens.json` and `copy.json`._
583
787
  - **Avoided colors**: <hexes used by closest 2 competitors — do not copy>.
584
788
 
585
789
  ## 6. Typography recommendation
790
+
586
791
  - **Display**: <family> — rationale (archetype fit, category convention, contrast with competitors).
587
792
  - **Body**: <family>.
588
793
  - **Mono** (if applicable): <family>.
589
794
  - **Type scale**: base 16px, ratio <1.125|1.200|1.250>.
590
795
 
591
796
  ## 7. Target audience profile
797
+
592
798
  - **Primary persona**: name, role, 2 goals, 2 pains, representative quote.
593
799
  - **Secondary persona**: same shape.
594
800
  - **Negative persona**: explicit exclusion.
@@ -597,6 +803,7 @@ _Source: `evidence/<competitor>/tokens.json` and `copy.json`._
597
803
  - **Primary JTBD (Job Story format)**: "When <situation>, I want to <motivation>, so I can <outcome>."
598
804
 
599
805
  ## 8. Tone of voice recommendation
806
+
600
807
  - **NN/g 4D target**: F/S <±1>, F/C <±1>, R/I <±1>, E/M <±1>.
601
808
  - **Reading-level target**: FK grade <X>, Flesch RE <Y>.
602
809
  - **Pronoun posture**: "you" forward / "we" forward / balanced.
@@ -605,12 +812,15 @@ _Source: `evidence/<competitor>/tokens.json` and `copy.json`._
605
812
  - **Do/Don't examples**: three each, written for this specific project.
606
813
 
607
814
  ## 9. Actionable recommendations
815
+
608
816
  A prioritized list of ≤10 concrete moves for the super-design builder, each with: action, rationale, linked evidence.
609
817
 
610
818
  ## 10. Onliness statement (draft)
819
+
611
820
  > Our <CATEGORY> is the only <CATEGORY> that <HOW> for <WHO> in <WHERE> who <WHY> in an era of <WHEN>.
612
821
 
613
822
  ## Appendix — evidence
823
+
614
824
  - `evidence/<competitor>/home.png`, etc. — full-page screenshots.
615
825
  - `evidence/<competitor>/tokens.json` — extracted CSS variables, palette, type stack.
616
826
  - `evidence/<competitor>/copy.json` — hero, CTAs, headings, body sample.
@@ -634,7 +844,7 @@ Five principles shape the `sd-research` system prompt.
634
844
 
635
845
  **Self-check before returning.** The last section of every good research-agent prompt is a three-to-five-item checklist the agent walks before writing its final output: schema conformance, source verification, no invented names, confidence scoring honest.
636
846
 
637
- **Progressive disclosure.** Keep the agent's own system prompt under ~2,000 words. Offload reference material (this playbook, archetype lookups, dependency maps) to `references/*.md` loaded with `Read` on demand. The agent knows *where* to look; it doesn't carry all knowledge in context.
847
+ **Progressive disclosure.** Keep the agent's own system prompt under ~2,000 words. Offload reference material (this playbook, archetype lookups, dependency maps) to `references/*.md` loaded with `Read` on demand. The agent knows _where_ to look; it doesn't carry all knowledge in context.
638
848
 
639
849
  Supporting practices: use XML tags (`<procedure>`, `<output_format>`, `<evidence_rules>`) — Claude was trained on this structure; prefer explicit tools allowlist (principle of least privilege); forbid the `Agent` tool (subagents can't spawn subagents); use absolute paths in Bash (cd doesn't persist between calls); remind the agent that `cd` doesn't persist and that it won't see the parent's `CLAUDE.md`.
640
850
 
@@ -644,7 +854,7 @@ Supporting practices: use XML tags (`<procedure>`, `<output_format>`, `<evidence
644
854
 
645
855
  The ready-to-paste file. Assumes the super-design skill lives at `.claude/skills/super-design/` and this playbook is at `.claude/skills/super-design/references/market-research-playbook.md`. Playwright MCP is scoped inline so its tool schemas don't leak into the parent context.
646
856
 
647
- ```markdown
857
+ ````markdown
648
858
  ---
649
859
  name: sd-research
650
860
  description: MUST BE USED at the start of every super-design run to produce market-analysis.md. Auto-detects the project's niche from its repo, auto-discovers 5–10 competitors, audits their design language via browser automation, and delivers evidence-backed positioning recommendations. Use proactively whenever the user invokes the super-design skill, mentions competitors, brand positioning, market research, design direction, or asks "what should this product look like?"
@@ -652,13 +862,14 @@ tools: Read, Write, Glob, Grep, Bash, WebSearch, WebFetch
652
862
  model: sonnet
653
863
  color: purple
654
864
  mcpServers:
655
- - playwright:
656
- type: stdio
657
- command: npx
658
- args: ["-y", "@playwright/mcp@latest"]
865
+ - playwright:
866
+ type: stdio
867
+ command: npx
868
+ args: ['-y', '@playwright/mcp@latest']
659
869
  ---
660
870
 
661
871
  # Role
872
+
662
873
  You are a senior design researcher and brand strategist. You combine three disciplines: (1) programmatic repository analysis to infer a project's niche and audience; (2) competitive design-language extraction via browser automation; (3) synthesis into a defensible positioning brief grounded in canonical branding frameworks — Mark & Pearson archetypes, Aaker, Kapferer, Keller, Ehrenberg-Bass, Neumeier, NN/g tone, Christensen/Ulwick/Moesta JTBD, Hofstede, Cooper personas.
663
874
 
664
875
  Your output is exactly one file: `market-analysis.md` in the repo root, plus an `evidence/` directory of screenshots, extracted tokens, and copy samples. You never fabricate. Every claim cites a repo file path or an in-session URL.
@@ -669,20 +880,21 @@ Your output is exactly one file: `market-analysis.md` in the repo root, plus an
669
880
  1. **Locate the repo root** (cwd; do not assume paths). Read `package.json`, `README.md`, `CLAUDE.md`, `AGENTS.md` if present, and any manifest files (`pyproject.toml`, `Cargo.toml`, `go.mod`, `pubspec.yaml`, `foundry.toml`, `hardhat.config.ts`, `anchor.toml`, `dbt_project.yml`). Use `Read` and `Glob`.
670
881
  2. **Load the playbook.** Read `.claude/skills/super-design/references/market-research-playbook.md` for dependency-to-vertical mappings, archetype detection heuristics, and extraction snippets. When in doubt, defer to the playbook.
671
882
  3. **Detect niche.** Apply the 8-signal scoring algorithm (playbook §1). Score verticals and audiences by dependency weight, manifest signals, README semantics, domain-entity clustering, and i18n locales. Compute confidence = top / (top + second). If < 0.55, use `AskUserQuestion` with three concrete options drawn from top verticals; otherwise infer silently and record reasoning in `evidence/niche.md`.
672
- 4. **Discover competitors.** Run the 7-source crawl (playbook §2): WebSearch for "alternatives to <seed>" and "<seed> vs"; WebFetch Product Hunt topics, G2/Capterra/TrustRadius category pages, YC directory, awesome-* lists, Reddit and HN Algolia queries, SimilarWeb/BuiltWith. Dedupe by registrable domain. Rank using fame×similarity×design-signal. Finalize 5–10 covering category-king, peers, challenger, emerging, and enterprise-anchor buckets.
883
+ 4. **Discover competitors.** Run the 7-source crawl (playbook §2): WebSearch for "alternatives to <seed>" and "<seed> vs"; WebFetch Product Hunt topics, G2/Capterra/TrustRadius category pages, YC directory, awesome-\* lists, Reddit and HN Algolia queries, SimilarWeb/BuiltWith. Dedupe by registrable domain. Rank using fame×similarity×design-signal. Finalize 5–10 covering category-king, peers, challenger, emerging, and enterprise-anchor buckets.
673
884
  5. **Audit each competitor.** For each finalist, use the Playwright MCP tools to visit homepage, primary product page, pricing, and About. For every page:
674
- - `browser_navigate` → `browser_resize({width:1440,height:900})` → `browser_wait_for({time:1.5})`.
675
- - `browser_take_screenshot({fullPage:true, filename:"evidence/<slug>/<page>.png"})`.
676
- - `browser_evaluate` using the snippets in playbook §3.2–3.11: font-family frequency, color histogram, CSS custom properties, heading hierarchy, spacing histogram, radius distribution, Tailwind/shadcn telltale detection, copy harvest, shadow/elevation.
677
- - Save extracted data to `evidence/<slug>/tokens.json`, `typography.json`, `copy.json`.
885
+ - `browser_navigate` → `browser_resize({width:1440,height:900})` → `browser_wait_for({time:1.5})`.
886
+ - `browser_take_screenshot({fullPage:true, filename:"evidence/<slug>/<page>.png"})`.
887
+ - `browser_evaluate` using the snippets in playbook §3.2–3.11: font-family frequency, color histogram, CSS custom properties, heading hierarchy, spacing histogram, radius distribution, Tailwind/shadcn telltale detection, copy harvest, shadow/elevation.
888
+ - Save extracted data to `evidence/<slug>/tokens.json`, `typography.json`, `copy.json`.
678
889
  6. **Classify each competitor.** Assign primary+supporting archetype (playbook §4.1), Aaker peak (§4.2), vibe class (§3 table + classification function), NN/g 4D tone (§7.1 via the tone-analysis prompt), and hero-pattern taxonomy.
679
890
  7. **Build the category-code matrix.** Tabulate every competitor across the dimensions in playbook §5.1. Compute frequency for each column. Classify each code as obey / extend / subvert / open-territory per playbook §5.2.
680
891
  8. **Synthesize recommendations.** Pick primary+supporting archetype for the current project that sits in whitespace (Neumeier insertion test, playbook §5.4). Derive palette, typography, tone, audience profile, and JTBD. Draft the onliness statement.
681
892
  9. **Write `market-analysis.md`** following the exact schema in playbook §8.
682
893
  10. **Run self-check** (below). If any check fails, fix and re-verify before returning.
683
- </procedure>
894
+ </procedure>
684
895
 
685
896
  <evidence_rules>
897
+
686
898
  ## Evidence rules (non-negotiable)
687
899
 
688
900
  - Every factual claim resolves to (a) a repo path with line reference, (b) a file in `evidence/`, or (c) a URL retrieved this session.
@@ -691,9 +903,10 @@ Your output is exactly one file: `market-analysis.md` in the repo root, plus an
691
903
  - Quotes from competitor copy are verbatim, in quotation marks, with the page URL.
692
904
  - Confidence scoring is honest: high only when top vertical score > 2× second; medium otherwise; low when discovery produced fewer than 5 viable competitors.
693
905
  - Do not copy competitor colors, fonts, or taglines for the current project. Recommendations must differentiate, not imitate.
694
- </evidence_rules>
906
+ </evidence_rules>
695
907
 
696
908
  <output_format>
909
+
697
910
  ## Output format
698
911
 
699
912
  Write exactly one file, `market-analysis.md`, matching the 10-section schema in playbook §8. Sections: (1) Niche identification, (2) Competitor matrix, (3) Category codes, (4) Archetype recommendation, (5) Color palette, (6) Typography, (7) Audience profile, (8) Tone of voice, (9) Actionable recommendations, (10) Onliness statement, plus Evidence appendix. Every table uses markdown table syntax. Every recommendation is numbered and cites evidence by filename.
@@ -702,6 +915,7 @@ Return to the parent agent a three-to-five-sentence summary — no more — anno
702
915
  </output_format>
703
916
 
704
917
  <self_check>
918
+
705
919
  ## Self-check before returning
706
920
 
707
921
  - [ ] `market-analysis.md` exists and matches the schema in playbook §8.
@@ -712,7 +926,7 @@ Return to the parent agent a three-to-five-sentence summary — no more — anno
712
926
  - [ ] Onliness statement fails the insertion test for every competitor (no competitor's name can be substituted and still make it true).
713
927
  - [ ] Recommendations differentiate from (rather than imitate) the closest two competitors.
714
928
  - [ ] The summary returned to the parent agent is ≤5 sentences.
715
- </self_check>
929
+ </self_check>
716
930
 
717
931
  ## Tool-use notes
718
932
 
@@ -734,40 +948,47 @@ Return to the parent agent a three-to-five-sentence summary — no more — anno
734
948
  _Generated by sd-research on 2026-04-18. Confidence: high._
735
949
 
736
950
  ## 1. Niche identification
951
+
737
952
  - **Detected vertical**: ai-chat (score 4.6; second: ai-tooling at 2.1)
738
953
  - **Detected audience**: chat-products (indie B2B SaaS)
739
954
  - **Positioning tier**: indie / PLG
740
955
  - **Primary evidence**:
741
- - `package.json:23` — `"ai": "^3.4.0"` (Vercel AI SDK, vertical=ai-chat weight 0.95)
742
- - `package.json:24` — `"@ai-sdk/anthropic": "^0.2.0"` (weight 0.95)
743
- - `package.json:18` — `"@clerk/nextjs": "^5.0.0"` (audience=B2B-saas-modern, 0.95)
744
- - `README.md:1–3` — "Acme AI is a conversational assistant for product teams" (B2B, product-team audience)
745
- - `app/api/chat/route.ts:1–12` — streaming chat endpoint using `ai` SDK
956
+ - `package.json:23` — `"ai": "^3.4.0"` (Vercel AI SDK, vertical=ai-chat weight 0.95)
957
+ - `package.json:24` — `"@ai-sdk/anthropic": "^0.2.0"` (weight 0.95)
958
+ - `package.json:18` — `"@clerk/nextjs": "^5.0.0"` (audience=B2B-saas-modern, 0.95)
959
+ - `README.md:1–3` — "Acme AI is a conversational assistant for product teams" (B2B, product-team audience)
960
+ - `app/api/chat/route.ts:1–12` — streaming chat endpoint using `ai` SDK
746
961
  - **Uncertainty flags**: none.
747
962
 
748
963
  ## 2. Competitor matrix
749
- | Competitor | Archetype | Aaker peak | Vibe | Primary | Display font | Radius | Hero | Tone | Verb |
750
- |---|---|---|---|---|---|---|---|---|---|
751
- | Linear | Creator | Competence | minimalist | #5E6AD2 | Inter Display | subtle | centered | −1/+0/−1/−1 | build |
752
- | Vercel | Sage | Competence | tech-futuristic | #000000 | Geist | subtle | centered | −1/+0/−1/−1 | ship |
753
- | Cursor | Outlaw | Excitement | tech-futuristic | #000000 | Inter | subtle | left-copy | +0/+1/−1/+0 | code |
754
- | v0 | Creator | Excitement | tech-futuristic | #000000 | Geist | subtle | centered | +0/+1/−1/+0 | generate |
755
- | ... | | | | | | | | | |
964
+
965
+ | Competitor | Archetype | Aaker peak | Vibe | Primary | Display font | Radius | Hero | Tone | Verb |
966
+ | ---------- | --------- | ---------- | --------------- | ------- | ------------- | ------ | --------- | ----------- | -------- |
967
+ | Linear | Creator | Competence | minimalist | #5E6AD2 | Inter Display | subtle | centered | −1/+0/−1/−1 | build |
968
+ | Vercel | Sage | Competence | tech-futuristic | #000000 | Geist | subtle | centered | −1/+0/−1/−1 | ship |
969
+ | Cursor | Outlaw | Excitement | tech-futuristic | #000000 | Inter | subtle | left-copy | +0/+1/−1/+0 | code |
970
+ | v0 | Creator | Excitement | tech-futuristic | #000000 | Geist | subtle | centered | +0/+1/−1/+0 | generate |
971
+ | ... | | | | | | | | | |
756
972
 
757
973
  _Source: `evidence/linear/`, `evidence/vercel/`, etc._
758
974
 
759
975
  ## 4. Recommended brand archetype
760
- - **Primary**: Creator — rationale: the target audience (product teams) hires AI tools to *make* things; the Creator motto "if you can imagine it, it can be done" fits the value prop; three of seven competitors already land here but none execute it with editorial typography.
976
+
977
+ - **Primary**: Creator — rationale: the target audience (product teams) hires AI tools to _make_ things; the Creator motto "if you can imagine it, it can be done" fits the value prop; three of seven competitors already land here but none execute it with editorial typography.
761
978
  - **Supporting**: Sage — reinforces trustworthiness in an AI category where hallucination concerns dominate.
762
979
  - **Why not Outlaw**: Cursor and v0 already occupy the dev-rebel slot; differentiation requires a calmer posture.
763
980
 
764
981
  ## 10. Onliness statement (draft)
982
+
765
983
  > Our AI assistant is the only AI assistant that generates production-ready product specs for cross-functional product teams in modern SaaS companies who need to ship twice as fast in an era of AI-native product development.
766
984
  ```
985
+ ````
986
+
767
987
  ```
768
988
 
769
989
  ---
770
990
 
771
991
  ## Conclusion
772
992
 
773
- The Market Research Agent succeeds when it behaves like a senior brand strategist who happens to read code. Three disciplines must fuse in one pass: programmatic **inference** from the repo's fingerprint (dependencies, manifests, domain entities, design tokens), disciplined **extraction** from competitor surfaces via Playwright-driven computed-style harvesting and dual-path palette analysis, and canonical-framework **synthesis** across twelve archetypes, five Aaker dimensions, six Kapferer facets, four Keller levels, Ehrenberg-Bass distinctive assets, Neumeier's onliness test, NN/g four-dimensional tone, JTBD in three voices (Christensen, Ulwick, Moesta), Hofstede localization, and Cooper personas. The novel insight: the repo itself is the highest-trust brief the agent ever receives — a well-chosen auth library or UI kit reveals audience more cleanly than any user interview. Evidence discipline and confidence calibration are what turn inference into a defensible recommendation rather than a confident guess; the self-check block at the bottom of the agent file exists because Claude 4.5 will skip citation without explicit instruction. Used together, these ten sections let a fresh `claude code` session walk into an unfamiliar repo and emerge, forty minutes later, with a market-analysis.md that a design lead would recognize as real work.
993
+ The Market Research Agent succeeds when it behaves like a senior brand strategist who happens to read code. Three disciplines must fuse in one pass: programmatic **inference** from the repo's fingerprint (dependencies, manifests, domain entities, design tokens), disciplined **extraction** from competitor surfaces via Playwright-driven computed-style harvesting and dual-path palette analysis, and canonical-framework **synthesis** across twelve archetypes, five Aaker dimensions, six Kapferer facets, four Keller levels, Ehrenberg-Bass distinctive assets, Neumeier's onliness test, NN/g four-dimensional tone, JTBD in three voices (Christensen, Ulwick, Moesta), Hofstede localization, and Cooper personas. The novel insight: the repo itself is the highest-trust brief the agent ever receives — a well-chosen auth library or UI kit reveals audience more cleanly than any user interview. Evidence discipline and confidence calibration are what turn inference into a defensible recommendation rather than a confident guess; the self-check block at the bottom of the agent file exists because Claude 4.5 will skip citation without explicit instruction. Used together, these ten sections let a fresh `claude code` session walk into an unfamiliar repo and emerge, forty minutes later, with a market-analysis.md that a design lead would recognize as real work.
994
+ ```