§1 · Product Definition
What Makes a Prompt Build a Site?
Most people prompt AI with: "Make me a website about [topic]." The prompts that build extraordinary data-driven stories do the opposite. They define the product first, then constrain the technology, then specify every visual token.
The two sites analyzed in this report — "Forty-Two Years of Inference Silicon" and "Shipping Is Not One Cycle" — were built from prompts that are essentially production-ready design specifications disguised as prompts. The creativity happened before the prompt: in the author's head, structuring the narrative, designing the visual system, and defining the data architecture.
This report teaches you to write prompts the same way: as build specifications, not creative briefs.
The Core Insight
The magic isn't in the AI. It's in the clarity of the specification. A senior engineer receiving a complete design spec will build exactly what was specified — because it was specified exactly.
§2 · The Case Studies
Two Sites, Two Architectures
Both sites were built by the same AI from radically different prompts. Comparing them reveals what prompt architecture actually controls.
Site 1
Forty-Two Years of Inference Silicon
Equity Research · 55,000px
Topic
FPGA, AI accelerators, supply-chain cycles
Charts
26 independent visualizations
Sections
19 body sections + appendix
Visual Style
White paper, navy text, electric blue
Dashboard
Fixed 460px right-hand contextual panel
Evidence
K1–K41 numbered fact register
Site 2
Shipping Is Not One Cycle
Nautical Editorial · Scrollytelling
Topic
Container, dry bulk, tanker shipping cycles
Charts
13 content blocks with D3/Scrollama
Sections
13 scrollytelling blocks
Visual Style
Nautical chart paper, warm tones
Dashboard
Three radial "clock" dials
Evidence
Gap register with 9 limitations
§3 · Reverse Engineering
How the Prompt Became the Site
The prompt doesn't ask for "a nice website about chips." It provides a complete editorial, visual, and engineering blueprint. Here's what we found when we took both sites apart.
| Prompt Element | Site 1: Inference Silicon | Site 2: Shipping | What It Controls |
|---|---|---|---|
| Product Definition | "Interactive research report" — 55,000px tall, 26 charts, 9 quotes, 8 triggers, 6 dossiers | "Complete offline single-page story" — 13 blocks, pixel ships, 3 clocks | Scope and ambition. Forces AI to think in scroll depth, not pages. |
| Visual Tokens | CSS custom properties: --paper #fff, --ink #051c2c, --blue #2251ff, ET Book typography | CSS tokens: paper #F7F2E7, navy ink #14263B, container blue #0E67B5, dry rust #C25E28, tanker green #1F8A70 | Coherent visual language. Prevents AI from improvising colors/fonts per section. |
| Section Architecture | 19 sections with exact IDs: #sec-frame, #sec-grave, #sec-w2... #sec-sources | 13 blocks: clocks, stock scrolly, three curves, tile wall, quarterly, orderbook, lead-lag, scorecard, bridge, lanes, signals, gaps | Narrative arc. The scroll journey is the story. |
| Data Architecture | 16 structured datasets: windows, timelineEvents, companyCohorts, capexByCompany, tpuGenerations... | window.DATA contract: anchor_monthly, indexA_monthly, indexB_monthly, chart_specs, stage_strips, signals, cohort_tiles... | Provenance. Every number knows where it came from and how certain it is. |
| Technology Constraints | "Use: HTML5, CSS3, Vanilla JS, D3, Canvas 2D, SVG. Do not use: React, Vue, Tailwind, jQuery" | "Use only offline static HTML/CSS/JS, local D3 v7, local Scrollama v3. No React, Vue, backend, jQuery" | Forces custom, bespoke visualizations instead of cookie-cutter defaults. |
| Interaction Spec | 3 cover modes, era rail, drill card, signal cards, dossier expansion, K-register | Scroll-driven states, button groups, play buttons, hover, click drilldown, tooltip | Every interaction specified in CSS-like detail. No ambiguity. |
| Responsive Logic | Exact breakpoints: >1180px dashboard, ≤1180px hide, ≤1100px collapse, ≤980px single col, 390×844 exact px | ≤900px fallback specified; desktop dimensions exact; no invented mobile IA | Breakpoint logic written like a frontend engineer would write it. |
| Acceptance Tests | 8 explicit tests: cover at 1280×720, dashboard after scroll, 390×844 mobile, all 26 charts, ◆ drill card, Broadcom dossier, triggers, K1–K41 | 7 criteria: exact order, 7/7/4 scrolly states, all motions/components, clickable items, offline, no CJK, desktop exact | Prevents AI from declaring victory with placeholders or incomplete features. |
§4 · Site 1 Deep Dive
Forty-Two Years of Inference Silicon
An equity-research-style interactive report reconstructing the 1985–2026 history of FPGA, inference silicon, and AI accelerators. Built from a prompt that is essentially a design system document.
FIG. 1 · 1985–2026 Wall Chart
1985–1995
1995–2003
2004–2012
2013–2018
2019–2022
2023–2026
XC2064
−39% reset
Catapult
TPU v1
$49B AMD–Xilinx
$75.2B DC rev
Source: this report's K-register (K1–K41)
What the Prompt Specified
1
Product Definition
"A very long, single-page English interactive research report" — not a landing page. Combines editorial research, equity-research visual language, long-form narrative, scrollytelling, interactive data viz, source-audited evidence, and a persistent contextual dashboard.
2
Visual System as Code
Exact CSS custom properties provided in the prompt: --paper: #ffffff, --ink: #051c2c, --blue: #2251ff. Typography specified as ET Book with Menlo for data. Forces a coherent visual language rather than improvised colors.
3
19 Sections with Exact IDs
Each section has an ID (#sec-frame), section number (§1), title, subtitle/hed, thesis sentence, and specified charts. The narrative arc is: framework → graveyard → 6 historical windows → present deep-dives → future scenarios → monitoring.
4
26 Chart Containers
Each chart specified by ID, technology (SVG/Canvas/HTML), viewBox, and behavior. Mixture of Canvas, SVG, and HTML — deliberately varied, not generic bars.
5
Persistent Right Dashboard
460px fixed width, Canvas-rendered world map, cycle stages, 4 metrics, 13-player cohort strip. Updates by section. Hidden on cover, fades in after.
6
K1–K41 Evidence Register
Every claim footnoted to a numbered fact. Inline ◆ anchors open drill cards. Creates the feeling of serious research rather than opinion.
Prompt excerpt: Visual Tokens
Use these exact tokens:
--paper: #ffffff
--paper-hi: #f7f9fc
--ink: #051c2c
--ink-md: #42566a
--blue: #2251ff
--shadow: 0 1px 2px rgba(5,28,44,.05), 0 8px 28px rgba(5,28,44,.07)
Typography:
- Titles, prose: ET Book
- Data, axes: Menlo, Consolas, "SF Mono", monospaceKey Innovation: The "No" List
The prompt explicitly forbids React, Vue, Next.js, Tailwind, Bootstrap, jQuery, UI component libraries, iframes, chart screenshots, and generic dashboard templates. This is as important as the "Yes" list — it prevents the AI from reaching for the easiest solution and forces it to build custom, bespoke visualizations from primitives.
§5 · Site 2 Deep Dive
Shipping Is Not One Cycle
A nautical-themed scrollytelling piece arguing that container shipping, dry bulk, and tankers run on three independent clocks. Built from a prompt with pixel-art ships and exact animation timings.
What the Prompt Specified
1
Non-Negotiable Constraints
"The only factual inputs are this prompt and the uploaded analysis data. Do not browse the web, cite non-uploaded material, guess values." This prevents hallucination and grounds the site in real data.
2
English-Only Policy
"Translate every Chinese string found in the uploaded analysis files into clear, idiomatic English." The prompt even requires a CJK scan before delivery. This ensures accessibility and professionalism.
3
Pixel Ship Language
Exact character matrices for three 8-bit ship types (container, dry, tanker) with a 17-color palette. Ships rendered as SVG <rect> cells, not emoji or PNG. Specific animation timings: 52s, 74s, 96s sail durations.
4
13 Content Blocks
Each block specified in detail: Three Clocks (radial dials), COSCO Stock Scrolly (7 steps, 225 points, 8 event pins), Three Curves (small multiples, disclosed points only), Old Table Tile Wall (26 tiles, 4 scroll states), and more.
5
Exact Script Order
D3 → Scrollama → data.js → pixel.js → charts.js → sections.js → scrolly.js → main.js. This dependency chain is specified explicitly, preventing load-order bugs.
6
Zero Sliders
"Use zero sliders. Interaction is limited to scroll-driven states, button groups, play buttons, hover, and click drilldown exactly as specified." This constrains the interaction vocabulary to a manageable set.
Prompt excerpt: Pixel Ship Matrix
container = [
"..F.......................",
"..B.......................",
"..BB..12341234123412341...",
"..BWB.43214321432143214...",
"..BBB.21432143214321432...",
"HHHHHHHHHHHHHHHHHHHHHHHH..",
".hHHHHHHHHHHHHHHHHHHHHh...",
"..hhhhhhhhhhhhhhhhhhhh...."
]Three Clocks · Stage Lanes
Container
Event-driven tightness
Dry Bulk
Early upcycle
Tanker
Upcycle
Freight-rate normalization
Event-driven tightness
Delivery peak
Rebalancing
Source: uploaded analysis data · as of 2026-07-10
Key Innovation: The Gap Register
Site 2 includes a six-row gap register that explicitly documents what the report cannot answer: missing CCFI series, no 1988–2002 container index, iFinD limitations, Yahoo Finance unavailability. This is radical transparency — it builds trust by showing the seams rather than hiding them.
§6 · Prompt Reference
The Original Prompts
For reference while reading this guide, both original prompts are reproduced below in full. These are the exact specifications that produced the two production sites. Click a tab to switch between prompts.
1 You are a senior frontend engineer, data-visualization engineer, and interaction designer. Build a complete, runnable, deployable static website directly in the current workspace.
2
3 This is not a loose visual reference. Reconstruct the site from the following specification at high visual and behavioral fidelity. Do not simplify the chapter structure, replace charts with placeholders, turn it into a generic card-based dashboard, or substitute a different visual system.
4
5 1. Product definition
6
7 Create a very long, single-page English interactive research report titled:
8
9 “Forty-Two Years of Inference Silicon”
10
11 Subtitle:
12
13 “Is this time different?”
14
15 The report reconstructs the 1985–2026 history of FPGA, inference silicon, cloud in-house ASICs, AI accelerators, supply-chain constraints, capital expenditure, and industry cycles.
16
17 This is not a marketing landing page. It combines:
18
19 - Editorial research
20 - Equity-research visual language
21 - Long-form narrative
22 - Scrollytelling
23 - Interactive data visualization
24 - Source-audited evidence
25 - A persistent contextual dashboard
26
27 The desktop document is approximately 55,000px tall and contains:
28
29 - One full-screen cover
30 - Nineteen body sections
31 - One appendix/footer
32 - Twenty-six independent chart containers
33 - Nine primary-record quote modules
34 - Eight monitoring triggers
35 - Six expandable company dossiers
36 - A K1–K41 evidence register
37 - A fixed right-hand cycle dashboard
38 - A top era-progress rail
39 - A global evidence drill card
40
41 2. Technology
42
43 Use:
44
45 - Semantic HTML5
46 - CSS3
47 - Vanilla JavaScript
48 - D3.js
49 - TopoJSON Client
50 - Canvas 2D
51 - SVG
52 - CSS Grid and Flexbox
53 - IntersectionObserver
54 - ResizeObserver
55 - requestAnimationFrame
56
57 Do not use:
58
59 - React
60 - Vue
61 - Next.js
62 - Tailwind
63 - Bootstrap
64 - jQuery
65 - UI component libraries
66 - iframes
67 - chart screenshots
68 - generic dashboard templates
69
70 The result must be deployable as a fully static website.
71
72 Recommended architecture:
73
74 index.html
75 favicon.ico
76
77 css/
78 fonts-inlined.css
79 style.css
80
81 vendor/
82 d3.min.js
83 topojson-client.min.js
84 land-110m.json
85
86 js/
87 data.js
88 data-v51.js
89 data-v52.js
90 data-v53.js
91 utils.js
92 cover.js
93 cover-exploded.js
94 cover-wire.js
95 dashboard.js
96 sources.js
97 signals.js
98 main.js
99
100 js/charts/
101 timeline42.js
102 mechanism.js
103 clearing.js
104 conflow.js
105 submarine.js
106 tpu.js
107 mining.js
108 sawtooth.js
109 capex3d.js
110 capex_stairs.js
111 penetration.js
112 stamps.js
113 revenue_split.js
114 pergw.js
115 gates.js
116 cowos.js
117 hbm.js
118 hbmgen.js
119 partition.js
120 assumptions.js
121 matrix.js
122 verdict_tree.js
123 scenario_chain.js
124 deepdive.js
125 now.js
126
127 Every Canvas must be devicePixelRatio-aware. Separate CSS dimensions from backing-store dimensions so the visualizations remain sharp on Retina displays.
128
129 3. Metadata
130
131 Set:
132
133 document.title =
134 “Forty-Two Years of Inference Silicon · Is This Time Different?”
135
136 Meta description:
137
138 “A 1985–2026 cycle reconstruction and ASIC sector deep dive: six windows, four supply gates, two scenarios, eight falsification triggers.”
139
140 4. Visual system
141
142 The visual language is:
143
144 - White paper-like surface
145 - Deep navy editorial text
146 - Electric-blue primary accent
147 - ET Book/Tufte-style typography
148 - Sparse shadows
149 - Hairline separators
150 - Monospaced chart annotation
151 - Dots, outlines, hatching, thin axes, and technical diagrams
152 - McKinsey Insights / GS-MS equity research / Tufte editorial graphics
153
154 Avoid rounded SaaS cards, glassmorphism, heavy gradients, oversized icons, and decorative marketing illustrations.
155
156 Use these exact tokens:
157
158 --paper: #ffffff
159 --paper-hi: #f7f9fc
160 --ink: #051c2c
161 --ink-md: #42566a
162 --ink-lo: #8595a6
163 --line: #dbe2ea
164 --line-lo: #eef1f6
165 --blue: #2251ff
166 --blue-hi: #1233b8
167 --blue-lo: #7d9bff
168 --copper: #b07a10
169 --green: #008a6d
170 --violet: #7a45c9
171 --neg: #c22f4e
172 --shadow: 0 1px 2px rgba(5,28,44,.05), 0 8px 28px rgba(5,28,44,.07)
173
174 Typography:
175
176 - Titles, prose, and buttons: ET Book
177 - Fallback: "Iowan Old Style", Palatino, Georgia, serif
178 - Data, axes, labels, section numbers: Menlo, Consolas, "SF Mono", monospace
179 - Provide ET Book 400, 700, and italic
180 - Prefer locally embedded WOFF data in fonts-inlined.css
181
182 Global body:
183
184 - 17px
185 - line-height 1.68
186 - color #051c2c
187 - background #fff
188 - antialiased rendering
189 - selection background rgba(34,81,255,.15)
190
191 5. Desktop layout
192
193 At a 1280×720 viewport:
194
195 - Fixed right dashboard: 460px
196 - Narrative main area: 820px
197 - main margin-right: 460px
198 - Dashboard fixed to top/right/bottom
199 - Dashboard z-index 60
200 - Top era rail z-index 90
201 - Tooltip z-index 150
202 - Drill card z-index 200
203
204 Content widths:
205
206 - .prose: max-width 692px, horizontal padding 24px
207 - .wide: max-width 800px
208 - .wide.xl: max-width 924px
209 - .band: padding 48px 0 56px
210 - Each band has a 1px #eef1f6 top border
211
212 Cover content:
213
214 - max-width 1120px
215 - centered
216 - padding 11vh 24px 60px
217 - min-height 100vh
218
219 6. Cover
220
221 The cover must fill the first viewport and use an independently drawn Canvas background.
222
223 Exact copy:
224
225 Kicker:
226
227 INFERENCE SILICON · 1985 – 2026 · CYCLE RECONSTRUCTION × SECTOR DEEP DIVE
228
229 H1:
230
231 Forty-two years of
232 inference silicon
233
234 Render “inference silicon” in #2251ff.
235
236 Subtitle:
237
238 Is this time different?
239
240 Lead:
241
242 From the Xilinx XC2064 in 1985 to the TPU v8 in 2026, the contest over who supplies custom compute has run for four decades. Three generations of challengers have entered; two clearing waves have swept through; the exit grammar has never changed: acquisition, not bankruptcy. This report cuts forty-two years into six windows, reconstructs what was knowable at the time in each, and asks one question — is the 2023–2026 inference boom a replay of an old cycle, or a new cycle under a new set of constraints?
243
244 Add eight navigation chips:
245
246 - Key findings → #sec-frame
247 - Survivorship record → #sec-grave
248 - The closest analogue → #sec-w3
249 - The current cycle → #sec-w7
250 - Crossover stress test → #sec-crossover
251 - Two scenarios → #sec-verdict
252 - Three bold assumptions → #sec-assumptions
253 - 8 triggers → #sec-signals
254
255 Chip styling:
256
257 - ET Book 700
258 - 12.5px
259 - padding 7px 13px
260 - 1.5px solid #051c2c
261 - 6px radius
262 - white background
263 - blue background and white text on hover
264 - flex-wrap with an 8px gap
265
266 Cover annotation:
267
268 Interactive research edition · Six windows, 1985–2026 · 24 primary-source quotations, 9 presented in full · Every figure traces to a dated source · For information only; not investment advice
269
270 Implement three switchable Canvas cover engines:
271
272 - A · recursion: default; pale recursive circuit routes, rounded tracks, dot matrices.
273 - B · exploded: exploded chip layers and grids, with a restrained copper/gold active accent.
274 - C · blueprint: engineering blueprint, wireframes, coordinates, and process structures.
275
276 Use:
277
278 - #cover-canvas
279 - #cover-canvas-x
280 - #cover-canvas-w
281
282 Only the current canvas is visible. Mode buttons are monospaced 10.5px uppercase pills. The active mode has a blue outline and text.
283
284 Add a SCROLL indicator:
285
286 - mono 11px
287 - .3em letter spacing
288 - 1px × 44px vertical rule
289 - blue-to-transparent gradient
290 - 1.8-second looping scaleY animation
291
292 7. Typography
293
294 H1:
295
296 - clamp(44px, 6.6vw, 78px)
297 - 700
298 - line-height 1.08
299 - letter-spacing −0.01em
300
301 H2:
302
303 - clamp(26px, 3.2vw, 36px)
304 - 700
305 - line-height 1.25
306 - margin-bottom 20px
307
308 H3:
309
310 - 21px
311 - line-height 1.4
312 - margin-bottom 14px
313
314 Section marker:
315
316 - mono 11px
317 - .26em letter spacing
318 - uppercase blue
319 - preceded by a 26px × 3px blue line
320
321 Dek:
322
323 - 18px italic serif
324 - 1.65 line height
325 - #42566a
326 - strong text returns to upright dark ink
327
328 8. Required section architecture
329
330 Create the following sections in this exact order and with these exact IDs:
331
332 1. #sec-frame
333 §1 · Executive summary
334 “Is this time different?”
335 The closest analogy is the 1995–2000 optical-networking boom, but the binding constraint has moved from wafer fabs to HBM, packaging, and the power grid.
336 Include NVIDIA data-center revenue growing 17.6× in thirteen quarters, the approximately −39% FPGA-duopoly reset, capex/OCF stress, two scenarios, and eight triggers.
337
338 2. #sec-grave
339 §2 · Survivorship · 1975–2026
340 “Three generations, one clearing grammar”
341 The selection variable is the software toolchain. Acquisition and consolidation, rather than liquidation, are the normal clearing mechanism.
342
343 3. #sec-w2
344 §3 · Window one · 1985–1995 · The FPGA founding
345 “‘A better ASIC’: positioning as strategy”
346 Include XC2064, 64 logic blocks, 1,000–1,500 usable gates, and a primary-record quote card.
347
348 4. #sec-w3
349 §4 · Window two · 1995–2003 · Boom and bust
350 “−39%: one shock, four different scars”
351 Include Xilinx $560M → $1,659M, Altera $402M → $1,377M, and the 2001 declines.
352
353 5. #sec-w4
354 §5 · Window three · 2004–2012 · The quiet decade
355 “Deploy first, disclose later”
356 Include Microsoft Project Catapult, 1,632 FPGA servers, and 95% throughput improvement.
357
358 6. #sec-w5
359 §6 · Window four · 2013–2018 · Ignition
360 “The TPU and the $16.7B check: two answers, one exam”
361 Include TPU deployment in 2015, disclosure in 2016, Intel’s $16.7B Altera acquisition, CUDA, and the software-ecosystem verdict.
362
363 7. #sec-w6
364 §7 · Window five · 2019–2022 · Shortage and the M&A supercycle
365 “The timing device”
366 Include five billion-dollar deals in 108 days, NCNR orders, shortages, and inventory correction.
367
368 8. #sec-mining
369 Interlude · 2017–2022 · The mining mirror
370 “Crypto incubated custom silicon, then crashed it twice”
371 Include the 55nm-to-16nm mining-ASIC race and the NVIDIA/Alchip/GUC crypto-cycle shocks.
372
373 9. #sec-w7
374 §8 · Window six · 2023–2026 · The current cycle
375 “Demand, the shovel-sellers, and the migrating constraint”
376 Include NVIDIA DC revenue $4.28B → $75.2B, Top-4 2025 capex of $412.9B, and 2026E guidance of $695–725B.
377
378 10. #sec-now
379 “9b · The second in-house wave, and measurement discipline”
380 Include Ironwood, Trainium 3, Maia 200, and MTIA v3. Present unit, CoWoS-allocation, and dollar-value penetration measures side by side. Only the dollar basis may enter scenario multiplication.
381
382 11. #sec-crossover
383 “9c · Deep dive: the 2027 crossover claim, stress-tested”
384 The 50% crossover line requires approximately 8.0–8.4M TPU units. Show a 6.5M–15M estimate range. The verdict must remain unadjudicable.
385
386 12. #sec-mismatch
387 “9d · Deep dive: why the cadence mismatch is manageable”
388 Explain the stable operator core, engineering compression, compilers, and interconnect.
389
390 13. #sec-bottleneck
391 “9e · Deep dive: four supply gates — the profit pool sits at the gates, not in the cloud”
392 Gates: HBM, leading-edge process, CoWoS, optical interconnect.
393
394 14. #sec-partition
395 “9f · The constraint’s last stop: the grid”
396 Include IEA 415TWh in 2024 → 945TWh in 2030E and an approximately 120kW GB200 NVL72 rack.
397
398 15. #sec-assumptions
399 S10 · Deep dive · The consensus, stress-tested
400 “Three bold assumptions”
401 A1: Where the AI dollar pools
402 A2: ASIC units overtake GPUs in 2027
403 A3: Demand is visible to 2028
404 Evidence grades: fail, undecidable, late.
405
406 16. #sec-analog
407 §9 · Verdict
408 “Forty-two years in one table; the verdict in two scenarios”
409 Seven historical windows × five dimensions.
410
411 17. #sec-verdict
412 “Scenario arithmetic: base case 3.0–4.3× over three years”
413 Include:
414 - Base 3.0–4.3×, midpoint ~3.6×
415 - Conservative 2.0–2.4×
416 - Contraction −15% to −35%
417 - Base-case kill switch when Top-4 2027E capex growth falls below +14%
418
419 18. #sec-signals
420 §10 · Monitoring
421 “Eight falsification triggers, reviewed quarterly”
422 Summary: 0 confirmed, 7 building/partial, 1 undisclosed/missing.
423
424 19. #sec-invest
425 §11 · Company deep dives
426 “Six companies on the supply chain’s toll roads”
427 Companies:
428 - Broadcom / AVGO
429 - Marvell / MRVL
430 - MediaTek / 2454.TW
431 - GUC / 3443.TW
432 - Alchip / 3661.TW
433 - VeriSilicon / 688521.SH
434
435 20. #sec-sources
436 Appendix · Sources & method
437 “Method, gaps, and sources”
438 Include the K1–K41 register, measurement discipline, source classes, disclaimer, and colophon.
439
440 9. Required visualizations
441
442 Every chart container must contain:
443
444 - .chart-title
445 - .chart-sub
446 - A genuine visualization
447 - .chart-src
448 - Hover tooltips
449 - Clickable drill-down elements
450 - Responsive redraw behavior
451 - Monospaced chart labels
452
453 Implement all twenty-six:
454
455 1. #timeline42-chart — SVG
456 A 1985–2026 wall chart with six shaded windows and thirteen clickable event plaques.
457
458 2. #mechanism-chart — Canvas
459 A continuous waveform passing through demand, orders, capacity, inventory, revenue, and clearing.
460
461 3. #clearing-chart — Canvas
462 Company lifelines from founding to acquisition, closure, or survival.
463
464 4. #conflow-chart — SVG, viewBox 0 0 880 710
465 Three generations on the left, destinations on the right, ribbon width approximating deal value.
466
467 5. #submarine-chart — Canvas
468 Disclosure dates above water and deployment dates below water.
469
470 6. #tpu-chart — SVG, viewBox 0 0 752 430
471 Eight TPU generations on a logarithmic scale with precision-basis warnings.
472
473 7. #mining-chart — Canvas
474 Price peak → panic ordering → inventory clearing across two crypto cycles.
475
476 8. #sawtooth-alchip-chart — Canvas
477 Alchip quarterly revenue, 1Q17–4Q19.
478
479 9. #sawtooth-guc-chart — Canvas
480 GUC quarterly revenue, 2017–2024.
481
482 10. #capex3d-chart — Canvas
483 Capex and OCF by company and period; solid, outline, hatched, and dashed states.
484
485 11. #capex-stairs-chart — Canvas
486 OCF and capex/OCF ratio; 0.8 caution and 1.0 binding thresholds.
487
488 12. #penetration-chart — HTML table
489 Unit, CoWoS allocation, and dollar-value penetration bases.
490
491 13. #stamps-chart — HTML lineage atlas
492 Merchant compute, cloud in-house, and FPGA generations.
493
494 14. #revenue-split-chart — Canvas
495 TSMC AI revenue share, GPU camp versus ASIC camp; approximately 66%/34% in 2027F.
496
497 15. #pergw-chart — SVG, viewBox 0 0 732 300
498 One-gigawatt economics: dies, unit price, capex, and TSMC revenue/GW.
499
500 16. #gates-chart — HTML
501 Four rigidity-ranked supply gates with six score blocks and bypass routes.
502
503 17. #cowos-chart — SVG, viewBox 0 0 860 457
504 Isometric towers; one slab equals 10kwpm; forecasts are hollow and dashed.
505
506 18. #hbm-chart — Canvas
507 Stacked HBM capacity by maker and HBM share of DRAM revenue.
508
509 19. #hbmgen-chart — SVG, viewBox 0 0 760 356
510 Generational die stacks; slab count represents stack height; estimates use hatching.
511
512 20. #partition-chart — SVG
513 IEA electricity trajectory plus named gigawatt commitments.
514
515 21. #assume-a2-chart — Canvas
516 Broadcom XPU customer count and Google revenue concentration.
517
518 22. #assume-a3-chart — Canvas
519 Program revision ledger, before → after.
520
521 23. #matrix-chart — HTML matrix
522 Seven windows × five dimensions; blue same, hatched partial, grey none.
523
524 24. #verdict-tree-chart — SVG
525 Same-case, different-case, and dashed policy-partition branches.
526
527 25. #scenario-chain-chart — SVG
528 Capex path × custom-silicon dollar share → demand multiple.
529
530 26. #invest-chart — Expandable HTML table
531 Six-company comparison and dossiers.
532
533 Use a deliberate mixture of Canvas, SVG, and HTML. Do not make all charts use the same generic bars.
534
535 10. Quote cards
536
537 Use an editorial record style:
538
539 - 2px dark top rule
540 - 1px light bottom rule
541 - No fill
542 - No radius
543 - No shadow
544 - Small “From the record” label
545 - 22px italic serif quotation
546 - 13px small-caps attribution
547 - 13px Context / Why it matters section
548 - Blue “Source ↗” link
549
550 Create approximately nine quote cards.
551
552 11. Source and evidence interaction
553
554 Inline evidence anchors use a small blue “◆” button:
555
556 - Borderless
557 - 10px
558 - Superscript alignment
559 - data-src references a source key
560
561 Clicking one opens #drill-card:
562
563 - fixed
564 - min-width 240px
565 - max-width 340px
566 - #051c2c background
567 - white main text
568 - padding 14px 18px
569 - 6px radius
570 - 3px #2251ff top border
571 - shadow 0 12px 40px rgba(5,28,44,.4)
572 - 25px bold monospaced main fact
573 - 10px source text
574 - top-right close button
575 - position close to the click while remaining inside the viewport
576 - close on outside click, Escape, or the close button
577
578 Tooltip:
579
580 - fixed
581 - dark background
582 - white 11px mono text
583 - padding 5px 10px
584 - 4px radius
585 - pointer-events none
586
587 Source badge colors:
588
589 - Kimi Research: blue
590 - Broker research: copper/gold
591 - Company disclosure: green
592 - Industry & official: violet
593
594 Build a K1–K41 appendix register. Every row contains:
595
596 - K number
597 - Fact name
598 - Value
599 - Source class
600 - Citation/date
601 - Derived/estimate/gap state
602
603 12. Persistent right dashboard
604
605 Display only on wide screens.
606
607 Properties:
608
609 - position fixed
610 - top 0
611 - right 0
612 - bottom 0
613 - width 460px
614 - white surface
615 - no outer card
616 - full-rail Canvas
617 - hidden/desaturated while the cover is visible
618 - opacity 1 and full saturation after the report begins
619 - 0.6-second transition
620
621 The dashboard changes with the active section but retains this skeleton:
622
623 1. A top status box such as “2023 → ?”
624 2. Current section judgment and a small “Conclusion first” note
625 3. Cycle stages:
626 - Formation
627 - Expansion
628 - Arms race
629 - Peak watch
630 - Clearing
631 4. A dotted world map from land-110m.json
632 5. Blue nodes such as Beijing, Seoul/Icheon, and Hsinchu
633 6. A dynamic supply-chain/company mini-chart with dotted fill and dashed trend
634 7. Four large monospaced metrics
635 8. A thirteen-player cohort strip using boxes, arrows, dots, crosses, and letter states
636
637 The dashboard must be genuinely Canvas-rendered, not an image.
638
639 13. Top era rail
640
641 #era-rail:
642
643 - fixed at top
644 - left 0
645 - right 460px on desktop
646 - padding 10px 22px
647 - white background
648 - 1px bottom border
649 - hidden on the cover
650 - visible after entering the report
651
652 Show a bordered year token on the left.
653
654 Segments:
655
656 - 1985
657 - 1995
658 - 2004
659 - 2013
660 - 2019
661 - 2023→26
662
663 Normal segments are 2px grey. The active segment is 4px blue. Clicking a segment smoothly scrolls to its corresponding window.
664
665 14. Interaction requirements
666
667 Implement:
668
669 - Smooth-scroll cover chips
670 - Three cover modes
671 - Active era progress
672 - Active-section tracking
673 - Section-aware dashboard updates
674 - Responsive chart redraws
675 - Hover tooltips
676 - Clickable drill-downs across all charts
677 - Signal-card expansion
678 - Company-dossier expansion
679 - Lineage-card clicks
680 - Matrix-cell clicks
681 - Verdict-node clicks
682 - Clickable plaques, ribbons, towers, bars, nodes, and stacks
683 - Escape-to-close for the drill card
684 - Reading progress
685 - prefers-reduced-motion
686 - focus-visible
687 - Semantic header/nav/main/section/aside/footer landmarks
688
689 Signal cards:
690
691 - Three columns on desktop
692 - Hairline top border
693 - Status pill at top right
694 - Green solid “met”
695 - Copper dashed “partial”
696 - Red solid “missing”
697 - Click to reveal falsification condition, current reading, and next observation window
698
699 Company table columns:
700
701 - Company
702 - What it is in this chain
703 - Customers
704 - Key risk
705 - Expand control
706
707 Each expanded detail row contains:
708
709 - Customers
710 - Project stage
711 - Revenue model
712 - Moat
713 - Key risk
714 - Room to grow
715
716 15. Responsive behavior
717
718 Use these breakpoints:
719
720 - Above 1180px: fixed 460px dashboard
721 - At or below 1180px: rail width becomes zero; hide the dashboard
722 - At or below 1100px: two-column chart pairs collapse to one
723 - At or below 980px: chronicle layouts become one column; sticky visual rail is hidden
724 - At or below 860px:
725 - signal grid becomes one column
726 - now grid becomes one column
727 - metric strip becomes one column
728 - source list becomes one column
729
730 At 390×844:
731
732 - Body width 390px
733 - No horizontal page overflow
734 - 24px horizontal content padding
735 - Approximately 342px content width
736 - H1 is 44px with approximately 47.52px line height
737 - Section padding remains 48px 0 56px
738 - Chart width approximately 342px
739 - Dashboard completely hidden
740 - Cover Canvas remains visible at restrained opacity
741 - Cover chips wrap naturally
742 - Tables scroll internally when necessary
743 - SVG uses responsive viewBox
744 - Canvas recomputes its dimensions from its container
745
746 16. Data architecture
747
748 Do not scatter numeric constants inside rendering functions. Create structured datasets for:
749
750 - windows
751 - eraSegments
752 - timelineEvents
753 - mechanismStages
754 - companyCohorts
755 - acquisitions
756 - tpuGenerations
757 - miningEvents
758 - alchipQuarterly
759 - gucQuarterly
760 - capexByCompany
761 - operatingCashFlow
762 - penetrationByBasis
763 - playerAtlas
764 - tsmcRevenueShare
765 - perGwEconomics
766 - supplyGates
767 - cowosCapacity
768 - hbmCapacity
769 - hbmGenerations
770 - powerTrajectory
771 - namedGigawattCommitments
772 - assumptions
773 - analogMatrix
774 - verdictTree
775 - scenarios
776 - signals
777 - companyDeepDives
778 - sources K1–K41
779 - drillFacts
780
781 Every datum should be capable of storing:
782
783 - actual / estimate / forecast / derived / gap
784 - source category
785 - source name
786 - source date
787 - unit
788 - display format
789 - tooltip copy
790 - drill-down copy
791
792 17. Engineering quality
793
794 Requirements:
795
796 - Narrative content appears before all charts finish initializing
797 - One failed chart must not break the page
798 - Each visualization exposes an independent render(container, data) function
799 - Debounced ResizeObserver redraws
800 - Sharp DPR-aware Canvas
801 - No clipped SVG labels
802 - No text collisions
803 - Functional at widths 390, 768, 1280, and 1440
804 - No console errors
805 - No page-level horizontal scrollbar
806
807 Target Lighthouse scores:
808
809 - Performance ≥ 85
810 - Accessibility ≥ 90
811 - Best Practices ≥ 90
812
813 18. Acceptance tests
814
815 Start a local server and verify:
816
817 1. At 1280×720, the cover has:
818 - Large two-line title
819 - Blue second line
820 - Lead paragraph
821 - Eight outlined chips
822 - Pale chip/circuit background
823 - No visible dashboard
824
825 2. After scrolling into the report:
826 - Main width is approximately 820px
827 - Dashboard width is 460px
828 - Top era rail covers only the narrative area
829 - Dashboard updates by section
830
831 3. At 390×844:
832 - 44px H1
833 - 342px content width
834 - No dashboard
835 - No horizontal overflow
836 - Complete charts and buttons
837
838 4. All twenty-six visualizations are genuinely implemented.
839
840 5. Clicking any “◆” opens the dark Source Drill Card.
841
842 6. Clicking the Broadcom row expands its full dossier.
843
844 7. Clicking a monitoring trigger reveals its falsification condition, current reading, and next observation window.
845
846 8. The appendix contains K1–K41.
847
848 19. Delivery
849
850 Do not stop at explanation or pseudocode.
851
852 Directly:
853
854 1. Create the complete project.
855 2. Write all HTML, CSS, JavaScript, and structured data.
856 3. Start a local preview server.
857 4. Inspect desktop and mobile screenshots.
858 5. Fix typography, layout, interaction, and console errors.
859 6. Report:
860 - Final file tree
861 - Start command
862 - List of all twenty-six implemented visualizations
863 - Responsive verification results
864 - Remaining issues, or explicitly “None”
865
866 If one response is not long enough, continue creating the files. Do not finish with TODOs, placeholder charts, mock screenshots, or promises to complete them later.
1 Act as a senior data-storytelling designer, D3/Scrollama visualization engineer, and front-end implementation specialist. Using **only this prompt and the analysis files uploaded by the user**, build a complete offline single-page story from scratch, component by component, state by state, motion by motion, and methodology by methodology. The user will not provide HTML, CSS, JavaScript, screenshots, icons, or existing website source. This prompt is the complete implementation specification.
2
3 ## Non-negotiable constraints
4
5 1. **The only factual inputs are this prompt and the uploaded analysis data.** Do not browse the web, cite non-uploaded material, guess values, or request source code. Implement all 13 blocks, charts, states, motions, citations, and methodology behaviors specified here.
6 2. Parse uploaded data into the unified `window.DATA` contract below. Do not re-scrape, interpolate, fill, or rewrite facts. Any series identified as disclosed points must remain points, not a fabricated continuous line. Every documented gap must remain visible.
7 3. Use only offline static HTML/CSS/JavaScript, local D3 v7, and local Scrollama v3. No React, Vue, backend, remote dependencies, jQuery, or build requirement.
8 4. Generate and preserve script order: D3 → Scrollama → `data.js` → `pixel.js` → `charts.js` → `sections.js` → `scrolly.js` → `main.js`.
9 5. Use zero sliders. Interaction is limited to scroll-driven states, button groups, play buttons, hover, and click drilldown exactly as specified here.
10 6. Do not replace SVG/D3 views with screenshots. Pixel ships must be generated from the exact character matrices included in this prompt using SVG `<rect>` cells.
11
12 ## English-only language policy
13
14 The prompt, generated website, supporting documentation, and every user-visible or accessibility-facing string must be entirely in English. This includes the document title and metadata, navigation, headings, narrative copy, chart titles, axis labels, annotations, legends, buttons, status labels, tooltips, drilldown cards, source lines, methodology notes, table cells, disclaimers, alt text, ARIA labels, and generated filenames. Translate every Chinese string found in the uploaded analysis files into clear, idiomatic English before writing `window.DATA`; do not display or copy Chinese text into the site. Preserve all numbers, dates, units, formulas, URLs, source relationships, and factual meaning exactly. Translate source and report titles for display while leaving their URLs unchanged. If an uploaded filename contains Chinese, use a descriptive English filename or English display name in the deliverable. Do not use transliteration when a natural English translation exists.
15
16 ## Uploaded-data parsing and internal data contract
17
18 Recursively read uploaded JSON, Markdown, CSV, XLSX, and accompanying notes. Identify title, as-of date, page claims, time series, chart specifications, tables, sources, stages, signals, and limitations. Generate `site/data/data.js` with `window.DATA`. The rendering layer must support at least:
19
20 - `meta{title,asof,run_id,source_pack}`.
21 - Primary time series: `anchor_monthly.rows[[date,value]]` (the original shipping composition uses 225 COSCO months), `indexA_monthly` (originally 454 BDI months), `indexB_monthly` (originally 296 BDTI months), optional third index, each with `basis`.
22 - Disclosed-point datasets: `spot_points[]` and `composite_points[]`, each point containing date, value, label, and source. Never interpolate these.
23 - `chart_specs.chart_orderbook_history{categories[],series[{name,data[]}],metric_definition,source[],asof,caption,title}`.
24 - Three quarterly financial views—clearing history, boom, current—each row `{period,rev,npp,margin}`, plus lead-lag margin series for an anchor and comparison company.
25 - All other `chart_specs` use `title/unit/metric_definition/categories/series/source/asof/caption`.
26 - `answer_box`, `decision_frame`, and `pages` for the core question, same/different cases, stage conclusion, and narrative.
27 - `stage_strips`: one four-segment lane per subindustry, with `{stage_id,label,period,current}`.
28 - `signals[]`: `label`, `signal_family`, `current_value`, `threshold`, `expected_lag`, `source`, `asof`, `status`, `falsifier`.
29 - `cohort_tiles[]`: `name`, `sector`, `fate`, `detail`, `src`; sector maps to container/dry/tanker and fate to survivor/renamed/restructured/rescued/merged/bankrupt.
30 - `events[]`: anchor-company pins with `date/label/detail/src`.
31 - `table_analog_scorecard`, `table_rejected`, `table_subindustry_compare`, `table_gap_register`, and `limitations[]`.
32
33 If the uploaded subject is not shipping, preserve the full three-subindustry comparative visual/interaction system and map container/dry/tanker to the three most important logically parallel segments in the data. Keep the same fixed color roles. If fewer than three real segments exist, render only those present and reflow; never invent a third. Pixel ships may remain as a cycle-carrier metaphor, or may be replaced only by more appropriate inline SVG carriers explicitly supported by the uploaded analysis.
34
35 ## Delivery structure
36
37 ```text
38 shipping-viz/
39 DESIGN.md
40 NOTES-pudding.md
41 REPORT.md
42 build_data.py
43 site/
44 index.html
45 css/main.css
46 data/data.js
47 js/charts.js
48 js/main.js
49 js/pixel.js
50 js/scrolly.js
51 js/sections.js
52 vendor/d3.min.js
53 vendor/scrollama.min.js
54 ```
55
56 ## Unified “nautical chart paper” system
57
58 Use the exact CSS tokens:
59
60 - paper `#F7F2E7`; deep paper band `#EFE7D3`; card paper `#FDFAF2`
61 - navy ink `#14263B`; soft ink `#3D4E63`; faint taupe `#8C8577`; rule `#D8CFBA`
62 - container blue `#0E67B5`
63 - dry-bulk rust `#C25E28`
64 - tanker green `#1F8A70`
65 - event/risk red `#C0392B`
66
67 Never switch to a black background. Alternate only between the main and deep paper surfaces so the whole page reads as one continuous warm nautical chart.
68
69 Use `"Songti SC", "Noto Serif SC", "STSong", serif` for headings; `"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif` for body/interface copy; `"SF Mono", "Menlo", monospace` for numbers. Body is 17px at 1.9 line-height. H2 is 40px at 1.35, followed by a 64×4px navy rule; at ≤900px use 30px. Prose max-width is 720px; visualization max-width is 1080px; both use 24px side padding. Standard sections use 110px vertical padding, reduced to 70px at ≤900px.
70
71 Cards use a hard-edged editorial style: 1.5–2px navy borders, paper background, and 4–10px hard offset shadows. Do not introduce rounded glass cards, glow, or alternate sector colors. Container, dry bulk, and tanker keep their colors in every chart.
72
73 ## Shared UI and drilldown
74
75 1. Tooltip: fixed, dark navy background, paper text, 13px, max-width 300px, hard shadow. Follow the pointer but clamp x to `innerWidth-320` and y to `innerHeight-140`.
76 2. Clicking a data mark opens a full-screen `rgba(20,38,59,.45)` overlay. Center a max-520px, max-82vh scrollable paper card with 2px navy border and 10px hard shadow. Include close button, title, colored tag, numeric group, explanation, and sources. Close by clicking outside or pressing Escape.
77 3. Every chart has a source line. Show the first source inline; if multiple, use native `<details><summary>` to expose all labels/URLs. Preserve as-of dates.
78 4. Segmented buttons share borders. Selected state is navy background/paper text; unselected hover uses deep paper. Play buttons use a 2px border and 4px offset shadow.
79 5. Every displayed value and drilldown must come from `data.js`, with exact unit, methodology, and citation.
80
81 ## Pixel language and cover motion
82
83 Generate `pixel.js` and build the three 8-bit ship types from these exact character maps. `.` and spaces are transparent; every other character becomes one SVG `<rect>` with side length `px`. Retain `image-rendering:pixelated`. Do not substitute emoji, PNG, or AI-generated art.
84
85 ```text
86 container = [
87 "..F.......................",
88 "..B.......................",
89 "..BB..12341234123412341...",
90 "..BWB.43214321432143214...",
91 "..BBB.21432143214321432...",
92 "HHHHHHHHHHHHHHHHHHHHHHHH..",
93 ".hHHHHHHHHHHHHHHHHHHHHh...",
94 "..hhhhhhhhhhhhhhhhhhhh...."
95 ]
96 dry = [
97 "..F.......................",
98 "..BB......................",
99 "..BWB..GG...GG...GG...G...",
100 "..BBB.DDDD.DDDD.DDDD.DD...",
101 "HHHHHHHHHHHHHHHHHHHHHHHH..",
102 ".hHHHHHHHHHHHHHHHHHHHHh...",
103 "..hhhhhhhhhhhhhhhhhhhh...."
104 ]
105 tanker = [
106 "..F................O......",
107 "..BB...PPPPPPPPPPPPPPP....",
108 "..BWB..P....P....P....P...",
109 "..BBBTTTTTTTTTTTTTTTTTT...",
110 "TTTTTTTTTTTTTTTTTTTTTTTT..",
111 ".tTTTTTTTTTTTTTTTTTTTTt...",
112 "..tttttttttttttttttttt...."
113 ]
114 ```
115
116 Palette: `H:#14263B`, `h:#0C1828`, `B:#FDFAF2`, `b:#D8CFBA`, `W:#14263B`, `K:#C0392B`, `1:#0E67B5`, `2:#5A9BD5`, `3:#C25E28`, `4:#1F8A70`, `D:#C25E28`, `d:#9A4A1F`, `G:#8C8577`, `T:#1F8A70`, `t:#166955`, `P:#C9BFA6`, `O:#C0392B`, `F:#E8B84B`. The root group must carry `.px-ship` and `data-w/data-h`.
117
118 The cover is at least 100vh, centered, overflow-hidden, with a gradient from `#F9F5EC` through paper to `#E9E0C9`. The sea is absolutely fixed to the bottom at 24vh. Cover content max-width is 880px with 26vh bottom padding so ships never collide with text. H1 uses `clamp(48px,7.6vw,92px)`, line-height 1.18, letter-spacing .06em; the word “One” is risk red.
119
120 Build the sea as pure SVG:
121
122 - Container ship: 6px pixel cells, linear infinite 52s sail from `-16vw` to `116vw`, delay -8s.
123 - Dry-bulk ship: scale .82, duration 74s, delay -38s.
124 - Tanker: scale .7, duration 96s, delay -64s.
125 - Three square-wave rows sit 96/72/48px above the bottom. Animate at 7s forward, 11s reverse, and 9s forward; use navy .16, container blue .14, navy .10; wave period is 96px.
126 - The down-scroll hint bobs 8px forever over 2s.
127
128 Show cover stats 38.7%, 7%, and 14.7% in sector colors, 40px mono numbers, and 5px bars proportional to value. When visible, count from zero over 1400ms using D3 cubic-out. Hover reveals definition/source; click scrolls to the orderbook section.
129
130 ## Preserve all 13 content blocks
131
132 ### 1. Three clocks
133
134 Inject the lede from `answer_box`. Render three radial dials for container, dry bulk, and tanker. Radius is 118; component size is `R*2+76`. Seven stages: top, early downturn, profit pressure, clearing, bottom observation, early recovery, re-expansion. Pie spans `-0.82π` to `+0.82π`, inner radius `R-34`, outer radius `R`, pad angle .012. Current segment uses sector color; all others `#E4DBC4`. Hover each segment for stage index and source. Place labels outside, a 3px round-capped pointer and 6px hub inside, plus the matching pixel ship. Below each dial show sector, badge, index number, rationale, and source.
135
136 ### 2. COSCO stock scrolly
137
138 Use a sticky chart plus seven steps. Chart width is container minus 400px capped at 820px; height 560. Plot all 225 monthly forward-adjusted COSCO points as a pale-blue area and 2.2px container-blue line. Add eight red event pins: A-share listing, 68.4 peak, *ST, restructuring, pre-pandemic 1.33 floor, tenfold run, Red Sea, Hormuz. Each pin has a 26px stem, 5px red dot, and label. Hover reveals detail; click opens exact month price, event text, source, and series basis.
139
140 Seven steps: overview; 2007 peak listing; 2013 distress; 2016 restructuring; 2020 floor; 2021 tenfold move; 2024/2026 event windfalls. In each state, irrelevant pins transition to opacity .16, relevant pins to 1; overview uses .85. Add a pale-red dashed time-window rectangle for the current narrative state.
141
142 ### 3. Thirty-eight years of three curves scrolly
143
144 Build three vertically aligned small multiples, each 172px high with 34px gap, sharing a 1988–2026 x-axis.
145
146 - Container: SCFI as blue circles plus vertical stems; CCFI as blue outlined squares. Draw disclosed points only; never connect or interpolate. Shade 1988–2002 with a 45° hatch and state that CCFI launched in 1998.
147 - Dry bulk: 454 monthly BDI observations as rust area plus line; y-domain 0–11000.
148 - Tanker: 296 monthly BDTI observations as green area plus line; y-domain 0–2400; explicitly label missing pre-2001-12 history.
149
150 Seven steps: separate methodologies; 1988–2002 gap; 2003–2008; 2009–2016; 2017–2019; 2020–2022; 2023–2026. Each step synchronously draws a dashed window across all three panels and adds the uploaded analysis's factual peak/trough annotations with a 4px paper-color paint-order halo. For the original shipping dataset the annotations are 11793/663; 290/632.36; 5109.60/tanker spike/2021 BDI; 3184.83/2944/2031. If the uploaded values differ, use the uploaded facts rather than copying these numbers.
151
152 ### 4. Old-table tile-wall scrolly
153
154 Build 26 company tiles grouped as 13 container, 8 dry bulk, and 5 tanker. Use five tiles per row, 8px gaps, 62px tile height. Each tile includes sector-colored border, pixel ship badge, company name, and initially hidden fate label. Click opens fate and ledger source.
155
156 Four scroll states:
157
158 1. Full 2008 table, neutral.
159 2. Bankruptcy/restructuring labels appear. Bankrupt tiles sink 10px, rotate -6°, opacity .75, pale-red fill.
160 3. Merged/rescued labels appear; those tiles turn gray.
161 4. 2026 outcome: show all fate tags and fade anything not survivor/renamed/restructured to opacity .22.
162
163 Animate tile position, rotation, opacity, fill, and stroke over 700ms; fate tags over 500ms. State changes must be triggered by natural Scrollama entry, not only programmatic jump scrolling.
164
165 ### 5. Quarterly losses/profits
166
167 Provide three buttons: 2011–2016 clearing, 2020–2022 boom, 2024–2026 current. On change, remove and redraw a 420px bar chart. x is quarter band; y is single-quarter attributable-profit margin; negatives red, positives container blue, zero line navy. Label bars sparsely when absolute margin exceeds 12% or the view is small. Hover shows quarter/margin. Click opens revenue, attributable profit, margin, and cumulative-statement-difference methodology. Update note and sources with the view.
168
169 ### 6. 2.5D orderbook
170
171 Create a 560px chart with categories 2007, 2008-07, 2012-01, 2020-10, 2021-12, 2023-12, 2025-09, 2026-06 and three series: container TEU, dry-bulk dwt, tanker dwt. One isometric layer equals 5 percentage points; layer height 17, front width 26, depth 12. Each box has a light top face, dark right face, original-color front, and .7px navy stroke. Preserve fractional top layers.
172
173 Draw numeric labels last so no pile covers them. Labels use sector color, 12.5px bold mono, and 4px paper-color halo. Put the legend horizontally at top left. Preserve the annotations “The leverage setup on the eve of the crisis” and “Only container shipping borrowed the leverage back.” Hover each pile for value; click opens metric definition, point-specific citation, and all sources.
174
175 ### 7. Freight-rate lead/lag
176
177 Build two 300px panels. Bars show margins—positive taupe, negative red. Lines show freight rates on independent y-scales in sector colors with point marks. Container compares CCFI disclosed points with COSCO margin and can shift up to four quarters; tanker compares BDTI quarterly mean with CMES margin and shifts up to two.
178
179 On play, begin at zero shift. Move the line one quarter at a time using a 760ms `d3.easeCubicInOut` transition, wait 560ms, then continue. Update the label to “Shifted right by k quarters”; the final state adds “The shapes align.” Block retrigger while playing and change the button label to “Replay” at completion.
180
181 ### 8. Five-window scorecard
182
183 Render all five `table_analog_scorecard` rows. Each row is a `150px 1fr 150px` grid with 1.5px border and 5px hard shadow: window/driver at left, mechanism/rate/orderbook in the middle, and a full semantic-role color block at right for same script, event sample, mixed, different, or negative control. Clicking the row opens full mechanism, driver, peak/trough, orderbook, company outcome, and sources.
184
185 Below it, render both `table_rejected` analogs in full and explicitly preserve the rule that shape similarity is not mechanism identity.
186
187 ### 9. Transmission bridge
188
189 Render a 1040×560 SVG. Left: three 190×92 sector nodes containing pixel ships. Middle: two 340×130 channels—solid green “transmits: money and sentiment” and dashed red “does not transmit: demand and methodology”—with three items each. Use `d3.linkHorizontal` from every sector to both channels. Transmitting paths use sector color, 2.4px, opacity .8. Non-transmitting paths use 1.4px gray dashes and a red cross at midpoint. Right: the three prohibitions from `table_subindustry_compare`, each in a red-outline box.
190
191 ### 10. Three industries now
192
193 For each sector, draw a 128px stage lane with four segments from `stage_strips`. Non-current segments use card paper; current uses sector color, 2px border, white text. Place the corresponding pixel ship and “▼ We are here now” above the current segment; show period below each segment. Under each lane, render every metric card supplied by the uploaded analysis with hard shadow, exact value, label, and citation, followed by the full sector verdict.
194
195 ### 11. Monitoring dashboard
196
197 Render all eight signals with `repeat(auto-fill,minmax(320px,1fr))`. Each card shows lamp, name, family tag, current value, threshold, lag, falsifier, source, and date. Lamp colors: met `#2E8B57`, partial `#C9A227`, missing risk red. Family tag maps price/capacity/other to container blue/dry rust/red.
198
199 ### 12. Methodologies, gaps, and sources
200
201 In the footer, render the complete six-row, three-column `table_gap_register`. Below it list the first nine limitations and finish with source pack, report title, run id, Pudding reference, and investment disclaimer.
202
203 ## Shared scrollytelling parameters
204
205 Use Scrollama for stock, curves, and tiles. Set `step` to each container's `.step` and `offset:0.62`. On enter, remove active state from all sibling steps, activate only the current one, and invoke its update callback. Call `scroller.resize()` on window resize.
206
207 CSS: scrolly max-width 1240; sticky figure top 0, height 100vh, left aligned. Step column max-width is 360px for stock and 340px for curves/tiles, right aligned. Each step has 78vh bottom spacing, first has 12vh top spacing, last has 55vh bottom spacing. Card background is 96%-opaque paper, 1.5px navy border, 6px hard shadow. Inactive opacity .32 plus translateY(6px); active returns over .35s. At ≤900px, center steps, reduce sticky height to 86vh, and step spacing to 65vh.
208
209 ## Responsive and acceptance criteria
210
211 1. Preserve exact order: cover, clocks, stock, three curves, old table, quarterly chart, orderbook, lead-lag, scorecard, bridge, current lanes, signals, gaps.
212 2. All three scrollytellings must expose and trigger 7/7/4 states exactly.
213 3. Confirm all motion/components exist: cover count-up, three ships, three wave rows, dial hover, eight event pins, curve annotations, 26 company tiles, quarterly controls, isometric piles, lead-lag play, five scorecard rows, bridge, three stage lanes, eight signal cards, and gap table.
214 4. Every clickable item exposes original values, basis, and sources. Source details expand. Overlay and Escape close drilldown.
215 5. The site works offline and has no business-script error. An inline SVG ship favicon may be generated.
216 6. Match the exact desktop dimensions specified in this prompt and use only the stated ≤900px fallback; do not invent a different mobile information architecture.
217 7. Validate every screen against every requirement in this prompt. A merely similar style is not acceptable.
218 8. Before delivery, scan every generated text-bearing file for CJK characters. The scan must return zero matches; translate any remaining match into English without altering the underlying facts.
219
§7 · Live Sites
See the Results
The two sites built from the prompts above. Update the URLs below to link to your deployed versions, then click Visit Site to see the specifications executed in production.
01
Forty-Two Years of Inference Silicon
Live URL — Add yours below
Your URL:
https://techne-path-site.scott-43f.workers.dev/papers/Silicon/index.html
Click to edit, then replace with your actual URL
Visit Site
Update the URL above, then click Visit Site
02
Shipping Is Not One Cycle
Live URL — Add yours belowYour URL:
https://techne-path-site.scott-43f.workers.dev/papers/Shipping/app/index.html
Click to edit, then replace with your actual URL
Visit Site
Update the URL above, then click Visit Site
§8 · The Blueprint
The 10 Principles of Prompt Architecture
Synthesized from both sites, these are the architectural patterns that turn a vague request into a production-ready specification.
01
The Prompt Is a Creative Brief, Not a Request
Start with Product Definition: What is this? What is it not? What disciplines does it combine? How long? How many components? Specificity breeds completeness.
Create a [very long single-page] [language] interactive [document type] titled: "[Title]"
02
Visual System as Code
Define CSS custom properties in the prompt itself. Force a coherent visual language rather than letting the AI improvise colors and fonts per section.
Use these exact tokens: --paper: #ffffff; --ink: #051c2c; --blue: #2251ff
03
The Architecture Is the Story
Specify sections in exact order with IDs. The scroll journey is the narrative. Each section needs: ID, number, title, subtitle, thesis, and required data/charts.
1. #sec-[id] · §[N] · [Title] · "[Subtitle]" · [Thesis]
04
Data Architecture Before Visualization
Define structured datasets with schemas before asking for charts. Every datum stores: actual/estimate/forecast/gap, source, date, unit, tooltip, drill-down.
Every datum stores: certainty, source category, source name, date, unit, tooltip, drill-down
05
The "No" List Is as Important as the "Yes" List
Explicitly forbid frameworks that would make the build easy but generic. This forces custom, bespoke visualizations from primitives.
Do not use: React, Vue, Tailwind, Bootstrap, jQuery, UI libraries, iframes
06
Interaction Design as Specification
Describe interactions in CSS-like specificity. Don't say "make it interactive" — specify exactly which interactions exist and how they behave.
Drill card: fixed, min-width 240px, #051c2c bg, 3px #2251ff top border
07
Persistent Contextual Dashboard
For scrollytelling, specify what stays fixed while the narrative scrolls. Creates the feeling of a "control room" accompanying the reader.
Fixed [side] dashboard: [X]px, hidden during [section], updates by section
08
Evidence Infrastructure
Build a numbered fact register (K1–K41) from the start. Every claim footnotes to evidence. Creates serious research credibility.
K-register: K number, fact name, value, source class, citation, derived/estimate/gap
09
Responsive Behavior as Breakpoint Logic
Don't say "make it responsive." Provide breakpoint logic the way a frontend engineer writes it, with exact pixel measurements.
Above 1180px: [behavior]; ≤1180px: [behavior]; 390×844: exact px
10
Acceptance Tests as Quality Gates
End with explicit, testable conditions. Prevents the AI from declaring victory with placeholders or incomplete features.
At [viewport], verify: [condition 1], [condition 2]...
§9 · Acceptance Tests
How to Write Tests That Actually Test
The acceptance tests in both prompts are not afterthoughts — they are quality gates that prevent the AI from shipping incomplete work.
Site 1: Inference Silicon
1
At 1280×720, cover has: large title, blue second line, lead paragraph, 8 chips, pale background, no dashboard
2
After scrolling: main width ≈820px, dashboard 460px, era rail covers narrative only
3
At 390×844: 44px H1, 342px content, no dashboard, no overflow
4
All 26 visualizations genuinely implemented
5
Clicking ◆ opens drill card
6
Clicking Broadcom row expands dossier
7
Clicking trigger reveals falsification condition
8
Appendix contains K1–K41
Site 2: Shipping
1
Preserve exact order: cover, clocks, stock, curves, tiles, quarterly, orderbook, lead-lag, scorecard, bridge, lanes, signals, gaps
2
All three scrollytellings expose and trigger 7/7/4 states exactly
3
Confirm all motions: cover count-up, three ships, three waves, dial hover, 8 pins, curve annotations, 26 tiles, quarterly controls, isometric piles, lead-lag play, scorecard, bridge, stage lanes, 8 signals, gap table
4
Every clickable item exposes original values, basis, and sources
5
Site works offline, no business-script error
6
Match exact desktop dimensions, ≤900px fallback only
7
Zero CJK characters in any text-bearing file
Why Tests Matter
Without acceptance tests, the AI will declare victory with placeholder charts, incomplete interactions, or missing sections. The tests force the AI to verify its own work against concrete, observable criteria. They are the difference between a prototype and a product.
§10 · Methodology
The Workflow: From Idea to Specification
Before you write a single line of prompt, answer these questions. The creativity happens in your head; the AI executes the build.
1
You Do the Editorial Thinking
What story does the data tell? What are the six windows? What are the five dimensions? What is the narrative arc?
Example: "6 historical windows → present deep-dives → future scenarios"
↓
2
You Design the Visual System
What colors, fonts, spacing, and components create the right tone? White paper + navy text + electric blue? Nautical chart + warm tones?
Example: "White paper, navy #051c2c, electric blue #2251ff, ET Book typography"
↓
3
You Architect the Data
What datasets exist? How do they relate? What's the provenance? Every number needs a source and a certainty level.
Example: "timelineEvents, companyCohorts, capexByCompany — each with source, date, unit, tooltip, drill-down"
↓
4
You Specify the Interactions
What happens when users scroll, click, hover, resize? What stays fixed? What updates? What opens drill-downs?
Example: "Scrollama steps at offset 0.62, era rail updates active section, ◆ anchors open drill cards"
↓
5
You Write the Acceptance Tests
How will you know it's done? What must be true at each viewport? What interactions must work? What evidence must exist?
Example: "At 1280×720: cover has 8 chips, no dashboard. All 26 charts implemented. K1–K41 in appendix."
↓
6
Then Hand It to the AI as a Build Spec
Only now do you write the prompt — section by section, token by token, breakpoint by breakpoint. The AI builds exactly what you specified because you specified exactly what you wanted.
The Meta-Pattern
Treat the AI not as a creative partner but as a senior engineer receiving a complete design specification. The prompt is the contract. The acceptance tests are the enforcement mechanism. The result is a site that feels designed, not generated.
§11 · Study Aids
Reference Infographics
Printable, shareable reference cards for your next prompt architecture project.
Prompt Section Checklist
Data Schema Template
{
"id": "K1",
"fact_name": "NVIDIA DC revenue growth",
"value": "17.6x",
"period": "Q1FY24→Q1FY27",
"certainty": "actual",
"source_category": "Company disclosure",
"source_name": "NVIDIA 10-Q",
"source_date": "2026-05-28",
"unit": "USD billions",
"tooltip": "Fastest revenue build in industry history",
"drill_down": "Quarterly progression: $4.28B → $75.2B"
}
Visual Token Quick Reference
--paper: #ffffff
Surface
--ink: #051c2c
Text
--blue: #2251ff
Accent
--neg: #c22f4e
Negative
--green: #008a6d
Positive
--copper: #b07a10
Warning
Acceptance Test Template
Acceptance tests: 1. At [viewport], verify: - [Condition 1] - [Condition 2] 2. After [action], verify: - [Condition 3] 3. At [mobile viewport], verify: - [Condition 4] 4. All [N] [components] genuinely implemented 5. [Interaction 1] produces [result] 6. [Interaction 2] produces [result]
§12 · Before You Prompt
The Pre-Prompt Questionnaire
Answer these questions before writing a single line of prompt. The clarity of your answers determines the quality of the result.
Narrative
Q1
What is the narrative arc? (e.g., "6 historical windows → present → future scenarios")
Q2
What is the central question the site answers? (e.g., "Is this time different?")
Q3
What would falsify the thesis? (e.g., "8 triggers with explicit kill conditions")
Visual
Q4
What is the visual tone? (e.g., "White paper, navy text, electric blue, Tufte editorial")
Q5
What stays fixed while scrolling? (e.g., "Right dashboard with cycle stage, map, metrics")
Q6
How is uncertainty displayed? (e.g., "estimate/gap labels, hatched forecasts, dashed guidance")
Data
Q7
What data tells the story? (e.g., "Revenue, capex, unit shipments, capacity, electricity")
Q8
How do users interact with evidence? (e.g., "◆ anchors → drill cards with source provenance")
Q9
What are the known gaps? (e.g., "CCFI series unavailable, no 1988–2002 container index")
Appendix · Sources & Method
Sources, Method, and Colophon
This educational report was constructed by reverse-engineering two production AI-built websites and their originating prompts.
Source Register
| Ref | Source | Type | Date |
|---|---|---|---|
| S1 | Site 1 Prompt: "Forty-Two Years of Inference Silicon" specification | Prompt document | Uploaded by user |
| S2 | Site 2 Prompt: "Shipping Is Not One Cycle" specification | Prompt document | Uploaded by user |
| S3 | Site 1 Live URL: https://765dvagfhthwu.kimi.page/... | Live website | Accessed 2026-07-22 |
| S4 | Site 2 Live URL: https://nuesj4c5tehcg.kimi.page/... | Live website | Accessed 2026-07-22 |
| S5 | Site 1 Reverse-Engineering Analysis (docx) | AI-generated analysis | Uploaded by user |
| S6 | Site 2 Reverse-Engineering Analysis (docx) | AI-generated analysis | Uploaded by user |
| S7 | The Pudding · scrollytelling essay conventions | Method reference | Cited in Site 2 |
Method Notes
Reverse-engineering approach: Both prompts were analyzed as design specifications rather than natural-language requests. The methodology involved:
- Reading the full prompt text to identify structural sections
- Visiting the live site to verify what was actually built
- Comparing prompt claims to site reality
- Extracting reusable architectural patterns
- Synthesizing cross-site principles
Limitations: This report analyzes the prompt-to-site pipeline, not the underlying AI model capabilities. Results may vary with different models or model versions. The sites were accessed at a single point in time; live URLs may change.
Disclaimer
This is an educational research report analyzing prompt engineering methodology. It does not constitute investment advice, technical consulting, or a guarantee of results. AI-generated websites should be reviewed by human developers before production deployment. All trademarks belong to their respective owners.
Colophon
Built with semantic HTML5, CSS3, and vanilla JavaScript. No frameworks. No build step. Designed for educational use by designers and developers learning to architect production-ready prompts for AI-assisted web development.
Report compiled: July 22, 2026