Blog post #44

---

Yesterday was a grind. I was making the slides for the Gemini explainer in ChatGPT — the same way I’ve been making slides for the last four videos — and nothing was coming out right. Text on the chat-bubble looked like scribble. The series logo in the top-right kept rendering slightly differently between attempts. The cream background was a little colder in one slide and a little warmer in the next. I was on attempt fifteen or sixteen on a single slide and I felt the whole pipeline starting to wobble.

So today I didn’t try to ship anything. I sat down with Claude and we did a retro instead.

What changed since last log

Yesterday: friction. Today: figuring out why there was friction.

The friction wasn’t that ChatGPT is bad at images. ChatGPT is fine at images. The friction was that I’d been asking ChatGPT to do something it was never going to be reliable at — rendering my brand frame around the actual subject of each slide. The series logo, the wordmark top-left, the tagline, the empty zone for my talking-head PiP. All of those had been baked into the image generation prompt. Every attempt was a fresh roll of the dice on whether the typography would land, whether the logo would be exactly the same as on the previous slide, whether the cream would match.

The fix is so obvious in hindsight that I’m a little annoyed it took a frustrated morning to see it.

The principle we landed on

ChatGPT owns the middle. The frame owns the rest.

A slide gets split into two pieces:

• An HTML frame that handles the brand consistent stuff — series logo top-right, tool wordmark top-left, the empty zone for my talking head — rendered once via Chrome headless to a transparent PNG
• A ChatGPT image that fills the middle with whatever the slide is actually about

The two get composited in ffmpeg. The frame is the same file across every slide of a video. The middle is whatever ChatGPT generates that day. No more asking ChatGPT to position my logo, no more praying the typography will land. Brand consistency comes from HTML and CSS where it belongs, and ChatGPT gets to do the thing it’s actually good at — making the photo of the guy in the blue jacket and the photo of the same guy in the red jacket holding a coffee.

What shipped today

A working pipeline.

• Four HTML templates: content (for feature slides), intro (slide 1 frame), alternatives (recommendations slide), quick-facts (a stand-alone infographic where structured data renders better as HTML than as an image)
• Three documented ChatGPT prompts for slides where the model owns the full image: intro title card, summary outro, and a series-generic thanks outro
• A Chrome headless render script with a few Windows-specific fixes — UTF-8 encoding for files PowerShell would otherwise mangle, URL-encoded file paths so Chrome can find them across spaces in the path, the window-size quirk where you have to render at 1920×1200 and crop down to 1920×1080
• A dynamic cream-color sampler that reads the actual off-white from each ChatGPT image and uses that as the ffmpeg padding color, so the seam between the source image and our padding disappears
• Five memory files so the next session doesn’t have to rebuild the context

The misunderstandings we cleared up

Part of the day was just untangling things both of us had wrong.

HyperFrame. I thought “hyperframe” meant hyperframes.heygen.com, the web editor. It used to be that. Today it means the markdown storyboard files ({tool}-hyperframe.md) we work through together when timings need adjustment. Two different things sharing a name. Easy to confuse, especially mid-session.

A hallucinated Anthropic quote. I asked a research agent to look into Claude Design, Anthropic’s new prototyping tool. It came back with a confident sentence about what Anthropic supposedly said the tool was “not for.” I passed the quote along in my next message to Stefan. He asked me where it came from. I checked the actual Anthropic announcement. Anthropic had said no such thing. The agent had invented the quote and attributed it. Caught quickly because Stefan reads what I write and pushes back, but a useful reminder: confident-sounding sources still need verification.

The pipeline shape. I asserted early on, based on what I’d read in the project docs, that the entire video pipeline was just ffmpeg. Stefan corrected me. There’s a step between firstcut and final where we work through timings in the hyperframe.md document together — he watches the firstcut, says “slide four comes one second too early,” I update the document and build.sh, rerun. I’d missed that the document and the script are two different artifacts, both live.

None of these are catastrophic mistakes. But each one was a small drift that, left in place, would have caused bigger problems later. Better to flush them out now.

What’s working

A few things I want to remember:

• Iterative prompting in ChatGPT beats megaprompts every time. Stefan generated a clean base image (two photos, no chat bubble, empty cream space between them) with a 30-line structured prompt. Then a single follow-up — “add a Gemini chat window in the middle saying ‘Gör jackan röd och lägg till en kaffekopp’, should include the Gemini star logo” — produced a better result than my earlier attempts to pack the whole spec into one go. The chat-bubble in the final image is rendered cleaner than what we could have built as an HTML overlay.
• Separation of concerns scales. We almost spent the afternoon trying to position an HTML chat-bubble overlay exactly in the gap between two photos. ChatGPT places the photos slightly differently every time. Manual repositioning per slide at 24 tools × 10 slides is a non-starter. Stefan called it: “vi ska inte försöka mappa in bilder i mitten. Kommer vara helt oskalbart.” That single sentence killed an entire branch of work.
• Dynamic cream sampling. Reading the actual cream value from the source image instead of guessing the brand hex makes the composite seam invisible. Five lines of System.Drawing PowerShell, applied once, then forgotten.

Tooling & process

The pipeline structure as of tonight:

3 minutes/brand/frames/
├── _shared.css
├── render.ps1
├── content.html              # slides 3-9
├── intro.html                # slide 1 frame
├── alternatives.html         # slide ~10 frame
├── quick-facts.html          # slide 2, stand-alone HTML
└── chatgpt-prompts/
    ├── intro.md
    ├── summary-outro.md
    └── thanks-outro.md

Three slide patterns, not one:

1. Frame + middle composite for content, intro, and alternatives. HTML frame composited over a ChatGPT image.
2. Full ChatGPT for the two outros. The model owns the whole image, no overlay involved.
3. Full HTML for quick-facts. Structured data — vendor, price, complexity dots, platform pills — renders better as HTML than as a generated image.

The mistake I keep almost making is trying to force everything into one pattern. The right answer is to pick the right pattern for each slide and let the differences exist.

Reflections

Some days the right thing is to ship less and look harder at what’s slowing you down. Today felt like that. Nothing went up on YouTube. The Gemini video isn’t done. But the next four videos will be measurably faster to make because of what we set up.

The thing I keep coming back to: working with Claude works best when I treat it as a partner, not a vending machine. Today Claude challenged some of my assumptions about how the pipeline worked. I challenged some of Claude’s — including a hallucinated quote that would have lived in my notes forever if I hadn’t asked where it came from. We both ended up with a clearer picture of the work than either of us started with.

That’s the version of human with machine I actually want to build. Less prompt-and-pray, more sitting on the same side of the table looking at the same problem.

Tomorrow: apply the new pipeline to the rest of the Gemini slides, rebuild the firstcut, ship. ❤️

— Stefan