wehub-resource-sync
487 lines
25 KiB
HTML
487 lines
25 KiB
HTML
<!-- Copyright 2026 Anthropic PBC · SPDX-License-Identifier: Apache-2.0 -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Know your unknowns — examples</title>
|
|
<style>
|
|
:root {
|
|
--ivory: #FAF9F5;
|
|
--paper: #FFFFFF;
|
|
--slate: #141413;
|
|
--clay: #D97757;
|
|
--clay-d: #B85C3E;
|
|
--oat: #E3DACC;
|
|
--olive: #788C5D;
|
|
--g100: #F0EEE6;
|
|
--g200: #E6E3DA;
|
|
--g300: #D1CFC5;
|
|
--g500: #87867F;
|
|
--g700: #3D3D3A;
|
|
--serif: ui-serif, Georgia, "Times New Roman", Times, serif;
|
|
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
margin: 0;
|
|
background: var(--ivory);
|
|
color: var(--slate);
|
|
font-family: var(--sans);
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px 140px; }
|
|
|
|
/* ── masthead ─────────────────────────── */
|
|
|
|
header.masthead {
|
|
padding: 80px 0 56px;
|
|
border-bottom: 1.5px solid var(--g300);
|
|
margin-bottom: 12px;
|
|
position: relative;
|
|
}
|
|
.eyebrow {
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--g500);
|
|
margin-bottom: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.eyebrow::before {
|
|
content: "";
|
|
width: 24px; height: 1.5px;
|
|
background: var(--clay);
|
|
}
|
|
.backlink {
|
|
position: absolute;
|
|
top: 34px; right: 0;
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
color: var(--g500);
|
|
text-decoration: none;
|
|
}
|
|
.backlink:hover { color: var(--clay); }
|
|
h1 {
|
|
font-family: var(--serif);
|
|
font-weight: 500;
|
|
font-size: clamp(38px, 5.4vw, 62px);
|
|
line-height: 1.06;
|
|
letter-spacing: -0.018em;
|
|
margin: 0 0 8px;
|
|
max-width: 17ch;
|
|
}
|
|
h1 em {
|
|
font-style: italic;
|
|
color: var(--clay);
|
|
}
|
|
.intro {
|
|
font-size: 16.5px;
|
|
color: var(--g700);
|
|
margin: 22px 0 0;
|
|
max-width: 640px;
|
|
}
|
|
.intro a { color: var(--clay); text-decoration-color: var(--oat); text-underline-offset: 3px; }
|
|
.intro a:hover { text-decoration-color: var(--clay); }
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 340px;
|
|
gap: 48px;
|
|
align-items: end;
|
|
}
|
|
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }
|
|
|
|
/* hero figure — map vs territory quadrants */
|
|
.hero-fig {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
@media (max-width: 880px) { .hero-fig { max-width: 360px; margin-top: 28px; } }
|
|
.hero-fig .q {
|
|
border-radius: 10px;
|
|
border: 1.5px solid var(--g300);
|
|
background: var(--paper);
|
|
padding: 12px;
|
|
aspect-ratio: 1;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
overflow: hidden;
|
|
}
|
|
.hero-fig .q .tag {
|
|
font-family: var(--mono);
|
|
font-size: 8.5px;
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
color: var(--g500);
|
|
}
|
|
.hero-fig .q.kk { background: var(--g100); }
|
|
.hero-fig .q.kk::before {
|
|
content: ""; position: absolute; inset: 12px 12px 34px;
|
|
border-radius: 6px;
|
|
background:
|
|
linear-gradient(var(--g300) 0 0) 0 0 / 80% 5px,
|
|
linear-gradient(var(--g300) 0 0) 0 12px / 60% 5px,
|
|
linear-gradient(var(--g300) 0 0) 0 24px / 70% 5px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.hero-fig .q.ku::before {
|
|
content: "?"; position: absolute; top: 2px; right: 12px;
|
|
font-family: var(--serif); font-size: 44px; color: var(--oat);
|
|
}
|
|
.hero-fig .q.uk::before {
|
|
content: ""; position: absolute; top: 16px; left: 16px;
|
|
width: 34px; height: 34px; border-radius: 50%;
|
|
border: 2.5px solid var(--olive); opacity: .55;
|
|
}
|
|
.hero-fig .q.uk::after {
|
|
content: ""; position: absolute; top: 29px; left: 29px;
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--olive);
|
|
}
|
|
.hero-fig .q.uu {
|
|
border-color: var(--slate);
|
|
box-shadow: 0 10px 26px rgba(20,20,19,.10);
|
|
}
|
|
.hero-fig .q.uu::before {
|
|
content: ""; position: absolute; top: 14px; left: 14px; right: 14px; height: 36px;
|
|
border-radius: 6px;
|
|
border: 2px dashed var(--clay);
|
|
opacity: .75;
|
|
}
|
|
.hero-fig .q.uu .tag { color: var(--slate); }
|
|
|
|
/* ── toc pills ────────────────────────── */
|
|
|
|
nav.toc {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 26px 0 0;
|
|
}
|
|
nav.toc a {
|
|
font-size: 12.5px;
|
|
padding: 7px 14px;
|
|
border: 1.5px solid var(--g300);
|
|
border-radius: 999px;
|
|
text-decoration: none;
|
|
color: var(--g700);
|
|
background: var(--paper);
|
|
transition: border-color 120ms, color 120ms, background 120ms;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
nav.toc a .n {
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
color: var(--g500);
|
|
}
|
|
nav.toc a:hover { border-color: var(--slate); color: var(--slate); }
|
|
nav.toc a:hover .n { color: var(--clay); }
|
|
|
|
/* ── section ──────────────────────────── */
|
|
|
|
section {
|
|
margin-top: 72px;
|
|
scroll-margin-top: 28px;
|
|
}
|
|
.sec-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.sec-head .idx {
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
color: var(--clay);
|
|
font-weight: 600;
|
|
width: 34px;
|
|
flex-shrink: 0;
|
|
}
|
|
.sec-head h2 {
|
|
font-family: var(--serif);
|
|
font-weight: 500;
|
|
font-size: 27px;
|
|
margin: 0;
|
|
letter-spacing: -0.012em;
|
|
}
|
|
.sec-head .count {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
color: var(--g500);
|
|
background: var(--g100);
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
}
|
|
.sec-intro {
|
|
font-size: 14.5px;
|
|
color: var(--g700);
|
|
max-width: 700px;
|
|
margin: 0 0 24px 50px;
|
|
}
|
|
@media (max-width: 640px) { .sec-intro { margin-left: 0; } }
|
|
|
|
/* ── cards ────────────────────────────── */
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
|
|
gap: 20px;
|
|
margin-left: 50px;
|
|
}
|
|
@media (max-width: 640px) { .grid { margin-left: 0; } }
|
|
|
|
a.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--paper);
|
|
border: 1.5px solid var(--g300);
|
|
border-radius: 14px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
|
|
overflow: hidden;
|
|
}
|
|
a.card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 30px rgba(20, 20, 19, 0.10);
|
|
border-color: var(--slate);
|
|
}
|
|
|
|
.thumb {
|
|
height: 132px;
|
|
background: var(--g100);
|
|
border-bottom: 1.5px solid var(--g200);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
transition: background 150ms ease;
|
|
}
|
|
a.card:hover .thumb { background: var(--oat); }
|
|
.thumb svg {
|
|
width: 100%; height: 100%;
|
|
overflow: visible;
|
|
}
|
|
.thumb svg .st { stroke: var(--g500); fill: none; stroke-width: 2.5; }
|
|
.thumb svg .fl { fill: var(--g300); }
|
|
.thumb svg .cl { fill: var(--clay); }
|
|
.thumb svg .ol { fill: var(--olive); }
|
|
.thumb svg .oa { fill: var(--oat); stroke: var(--g500); stroke-width: 2.5; }
|
|
.thumb svg .sl { fill: var(--slate); }
|
|
.thumb svg .wh { fill: var(--paper); stroke: var(--g500); stroke-width: 2.5; }
|
|
.thumb svg .ln { stroke: var(--g500); stroke-width: 2.5; fill: none; stroke-linecap: round; }
|
|
.thumb svg .lc { stroke: var(--clay); stroke-width: 2.5; fill: none; stroke-linecap: round; }
|
|
.thumb svg .da { stroke-dasharray: 4 4; }
|
|
a.card:hover .thumb svg .fl { fill: var(--g500); }
|
|
a.card:hover .thumb svg .oa { fill: var(--paper); }
|
|
|
|
.body { padding: 18px 20px 16px; display: flex; flex-direction: column; flex: 1; }
|
|
.title {
|
|
font-family: var(--serif);
|
|
font-size: 19px;
|
|
font-weight: 500;
|
|
line-height: 1.22;
|
|
color: var(--slate);
|
|
margin-bottom: 7px;
|
|
letter-spacing: -0.008em;
|
|
}
|
|
.desc {
|
|
font-size: 13.5px;
|
|
color: var(--g700);
|
|
line-height: 1.5;
|
|
margin-bottom: 16px;
|
|
flex: 1;
|
|
}
|
|
.file {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
color: var(--g500);
|
|
border-top: 1px solid var(--g100);
|
|
padding-top: 11px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.file .arrow { transition: transform 150ms ease; color: var(--g300); }
|
|
a.card:hover .file { color: var(--clay); }
|
|
a.card:hover .file .arrow { transform: translateX(3px); color: var(--clay); }
|
|
|
|
/* ── footer ───────────────────────────── */
|
|
|
|
footer {
|
|
margin-top: 100px;
|
|
border-top: 1.5px solid var(--g300);
|
|
padding-top: 36px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
font-size: 13px;
|
|
color: var(--g500);
|
|
}
|
|
footer .k { font-family: var(--serif); font-style: italic; color: var(--g700); font-size: 15px; }
|
|
footer a { color: var(--clay); text-decoration-color: var(--oat); text-underline-offset: 3px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<header class="masthead">
|
|
<a class="backlink" href="../index.html">← html-effectiveness</a>
|
|
<div class="hero-grid">
|
|
<div>
|
|
<div class="eyebrow">Companion to the blog post</div>
|
|
<h1>Know your <em>unknowns</em></h1>
|
|
<p class="intro">
|
|
The map is not the territory — the gap between them is your unknowns. Eleven
|
|
self-contained <code>.html</code> 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.
|
|
</p>
|
|
<nav class="toc">
|
|
<a href="#pre">Pre-implementation <span class="n">8</span></a>
|
|
<a href="#during">During implementation <span class="n">1</span></a>
|
|
<a href="#post">Post-implementation <span class="n">2</span></a>
|
|
</nav>
|
|
</div>
|
|
<div class="hero-fig" aria-hidden="true">
|
|
<div class="q kk"><span class="tag">Known knowns</span></div>
|
|
<div class="q ku"><span class="tag">Known unknowns</span></div>
|
|
<div class="q uk"><span class="tag">Unknown knowns</span></div>
|
|
<div class="q uu"><span class="tag">Unknown unknowns</span></div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section id="pre">
|
|
<div class="sec-head"><span class="idx">01</span><h2>Pre-implementation</h2><span class="count">8 demos</span></div>
|
|
<p class="sec-intro">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.</p>
|
|
<div class="grid">
|
|
<a class="card" href="01-blindspot-pass.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><rect class="wh" x="12" y="8" width="68" height="64" rx="6"/><line class="ln" x1="22" y1="20" x2="62" y2="20"/><line class="ln" x1="22" y1="30" x2="70" y2="30"/><line class="ln" x1="22" y1="40" x2="56" y2="40"/><line class="ln" x1="22" y1="50" x2="66" y2="50"/><line class="ln" x1="22" y1="60" x2="48" y2="60"/><circle class="cl" cx="70" cy="40" r="3.5"/><circle class="cl" cx="56" cy="60" r="3.5"/><circle class="lc da" cx="96" cy="32" r="15" fill="none"/><line class="lc" x1="106" y1="43" x2="114" y2="52"/><rect class="oa" x="88" y="58" width="24" height="14" rx="4"/><line class="ln" x1="93" y1="65" x2="107" y2="65"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">Blindspot pass</div>
|
|
<div class="desc">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.</div>
|
|
<div class="file"><span>01-blindspot-pass.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="02-color-grading-explainer.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><rect class="wh" x="8" y="8" width="104" height="46" rx="4"/><rect class="oa" x="8" y="8" width="104" height="20" rx="4"/><circle class="cl" cx="90" cy="20" r="6"/><path class="ol" d="M14 52 L38 28 L60 52 Z"/><path class="ol" d="M48 52 L74 32 L100 52 Z"/><line class="lc da" x1="60" y1="8" x2="60" y2="54"/><line class="ln" x1="16" y1="64" x2="56" y2="64"/><circle class="cl" cx="40" cy="64" r="4"/><line class="ln" x1="66" y1="64" x2="106" y2="64"/><circle class="cl" cx="88" cy="64" r="4"/><line class="ln" x1="16" y1="73" x2="56" y2="73"/><circle class="sl" cx="28" cy="73" r="4"/><line class="ln" x1="66" y1="73" x2="106" y2="73"/><circle class="sl" cx="98" cy="73" r="4"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">Teach me my unknowns</div>
|
|
<div class="desc">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.</div>
|
|
<div class="file"><span>02-color-grading-explainer.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="03-design-directions.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><rect class="sl" x="6" y="8" width="50" height="30" rx="4"/><rect class="cl" x="12" y="14" width="12" height="4" rx="2"/><rect class="fl" x="12" y="23" width="38" height="3" rx="1.5"/><rect class="fl" x="12" y="30" width="30" height="3" rx="1.5"/><rect class="wh" x="64" y="8" width="50" height="30" rx="4"/><circle class="cl" cx="77" cy="23" r="7"/><rect class="fl" x="90" y="17" width="18" height="4" rx="2"/><rect class="fl" x="90" y="25" width="13" height="4" rx="2"/><rect class="wh" x="6" y="44" width="50" height="30" rx="4"/><rect class="fl" x="11" y="50" width="12" height="18" rx="2"/><rect class="oa" x="25" y="50" width="12" height="18" rx="2"/><rect class="ol" x="39" y="50" width="12" height="18" rx="2"/><rect class="sl" x="64" y="44" width="50" height="30" rx="4"/><line class="lc" x1="70" y1="52" x2="96" y2="52"/><line class="ln" x1="70" y1="59" x2="104" y2="59"/><line class="ln" x1="70" y1="66" x2="88" y2="66"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">Four design directions</div>
|
|
<div class="desc">The same review queue rendered four wildly different ways — ops console, editorial, kanban, terminal — with steal/skip chips that write your reply for you.</div>
|
|
<div class="file"><span>03-design-directions.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="04-toolbar-mock.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><rect class="oa" x="8" y="10" width="104" height="50" rx="5"/><circle class="cl" cx="90" cy="24" r="7"/><path class="ol" d="M10 48 Q 40 34 68 46 T 110 42 L 110 55 Q 110 58 105 58 L 15 58 Q 10 58 10 55 Z"/><rect class="st da" x="18" y="18" width="28" height="15" rx="2"/><path class="lc" d="M98 46 L 86 34"/><rect class="wh" x="28" y="48" width="64" height="13" rx="6.5"/><circle class="cl" cx="38" cy="54.5" r="2.5"/><circle class="fl" cx="47" cy="54.5" r="2.5"/><circle class="fl" cx="56" cy="54.5" r="2.5"/><circle class="ol" cx="68" cy="54.5" r="2.5"/><circle class="sl" cx="77" cy="54.5" r="2.5"/><line class="ln" x1="14" y1="70" x2="106" y2="70"/><line class="lc" x1="14" y1="70" x2="46" y2="70"/><circle class="cl" cx="46" cy="70" r="3"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">Mock before you wire</div>
|
|
<div class="desc">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.</div>
|
|
<div class="file"><span>04-toolbar-mock.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="05-churn-brainstorm.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><line class="ln" x1="10" y1="16" x2="110" y2="16"/><circle class="wh" cx="20" cy="16" r="5"/><circle class="cl" cx="38" cy="16" r="5"/><circle class="wh" cx="56" cy="16" r="5"/><circle class="cl" cx="76" cy="16" r="5"/><circle class="st" cx="100" cy="16" r="5"/><rect class="wh" x="10" y="30" width="100" height="20" rx="4"/><rect class="cl" x="16" y="36" width="8" height="8" rx="2"/><line class="ln" x1="30" y1="38" x2="86" y2="38"/><line class="ln" x1="30" y1="44" x2="70" y2="44"/><rect class="oa" x="92" y="35" width="12" height="10" rx="3"/><rect class="wh" x="10" y="56" width="100" height="20" rx="4"/><rect class="wh" x="16" y="62" width="8" height="8" rx="2"/><line class="ln" x1="30" y1="64" x2="82" y2="64"/><line class="lc da" x1="30" y1="70" x2="62" y2="70"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">Brainstorm the intervention</div>
|
|
<div class="desc">Ten codebase-grounded churn interventions plotted from ship-this-afternoon to quarter-long bet, with resonate checkboxes that assemble your reply.</div>
|
|
<div class="file"><span>05-churn-brainstorm.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="06-interview.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><circle class="cl" cx="12" cy="16" r="4"/><circle class="ol" cx="12" cy="30" r="4"/><circle class="st" cx="12" cy="44" r="4"/><circle class="st da" cx="12" cy="58" r="4"/><line class="ln" x1="12" y1="20" x2="12" y2="26"/><line class="ln da" x1="12" y1="34" x2="12" y2="54"/><rect class="wh" x="26" y="10" width="88" height="60" rx="6"/><rect class="cl" x="34" y="18" width="24" height="6" rx="3"/><line class="ln" x1="34" y1="32" x2="104" y2="32"/><rect class="oa" x="34" y="40" width="34" height="22" rx="4"/><rect class="wh" x="72" y="40" width="34" height="22" rx="4"/><line class="lc" x1="78" y1="51" x2="88" y2="51"/><line class="ln" x1="40" y1="51" x2="60" y2="51"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">The interview</div>
|
|
<div class="desc">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.</div>
|
|
<div class="file"><span>06-interview.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="07-reference-port.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><rect class="wh" x="6" y="10" width="48" height="60" rx="6"/><rect class="wh" x="66" y="10" width="48" height="60" rx="6"/><rect class="fl" x="13" y="19" width="34" height="4" rx="2"/><rect class="fl" x="13" y="29" width="26" height="4" rx="2"/><rect class="cl" x="13" y="39" width="32" height="5" rx="2.5"/><rect class="fl" x="13" y="50" width="28" height="4" rx="2"/><rect class="fl" x="73" y="19" width="30" height="4" rx="2"/><rect class="fl" x="73" y="29" width="34" height="4" rx="2"/><rect class="cl" x="73" y="39" width="30" height="5" rx="2.5"/><rect class="fl" x="73" y="50" width="24" height="4" rx="2"/><line class="lc da" x1="45" y1="41.5" x2="73" y2="41.5"/><circle class="ol" cx="60" cy="62" r="6"/><path class="ln" d="M57.5 62 l2 2 l3.5 -4" style="stroke:#FAF9F5"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">Point at a reference</div>
|
|
<div class="desc">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.</div>
|
|
<div class="file"><span>07-reference-port.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="08-implementation-plan.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><rect class="wh" x="8" y="6" width="104" height="68" rx="6"/><rect class="cl" x="16" y="14" width="5" height="12" rx="2"/><rect class="oa" x="27" y="14" width="60" height="12" rx="3"/><rect class="wh" x="93" y="14" width="12" height="12" rx="3"/><rect class="cl" x="16" y="32" width="5" height="10" rx="2"/><rect class="fl" x="27" y="32" width="48" height="10" rx="3"/><line class="lc" x1="16" y1="50" x2="104" y2="50"/><line class="ln da" x1="16" y1="58" x2="96" y2="58"/><line class="ln da" x1="16" y1="66" x2="72" y2="66"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">The tweakable plan</div>
|
|
<div class="desc">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.</div>
|
|
<div class="file"><span>08-implementation-plan.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="during">
|
|
<div class="sec-head"><span class="idx">02</span><h2>During implementation</h2><span class="count">1 demo</span></div>
|
|
<p class="sec-intro">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.</p>
|
|
<div class="grid">
|
|
<a class="card" href="09-implementation-notes.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><rect class="wh" x="12" y="4" width="96" height="72" rx="5"/><line class="ln" x1="27" y1="14" x2="27" y2="68"/><circle class="ol" cx="27" cy="14" r="3.5"/><line class="ln" x1="37" y1="14" x2="98" y2="14"/><circle class="cl" cx="27" cy="28" r="3.5"/><line class="lc" x1="37" y1="28" x2="88" y2="28"/><rect class="oa" x="37" y="34" width="52" height="10" rx="2"/><circle class="fl" cx="27" cy="54" r="3.5"/><line class="ln" x1="37" y1="54" x2="94" y2="54"/><circle class="sl" cx="27" cy="66" r="3.5"/><line class="ln" x1="37" y1="66" x2="78" y2="66"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">Implementation notes</div>
|
|
<div class="desc">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.</div>
|
|
<div class="file"><span>09-implementation-notes.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="post">
|
|
<div class="sec-head"><span class="idx">03</span><h2>Post-implementation</h2><span class="count">2 demos</span></div>
|
|
<p class="sec-intro">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.</p>
|
|
<div class="grid">
|
|
<a class="card" href="10-pitch-doc.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><rect class="wh" x="6" y="6" width="108" height="68" rx="5"/><rect class="oa" x="14" y="14" width="58" height="32" rx="4"/><path class="cl" d="M38 22 L52 30 L38 38 Z"/><line class="ln" x1="80" y1="20" x2="106" y2="20"/><line class="ln" x1="80" y1="28" x2="106" y2="28"/><line class="lc" x1="80" y1="36" x2="98" y2="36"/><line class="ln" x1="14" y1="54" x2="76" y2="54"/><line class="ln" x1="14" y1="62" x2="60" y2="62"/><rect class="ol" x="88" y="52" width="22" height="14" rx="7"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">The buy-in doc</div>
|
|
<div class="desc">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.</div>
|
|
<div class="file"><span>10-pitch-doc.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="11-change-quiz.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80"><rect class="wh" x="6" y="8" width="108" height="30" rx="5"/><line class="ln" x1="14" y1="16" x2="70" y2="16"/><line class="ln" x1="14" y1="23" x2="92" y2="23"/><line class="ln" x1="14" y1="30" x2="58" y2="30"/><rect class="oa" x="80" y="12" width="26" height="10" rx="3"/><rect class="wh" x="6" y="44" width="108" height="12" rx="4"/><circle class="ol" cx="14" cy="50" r="4"/><line class="ln" x1="24" y1="50" x2="80" y2="50"/><rect class="wh" x="6" y="60" width="108" height="12" rx="4"/><circle class="cl" cx="14" cy="66" r="4"/><line class="ln" x1="24" y1="66" x2="66" y2="66"/><path class="lc" d="M96 62 l4 5 l7 -8" fill="none" stroke-width="2.5"/></svg></div>
|
|
<div class="body">
|
|
<div class="title">Quiz me before I merge</div>
|
|
<div class="desc">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.</div>
|
|
<div class="file"><span>11-change-quiz.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<span class="k">Every explainer, brainstorm, interview, and prototype is a cheap way to find out what you didn't know.</span>
|
|
<span><a href="../index.html">All HTML-effectiveness examples</a></span>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|