Skip to main content

Wiki Article Illustrations Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Generate and embed hero illustrations for all 24 wiki articles that currently lack them, using the locked Built for Exit brand system.

Architecture: Customize the existing render pipeline (SPEC.md + render-page.sh) with the Built for Exit brand spec, populate illustration refs from the brand GABRs, run the render script for each article, then embed the resulting WebP in each article's MDX. Single commit at the end.

Tech Stack: Bash, gpt-image-2 via ~/.agents/skills/chatgpt-images/scripts/generate_image.py, cwebp, Docusaurus 3 (MDX/MD articles).

Repo root: /Users/garysheng/Documents/github-repos/imagos-meta-repo/imagos-HQ/03-built-for-exit/aitransformation-wiki/ Brand GABRs: ../brand/static/brand/generation-layer/golden-atomic-brand-references/ (relative to wiki root)

All commands run from the wiki repo root unless noted.


Task 1: Customize illustrations/SPEC.md

Files:

  • Modify: illustrations/SPEC.md

  • Step 1: Replace the entire contents of illustrations/SPEC.md with the following

# Illustration Spec — AI Transformation Wiki

The single canonical document for this wiki's visual identity. Every illustration generated for any page passes through this spec.

A future agent picking up an illustration job should be able to read this file plus the two canonical reference images in `refs/` and produce a coherent new page hero without any other context.

---

## Visual lineage

Mid-century American business-book illustration. Single-weight black line art on warm cream paper. Restrained, dignified figures, editorial not cartoonish, in the visual register of a 1960s business hardcover. Smooth solid fills only — no dotted halftone shading, no crosshatching.

Not photorealistic. Not 3D. Not anime or manga. Not Pixar. Not glossy digital art. Not SaaS-startup (no gradient blobs, neon, circuit boards, robots, AI-brain imagery).

## Recurring characters

### Default client
Early-fifties man with short salt-and-pepper hair, warm medium-brown skin, a deep-navy blazer over a white open-collar shirt (no tie), and charcoal trousers. The canonical owner-operator protagonist. Reuse across every article that features the Built for Exit client. Pass `refs/character-sheet.png` as `--input-image` on every render that includes him.

### Default trainer
Blasian man (Black and East Asian heritage), late thirties, short dark hair styled upward, athletic build, charcoal blazer over black turtleneck. Visibly distinct from the older, navy-clad client. Pair with the default client in workshop and engagement scenes. Pass `../brand/static/brand/generation-layer/golden-atomic-brand-references/gabr-19-default-trainer.png` as an extra `--input-image` when he appears.

## Palette

| Role | Hex | When to use |
|---|---|---|
| Paper | `#FAF1E4` | Background — always warm cream, never pure white |
| Navy | `#0F172A` | Primary fills, clothing, structural elements |
| Gold | `#C99A2E` | The single value moment per composition: growth curve, upward arrow, key callout. Never more than ~8% of canvas. |
| Ink | `#1a1a1a` | The line itself |

No second saturated color. Gold is the only accent.

## Line vocabulary

Single-weight black ink line, hand-drawn register, on warm cream paper with subtle paper grain. Smooth solid navy and gold fills over the line work. No dotted halftone shading, no crosshatching, no gradients.

## Composition rules

- **Single focal scene per illustration.** One thing is happening.
- **Generous white space.** At least 30% of the canvas untouched paper.
- **No text in the image.** Titles and captions live in the surrounding MDX.
- **Recurring motif.** A doorway as the exit, and a gold growth curve rising up and out. Use the door and/or the gold curve as structural backbone wherever it fits.
- **Mature and optimistic mood.** The feeling that this is the best time in history to build a company worth selling. Never anxious, never grimy, never luxury-flashy.

## Banned visual vocabulary

Reject and rewrite the prompt if any of these appear:

