wehub-resource-sync
825 lines
38 KiB
HTML
825 lines
38 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>The unreasonable effectiveness of HTML — 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;
|
|
overflow: visible;
|
|
}
|
|
.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);
|
|
}
|
|
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: 620px;
|
|
}
|
|
.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 — markdown vs html */
|
|
.hero-fig {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
align-items: end;
|
|
}
|
|
@media (max-width: 880px) { .hero-fig { max-width: 400px; margin-top: 28px; } }
|
|
.hero-fig .pane {
|
|
border-radius: 10px;
|
|
border: 1.5px solid var(--g300);
|
|
background: var(--paper);
|
|
padding: 14px;
|
|
aspect-ratio: 4/5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
position: relative;
|
|
}
|
|
.hero-fig .pane.md {
|
|
background: var(--g100);
|
|
transform: rotate(-2.5deg) translateY(6px);
|
|
}
|
|
.hero-fig .pane.html {
|
|
transform: rotate(1.5deg);
|
|
border-color: var(--slate);
|
|
box-shadow: 0 12px 32px rgba(20,20,19,.10);
|
|
}
|
|
.hero-fig .tag {
|
|
position: absolute;
|
|
top: -10px; left: 12px;
|
|
font-family: var(--mono);
|
|
font-size: 9.5px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
background: var(--ivory);
|
|
padding: 2px 7px;
|
|
border: 1.5px solid var(--g300);
|
|
border-radius: 6px;
|
|
color: var(--g500);
|
|
}
|
|
.hero-fig .pane.html .tag { border-color: var(--slate); color: var(--slate); }
|
|
.hero-fig .l { height: 6px; border-radius: 3px; background: var(--g300); }
|
|
.hero-fig .l.w90 { width: 90%; } .hero-fig .l.w75 { width: 75%; }
|
|
.hero-fig .l.w60 { width: 60%; } .hero-fig .l.w82 { width: 82%; }
|
|
.hero-fig .l.w70 { width: 70%; } .hero-fig .l.w50 { width: 50%; }
|
|
.hero-fig .pane.html .l { background: var(--g200); }
|
|
.hero-fig .pane.html .blk {
|
|
border-radius: 5px;
|
|
flex: 1;
|
|
background: linear-gradient(135deg, var(--oat), #ECE1CF);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero-fig .pane.html .blk::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 18%; right: 18%; top: 28%;
|
|
height: 40%;
|
|
border: 2px solid var(--clay);
|
|
border-radius: 50%;
|
|
opacity: .7;
|
|
}
|
|
.hero-fig .pane.html .row {
|
|
display: flex; gap: 6px; align-items: flex-end;
|
|
}
|
|
.hero-fig .pane.html .bar { flex: 1; border-radius: 3px 3px 0 0; }
|
|
.hero-fig .pane.html .bar.b1 { height: 14px; background: var(--olive); }
|
|
.hero-fig .pane.html .bar.b2 { height: 26px; background: var(--clay); }
|
|
.hero-fig .pane.html .bar.b3 { height: 18px; background: var(--oat); }
|
|
.hero-fig .pane.html .bar.b4 { height: 30px; background: 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">
|
|
<div class="hero-grid">
|
|
<div>
|
|
<div class="eyebrow">Companion to the blog post</div>
|
|
<h1>The unreasonable <em>effectiveness</em> of HTML</h1>
|
|
<p class="intro">
|
|
Twenty self-contained <code>.html</code> files an agent produced instead of a wall of markdown.
|
|
Each one trades a document you'd skim for one you'd actually read — open any of them directly in
|
|
a browser. Grouped by the kind of work they replace.
|
|
</p>
|
|
<nav class="toc">
|
|
<a href="#exploration">Exploration & Planning <span class="n">3</span></a>
|
|
<a href="#code-review">Code Review <span class="n">3</span></a>
|
|
<a href="#design">Design <span class="n">2</span></a>
|
|
<a href="#prototyping">Prototyping <span class="n">2</span></a>
|
|
<a href="#illustrations">Diagrams <span class="n">2</span></a>
|
|
<a href="#decks">Decks <span class="n">1</span></a>
|
|
<a href="#research">Research <span class="n">2</span></a>
|
|
<a href="#reports">Reports <span class="n">2</span></a>
|
|
<a href="#editors">Custom Editors <span class="n">3</span></a>
|
|
<a href="unknowns/index.html" style="border-color: var(--clay); color: var(--clay-d);">Know your unknowns <span class="n">11</span></a>
|
|
</nav>
|
|
</div>
|
|
<div class="hero-fig" aria-hidden="true">
|
|
<div class="pane md">
|
|
<span class="tag">.md</span>
|
|
<span class="l w90"></span><span class="l w75"></span><span class="l w82"></span>
|
|
<span class="l w60"></span><span class="l w90"></span><span class="l w70"></span>
|
|
<span class="l w82"></span><span class="l w50"></span><span class="l w75"></span>
|
|
<span class="l w90"></span><span class="l w60"></span>
|
|
</div>
|
|
<div class="pane html">
|
|
<span class="tag">.html</span>
|
|
<span class="l w60"></span>
|
|
<span class="blk"></span>
|
|
<span class="row"><span class="bar b1"></span><span class="bar b2"></span><span class="bar b3"></span><span class="bar b4"></span></span>
|
|
<span class="l w75"></span><span class="l w50"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ============================== Exploration & Planning ============================== -->
|
|
<section id="exploration">
|
|
<div class="sec-head"><span class="idx">01</span><h2>Exploration & Planning</h2><span class="count">3 demos</span></div>
|
|
<p class="sec-intro">
|
|
When you're not sure what you want yet. Ask the agent to fan out across several directions and lay
|
|
them next to each other so you can point at one — instead of reading three sequential walls of text
|
|
and trying to hold them all in your head. And once you've picked, turn the pick into a plan the
|
|
implementer can actually read.
|
|
</p>
|
|
<div class="grid">
|
|
<a class="card" href="01-exploration-code-approaches.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="wh" x="4" y="10" width="32" height="60" rx="5"/>
|
|
<rect class="wh" x="44" y="10" width="32" height="60" rx="5"/>
|
|
<rect class="oa" x="84" y="10" width="32" height="60" rx="5"/>
|
|
<line class="ln" x1="10" y1="26" x2="30" y2="26"/><line class="ln" x1="10" y1="36" x2="26" y2="36"/>
|
|
<line class="ln" x1="50" y1="26" x2="70" y2="26"/><line class="ln" x1="50" y1="36" x2="66" y2="36"/>
|
|
<line class="lc" x1="90" y1="26" x2="110" y2="26"/><line class="lc" x1="90" y1="36" x2="106" y2="36"/>
|
|
<circle class="cl" cx="100" cy="56" r="6"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Three code approaches</div>
|
|
<div class="desc">Side-by-side comparison of three ways to solve the same problem, with trade-offs called out inline.</div>
|
|
<div class="file"><span>01-exploration-code-approaches.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="02-exploration-visual-designs.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="wh" x="6" y="8" width="50" height="30" rx="4"/>
|
|
<rect class="oa" x="64" y="8" width="50" height="30" rx="4"/>
|
|
<rect class="oa" x="6" y="44" width="50" height="30" rx="4"/>
|
|
<rect class="wh" x="64" y="44" width="50" height="30" rx="4"/>
|
|
<circle class="cl" cx="18" cy="20" r="5"/><rect class="fl" x="28" y="16" width="22" height="4" rx="2"/>
|
|
<rect class="ol" x="72" y="16" width="34" height="6" rx="3"/>
|
|
<rect class="sl" x="14" y="54" width="34" height="6" rx="3"/>
|
|
<circle class="ol" cx="102" cy="58" r="6"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Visual design directions</div>
|
|
<div class="desc">A handful of layout and palette options rendered live so you can react to them, not imagine them.</div>
|
|
<div class="file"><span>02-exploration-visual-designs.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="16-implementation-plan.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<line class="ln" x1="14" y1="12" x2="14" y2="68"/>
|
|
<circle class="cl" cx="14" cy="16" r="5"/><circle class="ol" cx="14" cy="40" r="5"/><circle class="fl" cx="14" cy="64" r="5"/>
|
|
<rect class="fl" x="28" y="12" width="48" height="4" rx="2"/><rect class="fl" x="28" y="21" width="34" height="4" rx="2"/>
|
|
<rect class="fl" x="28" y="36" width="42" height="4" rx="2"/><rect class="fl" x="28" y="45" width="28" height="4" rx="2"/>
|
|
<rect class="fl" x="28" y="60" width="44" height="4" rx="2"/>
|
|
<rect class="oa" x="86" y="12" width="28" height="24" rx="4"/>
|
|
<rect class="wh" x="86" y="44" width="28" height="24" rx="4"/>
|
|
<line class="lc" x1="92" y1="56" x2="108" y2="56"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Implementation plan</div>
|
|
<div class="desc">Milestones on a timeline, a data-flow diagram, inline mockups, the risky code, and a risk table — the plan you hand off.</div>
|
|
<div class="file"><span>16-implementation-plan.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================== Code Review & Understanding ============================== -->
|
|
<section id="code-review">
|
|
<div class="sec-head"><span class="idx">02</span><h2>Code Review & Understanding</h2><span class="count">3 demos</span></div>
|
|
<p class="sec-intro">
|
|
Diffs and call-graphs are spatial information; markdown flattens them. Let the agent render the
|
|
change as an annotated diff, draw the module as boxes and arrows, or write the PR description your
|
|
reviewers actually want — so the shape of the code is visible at a glance.
|
|
</p>
|
|
<div class="grid">
|
|
<a class="card" href="03-code-review-pr.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="wh" x="6" y="8" width="72" height="64" rx="5"/>
|
|
<line class="ln" x1="14" y1="20" x2="66" y2="20"/>
|
|
<rect class="ol" x="14" y="28" width="56" height="7" rx="2" opacity=".5"/>
|
|
<rect class="cl" x="14" y="38" width="48" height="7" rx="2" opacity=".5"/>
|
|
<line class="ln" x1="14" y1="52" x2="58" y2="52"/><line class="ln" x1="14" y1="62" x2="50" y2="62"/>
|
|
<rect class="oa" x="86" y="22" width="28" height="20" rx="4"/>
|
|
<line class="lc da" x1="78" y1="32" x2="86" y2="32"/>
|
|
<circle class="cl" cx="100" cy="58" r="7"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Annotated pull request</div>
|
|
<div class="desc">A diff rendered with margin notes, severity tags and jump links — easier to scan than scrolling a terminal.</div>
|
|
<div class="file"><span>03-code-review-pr.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="17-pr-writeup.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="oa" x="6" y="8" width="48" height="28" rx="4"/>
|
|
<rect class="wh" x="6" y="44" width="48" height="28" rx="4"/>
|
|
<line class="ln" x1="14" y1="20" x2="46" y2="20"/><line class="ln" x1="14" y1="28" x2="38" y2="28"/>
|
|
<line class="lc" x1="14" y1="56" x2="46" y2="56"/><line class="ln" x1="14" y1="64" x2="38" y2="64"/>
|
|
<rect class="wh" x="64" y="8" width="50" height="64" rx="5"/>
|
|
<circle class="cl" cx="74" cy="22" r="5"/><rect class="fl" x="84" y="19" width="24" height="5" rx="2"/>
|
|
<circle class="ol" cx="74" cy="42" r="5"/><rect class="fl" x="84" y="39" width="22" height="5" rx="2"/>
|
|
<circle class="fl" cx="74" cy="62" r="5"/><rect class="fl" x="84" y="59" width="26" height="5" rx="2"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">PR writeup for reviewers</div>
|
|
<div class="desc">The author's side: motivation, before/after, a file-by-file tour with the <em>why</em>, and where to focus the review.</div>
|
|
<div class="file"><span>17-pr-writeup.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="04-code-understanding.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="wh" x="44" y="8" width="32" height="20" rx="4"/>
|
|
<rect class="oa" x="8" y="52" width="32" height="20" rx="4"/>
|
|
<rect class="cl" x="44" y="52" width="32" height="20" rx="4"/>
|
|
<rect class="wh" x="80" y="52" width="32" height="20" rx="4"/>
|
|
<line class="ln" x1="50" y1="28" x2="26" y2="52"/>
|
|
<line class="lc" x1="60" y1="28" x2="60" y2="52"/>
|
|
<line class="ln" x1="70" y1="28" x2="94" y2="52"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Module map</div>
|
|
<div class="desc">An unfamiliar package drawn as boxes and arrows, with the hot path highlighted and entry points listed.</div>
|
|
<div class="file"><span>04-code-understanding.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================== Design ============================== -->
|
|
<section id="design">
|
|
<div class="sec-head"><span class="idx">03</span><h2>Design</h2><span class="count">2 demos</span></div>
|
|
<p class="sec-intro">
|
|
HTML <em>is</em> the medium your design system ships in, so it's the natural format for talking about
|
|
it. Tokens become swatches, components become contact sheets, and the artifact can be fed straight
|
|
back into the next prompt.
|
|
</p>
|
|
<div class="grid">
|
|
<a class="card" href="05-design-system.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="cl" x="8" y="10" width="22" height="22" rx="4"/>
|
|
<rect class="ol" x="36" y="10" width="22" height="22" rx="4"/>
|
|
<rect class="oa" x="64" y="10" width="22" height="22" rx="4"/>
|
|
<rect class="sl" x="92" y="10" width="22" height="22" rx="4"/>
|
|
<rect class="fl" x="8" y="42" width="80" height="8" rx="2"/>
|
|
<rect class="fl" x="8" y="56" width="56" height="6" rx="2"/>
|
|
<rect class="fl" x="8" y="68" width="40" height="5" rx="2"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Living design system</div>
|
|
<div class="desc">Colors, type scale and spacing tokens pulled from a repo and rendered as swatches you can copy from.</div>
|
|
<div class="file"><span>05-design-system.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="06-component-variants.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="cl" x="10" y="14" width="44" height="14" rx="7"/>
|
|
<rect class="wh" x="10" y="34" width="44" height="14" rx="7"/>
|
|
<rect class="oa" x="10" y="54" width="44" height="14" rx="7"/>
|
|
<rect class="cl" x="66" y="14" width="34" height="11" rx="5.5"/>
|
|
<rect class="wh" x="66" y="32" width="34" height="11" rx="5.5"/>
|
|
<rect class="oa" x="66" y="50" width="34" height="11" rx="5.5"/>
|
|
<circle class="cl" cx="110" cy="20" r="4"/><circle class="fl" cx="110" cy="37" r="4"/><circle class="ol" cx="110" cy="56" r="4"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Component variants</div>
|
|
<div class="desc">Every size, state and intent of one component laid out on a single sheet for review.</div>
|
|
<div class="file"><span>06-component-variants.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================== Prototyping ============================== -->
|
|
<section id="prototyping">
|
|
<div class="sec-head"><span class="idx">04</span><h2>Prototyping</h2><span class="count">2 demos</span></div>
|
|
<p class="sec-intro">
|
|
Motion and interaction can't be described, only felt. A throwaway page with the real easing curve or
|
|
the real click-through tells you in five seconds what a paragraph of prose never could.
|
|
</p>
|
|
<div class="grid">
|
|
<a class="card" href="07-prototype-animation.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="wh" x="8" y="10" width="104" height="34" rx="5"/>
|
|
<path class="lc" d="M16 38 C 40 38, 56 16, 104 16" fill="none"/>
|
|
<circle class="cl" cx="72" cy="23" r="4.5"/>
|
|
<line class="ln" x1="12" y1="58" x2="108" y2="58"/><circle class="cl" cx="44" cy="58" r="6"/>
|
|
<line class="ln" x1="12" y1="70" x2="108" y2="70"/><circle class="ol" cx="82" cy="70" r="6"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Animation sandbox</div>
|
|
<div class="desc">The transition in isolation with sliders for duration and easing, so you can tune it before wiring it in.</div>
|
|
<div class="file"><span>07-prototype-animation.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="08-prototype-interaction.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="wh" x="6" y="22" width="28" height="36" rx="4"/>
|
|
<rect class="oa" x="46" y="22" width="28" height="36" rx="4"/>
|
|
<rect class="wh" x="86" y="22" width="28" height="36" rx="4"/>
|
|
<line class="lc" x1="34" y1="40" x2="46" y2="40"/>
|
|
<line class="lc" x1="74" y1="40" x2="86" y2="40"/>
|
|
<circle class="cl" cx="20" cy="50" r="4"/><rect class="fl" x="52" y="30" width="16" height="4" rx="2"/><rect class="ol" x="92" y="46" width="16" height="6" rx="3"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Clickable flow</div>
|
|
<div class="desc">Four screens linked together — enough fidelity to feel whether the interaction is right.</div>
|
|
<div class="file"><span>08-prototype-interaction.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================== Illustrations & Diagrams ============================== -->
|
|
<section id="illustrations">
|
|
<div class="sec-head"><span class="idx">05</span><h2>Illustrations & Diagrams</h2><span class="count">2 demos</span></div>
|
|
<p class="sec-intro">
|
|
Inline SVG gives the agent a real pen. Ask for the figures for a post or a flowchart of a process and
|
|
get vector art you can tweak by hand or paste straight into the final document.
|
|
</p>
|
|
<div class="grid">
|
|
<a class="card" href="10-svg-illustrations.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<circle class="oa" cx="32" cy="40" r="24"/>
|
|
<circle class="cl" cx="32" cy="40" r="11"/>
|
|
<path class="lc" d="M68 60 L86 20 L104 60" fill="none"/>
|
|
<line class="ln" x1="66" y1="66" x2="106" y2="66"/>
|
|
<circle class="ol" cx="86" cy="20" r="5"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">SVG figure sheet</div>
|
|
<div class="desc">The diagrams for a blog post, drawn inline so they can be tweaked and copied out one by one.</div>
|
|
<div class="file"><span>10-svg-illustrations.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="13-flowchart-diagram.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="wh" x="10" y="10" width="30" height="16" rx="4"/>
|
|
<path class="oa" d="M60 34 L80 46 L60 58 L40 46 Z"/>
|
|
<rect class="wh" x="82" y="10" width="30" height="16" rx="4"/>
|
|
<rect class="cl" x="82" y="56" width="30" height="16" rx="4"/>
|
|
<line class="ln" x1="25" y1="26" x2="25" y2="46"/><line class="ln" x1="25" y1="46" x2="40" y2="46"/>
|
|
<line class="lc" x1="80" y1="46" x2="97" y2="46"/><line class="lc" x1="97" y1="46" x2="97" y2="56"/>
|
|
<line class="ln" x1="60" y1="34" x2="60" y2="22"/><line class="ln" x1="60" y1="22" x2="82" y2="22"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Annotated flowchart</div>
|
|
<div class="desc">A deploy pipeline drawn as a real flowchart — click any step to see what runs, timings, and failure paths.</div>
|
|
<div class="file"><span>13-flowchart-diagram.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================== Decks ============================== -->
|
|
<section id="decks">
|
|
<div class="sec-head"><span class="idx">06</span><h2>Decks</h2><span class="count">1 demo</span></div>
|
|
<p class="sec-intro">
|
|
A handful of <code><section></code> tags and twenty lines of JS is a slide deck. Point the agent at a
|
|
Slack thread or a design doc and get something you can arrow-key through in a meeting — no Keynote,
|
|
no export step.
|
|
</p>
|
|
<div class="grid">
|
|
<a class="card" href="09-slide-deck.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="oa" x="8" y="18" width="70" height="44" rx="5"/>
|
|
<rect class="wh" x="22" y="12" width="76" height="50" rx="5"/>
|
|
<rect class="cl" x="32" y="24" width="36" height="7" rx="3"/>
|
|
<rect class="fl" x="32" y="36" width="52" height="4" rx="2"/><rect class="fl" x="32" y="44" width="44" height="4" rx="2"/>
|
|
<circle class="fl" cx="50" cy="70" r="3"/><circle class="cl" cx="60" cy="70" r="3"/><circle class="fl" cx="70" cy="70" r="3"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Arrow-key slide deck</div>
|
|
<div class="desc">A short presentation as one HTML file. Left and right to navigate, no build step.</div>
|
|
<div class="file"><span>09-slide-deck.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================== Research & Learning ============================== -->
|
|
<section id="research">
|
|
<div class="sec-head"><span class="idx">07</span><h2>Research & Learning</h2><span class="count">2 demos</span></div>
|
|
<p class="sec-intro">
|
|
An explainer with collapsible sections, tabbed code samples and a glossary in the margin reads very
|
|
differently from the same words dumped linearly. The agent can build the scaffolding that makes a new
|
|
topic navigable.
|
|
</p>
|
|
<div class="grid">
|
|
<a class="card" href="14-research-feature-explainer.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="cl" x="8" y="8" width="104" height="20" rx="4" opacity=".35"/>
|
|
<rect class="fl" x="14" y="15" width="60" height="6" rx="3"/>
|
|
<rect class="wh" x="8" y="34" width="104" height="14" rx="4"/>
|
|
<rect class="wh" x="8" y="52" width="104" height="14" rx="4"/>
|
|
<path class="ln" d="M16 39 l4 4 l-4 4"/><rect class="fl" x="28" y="38" width="46" height="5" rx="2.5"/>
|
|
<path class="ln" d="M16 57 l4 4 l-4 4"/><rect class="fl" x="28" y="56" width="38" height="5" rx="2.5"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">How a feature works</div>
|
|
<div class="desc">"Explain rate limiting in this repo" — TL;DR box, collapsible request-path steps, tabbed config snippets, and an FAQ.</div>
|
|
<div class="file"><span>14-research-feature-explainer.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="15-research-concept-explainer.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<circle class="st" cx="42" cy="40" r="26"/>
|
|
<circle class="cl" cx="42" cy="14" r="5"/><circle class="ol" cx="68" cy="40" r="5"/>
|
|
<circle class="fl" cx="42" cy="66" r="5"/><circle class="fl" cx="16" cy="40" r="5"/>
|
|
<rect class="fl" x="82" y="20" width="30" height="5" rx="2.5"/><rect class="fl" x="82" y="32" width="24" height="5" rx="2.5"/>
|
|
<rect class="fl" x="82" y="44" width="28" height="5" rx="2.5"/><rect class="fl" x="82" y="56" width="20" height="5" rx="2.5"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Concept explainer</div>
|
|
<div class="desc">Consistent hashing taught with a live ring you can add/remove nodes from, a comparison table, and a hover-linked glossary.</div>
|
|
<div class="file"><span>15-research-concept-explainer.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================== Reports ============================== -->
|
|
<section id="reports">
|
|
<div class="sec-head"><span class="idx">08</span><h2>Reports</h2><span class="count">2 demos</span></div>
|
|
<p class="sec-intro">
|
|
Recurring documents — status updates, post-mortems — benefit most from a bit of structure and color.
|
|
A small chart and a colored timeline turn something people skim into something they actually read.
|
|
</p>
|
|
<div class="grid">
|
|
<a class="card" href="11-status-report.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="fl" x="8" y="10" width="54" height="6" rx="3"/>
|
|
<rect class="ol" x="8" y="24" width="36" height="8" rx="3" opacity=".6"/>
|
|
<rect class="oa" x="8" y="38" width="28" height="8" rx="3"/>
|
|
<rect class="cl" x="8" y="52" width="20" height="8" rx="3" opacity=".6"/>
|
|
<rect class="wh" x="72" y="16" width="40" height="48" rx="5"/>
|
|
<rect class="ol" x="80" y="44" width="6" height="14"/>
|
|
<rect class="cl" x="90" y="34" width="6" height="24"/>
|
|
<rect class="fl" x="100" y="50" width="6" height="8"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Weekly status</div>
|
|
<div class="desc">What shipped, what slipped, and a small chart — formatted for a quick skim on Monday morning.</div>
|
|
<div class="file"><span>11-status-report.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="12-incident-report.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<line class="ln" x1="18" y1="12" x2="18" y2="68"/>
|
|
<circle class="fl" cx="18" cy="16" r="5"/><circle class="cl" cx="18" cy="34" r="5"/>
|
|
<circle class="cl" cx="18" cy="50" r="5"/><circle class="ol" cx="18" cy="66" r="5"/>
|
|
<rect class="fl" x="32" y="13" width="40" height="5" rx="2.5"/>
|
|
<rect class="fl" x="32" y="31" width="56" height="5" rx="2.5"/>
|
|
<rect class="fl" x="32" y="47" width="48" height="5" rx="2.5"/>
|
|
<rect class="fl" x="32" y="63" width="36" height="5" rx="2.5"/>
|
|
<rect class="oa" x="94" y="26" width="20" height="30" rx="4"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Incident timeline</div>
|
|
<div class="desc">A post-mortem with a minute-by-minute timeline, log excerpts and the follow-up checklist.</div>
|
|
<div class="file"><span>12-incident-report.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================== Custom Editing Interfaces ============================== -->
|
|
<section id="editors">
|
|
<div class="sec-head"><span class="idx">09</span><h2>Custom Editing Interfaces</h2><span class="count">3 demos</span></div>
|
|
<p class="sec-intro">
|
|
Sometimes it's hard to describe what you want in a text box. Ask for a throwaway editor for the exact
|
|
thing you're working on — and always end with an export button that turns whatever you did in the UI
|
|
back into something you can paste into the agent or commit. You stay in the loop; the loop gets tighter.
|
|
</p>
|
|
<div class="grid">
|
|
<a class="card" href="18-editor-triage-board.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="wh" x="6" y="10" width="24" height="60" rx="4"/>
|
|
<rect class="wh" x="34" y="10" width="24" height="60" rx="4"/>
|
|
<rect class="wh" x="62" y="10" width="24" height="60" rx="4"/>
|
|
<rect class="wh" x="90" y="10" width="24" height="60" rx="4"/>
|
|
<rect class="cl" x="10" y="18" width="16" height="9" rx="2"/>
|
|
<rect class="fl" x="10" y="31" width="16" height="9" rx="2"/>
|
|
<rect class="fl" x="10" y="44" width="16" height="9" rx="2"/>
|
|
<rect class="fl" x="38" y="18" width="16" height="9" rx="2"/>
|
|
<rect class="ol" x="38" y="31" width="16" height="9" rx="2"/>
|
|
<rect class="fl" x="66" y="18" width="16" height="9" rx="2"/>
|
|
<rect class="oa" x="48" y="50" width="20" height="11" rx="2"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Ticket triage board</div>
|
|
<div class="desc">Drag thirty tickets across Now / Next / Later / Cut, then copy the final ordering out as markdown.</div>
|
|
<div class="file"><span>18-editor-triage-board.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="19-editor-feature-flags.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="wh" x="8" y="10" width="104" height="14" rx="4"/>
|
|
<rect class="wh" x="8" y="30" width="104" height="14" rx="4"/>
|
|
<rect class="wh" x="8" y="50" width="104" height="14" rx="4"/>
|
|
<rect class="ol" x="88" y="13" width="18" height="8" rx="4"/><circle class="wh" cx="100" cy="17" r="3"/>
|
|
<rect class="fl" x="88" y="33" width="18" height="8" rx="4"/><circle class="wh" cx="93" cy="37" r="3"/>
|
|
<rect class="cl" x="88" y="53" width="18" height="8" rx="4"/><circle class="wh" cx="100" cy="57" r="3"/>
|
|
<rect class="fl" x="14" y="14" width="34" height="5" rx="2.5"/>
|
|
<rect class="fl" x="14" y="34" width="42" height="5" rx="2.5"/>
|
|
<rect class="fl" x="14" y="54" width="28" height="5" rx="2.5"/>
|
|
<line class="lc da" x1="62" y1="24" x2="62" y2="50"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Feature flag editor</div>
|
|
<div class="desc">Toggles grouped by area, dependency warnings when a prerequisite is off, and a "copy diff" button for just the changed keys.</div>
|
|
<div class="file"><span>19-editor-feature-flags.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="card" href="20-editor-prompt-tuner.html">
|
|
<div class="thumb"><svg viewBox="0 0 120 80">
|
|
<rect class="wh" x="6" y="10" width="56" height="60" rx="4"/>
|
|
<rect class="fl" x="12" y="18" width="40" height="4" rx="2"/>
|
|
<rect class="cl" x="12" y="26" width="22" height="4" rx="2"/>
|
|
<rect class="fl" x="12" y="34" width="44" height="4" rx="2"/>
|
|
<rect class="ol" x="12" y="42" width="18" height="4" rx="2"/>
|
|
<rect class="fl" x="12" y="50" width="36" height="4" rx="2"/>
|
|
<rect class="oa" x="68" y="10" width="46" height="18" rx="4"/>
|
|
<rect class="oa" x="68" y="32" width="46" height="18" rx="4"/>
|
|
<rect class="oa" x="68" y="54" width="46" height="18" rx="4"/>
|
|
</svg></div>
|
|
<div class="body">
|
|
<div class="title">Prompt tuner</div>
|
|
<div class="desc">Editable template on the left with variable slots highlighted; three sample inputs on the right re-render live as you type.</div>
|
|
<div class="file"><span>20-editor-prompt-tuner.html</span><span class="arrow">→</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<span class="k">Everything on this page is itself a single <code>.html</code> file. See also: <a href="unknowns/index.html">Know your unknowns</a>.</span>
|
|
<span>View the repo · <a href="https://thariqs.github.io/html-effectiveness/">thariqs.github.io/html-effectiveness</a></span>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|