Specimen — Dreamineering
The site playbook applied to our own homepage. Proof the engine works.
Stage 1: The Creative Brief
| Field | Dreamineering |
|---|---|
| Problem | Smart people build without validated demand, then wonder why nobody cares |
| Insight | Feedback loops — not talent, not funding — determine outcomes |
| One Thing | A system that makes your next decision better than your last |
| Proof | The homepage itself: built with the tools it teaches |
| Frame | Not a course. Not consulting. A decision operating system. |
| Action | Start with the five questions |
| Feeling | "I've been building blind. Now I can see." |
| Position | The bridge between systems thinking and execution |
| Loop | Corrective — turns runaway extraction into compounding value |
Stage 2: Narrative Arc
The homepage (src/pages/index.js) already follows the emotional beat sequence. Here's the map.
Tight Five to Sections
| Tight Five | Homepage Section | What It Does |
|---|---|---|
| Purpose | HeroSection + EnemySection | "Feedback loops guide the hero's journey" + names the enemy |
| Principles | ProblemSection + ControlLoopDiagram | Shows the three loop types, makes the principle visual |
| Platform | ControlSystemSection | The mechanism: setpoint, gauge, controller |
| Perspective | TightFiveSection + BeingsSection | The five questions + who sees what you see |
| Performance | BelongingSection + FactoriesSection + CtaSection | Community proof + factory model + the ask |
Beat Mapping
| Section | Beat | Emotional Job |
|---|---|---|
| HeroSection | Hero | Confidence — "this is for people like me" |
| EnemySection | Enemy | Tension — name the thing they already feel |
| ProblemSection | Problem | Recognition — "that's exactly my situation" |
| ControlLoopDiagram | Solution (visual) | Relief — "there's a structure to this" |
| ControlSystemSection | Solution (mechanism) | Clarity — "here's how it works" |
| TightFiveSection | Framework | Agency — "I can use this right now" |
| BeingsSection | Social proof | Trust — "others are already here" |
| BelongingSection | Belonging | Identity — "these are my people" |
| FactoriesSection | Proof | Validation — "it's a real system, not a pitch" |
| CtaSection | CTA | Momentum — "what do I do next?" |
What Works
The hero headline — "Feedback loops guide the hero's journey" — passes the five-second test. It names the mechanism (feedback loops) and the frame (hero's journey) in seven words.
The enemy section appears before the solution. This is correct. Pain before relief. Recognition before mechanism.
What Could Improve
The transition from BeingsSection to FactoriesSection is the weakest beat. The emotional arc goes Trust → ??? → Momentum. The factory model needs to earn its place as proof, not just description.
Stage 3: Design Choices
Why These Tokens
| Token | Value | Reason |
|---|---|---|
bg-ink | Dark background | Authority. The page reads as a serious instrument, not a marketing brochure. |
text-chalk | Light text | Maximum contrast against ink. Passes 4.5:1. |
accent | Brand highlight | Used only on CTAs and key diagram elements. Unique color = clear action. |
Why This Flow
The homepage uses a cinematic preset — full-viewport sections with one idea per screen. This works because:
- Each section is a complete thought (no partial reveals)
- Scroll depth maps cleanly to narrative progress
- Every section can be independently A/B tested
- The emotional arc follows tension → release → tension → release
The alternative — a dense information page — fails the five-second test. Too many ideas competing for attention.
Stage 4: What to Instrument
Events for Dreamineering
| Event | Trigger | What It Reveals |
|---|---|---|
section_visible | Each section enters viewport | Which sections hold attention, where people drop |
hero_cta_click | Primary CTA in hero | Is the opening strong enough to convert immediately? |
tight_five_expand | Click on any of the five questions | Which question resonates most? |
factory_cta_click | CTA after factories section | Does the proof section drive action? |
scroll_depth_75 | 75% scroll | Does the full arc work, or do people leave mid-story? |
final_cta_click | Bottom CTA | The conversion event |
Hypothesis Before Launch
Primary hypothesis: Visitors who reach ControlLoopDiagram (section 4) convert at 3x the rate of those who bounce at EnemySection (section 2).
Why this matters: If true, the diagram is the conversion mechanism — invest in making it clearer. If false, the hero section needs to carry more weight.
Stage 5: The Weekly Cycle
Week 1 Questions
After 150+ visitors, answer:
- Where do people leave? — Scroll depth tells you which section breaks the arc
- Do they click the Tight Five? — If not, the five questions aren't earning attention
- Hero CTA vs Final CTA? — Early converters suggest strong positioning. Late converters suggest the proof section is doing the work.
First Atomic Test
Based on Week 1 data, pick ONE:
| Signal | Test |
|---|---|
| High bounce at Enemy section | Rewrite enemy headline — does naming a specific enemy outperform a general one? |
| Low Tight Five clicks | Move Tight Five higher. Does proximity to hero increase engagement? |
| Hero CTA outperforms Final CTA | The bottom sections aren't adding value. Consider removing FactoriesSection. |
| Final CTA outperforms Hero CTA | The proof arc works. Invest in making BeingsSection stronger social proof. |
Agents Used
| Agent | What It Did | Stage |
|---|---|---|
| Human (founder) | Positioning decisions, Tight Five mapping, design direction, copy editing | 1-3 |
| AI (research + copy) | Creative brief generation, narrative arc, section copy, headline variants | 1-2 |
| AI (code generation) | Homepage component generation from narrative spec | 3 |
| Positioning pipeline | Produced the nine-field creative brief for Dreamineering | 1 |
| Rendering verifier | Post-build rendering verification — caught transparent token issue | 3 |
What AI produced vs what shipped: AI generated the initial hero headline, enemy section copy, and mechanism descriptions. The founder rewrote approximately 40% — mainly tightening prose and adding earned conviction that AI cannot fake.
Tools Used
| Tool | Job | Evidence |
|---|---|---|
| Claude | Research, positioning, all copy drafts | Creative brief JSON, narrative arc table |
| v0 | Homepage component generation | Initial React components for all sections |
| Cursor | Iteration on v0 output, responsive fixes | Component refinements, mobile layout |
| Vercel | Deploy previews, production hosting | Preview URLs for five-second testing |
PostHog and Plausible are specified in Stage 4 but not yet wired. The homepage shipped without instrumentation — a known gap.
Prompts Applied
The site playbook prompts were run in sequence for this homepage:
| Prompt | Input | Output | What Changed |
|---|---|---|---|
| 1: Extract | Pain: "Smart people build without validated demand" | Nine-field creative brief (see Stage 1 table above) | "One Thing" rewritten twice — first version was a feature |
| 2: Story | Creative brief JSON | Tight Five to sections mapping (see Stage 2 tables) | Enemy section added after first draft lacked tension |
| 3: Build | Narrative arc + cinematic preset | Component specification for 10 sections | ControlLoopDiagram required three iterations for mobile |
| 4: Wire | Page specification | Event schema (see Stage 4 table) | Not yet implemented — gap |
| 5: Learn | No data yet | Hypothesis only (see Stage 5) | Waiting for instrumentation |
The Self-Referential Proof
This page is the specimen. The homepage is the product. The playbook built both.
If the playbook works, the homepage converts. If the homepage converts, the playbook is proven. If the playbook is proven, someone else can run it for their venture.
That's the VVFL. The loop compounds.
Context
- Site Playbook — The five-stage method this specimen follows
- Homepage Source — The actual code
- Marketing Performance — Where these metrics land
- Tight Five — The five questions that structure the narrative
Questions
Does self-referential proof strengthen or weaken credibility — and how do you tell the difference?
- Which homepage section carries the most conversion weight, and how would you prove it with data rather than intuition?
- If the ControlLoopDiagram is the conversion mechanism, what's the minimum viable version that still converts?
- At what point does documenting your own process become more valuable than improving the product itself?