- Photorealistic, hyper-detailed, 8K, HDR
- 3D, render, Pixar, CGI
- Anime, manga, chibi
- Cyberpunk, neon, futuristic
- Glossy, plastic, polished
- Circuit boards, robots, AI-brain imagery
- Brand logos, smartphones, watermarks
- Text overlays, captions
- Named living or recent illustrators (OpenAI moderation hard-blocks these)
- Pure-white backgrounds (use warm cream #FAF1E4)
- Second saturated color competing with gold

## Per-render prompt template

The wrapper script assembles the prompt in this order:

1. **Full brand preamble** (see PREFIX in `scripts/render-page.sh`) — verbatim, every word.
2. **REFERENCE IMAGES block** — dynamically built from whichever images are passed.
3. **"The scene: [SCENE]"** — the one-sentence per-render description.
4. **Closing rules** (see SUFFIX in `scripts/render-page.sh`).

## Canonical reference images

Located in `refs/`:

- **`character-sheet.png`** — default client (GABR 18). Locked appearance reference. Auto-passed as `--input-image` on every render.
- **`style-swatch.png`** — company cutaway scene (GABR 15). Non-character register anchor.

Regenerate only when the visual identity explicitly changes.

## Workflow for generating a new page illustration

One canonical interface: `illustrations/scripts/render-page.sh`. Do not call `chatgpt-images` directly.

```bash
# No extra GABRs (character sheet only):
./illustrations/scripts/render-page.sh "<output.png>" "<one-sentence scene>"

# With extra GABRs:
./illustrations/scripts/render-page.sh "<output.png>" "<scene>" \
"../brand/static/brand/generation-layer/golden-atomic-brand-references/gabr-19-default-trainer.png" \
"../brand/static/brand/generation-layer/golden-atomic-brand-references/gabr-04-exit-ready-workshop.png"

After render:

  1. Inspect illustrations/<output.png>.
  2. Embed the WebP in the article: ![Literal scene description.](/img/illustrations/<name>.webp)
  3. git add and commit.

Alt text = the exact scene description. It is the prompt archive for future regeneration.

When to update this spec

  • A new recurring character is added.
  • A palette decision changes — edit the palette table and regenerate refs/style-swatch.png.
  • The visual register shifts — re-render both canonical references and update the lineage section.

Do not edit the spec to fix one bad render. Re-prompt instead.


- [ ] **Step 2: Verify the file saved correctly**

```bash
head -5 illustrations/SPEC.md

Expected output: # Illustration Spec — AI Transformation Wiki


Task 2: Rewrite illustrations/scripts/render-page.sh

Files:

  • Modify: illustrations/scripts/render-page.sh

  • Step 1: Replace the entire contents of illustrations/scripts/render-page.sh with the following

#!/usr/bin/env bash
# Render a single page illustration for the AI Transformation Wiki.
#
# Usage:
# ./illustrations/scripts/render-page.sh <output-filename> "<scene>" [extra-gabr-path ...]
#
# Example (character sheet only):
# ./illustrations/scripts/render-page.sh "owner-dependence.png" \
# "A business floor plan where every department arrow routes back to a single figure at the center"
#
# Example (with extra GABRs):
# ./illustrations/scripts/render-page.sh "agent-opportunity-analysis.png" \
# "Owner and trainer at a whiteboard with three columns" \
# "../brand/static/brand/generation-layer/golden-atomic-brand-references/gabr-19-default-trainer.png" \
# "../brand/static/brand/generation-layer/golden-atomic-brand-references/gabr-04-exit-ready-workshop.png"
#
# After render, embed the WebP in the article MDX:
# ![Literal scene description.](/img/illustrations/<name>.webp)

set -euo pipefail

if [[ $# -lt 2 ]]; then
echo "Usage: $0 <filename> \"<scene>\" [extra-gabr-path ...]"
echo " filename: relative to illustrations/ (e.g. page-name.png)"
echo " scene: one-sentence scene description"
echo " extra-gabr-path: optional additional --input-image references"
exit 1
fi

FILENAME="$1"
SCENE="$2"
shift 2
EXTRA_IMAGES=("$@")

# ---------------------------------------------------------------------------
# Banned vocabulary — trips OpenAI moderation or violates the locked register.
# ---------------------------------------------------------------------------
BANNED='\b(Sendak|Quentin[[:space:]]+Blake|Tomi[[:space:]]+Ungerer|Pixar|Disney|anime|manga|chibi|3D|render|photorealistic|hyper-?detailed|HDR|cyberpunk|neon|futuristic|glossy|plastic|smartphone|brand[[:space:]]+logo|watermark)\b'

if echo "$SCENE" | grep -iE "$BANNED" > /dev/null; then
echo "ERROR: scene contains banned vocabulary."
echo "Matched: $(echo "$SCENE" | grep -iEo "$BANNED" | head -1)"
exit 1
fi

REPO_ROOT="$(cd "$(dirname "$0")/../.." && pwd)"
cd "$REPO_ROOT"

# ---------------------------------------------------------------------------
# Character sheet reference (auto-passed on every render)
# ---------------------------------------------------------------------------
REF=""
for candidate in illustrations/refs/character-sheet.webp illustrations/refs/character-sheet.png; do
if [[ -f "$candidate" ]]; then
REF="$candidate"
break
fi
done

# ---------------------------------------------------------------------------
# Brand preamble — verbatim from Built for Exit brand OS
# ---------------------------------------------------------------------------
PREFIX='Editorial business-media illustration for Built for Exit, an independent insights and AI-training brand for owners of already-successful mid-market companies preparing to sell at the valuation they deserve.

Style: mid-century American business-book illustration. Single-weight black line art on warm cream paper. Restrained, dignified figures, editorial not cartoonish, in the visual register of a 1960s business hardcover. Smooth solid fills only, no dotted halftone shading, no crosshatching.

Palette (mandatory): warm cream ground #FAF1E4 (never pure white). Deep navy #0F172A and burnt-gold #C99A2E as the only fills over the black line work. Gold is reserved for the single value moment in the composition: a rising growth curve, an upward arrow, an exit-readiness mark, a key figure or stat. Everything else is black line on cream with navy accents. No second saturated color.

Figures: every figure is a distinct individual, never cloned faces. Color the skin and hair of EVERY figure (varied, natural skin tones and hair), not only some of them. Confident, calm, forward-looking people, business-appropriate dress. Mature and optimistic mood: the feeling that this is the best time in history to build a company worth selling. Never anxious, never grimy, never luxury-flashy.

Recurring motif: a doorway as the exit, and a gold growth curve / upward arrow rising up and out through it. Use the door and/or the rising gold curve as the structural backbone of the composition wherever it fits.

DEFAULT CLIENT CHARACTER: when the asset features the Built for Exit owner/client, reuse the canonical default client as the same recurring person across the series. He is an early-fifties man with short salt-and-pepper hair, warm medium-brown skin, a deep-navy blazer over a white open-collar shirt (no tie), and charcoal trousers. Pass that reference image in and restate the appearance in the prompt to keep him identical across images. Character references are mandatory, not optional.

DEFAULT TRAINER CHARACTER: when the asset features the trainer/consultant, reuse the canonical default trainer: a Blasian man (Black and East Asian heritage) in his late thirties, short dark hair styled upward, athletic, in a charcoal blazer over a black turtleneck. He is visibly distinct from the older, navy-clad client. Pair him with the default client in workshop and engagement scenes. Character references are mandatory, not optional.

Texture: clean editorial line work on warm cream paper, subtle paper grain acceptable. No glossy 3D, no neon glow, no circuit boards, no robots, no photographic realism.

Background: warm cream #FAF1E4, or a deep navy #0F172A panel for high-contrast variants.

HARD RULES: No SaaS startup look (gradient blobs, neon, glossy 3D, circuit boards, robots, AI-brain). No pure-white illustration backgrounds (use warm cream). No second saturated color competing with the gold. Never let the model draw the Built for Exit wordmark text.'

SUFFIX='. Generous white space, at least 30 percent of the canvas untouched paper. No text, no labels, no captions inside the image.'

# ---------------------------------------------------------------------------
# Build REFERENCE IMAGES block
# ---------------------------------------------------------------------------
REFS_BLOCK=""
REF_COUNT=0

if [[ -n "$REF" ]] || [[ ${#EXTRA_IMAGES[@]} -gt 0 ]]; then
REFS_BLOCK=$'\n\nREFERENCE IMAGES PASSED — match each exactly:'
IDX=1
if [[ -n "$REF" ]]; then
REFS_BLOCK="${REFS_BLOCK}"$'\n'"- Image ${IDX}: $(basename "$REF") — canonical default client. Early-fifties man, short salt-and-pepper hair, warm medium-brown skin, deep-navy blazer over white open-collar shirt (no tie), charcoal trousers. Match exactly."
IDX=$((IDX+1))
REF_COUNT=$((REF_COUNT+1))
fi
for extra in "${EXTRA_IMAGES[@]}"; do
REFS_BLOCK="${REFS_BLOCK}"$'\n'"- Image ${IDX}: $(basename "$extra")"
IDX=$((IDX+1))
REF_COUNT=$((REF_COUNT+1))
done
fi

PROMPT="${PREFIX}${REFS_BLOCK}

The scene: ${SCENE}${SUFFIX}"

# ---------------------------------------------------------------------------
# Build command args array
# ---------------------------------------------------------------------------
CMD_ARGS=(
--prompt "$PROMPT"
--filename "illustrations/$FILENAME"
--size 1536x1024
--quality high
)

if [[ -n "$REF" ]]; then
CMD_ARGS+=(--input-image "$REF")
fi
for extra in "${EXTRA_IMAGES[@]}"; do
CMD_ARGS+=(--input-image "$extra")
done

mkdir -p illustrations static/img/illustrations
echo "==> rendering illustrations/$FILENAME (${REF_COUNT} reference image(s))"

uv run ~/.agents/skills/chatgpt-images/scripts/generate_image.py "${CMD_ARGS[@]}"

# ---------------------------------------------------------------------------
# Convert PNG → WebP for deploy
# ---------------------------------------------------------------------------
WEBP_NAME="${FILENAME%.png}.webp"
if command -v cwebp >/dev/null 2>&1; then
cwebp -quiet -q 85 "illustrations/$FILENAME" -o "static/img/illustrations/$WEBP_NAME"
echo "==> static/img/illustrations/$WEBP_NAME"
else
echo "WARN: cwebp not installed. Install with: brew install webp"
cp "illustrations/$FILENAME" "static/img/illustrations/$FILENAME"
fi

echo ""
echo "Embed in MDX:"
echo " ![Scene description.](/img/illustrations/$WEBP_NAME)"
  • Step 2: Make the script executable
chmod +x illustrations/scripts/render-page.sh
  • Step 3: Smoke-test the argument parsing (no API call)
./illustrations/scripts/render-page.sh 2>&1 | head -3

Expected: Usage: ./illustrations/scripts/render-page.sh <filename> "<scene>" [extra-gabr-path ...]


Task 3: Populate illustrations/refs/

Files:

  • Create: illustrations/refs/character-sheet.png

  • Create: illustrations/refs/style-swatch.png

  • Step 1: Copy GABR 18 (default client) as the character sheet

cp ../brand/static/brand/generation-layer/golden-atomic-brand-references/gabr-18-default-client.png \
illustrations/refs/character-sheet.png
  • Step 2: Copy GABR 15 (company cutaway) as the style swatch
cp ../brand/static/brand/generation-layer/golden-atomic-brand-references/gabr-15-company-cutaway.png \
illustrations/refs/style-swatch.png
  • Step 3: Verify both files exist
ls -lh illustrations/refs/

Expected: two files — character-sheet.png and style-swatch.png — each several hundred KB.


Task 4: Render Foundations illustrations (3 articles)

Files:

  • Create: illustrations/foundations-index.png
  • Create: illustrations/what-is-ai-transformation.png
  • Create: illustrations/glossary.png

BRAND_GABRS variable used throughout: ../brand/static/brand/generation-layer/golden-atomic-brand-references

  • Step 1: Render foundations/index
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "foundations-index.png" \
"Owner studying a clean blueprint on an oak desk, gold growth curve sketched in the margin, city through the window behind him" \
"$BRAND_GABRS/gabr-10-blueprint-of-the-company.png"

Expected: ==> illustrations/foundations-index.png then ==> static/img/illustrations/foundations-index.webp

  • Step 2: Render what-is-ai-transformation
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "what-is-ai-transformation.png" \
"Owner replacing a towering in-box of loose papers with a single organized binder, business gears running cleanly in the background"

Expected: ==> static/img/illustrations/what-is-ai-transformation.webp

  • Step 3: Render glossary
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "glossary.png" \
"Owner at a reading desk with an open reference book, crisp navy-tabbed sections, gold accent on the spine" \
"$BRAND_GABRS/gabr-16-reading-the-wiki-on-a-tablet.png"

Expected: ==> static/img/illustrations/glossary.webp

  • Step 4: Verify all three WebPs exist
ls static/img/illustrations/

Expected: foundations-index.webp glossary.webp what-is-ai-transformation.webp


Task 5: Render Concepts illustrations (11 articles)

Files: illustrations/concepts-index.png through illustrations/the-transformation-flood.png

  • Step 1: Render concepts/index
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "concepts-index.png" \
"A row of framed definition cards pinned to a cream wall, each with a single clear term, gold accent on the center card"
  • Step 2: Render agent-opportunity-analysis
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "agent-opportunity-analysis.png" \
"Owner and trainer at a whiteboard divided into three columns — automate / keep / AI-system — working through a function list" \
"$BRAND_GABRS/gabr-19-default-trainer.png" \
"$BRAND_GABRS/gabr-04-exit-ready-workshop.png"
  • Step 3: Render data-is-not-information
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "data-is-not-information.png" \
"Two panels: left a warehouse of overflowing filing cabinets, right a single clean report with a gold insight arrow pointing to one key number" \
"$BRAND_GABRS/gabr-14-see-your-business-clearly.png"
  • Step 4: Render documentation-equals-transferability
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "documentation-equals-transferability.png" \
"Trainer handing a bound manual to the owner across a table, gold arrow showing it passing cleanly from one to the other" \
"$BRAND_GABRS/gabr-19-default-trainer.png"
  • Step 5: Render own-the-substrate
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "own-the-substrate.png" \
"Owner standing before a server-rack diagram with a gold padlock on the central node, hands on the controls"
  • Step 6: Render owner-dependence
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "owner-dependence.png" \
"A business floor plan where every department arrow routes back to a single figure at the center — the owner"
  • Step 7: Render sops-as-an-asset
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "sops-as-an-asset.png" \
"A company shelf holding bound SOP binders like books, each labeled with a department name" \
"$BRAND_GABRS/gabr-13-organizational-truth-repo.png"
  • Step 8: Render the-agentic-business-blueprint
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "the-agentic-business-blueprint.png" \
"Owner and trainer over a large unrolled blueprint of a company, every function labeled, gold growth curve threaded through the center" \
"$BRAND_GABRS/gabr-19-default-trainer.png" \
"$BRAND_GABRS/gabr-10-blueprint-of-the-company.png" \
"$BRAND_GABRS/gabr-11-blueprint-to-building.png"
  • Step 9: Render the-ai-valuation-premium
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "the-ai-valuation-premium.png" \
"Two company valuations on a chalkboard side by side, the AI-embedded company's number underlined in gold and visibly higher" \
"$BRAND_GABRS/gabr-03-opportunity-valuation-gap.png" \
"$BRAND_GABRS/gabr-07-stat-card.png"
  • Step 10: Render the-organizational-truth-repo
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "the-organizational-truth-repo.png" \
"A tall open cabinet with neatly organized department folders, a single gold source-of-truth tag on the central binder" \
"$BRAND_GABRS/gabr-13-organizational-truth-repo.png"
  • Step 11: Render the-transformation-flood
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "the-transformation-flood.png" \
"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"
  • Step 12: Verify all 11 Concepts WebPs exist
ls static/img/illustrations/ | grep -E "concepts-index|agent-opportunity|data-is-not|documentation-equals|own-the|owner-dependence|sops-as|agentic-business|ai-valuation|organizational-truth|transformation-flood"

Expected: 11 lines, all .webp


Task 6: Render Perspectives illustrations (10 articles)

Files: illustrations/perspectives-index.png through illustrations/theres-no-templated-transformation.png

  • Step 1: Render perspectives/index
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "perspectives-index.png" \
"Owner in an armchair reading a clean single-page editorial, gold accent on one underlined sentence" \
"$BRAND_GABRS/gabr-16-reading-the-wiki-on-a-tablet.png"
  • Step 2: Render ai-now-decides-your-multiple
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "ai-now-decides-your-multiple.png" \
"M&A evaluator at a desk with two company folders open, marking the AI-embedded one with a gold approval stamp" \
"$BRAND_GABRS/gabr-06-mna-evaluate-exit-readiness.png" \
"$BRAND_GABRS/gabr-07-stat-card.png"
  • Step 3: Render ai-psychosis-in-the-c-suite
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "ai-psychosis-in-the-c-suite.png" \
"Executive in a glass-walled meeting room surrounded by advisors pointing at a dashboard, the actual work floor visible and ignored through the window behind them" \
"$BRAND_GABRS/gabr-14-see-your-business-clearly.png"
  • Step 4: Render build-to-run-without-you
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "build-to-run-without-you.png" \
"A well-organized factory floor running smoothly, owner visible in the background through glass — clearly not needed on the floor" \
"$BRAND_GABRS/gabr-15-company-cutaway.png"
  • Step 5: Render clarity-before-transformation
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "clarity-before-transformation.png" \
"Owner at a desk with two documents: one with red notes labeled Current State, one blank labeled Transformation Plan — studying the first before touching the second" \
"$BRAND_GABRS/gabr-14-see-your-business-clearly.png"
  • Step 6: Render documenting-sops-in-the-age-of-ai
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "documenting-sops-in-the-age-of-ai.png" \
"Owner dictating to a scribe writing a clean procedure into a bound manual, trainer at his side, gold detail on the pen" \
"$BRAND_GABRS/gabr-19-default-trainer.png" \
"$BRAND_GABRS/gabr-12-blueprint-intensive.png"
  • Step 7: Render dont-break-what-works
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "dont-break-what-works.png" \
"Two machines side by side: one running with a gold crown on top, one in disarray — owner's hand pointing to preserve the first"
  • Step 8: Render how-to-choose-a-transformation-partner
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "how-to-choose-a-transformation-partner.png" \
"Owner at a conference table reviewing three proposals, trainer at his shoulder, gold checkmark on one" \
"$BRAND_GABRS/gabr-19-default-trainer.png" \
"$BRAND_GABRS/gabr-04-exit-ready-workshop.png"
  • Step 9: Render not-every-company-needs-ai
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "not-every-company-needs-ai.png" \
"Owner at a fork in a road map, one path marked with a gold arrow, one bypassing it — studying the map calmly"
  • Step 10: Render theres-no-templated-transformation
BRAND_GABRS="../brand/static/brand/generation-layer/golden-atomic-brand-references"
./illustrations/scripts/render-page.sh "theres-no-templated-transformation.png" \
"A stack of identical crossed-out generic blueprints with a single custom handwritten plan spread open on top" \
"$BRAND_GABRS/gabr-10-blueprint-of-the-company.png"
  • Step 11: Verify all 10 Perspectives WebPs exist
ls static/img/illustrations/ | grep -E "perspectives-index|ai-now-decides|ai-psychosis|build-to-run|clarity-before|documenting-sops|dont-break|how-to-choose|not-every|theres-no-templated"

Expected: 10 lines, all .webp


Task 7: Embed images in all 24 articles

For each article, insert the image tag after the italic subtitle line and before the --- horizontal rule. The existing pattern from why-ai-changed-the-exit-math.md is the reference:

*Italic subtitle.*

![Scene description.](/img/illustrations/filename.webp)

---
  • Step 1: Embed in docs/foundations/index.md

Find: *What AI transformation actually is, and the groundwork an owner needs before spending a dollar on it.* Insert after: ![Owner studying a clean blueprint on an oak desk, gold growth curve sketched in the margin, city through the window behind him.](/img/illustrations/foundations-index.webp)

  • Step 2: Embed in docs/foundations/what-is-ai-transformation.md

After: *Redesigning how the work of your business gets done using AI and agents, in the few places where the return is real and calculable. Not buying tools, not a chatbot.* Insert: ![Owner replacing a towering in-box of loose papers with a single organized binder, business gears running cleanly in the background.](/img/illustrations/what-is-ai-transformation.webp)

  • Step 3: Embed in docs/foundations/glossary.md

After: *An A-to-Z of the AI-transformation vocabulary an owner runs into across this wiki.* Insert: ![Owner at a reading desk with an open reference book, crisp navy-tabbed sections, gold accent on the spine.](/img/illustrations/glossary.webp)

  • Step 4: Embed in docs/concepts/index.md

After its italic subtitle line. Insert: ![A row of framed definition cards pinned to a cream wall, each with a single clear term, gold accent on the center card.](/img/illustrations/concepts-index.webp)

  • Step 5: Embed in docs/concepts/agent-opportunity-analysis.md

After its italic subtitle line. Insert: ![Owner and trainer at a whiteboard divided into three columns — automate / keep / AI-system — working through a function list.](/img/illustrations/agent-opportunity-analysis.webp)

  • Step 6: Embed in docs/concepts/data-is-not-information.md

After its italic subtitle line. Insert: ![Two panels: left a warehouse of overflowing filing cabinets, right a single clean report with a gold insight arrow pointing to one key number.](/img/illustrations/data-is-not-information.webp)

  • Step 7: Embed in docs/concepts/documentation-equals-transferability.md

After its italic subtitle line. Insert: ![Trainer handing a bound manual to the owner across a table, gold arrow showing it passing cleanly from one to the other.](/img/illustrations/documentation-equals-transferability.webp)

  • Step 8: Embed in docs/concepts/own-the-substrate.md

After its italic subtitle line. Insert: ![Owner standing before a server-rack diagram with a gold padlock on the central node, hands on the controls.](/img/illustrations/own-the-substrate.webp)

  • Step 9: Embed in docs/concepts/owner-dependence.md

After its italic subtitle line. Insert: ![A business floor plan where every department arrow routes back to a single figure at the center — the owner.](/img/illustrations/owner-dependence.webp)

  • Step 10: Embed in docs/concepts/sops-as-an-asset.md

After its italic subtitle line. Insert: ![A company shelf holding bound SOP binders like books, each labeled with a department name.](/img/illustrations/sops-as-an-asset.webp)

  • Step 11: Embed in docs/concepts/the-agentic-business-blueprint.md

After its italic subtitle line. Insert: ![Owner and trainer over a large unrolled blueprint of a company, every function labeled, gold growth curve threaded through the center.](/img/illustrations/the-agentic-business-blueprint.webp)

  • Step 12: Embed in docs/concepts/the-ai-valuation-premium.md

After its italic subtitle line. Insert: ![Two company valuations on a chalkboard side by side, the AI-embedded company's number underlined in gold and visibly higher.](/img/illustrations/the-ai-valuation-premium.webp)

  • Step 13: Embed in docs/concepts/the-organizational-truth-repo.md

After its italic subtitle line. Insert: ![A tall open cabinet with neatly organized department folders, a single gold source-of-truth tag on the central binder.](/img/illustrations/the-organizational-truth-repo.webp)

  • Step 14: Embed in docs/concepts/the-transformation-flood.md

After its italic subtitle line. Insert: ![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.](/img/illustrations/the-transformation-flood.webp)

  • Step 15: Embed in docs/perspectives/index.md

After its italic subtitle line. Insert: ![Owner in an armchair reading a clean single-page editorial, gold accent on one underlined sentence.](/img/illustrations/perspectives-index.webp)

  • Step 16: Embed in docs/perspectives/ai-now-decides-your-multiple.md

After its italic subtitle line. Insert: ![M&A evaluator at a desk with two company folders open, marking the AI-embedded one with a gold approval stamp.](/img/illustrations/ai-now-decides-your-multiple.webp)

  • Step 17: Embed in docs/perspectives/ai-psychosis-in-the-c-suite.md

After its italic subtitle line. Insert: ![Executive in a glass-walled meeting room surrounded by advisors pointing at a dashboard, the actual work floor visible and ignored through the window behind them.](/img/illustrations/ai-psychosis-in-the-c-suite.webp)

  • Step 18: Embed in docs/perspectives/build-to-run-without-you.md

After its italic subtitle line. Insert: ![A well-organized factory floor running smoothly, owner visible in the background through glass — clearly not needed on the floor.](/img/illustrations/build-to-run-without-you.webp)

  • Step 19: Embed in docs/perspectives/clarity-before-transformation.md

After its italic subtitle line. Insert: ![Owner at a desk with two documents: one with red notes labeled Current State, one blank labeled Transformation Plan — studying the first before touching the second.](/img/illustrations/clarity-before-transformation.webp)

  • Step 20: Embed in docs/perspectives/documenting-sops-in-the-age-of-ai.md

After its italic subtitle line. Insert: ![Owner dictating to a scribe writing a clean procedure into a bound manual, trainer at his side, gold detail on the pen.](/img/illustrations/documenting-sops-in-the-age-of-ai.webp)

  • Step 21: Embed in docs/perspectives/dont-break-what-works.md

After its italic subtitle line. Insert: ![Two machines side by side: one running with a gold crown on top, one in disarray — owner's hand pointing to preserve the first.](/img/illustrations/dont-break-what-works.webp)

  • Step 22: Embed in docs/perspectives/how-to-choose-a-transformation-partner.md

After its italic subtitle line. Insert: ![Owner at a conference table reviewing three proposals, trainer at his shoulder, gold checkmark on one.](/img/illustrations/how-to-choose-a-transformation-partner.webp)

  • Step 23: Embed in docs/perspectives/not-every-company-needs-ai.md

After its italic subtitle line. Insert: ![Owner at a fork in a road map, one path marked with a gold arrow, one bypassing it — studying the map calmly.](/img/illustrations/not-every-company-needs-ai.webp)

  • Step 24: Embed in docs/perspectives/theres-no-templated-transformation.md

After its italic subtitle line. Insert: ![A stack of identical crossed-out generic blueprints with a single custom handwritten plan spread open on top.](/img/illustrations/theres-no-templated-transformation.webp)

  • Step 25: Verify all 24 articles now reference an illustration
grep -rl "/img/illustrations/" docs/ | wc -l

Expected: 24


Task 8: Commit everything

  • Step 1: Verify the full file set before staging
git status --short | head -40

Expected: ~53 modified/new files — 2 spec/script files, 2 ref images, 24 PNGs, 24 WebPs, 24 article MDX edits, plus the plan/spec docs.

  • Step 2: Stage all illustration pipeline files
git add illustrations/SPEC.md \
illustrations/scripts/render-page.sh \
illustrations/refs/character-sheet.png \
illustrations/refs/style-swatch.png \
illustrations/*.png \
static/img/illustrations/*.webp
  • Step 3: Stage all article files
git add docs/foundations/index.md \
docs/foundations/what-is-ai-transformation.md \
docs/foundations/glossary.md \
docs/concepts/index.md \
docs/concepts/agent-opportunity-analysis.md \
docs/concepts/data-is-not-information.md \
docs/concepts/documentation-equals-transferability.md \
docs/concepts/own-the-substrate.md \
docs/concepts/owner-dependence.md \
docs/concepts/sops-as-an-asset.md \
docs/concepts/the-agentic-business-blueprint.md \
docs/concepts/the-ai-valuation-premium.md \
docs/concepts/the-organizational-truth-repo.md \
docs/concepts/the-transformation-flood.md \
docs/perspectives/index.md \
docs/perspectives/ai-now-decides-your-multiple.md \
docs/perspectives/ai-psychosis-in-the-c-suite.md \
docs/perspectives/build-to-run-without-you.md \
docs/perspectives/clarity-before-transformation.md \
docs/perspectives/documenting-sops-in-the-age-of-ai.md \
docs/perspectives/dont-break-what-works.md \
docs/perspectives/how-to-choose-a-transformation-partner.md \
docs/perspectives/not-every-company-needs-ai.md \
docs/perspectives/theres-no-templated-transformation.md
  • Step 4: Stage the plan and spec docs
git add docs/superpowers/
  • Step 5: Commit
git commit -m "$(cat <<'EOF'
feat: add hero illustrations to all 24 wiki articles

Customizes the illustration pipeline with the Built for Exit brand spec
(mid-century editorial, navy/gold/cream, default client + trainer GABRs).
Renders and embeds hero images for every article that lacked one.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
EOF
)"
  • Step 6: Verify commit
git log --oneline -1

Expected: the feat commit above.