Design: Hero Illustrations for All Wiki Articles
Date: 2026-06-10
Scope: AI Transformation Wiki — aitransformation-wiki
Status: Approved, ready for implementation
Goal
Generate hero illustrations for all 24 wiki articles that currently lack them. Two articles already have images (start-here/index.mdx → wiki-hero.png, foundations/why-ai-changed-the-exit-math.md → why-ai-changed-the-exit-math.png) and are left untouched.
Visual Identity
Built for Exit brand spec applies to all renders:
- Register: Mid-century American business-book illustration. Single-weight black line art on warm cream paper. Editorial, not cartoonish. 1960s business hardcover register.
- Palette: Cream
#FAF1E4ground, deep navy#0F172Afills, burnt-gold#C99A2Efor the single value moment per composition. No second saturated color. - Figures: Distinct individuals, every skin and hair tone colored. Confident, calm, business-appropriate dress. Mature and optimistic mood.
- Recurring motif: Doorway as exit, gold growth curve / upward arrow rising through it where it fits.
- Default client: Early-fifties man, short salt-and-pepper hair, warm medium-brown skin, deep-navy blazer over white open-collar shirt, charcoal trousers (GABR 18).
- Default trainer: Blasian man, late thirties, short dark hair styled upward, athletic, charcoal blazer over black turtleneck (GABR 19).
- Banned: Circuit boards, neon, robots, 3D, glossy digital art, photorealism, pure-white backgrounds, second saturated color.
Pipeline Setup (one-time, before renders)
- Customize
illustrations/SPEC.md— replace all template placeholders with the Built for Exit brand spec above. - Update
illustrations/scripts/render-page.shPREFIX/SUFFIX — set PREFIX and SUFFIX to match the brand preamble from../brand/static/brand/generation-layer/preamble.md. - Populate
illustrations/refs/:gabr-18-default-client.png→illustrations/refs/character-sheet.pnggabr-15-company-cutaway.png→illustrations/refs/style-swatch.png
GABR source path: ../brand/static/brand/generation-layer/golden-atomic-brand-references/
Article-to-Scene Mapping
The render script auto-passes refs/character-sheet.png on every call. "Extra GABRs" column lists additional --input-image references to pass. All GABR paths are relative to the brand OS directory.
| # | File | Scene | Extra GABRs |
|---|---|---|---|
| 1 | docs/foundations/index.md | Owner studying a clean blueprint on an oak desk, gold growth curve sketched in the margin, city through the window behind him | 18, 10 |
| 2 | docs/foundations/what-is-ai-transformation.md | Owner replacing a towering in-box of loose papers with a single organized binder, business gears running cleanly in the background | 18 |
| 3 | docs/foundations/glossary.md | Owner at a reading desk with an open reference book, crisp navy-tabbed sections, gold accent on the spine | 16, 18 |
| 4 | docs/concepts/index.md | A row of framed definition cards pinned to a cream wall, each with a single clear term, gold accent on the center card | — |
| 5 | docs/concepts/agent-opportunity-analysis.md | Owner and trainer at a whiteboard divided into three columns — automate / keep / AI-system — working through a function list | 18, 19, 4 |
| 6 | docs/concepts/data-is-not-information.md | Two panels: left a warehouse of overflowing filing cabinets, right a single clean report with a gold insight arrow pointing to one key number | 14 |
| 7 | docs/concepts/documentation-equals-transferability.md | Trainer handing a bound manual to the owner across a table, gold arrow showing it passing cleanly from one to the other | 18, 19 |
| 8 | docs/concepts/own-the-substrate.md | Owner standing before a server-rack diagram with a gold padlock on the central node, hands on the controls | 18 |
| 9 | docs/concepts/owner-dependence.md | A business floor plan where every department's arrow routes back to a single figure at the center — the owner | 18 |
| 10 | docs/concepts/sops-as-an-asset.md | A company shelf holding bound SOP binders like books, each labeled with a department name | 13 |
| 11 | docs/concepts/the-agentic-business-blueprint.md | Owner and trainer over a large unrolled blueprint of a company, every function labeled, gold growth curve threaded through the center | 18, 19, 10, 11 |
| 12 | docs/concepts/the-ai-valuation-premium.md | Two company valuations on a chalkboard side by side, the AI-embedded company's number underlined in gold and visibly higher | 3, 7 |
| 13 | docs/concepts/the-organizational-truth-repo.md | A tall open cabinet with neatly organized department folders, a single gold source-of-truth tag on the central binder | 13 |
| 14 | docs/concepts/the-transformation-flood.md | Owner at his desk beneath a wave of identical vendor pitch envelopes piled high, one calm stack off to the side with a gold checkmark | 18 |
| 15 | docs/perspectives/index.md | Owner in an armchair reading a clean single-page editorial, gold accent on one underlined sentence | 16, 18 |
| 16 | docs/perspectives/ai-now-decides-your-multiple.md | M&A evaluator at a desk with two company folders open, marking the AI-embedded one with a gold approval stamp | 6, 7 |
| 17 | docs/perspectives/ai-psychosis-in-the-c-suite.md | Executive in a glass-walled meeting room surrounded by advisors pointing at a dashboard, actual work floor visible and ignored through the window behind them | 14 |
| 18 | docs/perspectives/build-to-run-without-you.md | A well-organized factory floor running smoothly, owner visible in the background through glass — clearly not needed on the floor | 15, 18 |
| 19 | docs/perspectives/clarity-before-transformation.md | Owner at a desk with two documents: one marked with red notes labeled Current State, one blank labeled Transformation Plan — studying the first before touching the second | 14, 18 |
| 20 | docs/perspectives/documenting-sops-in-the-age-of-ai.md | Owner dictating to a scribe writing a clean procedure into a bound manual, trainer at his side, gold detail on the pen | 18, 19, 12 |
| 21 | docs/perspectives/dont-break-what-works.md | Two machines side by side: one running with a gold crown on top, one in disarray — owner's hand pointing to preserve the first | 18 |
| 22 | docs/perspectives/how-to-choose-a-transformation-partner.md | Owner at a conference table reviewing three proposals, trainer at his shoulder, gold checkmark on one | 18, 19, 4 |
| 23 | docs/perspectives/not-every-company-needs-ai.md | Owner at a fork in a road map, one path marked with a gold arrow, one bypassing it — studying the map calmly | 18 |
| 24 | docs/perspectives/theres-no-templated-transformation.md | A stack of identical crossed-out generic blueprints with a single custom handwritten plan spread open on top | 18, 10 |
Render Execution
For each article, run from the wiki repo root:
./illustrations/scripts/render-page.sh "<filename>.png" "<scene description>"
The script:
- Pre-flight-checks the scene for banned vocabulary
- Assembles prompt: brand preamble + REFERENCE IMAGES block + scene
- Passes
refs/character-sheet.pngplus any extra GABRs as--input-imageflags - Writes source PNG to
illustrations/<filename>.png - Converts to WebP at
static/img/illustrations/<filename>.webp
For articles with extra GABRs, render-page.sh will be extended to accept additional image paths as positional arguments after <scene>. Each extra path becomes an additional --input-image flag passed to the underlying chatgpt-images script (which already supports multiple --input-image flags). The character sheet from refs/ is always passed first; extra GABRs are appended in order.
Example call with extra GABRs:
./illustrations/scripts/render-page.sh "agent-opportunity-analysis.png" "<scene>" \
"../brand/.../gabr-19-default-trainer.png" \
"../brand/.../gabr-04-exit-ready-workshop.png"
Embed Format
Add the image after the italic subtitle and before the --- horizontal rule that opens the body — matching the existing why-ai-changed-the-exit-math.md pattern:
---
title: "Article Title"
...
---
# Article Title
*Italic subtitle.*
---
## First section...
The alt text is the exact scene description — it serves as the prompt archive for future regeneration.
Output Filenames
| # | Filename |
|---|---|
| 1 | foundations-index.png |
| 2 | what-is-ai-transformation.png |
| 3 | glossary.png |
| 4 | concepts-index.png |
| 5 | agent-opportunity-analysis.png |
| 6 | data-is-not-information.png |
| 7 | documentation-equals-transferability.png |
| 8 | own-the-substrate.png |
| 9 | owner-dependence.png |
| 10 | sops-as-an-asset.png |
| 11 | the-agentic-business-blueprint.png |
| 12 | the-ai-valuation-premium.png |
| 13 | the-organizational-truth-repo.png |
| 14 | the-transformation-flood.png |
| 15 | perspectives-index.png |
| 16 | ai-now-decides-your-multiple.png |
| 17 | ai-psychosis-in-the-c-suite.png |
| 18 | build-to-run-without-you.png |
| 19 | clarity-before-transformation.png |
| 20 | documenting-sops-in-the-age-of-ai.png |
| 21 | dont-break-what-works.png |
| 22 | how-to-choose-a-transformation-partner.png |
| 23 | not-every-company-needs-ai.png |
| 24 | theres-no-templated-transformation.png |
Commit Strategy
Single commit after all 24 renders and embeds are complete:
illustrations/SPEC.md(customized)illustrations/scripts/render-page.sh(updated PREFIX/SUFFIX)illustrations/refs/character-sheet.pngillustrations/refs/style-swatch.pngillustrations/*.png(24 source PNGs)static/img/illustrations/*.webp(24 deploy WebPs)- All 24 article MDX files with embedded image tags
Commit message: feat: add hero illustrations to all 24 wiki articles