start-vibing 4.1.0 → 4.1.1
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.
- package/package.json +1 -1
- package/template/.claude/CLAUDE.md +86 -20
- package/template/.claude/agents/sd-audit.md +197 -0
- package/template/.claude/agents/sd-fix-verify-semantic.md +112 -0
- package/template/.claude/agents/sd-fix-verify-technical.md +36 -0
- package/template/.claude/agents/sd-fix.md +194 -0
- package/template/.claude/agents/sd-research.md +61 -0
- package/template/.claude/agents/sd-synthesis.md +74 -0
- package/template/.claude/commands/super-design.md +15 -0
- package/template/.claude/hooks/super-design-session-start.sh +4 -0
- package/template/.claude/settings.json +14 -0
- package/template/.claude/skills/codebase-knowledge/SKILL.md +145 -0
- package/template/.claude/skills/codebase-knowledge/TEMPLATE.md +35 -0
- package/template/.claude/skills/codebase-knowledge/domains/claude-system.md +93 -0
- package/template/.claude/skills/composition-patterns/SKILL.md +89 -0
- package/template/.claude/skills/docs-tracker/SKILL.md +239 -0
- package/template/.claude/skills/mcp-builder/SKILL.md +236 -0
- package/template/.claude/skills/quality-gate/scripts/check-all.sh +83 -0
- package/template/.claude/skills/react-best-practices/SKILL.md +146 -0
- package/template/.claude/skills/security-scan/reference/owasp-top-10.md +257 -0
- package/template/.claude/skills/security-scan/scripts/scan.py +190 -0
- package/template/.claude/skills/super-design/README.md +37 -0
- package/template/.claude/skills/super-design/SKILL.md +105 -0
- package/template/.claude/skills/super-design/hooks/guard-paths.py +35 -0
- package/template/.claude/skills/super-design/hooks/post-edit-lint.py +57 -0
- package/template/.claude/skills/super-design/references/audit-methodology.md +513 -0
- package/template/.claude/skills/super-design/references/change-detection-playbook.md +1432 -0
- package/template/.claude/skills/super-design/references/design-theory.md +706 -0
- package/template/.claude/skills/super-design/references/fix-agent-playbook.md +118 -0
- package/template/.claude/skills/super-design/references/market-research-playbook.md +773 -0
- package/template/.claude/skills/super-design/references/playwright-mcp-reference.md +1057 -0
- package/template/.claude/skills/super-design/references/skills-subagents-reference.md +784 -0
- package/template/.claude/skills/super-design/references/superpowers-and-distribution.md +136 -0
- package/template/.claude/skills/super-design/scripts/detect-changes.sh +61 -0
- package/template/.claude/skills/super-design/scripts/diff-tokens.sh +13 -0
- package/template/.claude/skills/super-design/scripts/discover-routes.sh +45 -0
- package/template/.claude/skills/super-design/scripts/extract-tokens.mjs +41 -0
- package/template/.claude/skills/super-design/scripts/hash-pages.sh +42 -0
- package/template/.claude/skills/super-design/scripts/validate-state.sh +15 -0
- package/template/.claude/skills/super-design/scripts/verify-audit.sh +19 -0
- package/template/.claude/skills/super-design/templates/audit-state.schema.json +57 -0
- package/template/.claude/skills/super-design/templates/findings.schema.json +57 -0
- package/template/.claude/skills/super-design/templates/fix-history.md.tpl +26 -0
- package/template/.claude/skills/super-design/templates/overview.md.tpl +52 -0
- package/template/.claude/skills/test-coverage/reference/playwright-patterns.md +260 -0
- package/template/.claude/skills/test-coverage/scripts/coverage-check.sh +52 -0
- package/template/.claude/skills/typeui-ant/SKILL.md +133 -0
- package/template/.claude/skills/typeui-application/SKILL.md +128 -0
- package/template/.claude/skills/typeui-artistic/SKILL.md +133 -0
- package/template/.claude/skills/typeui-bento/SKILL.md +127 -0
- package/template/.claude/skills/typeui-bold/SKILL.md +127 -0
- package/template/.claude/skills/typeui-clean/SKILL.md +128 -0
- package/template/.claude/skills/typeui-dashboard/SKILL.md +133 -0
- package/template/.claude/skills/typeui-doodle/SKILL.md +142 -0
- package/template/.claude/skills/typeui-dramatic/SKILL.md +127 -0
- package/template/.claude/skills/typeui-enterprise/SKILL.md +132 -0
- package/template/.claude/skills/typeui-neobrutalism/SKILL.md +127 -0
- package/template/.claude/skills/typeui-paper/SKILL.md +127 -0
- package/template/.claude/skills/ui-ux-audit/QUICK-START.md +450 -0
- package/template/.claude/skills/ui-ux-audit/README.md +470 -0
- package/template/.claude/skills/ui-ux-audit/templates/audit-report.md +591 -0
- package/template/.claude/skills/ui-ux-audit/templates/competitor-analysis.md +363 -0
- package/template/.claude/skills/ui-ux-audit/templates/component-spec.md +491 -0
- package/template/.claude/skills/ui-ux-audit/templates/improvement-recommendation.md +450 -0
- package/template/.claude/skills/web-design-guidelines/SKILL.md +39 -0
- package/template/.claude/skills/webapp-testing/SKILL.md +96 -0
- package/template/.claude/skills/workflow-state/workflow-state.json +77 -0
|
@@ -0,0 +1,773 @@
|
|
|
1
|
+
# Market research playbook for the super-design skill
|
|
2
|
+
|
|
3
|
+
> Reference document for `.claude/agents/sd-research.md`. Bundle path: `references/market-research-playbook.md`. Everything below is prescriptive guidance for an autonomous Market Research subagent that must determine a project's niche, find competitors, audit their design language, and ship a defensible `market-analysis.md` — **without any user-supplied context**.
|
|
4
|
+
|
|
5
|
+
The agent's contract: given only a repository path, produce evidence-backed positioning recommendations. Every claim must cite a source (file path + line, or URL + quote). When evidence is insufficient, the agent says so rather than inventing. The ten sections below move from inference (what is this repo?) to synthesis (what should this brand become?) and close with the ready-to-paste agent file.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 1. Niche and industry detection from a repo
|
|
10
|
+
|
|
11
|
+
The repo is a fingerprint. A modern software project leaks its vertical, audience, and design posture through eight independent signals. Score each, combine with weights, and only ask the user when confidence stays below threshold.
|
|
12
|
+
|
|
13
|
+
### 1.1 The eight signal layers (in order of signal strength)
|
|
14
|
+
|
|
15
|
+
1. **`package.json` dependencies and devDependencies** — highest signal density per byte. UI kits, auth, payments, and CMS packages are near-deterministic.
|
|
16
|
+
2. **Manifest files** — `Cargo.toml`, `go.mod`, `pyproject.toml`, `Gemfile`, `composer.json`, `pubspec.yaml`, `foundry.toml`, `hardhat.config.ts`, `anchor.toml`, `dbt_project.yml`, `ProjectVersion.txt` (Unity).
|
|
17
|
+
3. **`README.md`** — natural-language value prop, target user, and domain lexicon. Parse the first 500 words, H1, and any badges.
|
|
18
|
+
4. **`CLAUDE.md` / `AGENTS.md`** — if present, the author has already summarized intent for an AI. Treat as highest-trust signal short of user confirmation.
|
|
19
|
+
5. **Source tree domain entities** — directory names (`src/billing`, `src/merchants`, `app/dashboard`, `prisma/schema.prisma` models, `app/api/webhooks/stripe/route.ts`).
|
|
20
|
+
6. **`tailwind.config.*` or `@theme` block** — brand colors, fonts, radius reveal existing design posture.
|
|
21
|
+
7. **i18n locales** — `zh-CN`, `ja`, `ko` → APAC; `de`, `fr`, `es`, `pt` → EU/LATAM; `en` only → US-default.
|
|
22
|
+
8. **CI/infra hints** — Helm charts and Kubernetes clients point at platform-engineering audiences; `vercel.json`/`netlify.toml` at modern frontend indie.
|
|
23
|
+
|
|
24
|
+
### 1.2 Dependency → vertical lookup (core mappings)
|
|
25
|
+
|
|
26
|
+
Every match contributes `weight` to a vertical score and an audience score. Final niche = top vertical; audience = top audience score.
|
|
27
|
+
|
|
28
|
+
**Payments and commerce.** `stripe`, `@stripe/*`, `paddle`, `lemonsqueezy` → payments/SaaS (weight ~0.9). `@shopify/polaris` + `@shopify/app-bridge` → Shopify App Store app (weight 0.99, near-certain). `@medusajs/medusa` or `@saleor/sdk` → headless commerce.
|
|
29
|
+
|
|
30
|
+
**AI tooling.** `langchain`, `llamaindex`, `@anthropic-ai/sdk`, `openai`, `@ai-sdk/*` → AI/LLM vertical (0.9–0.95). Vercel AI SDK (`ai`, `@ai-sdk/react`) is the dominant fingerprint of a chat product. Vector DBs (`@pinecone-database/pinecone`, `chromadb`, `@qdrant/js-client-rest`, `weaviate-ts-client`) signal RAG infra.
|
|
31
|
+
|
|
32
|
+
**Auth as audience signal.** `@clerk/nextjs` → modern B2B SaaS. `@workos-inc/*` → enterprise SSO B2B. `auth0` → enterprise. `next-auth`/`better-auth`/`lucia` → indie. `firebase-auth` → consumer.
|
|
33
|
+
|
|
34
|
+
**CMS.** `sanity`/`next-sanity` → editorial/agency. `contentful` → enterprise marketing. `payload` → TS fullstack CMS. `@storyblok/react` or `@prismicio/client` → EU marketing.
|
|
35
|
+
|
|
36
|
+
**Mobile.** `expo` + `nativewind` + `@supabase/supabase-js` → consumer mobile indie. `@shopify/*` in RN → merchant companion.
|
|
37
|
+
|
|
38
|
+
**UI kit = audience signal (strong).** `@mui/material` → enterprise/Google-ecosystem. `@chakra-ui/react` → mid-market US SaaS. `@mantine/core` → indie dev tools. `@radix-ui/*` + `class-variance-authority` + `tailwind-merge` → shadcn/ui indie modern. `antd` / `@arco-design/web-react` / `@douyinfe/semi-ui` / `tdesign-react` → China-tech enterprise. `@fluentui/react` → Microsoft-ecosystem. `@carbon/react` → IBM enterprise. `@shopify/polaris` → Shopify app. `react-bootstrap` → legacy enterprise.
|
|
39
|
+
|
|
40
|
+
**Motion and 3D.** `gsap` + `lenis` + `three` + `@react-three/fiber` → premium marketing/agency (0.9+). `framer-motion` alone is weak (ubiquitous).
|
|
41
|
+
|
|
42
|
+
**Web3.** `wagmi` + `viem` + `@rainbow-me/rainbowkit` → consumer dApp. `@solana/web3.js` → Solana DeFi. `hardhat`/`foundry` → smart-contract dev tool.
|
|
43
|
+
|
|
44
|
+
**Analytics tone.** `posthog-js` → PLG product-team. `@segment/analytics-next` + `@amplitude/analytics-browser` → data-mature SaaS. `plausible-tracker` → privacy indie.
|
|
45
|
+
|
|
46
|
+
**Data/ML.** `dbt-core` + `dagster` + `duckdb` → modern data stack vendor. `torch`/`tensorflow`/`transformers` → ML research/product.
|
|
47
|
+
|
|
48
|
+
### 1.3 Composite stack fingerprints
|
|
49
|
+
|
|
50
|
+
Certain dependency co-occurrences collapse ambiguity instantly:
|
|
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 |
|
|
64
|
+
|
|
65
|
+
### 1.4 Semantic signals from README and CLAUDE.md
|
|
66
|
+
|
|
67
|
+
Parse the README's H1, first paragraph, and "Features" or "Why" section. Extract:
|
|
68
|
+
|
|
69
|
+
- **Value-prop verb** (the first active verb: "ship", "track", "analyze", "automate", "generate", "protect"). Maps to JTBD functional job.
|
|
70
|
+
- **Audience noun** ("for developers", "for marketers", "for growing teams", "for enterprises"). Direct B2B/B2C classifier.
|
|
71
|
+
- **Comparative mentions** ("an open-source alternative to X", "like Y for Z") — free competitor seeds.
|
|
72
|
+
- **Pricing model language** ("free forever", "self-hosted", "enterprise-grade", "usage-based") — positioning tier.
|
|
73
|
+
- **Badge inventory** — MIT/Apache licence, `npm version`, CI status, Discord, Product Hunt. Discord badge in README has >70% correlation with dev-tool/indie positioning.
|
|
74
|
+
|
|
75
|
+
### 1.5 Source-tree entity scan
|
|
76
|
+
|
|
77
|
+
Use `Glob` over `**/*.{ts,tsx,py,rb,go}` restricted to `src|app|server|api|models|schemas` (≤300 files). For each file, extract the top-level class/interface/model name and Route path. Cluster by stem. A repo with `Invoice`, `Subscription`, `Payout`, `CustomerPortal` is ecommerce/billing; one with `Document`, `Collection`, `Workspace`, `Block` is productivity; one with `Agent`, `Prompt`, `Tool`, `Trace` is AI tooling; one with `Campaign`, `Segment`, `Broadcast`, `Template` is marketing.
|
|
78
|
+
|
|
79
|
+
### 1.6 Tailwind/`@theme` brand read
|
|
80
|
+
|
|
81
|
+
Open `tailwind.config.{ts,js,mjs}` and grep for `extend.colors.primary`, `fontFamily`, `borderRadius`. For Tailwind v4 projects, the brand now lives in `@theme { --color-primary: …; --font-sans: …; --radius: …; }` inside `globals.css`. Extract primary hex → HSL; saturation >60 + lightness 40–60 = energetic; saturation <25 = premium or minimalist.
|
|
82
|
+
|
|
83
|
+
### 1.7 When to confirm vs infer silently
|
|
84
|
+
|
|
85
|
+
Compute confidence as `top_vertical_score / (top_vertical_score + second_vertical_score)`.
|
|
86
|
+
|
|
87
|
+
- **≥ 0.75**: infer silently, document reasoning in `evidence/niche.md`.
|
|
88
|
+
- **0.55–0.75**: infer but add a one-line "Detected niche: X (medium confidence; also consistent with Y). Override?" banner at the top of the output.
|
|
89
|
+
- **< 0.55**: use `AskUserQuestion` with three concrete options derived from the top three verticals. Never ask open-endedly — always offer options.
|
|
90
|
+
- **Always confirm** for regulated niches: fintech, healthtech, legal, gambling, crypto (regulatory design codes are strict; a wrong inference wastes work).
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## 2. Competitor discovery strategies
|
|
95
|
+
|
|
96
|
+
Goal: produce a ranked list of **5–10 competitors** per project — enough for category-code analysis, few enough that deep audits stay tractable.
|
|
97
|
+
|
|
98
|
+
### 2.1 The seven-source crawl
|
|
99
|
+
|
|
100
|
+
Run these in parallel and dedupe by domain. Expect ~40–80 raw candidates collapsing to 5–10 after ranking.
|
|
101
|
+
|
|
102
|
+
1. **Search operators** (via `WebSearch`): `"alternatives to <seed>"`, `"<seed> vs"`, `"best <niche> for <audience>"`, `"open source <niche>"`, `intext:"powered by <seed>"`. The "powered by" operator uniquely surfaces customers-as-competitors.
|
|
103
|
+
2. **Product Hunt** (`https://www.producthunt.com/topics/<slug>` and GraphQL API at `api.producthunt.com/v2/api/graphql`). Topic slugs: `developer-tools`, `artificial-intelligence`, `saas`, `marketing`, `design-tools`, `no-code`, `fintech`, `productivity`. Sort by `VOTES` in last 12 months for current relevance.
|
|
104
|
+
3. **G2 / Capterra / TrustRadius** — category pages at `g2.com/categories/<slug>`, `capterra.com/categories/<slug>`, `trustradius.com/categories`. G2's `/products/<slug>/competitors` page returns a curated peer list. Respect robots.txt; scrape with `WebFetch`.
|
|
105
|
+
4. **Y Combinator directory** at `ycombinator.com/companies` with filters `batch`, `industry`, `subindustry`. Powered by an Algolia backend (`45bwzj1sgc-dsn.algolia.net`) — the search box is directly scriptable.
|
|
106
|
+
5. **Awesome-\* GitHub lists**: `api.github.com/search/repositories?q=awesome+<niche>+in:name+stars:>500` then `WebFetch` the top list's README.
|
|
107
|
+
6. **Reddit + Hacker News**. Reddit JSON: `reddit.com/search.json?q=%22alternatives+to+<seed>%22&sort=new&limit=100`. HN Algolia (no auth): `hn.algolia.com/api/v1/search?query=<seed>+alternative&tags=story`. Threads titled "Ask HN: alternatives to …" are gold.
|
|
108
|
+
7. **Backlink / similar-sites** — `similarweb.com/website/<domain>` "Competitors & Alternatives" tab and `similarsites.com/site/<domain>`. `builtwith.com/<domain>` and `trends.builtwith.com/websitelist/<tech>` expose other sites on the same stack (often real competitors).
|
|
109
|
+
|
|
110
|
+
Supplementary signals: **Twitter/X** queries like `"switched from <seed> to"`, `"moved off <seed>"`, `"instead of <seed>"`; **Google autocomplete** via `suggestqueries.google.com/complete/search?client=firefox&q=<query>`; **SparkToro** for audience overlap.
|
|
111
|
+
|
|
112
|
+
### 2.2 Ranking and selection decision tree
|
|
113
|
+
|
|
114
|
+
Given raw candidates, select the final 5–10:
|
|
115
|
+
|
|
116
|
+
1. **Filter for live**: domain resolves, site responds in <10s, copyright year within two years. Drop zombies.
|
|
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.
|
|
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
|
+
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
|
+
|
|
126
|
+
### 2.3 The "only competitor that matters" test
|
|
127
|
+
|
|
128
|
+
Before finalizing, run Neumeier's insertion test: drop each competitor's name into the project's draft onliness statement ("Our X is the only X that Y"). If the statement still holds with the competitor's name substituted, that competitor shares the same position — include it. If no competitor fits the statement, the project's position is either unique (good) or underspecified (needs work).
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
## 3. Extracting brand and design language from competitors
|
|
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.
|
|
135
|
+
|
|
136
|
+
### 3.1 Browser setup
|
|
137
|
+
|
|
138
|
+
```ts
|
|
139
|
+
// Launch headless chromium at 1440×900 @2x, wait for networkidle.
|
|
140
|
+
await browser_navigate({ url });
|
|
141
|
+
await browser_resize({ width: 1440, height: 900 });
|
|
142
|
+
await browser_wait_for({ time: 1.5 }); // allow hero animations to settle
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Save the full-page screenshot to `evidence/<competitor>/<page>.png` via `browser_take_screenshot({ fullPage: true, filename: ... })`.
|
|
146
|
+
|
|
147
|
+
### 3.2 Typography extraction
|
|
148
|
+
|
|
149
|
+
```js
|
|
150
|
+
// browser_evaluate
|
|
151
|
+
const counts = new Map();
|
|
152
|
+
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);
|
|
156
|
+
}
|
|
157
|
+
return [...counts.entries()].sort((a,b)=>b[1]-a[1]).slice(0,20);
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
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.
|
|
161
|
+
|
|
162
|
+
### 3.3 Color palette extraction (dual approach)
|
|
163
|
+
|
|
164
|
+
**CSS-first** captures the brand's own tokens:
|
|
165
|
+
|
|
166
|
+
```js
|
|
167
|
+
const hist = new Map();
|
|
168
|
+
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
|
+
}
|
|
176
|
+
}
|
|
177
|
+
return [...hist.entries()].sort((a,b)=>b[1]-a[1]).slice(0,30);
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
Cluster by RGB distance (ε≈24) and keep the top 6–8 representatives.
|
|
181
|
+
|
|
182
|
+
**Image-based** (node-vibrant) captures the palette the user actually perceives from hero photography:
|
|
183
|
+
|
|
184
|
+
```ts
|
|
185
|
+
import { Vibrant } from 'node-vibrant/node';
|
|
186
|
+
const p = await Vibrant.from('evidence/acme/home.png').getPalette();
|
|
187
|
+
// p.Vibrant, DarkVibrant, LightVibrant, Muted, DarkMuted, LightMuted — each has .hex, .population, titleTextColor, bodyTextColor
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
Merge: CSS palette = brand tokens; Vibrant palette = perceived mood. Divergence between them reveals aspirational vs actual brand (common in rebrand-in-progress).
|
|
191
|
+
|
|
192
|
+
### 3.4 CSS custom properties (the "design tokens" reveal)
|
|
193
|
+
|
|
194
|
+
```js
|
|
195
|
+
const out = {};
|
|
196
|
+
const cs = getComputedStyle(document.documentElement);
|
|
197
|
+
for (let i = 0; i < cs.length; i++) {
|
|
198
|
+
const p = cs.item(i);
|
|
199
|
+
if (p.startsWith('--')) out[p] = cs.getPropertyValue(p).trim();
|
|
200
|
+
}
|
|
201
|
+
return out;
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
Token-namespace fingerprints: `--primary`, `--background`, `--foreground`, `--ring` = shadcn/ui (if paired with `data-slot` attrs, confirmed). `--color-brand-500` = Tailwind v4 `@theme`. `--mui-palette-primary-main` = MUI. `--chakra-colors-brand-500` = Chakra. Radix Themes uses `--accent-9`, `--gray-3`.
|
|
205
|
+
|
|
206
|
+
### 3.5 Spacing and radius rhythm
|
|
207
|
+
|
|
208
|
+
Histogram padding/margin/gap values; compute the GCD of the top six — Tailwind projects cluster on multiples of 4, MUI on 8. Radius distribution bins (0 / ≤4 / ≤16 / >16) reveal posture: sharp-dominant = brutalist/editorial; rounded-dominant = modern SaaS; pill-dominant = playful/consumer.
|
|
209
|
+
|
|
210
|
+
### 3.6 Motion characteristics
|
|
211
|
+
|
|
212
|
+
Pull `animation`, `transition`, `transition-timing-function`, and look for `cubic-bezier` curves. Snapshot scroll-triggered behavior by calling `page.evaluate('window.scrollTo(0, 2000)')`, then a second screenshot. Network trace (`browser_network_requests`) for `.lottie`, `.glb`, GSAP, Framer Motion bundle presence.
|
|
213
|
+
|
|
214
|
+
### 3.7 Photography vs illustration
|
|
215
|
+
|
|
216
|
+
Query `document.querySelectorAll('img, svg, video')`. Count SVG children vs raster images in the hero section (first viewport). >70% SVG = illustration-led (Notion, Linear early, Stripe). >70% photo = human-centered (Webflow enterprise, HubSpot). Mixed = editorial.
|
|
217
|
+
|
|
218
|
+
### 3.8 Layout patterns to catalogue
|
|
219
|
+
|
|
220
|
+
- **Hero structure**: left-aligned vs centered; imagery-right vs full-bleed; CTA count (1 hard + 1 soft is modern SaaS default).
|
|
221
|
+
- **Social proof placement**: immediately under hero ("Trusted by" bar) vs after first scroll vs not at all.
|
|
222
|
+
- **Pricing architecture**: 3-tier cards (default), slider/calculator (usage-based), "Contact sales" only (enterprise).
|
|
223
|
+
- **Footer depth**: number of columns and total link count. Dense footers (>40 links) = enterprise; sparse (<12) = indie.
|
|
224
|
+
|
|
225
|
+
### 3.9 Copy harvest
|
|
226
|
+
|
|
227
|
+
```js
|
|
228
|
+
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),
|
|
234
|
+
};
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
Store verbatim for archetype scoring (§4) and tone analysis (§7).
|
|
238
|
+
|
|
239
|
+
### 3.10 Evidence file layout
|
|
240
|
+
|
|
241
|
+
```
|
|
242
|
+
evidence/<competitor-slug>/
|
|
243
|
+
home.png # fullPage screenshot
|
|
244
|
+
product.png
|
|
245
|
+
pricing.png
|
|
246
|
+
about.png
|
|
247
|
+
tokens.json # CSS vars + extracted palette
|
|
248
|
+
typography.json # font frequency table
|
|
249
|
+
copy.json # hero, subhead, ctas, headings, allText
|
|
250
|
+
notes.md # agent's annotations with line-referenced quotes
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
---
|
|
254
|
+
|
|
255
|
+
## 4. Brand archetype and positioning classification
|
|
256
|
+
|
|
257
|
+
### 4.1 Mark & Pearson 12 archetypes (Mark & Pearson, *The Hero and the Outlaw*, McGraw-Hill, 2001)
|
|
258
|
+
|
|
259
|
+
The archetypes cluster in four motivational quadrants. An auditable brand usually presents one primary + one supporting.
|
|
260
|
+
|
|
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 |
|
|
275
|
+
|
|
276
|
+
**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
|
+
|
|
278
|
+
### 4.2 Aaker Brand Personality Dimensions (Aaker, *Journal of Marketing Research*, 34(3):347–356, August 1997)
|
|
279
|
+
|
|
280
|
+
Five dimensions, 15 facets, 42 traits, validated against Big-Five (OCEAN). A brand typically peaks on one dimension with a strong secondary.
|
|
281
|
+
|
|
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.
|
|
287
|
+
|
|
288
|
+
Score each dimension 1–7 by counting trait-evoking signals across home + product pages.
|
|
289
|
+
|
|
290
|
+
### 4.3 Kapferer's Brand Identity Prism (Kapferer, *Strategic Brand Management*, 1992; refined eds. through 2012)
|
|
291
|
+
|
|
292
|
+
Six facets on two axes — vertical (Picture of Sender ↔ Picture of Receiver) and horizontal (Externalization ↔ Internalization).
|
|
293
|
+
|
|
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.
|
|
300
|
+
|
|
301
|
+
Score each 1–5 for clarity; flag inconsistencies (e.g., Personality reads playful but Relationship copy is corporate → weak Prism).
|
|
302
|
+
|
|
303
|
+
### 4.4 Keller's CBBE pyramid (Keller, *Journal of Marketing*, 1993; MSI WP 01-107, 2001)
|
|
304
|
+
|
|
305
|
+
Four levels, asked as four questions. Audit by locating each level's cues on the competitor site.
|
|
306
|
+
|
|
307
|
+
1. **Salience** — "Who are you?" Category clarity above the fold, tagline specificity, SEO meta.
|
|
308
|
+
2. **Performance + Imagery** — "What are you?" Specs, certifications, comparison tables (left/rational); lifestyle photography, heritage, personality words (right/emotional).
|
|
309
|
+
3. **Judgments + Feelings** — "What about you?" Star ratings, expert endorsements, awards (left); emotional words in testimonials, imagery mood (right).
|
|
310
|
+
4. **Resonance** — "What about you and me?" Community (Discord, forum), UGC volume, referral program, repeat-purchase signals (subscriptions, memberships), advocacy.
|
|
311
|
+
|
|
312
|
+
Bottleneck analysis: score 1–5 per block; the weakest block is the brand's current ceiling.
|
|
313
|
+
|
|
314
|
+
---
|
|
315
|
+
|
|
316
|
+
## 5. Category codes analysis
|
|
317
|
+
|
|
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).
|
|
319
|
+
|
|
320
|
+
### 5.1 Building the competitor matrix
|
|
321
|
+
|
|
322
|
+
After §3's extraction for each of the 5–10 finalists, assemble a matrix. Rows = competitors. Columns = dimensions:
|
|
323
|
+
|
|
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 |
|
|
344
|
+
|
|
345
|
+
### 5.2 Frequency analysis → obey/extend/subvert
|
|
346
|
+
|
|
347
|
+
For each column, compute how many of 5–10 competitors share the modal value.
|
|
348
|
+
|
|
349
|
+
- **Near-universal (≥80% share the same value)** → **category code**. Obey unless the brand is an explicit challenger. Regulated verticals (fintech, healthtech, legal) require obeying; divergence triggers mistrust.
|
|
350
|
+
- **Split 40–70%** → **extend**. Choose the side that aligns with archetype; add a signature twist. Evolutionary differentiation.
|
|
351
|
+
- **Fragmented (no mode >40%)** → **open territory**. Any choice is defensible; pick based on archetype and target audience.
|
|
352
|
+
- **Homogeneous on a bad code** (e.g., everyone uses stock photography) → **subvert**. Challenger brands gain memorability by violating a boring convention.
|
|
353
|
+
|
|
354
|
+
### 5.3 Byron Sharp's Distinctive Brand Assets framework (Sharp, *How Brands Grow*, OUP 2010; Romaniuk, *Building Distinctive Brand Assets*, OUP 2018)
|
|
355
|
+
|
|
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).
|
|
357
|
+
|
|
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 |
|
|
362
|
+
|
|
363
|
+
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
|
+
|
|
365
|
+
**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
|
+
|
|
367
|
+
### 5.4 Marty Neumeier's *Zag* (2006) — finding whitespace
|
|
368
|
+
|
|
369
|
+
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
|
+
|
|
371
|
+
**The onliness statement formula:**
|
|
372
|
+
|
|
373
|
+
> Our ___[WHAT]___ is the only ___[WHAT]___ that ___[HOW]___ for ___[WHO]___ in ___[WHERE]___ who ___[WHY]___ in an era of ___[WHEN]___.
|
|
374
|
+
|
|
375
|
+
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
|
+
|
|
377
|
+
**Whitespace procedure:** plot competitors on a 2×2 of differentiating attribute pairs (affordable↔premium × functional↔expressive; or open-source↔proprietary × all-in-one↔focused). The unoccupied quadrants are candidate zags. Test each candidate with the insertion test: substitute any competitor's name into the onliness statement — if it still holds, the position is not unique.
|
|
378
|
+
|
|
379
|
+
### 5.5 The obey/extend/subvert rubric
|
|
380
|
+
|
|
381
|
+
For each category code identified:
|
|
382
|
+
|
|
383
|
+
1. **Obey** when: (a) the code signals safety in a trust-critical category (fintech, healthtech, legal, enterprise IT); (b) the brand is new and needs to clear the category-recognition bar; (c) deviating would confuse the buyer about what category the product is in.
|
|
384
|
+
2. **Extend** when: (a) the code is a split majority; (b) the brand has a supporting archetype that motivates a twist; (c) the twist preserves category legibility.
|
|
385
|
+
3. **Subvert** when: (a) the brand is a challenger positioning against the category leader; (b) the dominant code is genuinely boring or broken (stock photos, buzzword taglines); (c) the archetype is Outlaw, Jester, or Creator (explicitly differentiating archetypes).
|
|
386
|
+
|
|
387
|
+
---
|
|
388
|
+
|
|
389
|
+
## 6. Audience research methodologies
|
|
390
|
+
|
|
391
|
+
### 6.1 Inferring audience from copy and screenshots
|
|
392
|
+
|
|
393
|
+
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
|
+
|
|
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)
|
|
396
|
+
|
|
397
|
+
Each scored 0–100 per country at hofstede-insights.com.
|
|
398
|
+
|
|
399
|
+
- **Power Distance (PDI).** High (Malaysia 100, China 80, Mexico 81) → display credentials, executive bios, formal portraits, deep hierarchy, gold/dark palettes, honorifics. Low (Austria 11, Denmark 18, USA 40) → flat IA, first-name copy, peer testimonials.
|
|
400
|
+
- **Individualism (IDV).** High (USA 91, UK 89, Netherlands 80) → "you/your", single-user hero shots, achievement framing. Collectivist (Guatemala 6, Indonesia 14, China 20) → "we/us/family", group photography, harmony framing.
|
|
401
|
+
- **Masculinity / Motivation toward Achievement (MAS).** High (Japan 95, Italy 70, USA 62) → competitive language, performance metrics, sharp geometry, superlatives. Low (Sweden 5, Netherlands 14) → quality-of-life imagery, consensus copy, rounded forms, sustainability.
|
|
402
|
+
- **Uncertainty Avoidance (UAI).** High (Greece 112, Japan 92, France 86) → detailed FAQs, warranties, certifications, structured navigation, free trials as risk reducers. Low (Singapore 8, USA 46, China 30) → experimental layouts, beta-tolerant.
|
|
403
|
+
- **Long-Term Orientation (LTO).** High (South Korea 100, China 87, Germany 83) → heritage claims, roadmap pages, long-term ROI. Low (USA 26, Australia 21) → instant results, "today/now", tradition respected.
|
|
404
|
+
- **Indulgence vs Restraint (IVR).** Indulgent (Mexico 97, USA 68) → smiling people, leisure, bright palettes, "treat yourself". Restrained (Pakistan 0, Russia 20, China 24) → disciplined imagery, duty framing, muted palettes.
|
|
405
|
+
|
|
406
|
+
Localize by scoring the brand site 1–5 against each dimension's target-country profile; flag mismatches.
|
|
407
|
+
|
|
408
|
+
### 6.3 Jobs-to-be-Done
|
|
409
|
+
|
|
410
|
+
Three canonical schools:
|
|
411
|
+
|
|
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:
|
|
415
|
+
|
|
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 |
|
|
422
|
+
|
|
423
|
+
Demand exists when *Push + Pull > Anxiety + Habit*.
|
|
424
|
+
|
|
425
|
+
**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
|
+
|
|
427
|
+
**Job Story format** (Klement/Intercom): *When [SITUATION], I want to [MOTIVATION], so I can [EXPECTED OUTCOME].* Persona-agnostic and solution-agnostic.
|
|
428
|
+
|
|
429
|
+
**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
|
+
|
|
431
|
+
### 6.4 Alan Cooper persona methodology (*The Inmates Are Running the Asylum*, SAMS 1999; *About Face*, 4th ed. 2014)
|
|
432
|
+
|
|
433
|
+
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
|
+
|
|
435
|
+
Persona cast: **Primary** (the one the UI is designed for — cannot be satisfied by a UI designed for any other persona), **Secondary** (satisfied by primary's UI plus a few non-conflicting needs), **Supplemental** (fully satisfied by primary's UI), **Customer** (buyer, different from user), **Served** (affected but doesn't use), **Negative** (explicit anti-target).
|
|
436
|
+
|
|
437
|
+
Persona components: name and photo; demographics (only if relevant); job/role; behavior patterns (the empirical core); goals (experience, end, life); pain points; skills and tech proficiency; environment; representative quote; motivations and values.
|
|
438
|
+
|
|
439
|
+
For the market research agent, synthesize one primary + one secondary persona per major audience segment inferred from the stack. Derive patterns from G2 reviews (pull 20 quotes from competitor profiles) and Reddit threads.
|
|
440
|
+
|
|
441
|
+
### 6.5 B2B vs B2C vs B2B2C signals
|
|
442
|
+
|
|
443
|
+
B2B signals: enterprise logos above the fold; "Contact sales" as primary CTA; compliance badges (SOC 2, HIPAA, GDPR, ISO 27001); "Trusted by" with company names; long-form case studies; whitepapers; ROI calculators; grade-level 9–12 copy; jargon density >1.5%; pricing either tiered with an enterprise "Contact us" or absent. B2C signals: App Store / Play Store badges; "Download the app"; grade-level <8; "you" heavy; emotional testimonials from individuals; 4.8★ review counts. B2B2C signals: dual-audience landing pages or separate `/business` routes (Shopify Partners, Stripe Atlas).
|
|
444
|
+
|
|
445
|
+
### 6.6 Decision-maker vs user vs buyer (B2B triangle)
|
|
446
|
+
|
|
447
|
+
In enterprise SaaS three personas usually diverge:
|
|
448
|
+
|
|
449
|
+
- **User** (daily operator) — cares about ergonomics, time saved, daily frustration removed. Targeted by product-page UX copy, onboarding flow screenshots.
|
|
450
|
+
- **Buyer** (procurement/finance) — cares about price, contract terms, legal/security. Targeted by pricing page and trust-center sections.
|
|
451
|
+
- **Decision-maker** (executive sponsor) — cares about ROI, strategic fit, risk mitigation. Targeted by homepage hero and exec-level case studies.
|
|
452
|
+
|
|
453
|
+
If the competitor site has exactly one CTA ("Request a demo") and enterprise logos but no product UI screenshots, it is decision-maker-first. If it shows product screenshots and a free tier with in-app onboarding, it is user-first (PLG).
|
|
454
|
+
|
|
455
|
+
### 6.7 Generational aesthetic preferences
|
|
456
|
+
|
|
457
|
+
Loose but useful when the target audience age-band is known: **Gen Z** (Y2K revival — chrome, blur, hyper-saturated pinks, 3D pill buttons, squiggles, stickers); **Millennial** (sans-serif minimalism, pastel-muted palettes, Circular/Inter, rounded; the "Airbnb-era" aesthetic); **Gen X** (functional, dense, data-forward, grotesk sans, moderate density); **Boomer** (convention — blue/red/white, serif headlines, high contrast, larger text sizes, direct CTAs). Hofstede still dominates when culture and generation conflict.
|
|
458
|
+
|
|
459
|
+
---
|
|
460
|
+
|
|
461
|
+
## 7. Tone of voice analysis
|
|
462
|
+
|
|
463
|
+
### 7.1 Nielsen Norman Group 4D tone model (Moran, "The Four Dimensions of Tone of Voice," NN/g, July 2016; updated Aug 2023)
|
|
464
|
+
|
|
465
|
+
Four axes, each a 3-point scale (–1 / 0 / +1), producing 81 possible profiles:
|
|
466
|
+
|
|
467
|
+
1. **Funny ↔ Serious** — did the writer attempt humor (regardless of whether the joke lands)?
|
|
468
|
+
2. **Formal ↔ Casual** — contractions, slang, fragments, emoji vs full sentences, no contractions, jargon-free professionalism.
|
|
469
|
+
3. **Respectful ↔ Irreverent** — reverent treatment vs sarcasm, satire, edge.
|
|
470
|
+
4. **Enthusiastic ↔ Matter-of-fact** — exclamation marks, emotive adjectives vs neutral declaratives.
|
|
471
|
+
|
|
472
|
+
NN/g's 2016 study found casual variants were rated +0.7 friendlier, +0.3 more trustworthy, and +0.4 more likely-to-recommend than serious counterparts (5-point scales). Mailchimp-style brands (Funny+Casual+Respectful+Enthusiastic) vs gov.uk-style (Serious+Formal+Respectful+Matter-of-fact) sit at opposite poles.
|
|
473
|
+
|
|
474
|
+
**Scoring procedure.** Sample 8–12 copy chunks spanning contexts: hero headline, subhead, CTA, feature card, error message, 404, support article, pricing fine print, About page. Place each on each axis. Report mean and variance. Healthy brands are **constant on voice**, **variable on tone** (enthusiastic on hero, matter-of-fact on error).
|
|
475
|
+
|
|
476
|
+
### 7.2 Mailchimp Voice & Tone (styleguide.mailchimp.com, now at contentdesign.intuit.com)
|
|
477
|
+
|
|
478
|
+
Canonical distinction: **voice is constant, tone is variable.** Mailchimp's voice is plainspoken, genuine, a translator of B2B jargon, subtly humorous. Tone adjusts to reader state: empathetic when confused, playful when celebrating, precise when legal. Mechanics: active voice, contractions, serial commas, person-first language, brief but clarity-first, positive framing.
|
|
479
|
+
|
|
480
|
+
### 7.3 Quantitative readability
|
|
481
|
+
|
|
482
|
+
Three formulas, each computed from word/sentence/syllable counts (use the `syllable` npm package for reliable syllable counts).
|
|
483
|
+
|
|
484
|
+
**Flesch Reading Ease** (Flesch, *J. Applied Psychology*, 32(3):221–233, 1948):
|
|
485
|
+
|
|
486
|
+
> RE = 206.835 − 1.015 × (words/sentences) − 84.6 × (syllables/words)
|
|
487
|
+
|
|
488
|
+
Higher = easier. 60–70 = plain English; <30 = academic.
|
|
489
|
+
|
|
490
|
+
**Flesch–Kincaid Grade Level** (Kincaid et al., Naval TTC Report 8-75, 1975):
|
|
491
|
+
|
|
492
|
+
> GL = 0.39 × (words/sentences) + 11.8 × (syllables/words) − 15.59
|
|
493
|
+
|
|
494
|
+
Output is a US grade level. Lower = easier. Adopted by US DoD, IRS, and many state regulators.
|
|
495
|
+
|
|
496
|
+
**Gunning Fog Index** (Gunning, *The Technique of Clear Writing*, McGraw-Hill, 1952):
|
|
497
|
+
|
|
498
|
+
> Fog = 0.4 × [ (words/sentences) + 100 × (complex words / words) ]
|
|
499
|
+
|
|
500
|
+
"Complex" = 3+ syllables, excluding proper nouns, familiar compounds, and –es/–ed/–ing inflections. Output is US grade level.
|
|
501
|
+
|
|
502
|
+
**Targets for consumer web copy:** landing/homepage RE 60–80, FK 6–8, Fog 7–9. Product pages FK 8–10. Support docs FK 7–9. B2B/SaaS tolerates FK 9–11. Legal unavoidably 12+ — pair with plain-English summary.
|
|
503
|
+
|
|
504
|
+
### 7.4 Jargon, pronoun, and CTA analysis
|
|
505
|
+
|
|
506
|
+
Compute on harvested copy:
|
|
507
|
+
|
|
508
|
+
- **Jargon density** = jargon-token count / total tokens. Build the jargon set per domain (AI: embedding, RAG, inference, throughput; fintech: settlement, ACH, reconciliation; devtools: idempotent, observability, gRPC). >2% = enterprise-technical; <0.3% = consumer.
|
|
509
|
+
- **Pronoun ratio** per 100 words: `we/our/us`, `you/your/yours`, `they/their/them`. `you`/`we` > 1 → customer-centric; `we`/`you` > 1.5 → brand-centric (often a warning sign).
|
|
510
|
+
- **Sentence length** median and mean. <10 words = punchy/direct; 12–18 = typical SaaS; >22 = formal/corporate.
|
|
511
|
+
- **Exclamation per 100 sentences.** >5 = playful/energetic; 0–1 = serious/corporate.
|
|
512
|
+
- **CTA classification** via regex buckets: hard_sell (`/^(buy|subscribe now|upgrade)/i`), enterprise (`/^(request a demo|talk to sales|contact sales|book a call)/i`), soft_entry (`/^(get started|try|start free)/i`), explore (`/^(explore|learn more|see how|discover)/i`), dev (`/^(read the docs|view on github|star on github)/i`), community (`/^(join|become|apply|follow)/i`).
|
|
513
|
+
|
|
514
|
+
### 7.5 Prompt for Claude to assign a 4D tone profile
|
|
515
|
+
|
|
516
|
+
```
|
|
517
|
+
You are a tone-of-voice analyst using the Nielsen Norman Group 4-dimensional model.
|
|
518
|
+
|
|
519
|
+
Given the copy samples below, score the writer's tone on each of four axes. Use integers in {−1, 0, +1}, where:
|
|
520
|
+
- Funny(+1)↔Serious(−1): did the writer attempt humor (puns, jokes, irony)? Yes = +1; neutral = 0; somber = −1.
|
|
521
|
+
- Formal(−1)↔Casual(+1): contractions, slang, fragments, emoji = +1; no contractions, professional diction = −1.
|
|
522
|
+
- Respectful(−1)↔Irreverent(+1): reverent treatment = −1; sarcasm, satire, edge = +1.
|
|
523
|
+
- Enthusiastic(+1)↔Matter-of-fact(−1): exclamations, emotive adjectives = +1; neutral declaratives = −1.
|
|
524
|
+
|
|
525
|
+
For each axis, quote the single most diagnostic phrase from the samples that justifies the score. If samples are mixed, score the dominant tendency and note variance.
|
|
526
|
+
|
|
527
|
+
Return JSON: { "funny_serious": int, "formal_casual": int, "respectful_irreverent": int, "enthusiastic_matter_of_fact": int, "evidence": { "<axis>": "<quote>" }, "variance_flag": bool, "overall_label": "<concise tone descriptor>" }
|
|
528
|
+
|
|
529
|
+
Copy samples:
|
|
530
|
+
<paste hero, subhead, 5 CTAs, 3 headings, 1 error message, 1 support line>
|
|
531
|
+
```
|
|
532
|
+
|
|
533
|
+
---
|
|
534
|
+
|
|
535
|
+
## 8. Output structure — the `market-analysis.md` artifact
|
|
536
|
+
|
|
537
|
+
The agent writes exactly one file at `market-analysis.md` in the repo root (or a path provided by the orchestrator). Strict schema:
|
|
538
|
+
|
|
539
|
+
```markdown
|
|
540
|
+
# Market analysis — <project name>
|
|
541
|
+
|
|
542
|
+
_Generated by sd-research on <ISO date>. Confidence: <high|medium|low>._
|
|
543
|
+
|
|
544
|
+
## 1. Niche identification
|
|
545
|
+
- **Detected vertical**: <top vertical> (score <X>, second <Y> at <Z>)
|
|
546
|
+
- **Detected audience**: <top audience>
|
|
547
|
+
- **Positioning tier**: <indie | SMB | mid-market | enterprise | consumer>
|
|
548
|
+
- **Primary evidence**: <3–5 bullets, each with a file path + line reference or quote>
|
|
549
|
+
- **Uncertainty flags**: <any signals pointing to alternative interpretations>
|
|
550
|
+
|
|
551
|
+
## 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
|
+
| ... | | | | | | | | | |
|
|
557
|
+
|
|
558
|
+
_Source: `evidence/<competitor>/tokens.json` and `copy.json`._
|
|
559
|
+
|
|
560
|
+
## 3. Category codes — obey, extend, subvert
|
|
561
|
+
### Near-universal codes (≥80% of competitors)
|
|
562
|
+
- **<code>**: observed in N/M competitors. Recommendation: **obey** because <rationale>.
|
|
563
|
+
|
|
564
|
+
### Split codes (40–70%)
|
|
565
|
+
- **<code>**: observed in <majority> — recommendation: **extend** by <specific twist>.
|
|
566
|
+
|
|
567
|
+
### Open territory
|
|
568
|
+
- **<dimension>**: no dominant convention. Recommendation: <choice> aligned with target archetype.
|
|
569
|
+
|
|
570
|
+
### Subversion opportunities
|
|
571
|
+
- **<boring code>**: everyone does <thing>; subvert by <alternative> — this fits an Outlaw/Creator positioning.
|
|
572
|
+
|
|
573
|
+
## 4. Recommended brand archetype for this project
|
|
574
|
+
- **Primary**: <archetype> — rationale tied to niche + audience + whitespace.
|
|
575
|
+
- **Supporting**: <archetype>.
|
|
576
|
+
- **Why not <alternative>**: <one sentence>.
|
|
577
|
+
|
|
578
|
+
## 5. Color palette recommendation
|
|
579
|
+
- **Primary**: `#<hex>` — HSL <h,s,l>. Rationale: <why>.
|
|
580
|
+
- **Secondary / accent**: `#<hex>`.
|
|
581
|
+
- **Neutrals**: `#<hex>` (bg), `#<hex>` (surface), `#<hex>` (border), `#<hex>` (fg).
|
|
582
|
+
- **Semantic**: success, warning, danger, info.
|
|
583
|
+
- **Avoided colors**: <hexes used by closest 2 competitors — do not copy>.
|
|
584
|
+
|
|
585
|
+
## 6. Typography recommendation
|
|
586
|
+
- **Display**: <family> — rationale (archetype fit, category convention, contrast with competitors).
|
|
587
|
+
- **Body**: <family>.
|
|
588
|
+
- **Mono** (if applicable): <family>.
|
|
589
|
+
- **Type scale**: base 16px, ratio <1.125|1.200|1.250>.
|
|
590
|
+
|
|
591
|
+
## 7. Target audience profile
|
|
592
|
+
- **Primary persona**: name, role, 2 goals, 2 pains, representative quote.
|
|
593
|
+
- **Secondary persona**: same shape.
|
|
594
|
+
- **Negative persona**: explicit exclusion.
|
|
595
|
+
- **B2B / B2C / B2B2C**: <classification>; user/buyer/decision-maker mapping if B2B.
|
|
596
|
+
- **Hofstede localization notes**: <only if non-US or multi-market>.
|
|
597
|
+
- **Primary JTBD (Job Story format)**: "When <situation>, I want to <motivation>, so I can <outcome>."
|
|
598
|
+
|
|
599
|
+
## 8. Tone of voice recommendation
|
|
600
|
+
- **NN/g 4D target**: F/S <±1>, F/C <±1>, R/I <±1>, E/M <±1>.
|
|
601
|
+
- **Reading-level target**: FK grade <X>, Flesch RE <Y>.
|
|
602
|
+
- **Pronoun posture**: "you" forward / "we" forward / balanced.
|
|
603
|
+
- **CTA pattern**: primary "<verb>" + secondary "<verb>".
|
|
604
|
+
- **Jargon policy**: allow <domain terms>; forbid <buzzwords>.
|
|
605
|
+
- **Do/Don't examples**: three each, written for this specific project.
|
|
606
|
+
|
|
607
|
+
## 9. Actionable recommendations
|
|
608
|
+
A prioritized list of ≤10 concrete moves for the super-design builder, each with: action, rationale, linked evidence.
|
|
609
|
+
|
|
610
|
+
## 10. Onliness statement (draft)
|
|
611
|
+
> Our <CATEGORY> is the only <CATEGORY> that <HOW> for <WHO> in <WHERE> who <WHY> in an era of <WHEN>.
|
|
612
|
+
|
|
613
|
+
## Appendix — evidence
|
|
614
|
+
- `evidence/<competitor>/home.png`, etc. — full-page screenshots.
|
|
615
|
+
- `evidence/<competitor>/tokens.json` — extracted CSS variables, palette, type stack.
|
|
616
|
+
- `evidence/<competitor>/copy.json` — hero, CTAs, headings, body sample.
|
|
617
|
+
- `evidence/niche.md` — dependency → vertical scoring trace.
|
|
618
|
+
- `evidence/sources.md` — every external URL cited, with retrieval date.
|
|
619
|
+
```
|
|
620
|
+
|
|
621
|
+
Two hard rules: (a) every claim in §§1–10 resolves to either a repo file path or an `evidence/` artifact; (b) competitor count must be within 5–10 or the agent self-rejects and redoes discovery.
|
|
622
|
+
|
|
623
|
+
---
|
|
624
|
+
|
|
625
|
+
## 9. Agent prompt engineering best practices
|
|
626
|
+
|
|
627
|
+
Five principles shape the `sd-research` system prompt.
|
|
628
|
+
|
|
629
|
+
**Role first, procedure second, format third.** Claude follows the first strong instruction most reliably. Open with a one-sentence role, then a numbered "When invoked" block, then an explicit output-schema block. This is the Anthropic-documented pattern used by the `code-reviewer` and `data-scientist` examples.
|
|
630
|
+
|
|
631
|
+
**Be specific about triggers in `description`.** Claude undertriggers agents whose description is merely capability-shaped ("market researcher"). Trigger phrases ("MUST BE USED when…", "Use proactively when…", "Invoked at the start of every super-design run") improve auto-delegation markedly.
|
|
632
|
+
|
|
633
|
+
**Evidence requirements must be non-negotiable.** Explicit rules: "Every factual claim cites a file path with line number or a URL captured in this session. Fabricated URLs or invented API names are a hard failure. If evidence is absent, write `INSUFFICIENT EVIDENCE` and stop." Claude 4.5 respects literal constraints; pair this with a self-check block.
|
|
634
|
+
|
|
635
|
+
**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
|
+
|
|
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.
|
|
638
|
+
|
|
639
|
+
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
|
+
|
|
641
|
+
---
|
|
642
|
+
|
|
643
|
+
## 10. Concrete agent file — `.claude/agents/sd-research.md`
|
|
644
|
+
|
|
645
|
+
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
|
+
|
|
647
|
+
```markdown
|
|
648
|
+
---
|
|
649
|
+
name: sd-research
|
|
650
|
+
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?"
|
|
651
|
+
tools: Read, Write, Glob, Grep, Bash, WebSearch, WebFetch
|
|
652
|
+
model: sonnet
|
|
653
|
+
color: purple
|
|
654
|
+
mcpServers:
|
|
655
|
+
- playwright:
|
|
656
|
+
type: stdio
|
|
657
|
+
command: npx
|
|
658
|
+
args: ["-y", "@playwright/mcp@latest"]
|
|
659
|
+
---
|
|
660
|
+
|
|
661
|
+
# Role
|
|
662
|
+
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
|
+
|
|
664
|
+
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.
|
|
665
|
+
|
|
666
|
+
<procedure>
|
|
667
|
+
## When invoked
|
|
668
|
+
|
|
669
|
+
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
|
+
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
|
+
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.
|
|
673
|
+
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`.
|
|
678
|
+
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
|
+
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
|
+
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
|
+
9. **Write `market-analysis.md`** following the exact schema in playbook §8.
|
|
682
|
+
10. **Run self-check** (below). If any check fails, fix and re-verify before returning.
|
|
683
|
+
</procedure>
|
|
684
|
+
|
|
685
|
+
<evidence_rules>
|
|
686
|
+
## Evidence rules (non-negotiable)
|
|
687
|
+
|
|
688
|
+
- Every factual claim resolves to (a) a repo path with line reference, (b) a file in `evidence/`, or (c) a URL retrieved this session.
|
|
689
|
+
- Never invent URLs, API names, library names, or company facts. If uncertain, write `[UNVERIFIED]` or `INSUFFICIENT EVIDENCE` and stop.
|
|
690
|
+
- Screenshots are mandatory for every audited competitor. No screenshot → drop the competitor.
|
|
691
|
+
- Quotes from competitor copy are verbatim, in quotation marks, with the page URL.
|
|
692
|
+
- Confidence scoring is honest: high only when top vertical score > 2× second; medium otherwise; low when discovery produced fewer than 5 viable competitors.
|
|
693
|
+
- Do not copy competitor colors, fonts, or taglines for the current project. Recommendations must differentiate, not imitate.
|
|
694
|
+
</evidence_rules>
|
|
695
|
+
|
|
696
|
+
<output_format>
|
|
697
|
+
## Output format
|
|
698
|
+
|
|
699
|
+
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.
|
|
700
|
+
|
|
701
|
+
Return to the parent agent a three-to-five-sentence summary — no more — announcing the detected niche, top three competitors, recommended archetype, and the path to `market-analysis.md`. Do not paste the full analysis into chat.
|
|
702
|
+
</output_format>
|
|
703
|
+
|
|
704
|
+
<self_check>
|
|
705
|
+
## Self-check before returning
|
|
706
|
+
|
|
707
|
+
- [ ] `market-analysis.md` exists and matches the schema in playbook §8.
|
|
708
|
+
- [ ] Exactly 5–10 competitors; each has a full row in the matrix and a screenshot in `evidence/`.
|
|
709
|
+
- [ ] Every recommendation in §9 cites an evidence filename or repo path.
|
|
710
|
+
- [ ] No invented URLs, library names, or company facts — spot-check three claims at random.
|
|
711
|
+
- [ ] Confidence level in the header is honestly calibrated.
|
|
712
|
+
- [ ] Onliness statement fails the insertion test for every competitor (no competitor's name can be substituted and still make it true).
|
|
713
|
+
- [ ] Recommendations differentiate from (rather than imitate) the closest two competitors.
|
|
714
|
+
- [ ] The summary returned to the parent agent is ≤5 sentences.
|
|
715
|
+
</self_check>
|
|
716
|
+
|
|
717
|
+
## Tool-use notes
|
|
718
|
+
|
|
719
|
+
- Use `Read`, `Glob`, `Grep` instead of `bash cat`/`find`/`grep`. Faster and structured.
|
|
720
|
+
- `cd` in `Bash` does NOT persist between calls. Always use absolute paths.
|
|
721
|
+
- You do not inherit the parent's `CLAUDE.md` or conversation; rely on this prompt + the playbook + what you `Read` from the repo.
|
|
722
|
+
- You cannot spawn further subagents; you are the research layer.
|
|
723
|
+
- When a competitor site blocks Playwright or times out, retry once with a 5s `browser_wait_for` then fall back to `WebFetch`. Log the degradation in `evidence/<slug>/notes.md`.
|
|
724
|
+
|
|
725
|
+
## Example output summary (what you send back to the parent)
|
|
726
|
+
|
|
727
|
+
> Detected niche: **indie B2B SaaS (AI chat product, Vercel stack)**, confidence high (0.82). Top three competitors audited: Linear, Vercel, Cursor. Recommended archetype: **Creator** (primary) + **Sage** (supporting), positioned in the whitespace between Linear's minimalist competence and Cursor's dev-outlaw posture. Full report at `market-analysis.md` with 7 competitors, 28 screenshots, and a draft onliness statement.
|
|
728
|
+
|
|
729
|
+
## Example output excerpt — `market-analysis.md` (abbreviated)
|
|
730
|
+
|
|
731
|
+
```markdown
|
|
732
|
+
# Market analysis — acme-ai
|
|
733
|
+
|
|
734
|
+
_Generated by sd-research on 2026-04-18. Confidence: high._
|
|
735
|
+
|
|
736
|
+
## 1. Niche identification
|
|
737
|
+
- **Detected vertical**: ai-chat (score 4.6; second: ai-tooling at 2.1)
|
|
738
|
+
- **Detected audience**: chat-products (indie B2B SaaS)
|
|
739
|
+
- **Positioning tier**: indie / PLG
|
|
740
|
+
- **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
|
|
746
|
+
- **Uncertainty flags**: none.
|
|
747
|
+
|
|
748
|
+
## 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
|
+
| ... | | | | | | | | | |
|
|
756
|
+
|
|
757
|
+
_Source: `evidence/linear/`, `evidence/vercel/`, etc._
|
|
758
|
+
|
|
759
|
+
## 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.
|
|
761
|
+
- **Supporting**: Sage — reinforces trustworthiness in an AI category where hallucination concerns dominate.
|
|
762
|
+
- **Why not Outlaw**: Cursor and v0 already occupy the dev-rebel slot; differentiation requires a calmer posture.
|
|
763
|
+
|
|
764
|
+
## 10. Onliness statement (draft)
|
|
765
|
+
> 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
|
+
```
|
|
767
|
+
```
|
|
768
|
+
|
|
769
|
+
---
|
|
770
|
+
|
|
771
|
+
## Conclusion
|
|
772
|
+
|
|
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.
|