← html-effectiveness
Companion to the blog post

Know your unknowns

The map is not the territory — the gap between them is your unknowns. Eleven self-contained .html artifacts for discovering them before, during, and after implementation. Each page shows the exact prompt at the top and the artifact Claude produced below it: paste the prompt, get something like the page.

01

Pre-implementation

8 demos

Before any code is written is the cheapest place to find an unknown. Ask for a blindspot pass when the territory is unfamiliar, brainstorm and prototype when you'll only know it when you see it, let Claude interview you about the rest, and hand it references when words run out.

Blindspot pass
Claude scans an unfamiliar auth module and reports your unknown unknowns — seven blindspot cards, each with a copyable prompt fix, assembled into one better implementation prompt.
01-blindspot-pass.html→
Teach me my unknowns
An interactive color-grading explainer — vocabulary ladder, live before/after frame with sliders and presets — that turns "make the video nicer" into precise professional prompts.
02-color-grading-explainer.html→
Four design directions
The same review queue rendered four wildly different ways — ops console, editorial, kanban, terminal — with steal/skip chips that write your reply for you.
03-design-directions.html→
Mock before you wire
A clickable throwaway mock of Acme's frame-annotation toolbar — three toggleable placements, A/B questions, and a self-filling reply template — before any real code is touched.
04-toolbar-mock.html→
Brainstorm the intervention
Ten codebase-grounded churn interventions plotted from ship-this-afternoon to quarter-long bet, with resonate checkboxes that assemble your reply.
05-churn-brainstorm.html→
The interview
Claude interviews you one question at a time about an ambiguous feature, ordered by architectural blast radius, then hands back a decisions table and a ready-to-paste implementation prompt.
06-interview.html→
Point at a reference
A semantics map that proves Claude understood a Rust reference implementation — matched code excerpts, gotcha notes, and edge-case tables — before porting it to TypeScript.
07-reference-port.html→
The tweakable plan
An implementation plan sorted by likelihood-of-tweaking instead of execution order — flagged schema choices with toggleable alternatives, annotated type interfaces, and the mechanical work collapsed at the bottom.
08-implementation-plan.html→
02

During implementation

1 demo

No matter how much planning you do, unknowns lurk in the territory. Have Claude keep a running log of every place the code forced a deviation from the plan, so the next attempt starts smarter.

Implementation notes
The running log Claude kept during a 3-hour build — every deviation from the plan captured with the conservative call it made, and three bullets to fold into attempt #2.
09-implementation-notes.html→
03

Post-implementation

2 demos

Shipping means other people inheriting your unknowns. A pitch doc answers the objections reviewers were about to raise; a quiz proves you actually understand what changed before you merge it.

The buy-in doc
A ship-it pitch that leads with an animated demo of the export flow, then pre-answers every reviewer objection with evidence and names exactly who needs to sign off on what.
10-pitch-doc.html→
Quiz me before I merge
A merge-readiness report on a 14-file diff that ends in a six-question quiz you must pass — wrong answers point you back to the exact section you skimmed.
11-change-quiz.html→