Making print books (Chatbooks)

Make a printed 5×5 in Chatbooks photo book from a project's collection (clips, albums, photos): catalogue with permanent IDs, lab and pick tools, spread-first layout, QR short links, 300 dpi export with bleed for Chatbooks' trim.

83 screenshotsAgents: SKILL.mdPrint this page for a paper copy.

Why printed books

I'm a big fan of printed things: something you can hold, touch, flip through, stare at, and come back to, to reflect on or simply admire the work. These are personal projects, and I wanted them to have a physical form I can keep in my real space, not just a URL.

So I took a Chatbooks subscription (a monthly photo-book plan), and set out to give the projects I build through vibe coding and agent coding, with Claude, ChatGPT, Grok and Gemini, a printed counterpart. I composed the first book by hand. Over time the work moved into tools: ChatGPT helped make HTML book previews, and each book taught us something about trim, spreads, QR codes and how to review before printing. This page collects those learnings, and the same text works as a skill that agents follow.

Before this playbook (v0.5, with ChatGPT)

The method on this page didn't start here. For a month before it, ChatGPT and I tried to turn the Sora archive, 2,719 generated clips, into something readable. The goal was never only a photo book: the same body of work was published and prototyped in several forms, each asking a different question. An editorial site asked what is the story; web readers asked what should be compared and in what order; a 5 × 5 proof asked what survives a page turn; cards and books asked what deserves to become physical. They are related forms of one publishing practice, not competing outcomes.

DateFormWhat it taught us
27 AugSora to PrintA browser editor for square 1,500 px Chatbooks cards (title, short copy, QR code, safe area). Real pages, assembled one at a time.
29 AugSora Sketchbook / Act JRB20An editorial site that made the practice readable as a field record, not one canonical book.
3 SepPicker and sorterKeep, discard and bucket decisions with stable filenames: picking became separate from export.
20 SepEditorial v1Five web books from 307 of 2,719 studies, grouped by project family. Legible, but it read like a catalogue.
20 SepEditorial v2An independent cut of 38 scenes with a six-movement arc per book: an editorial spine, but still a plan.
22 SepEditorial v3, The Long ArcA 65-logical-page reader: stills first, pairs, grids, quiet text pages, mini-indexes. Paced, but not printer-ready.
23 Sep5 × 5 Book PreviewA flip-book proof of spreads with a page map for swaps: back to the scale of a Chatbooks upload.
Left to right: a hand-made Chatbooks page (3 Sep), a v1 preview image and a v2 still (20 Sep), the v3 contact sheet used to review The Nearby Wild (22 Sep), and a page from the 5 × 5 proof reader (23 Sep).

What didn't work, honestly. The early print work produced real pages and taught the constraints (safe areas, page order, the gap between an attractive square on screen and a readable printed page), but the Sora Sketchbook never resolved into one finished printed edition. The archive was too broad, the first cuts too category-led, and even the best web reader still needed another round of selection and page-level composition. A 60-page plan (v2) is not an edited 60-page book; "logical pages" (v3) are not printer pages; and no sorter or manifest replaced looking at the images together.

How the books resolved it. Every Frame answered the broad archive the other way round: no editorial cut at all, every frame in date order, with permanent clip IDs and a way back to each video. All I Need Music applied the same system to a smaller, curated collection. The editorial readers remain what they were good at: telling a story on screen.

Every Frame, volumes 1–4: "Sora is my sketchbook", Oct 2025 – Mar 2026. Each cover is the volume's first frame, with a QR that plays that clip.

Vol 1 · the cover page: the first frame, the title and a QR to play the clip.

Vol 1 · pages 2–3: 12 × 7 frames per page, edge to edge, in date order, each numbered with its permanent clip ID.

Vol 1 · pages 16–17: a run of forest studies. Date order lets themes show up as colour bands.

Vol 2 · pages 30–31.

Vol 3 · pages 14–15.

Vol 4 · pages 40–41.

Vol 1 · pages 59–60: the last grid and the index, which maps clip numbers to pages.

Vol 4 · pages 59–60: the closing index.

1 / 8Flip through Every Frame: opening, grid spreads and the closing index

What carried forward into the rules below:

How this playbook came about

How we make 5 × 5 in Chatbooks from our own collections, learned on two books in Sep 2026:

Both books are HTML pages rendered to PNG with Playwright. Content lives in data files, and layout lives in one script plus one stylesheet.


1. Chatbooks facts (measured, not guessed)

Chatbooks' own preview of an Every Frame page: the outer clip numbers (e.g. the "1" in the top-left corner) are cut, because Chatbooks trims about 2.9 mm per side.
Chatbooks lays its own vertical date tab over the cover's left edge; the owner's screenshot showed it touching the title, so cover text moved to 88 px from the left.
FactValueWhat we do about it
Book size5 × 5 in, 60 images max per bookPlan every book as exactly 60 images
Image 1 and image 60Single pages (right, then left); everything between pairs into spreads 2–3 … 58–59Design images 2–59 as spreads; use 1 and 60 for single-page content (intro, back)
Edge trimKeeps the central ~95.5%: about 34 px of 1500 (0.11 in, 2.9 mm) per side, even on all sides, zoom-to-fillAdd bleed, and keep all text ≥ 24 CSS px (0.25 in) inside the trim
Cover / first-page tabChatbooks lays its own vertical date tab over the left edge, about 44 CSS px wideKeep cover text ≥ 88 CSS px from the left; right-hand vertical titles read bottom-to-top, matching the tab
Page labelsChatbooks' "Page N" counts image 1; our printed numbers start at image 2Expected; the index uses the printed numbers

How we measured the trim: fit the Chatbooks preview screenshot against our own PNG (best crop match: 95.5%, ±6 px). Redo this with a calibration page if a new product or size is used.

2. Page and file spec

Bleed study: the same page as Chatbooks shows it, without (left) and with (right) a 0.125 in bleed. With bleed, the corner clip number and the page tab survive.

3. Workflow that worked

The layout lab for Every Frame: presets and column/row/gap/margin sliders over real frames, with live page, book and sharpness numbers. The owner picked 12 × 7, edge to edge, from this screen.
The scrub tool: tap a frame to cross it out, tap a numbered frame to drop the whole clip. Picks save to the artifact's database; the counter shows pages left to fit 4 books.
Every Frame, volume 1 sample: cover, index, grid spreads and closing spread, reviewed as spreads before any export.
  1. Catalogue first. Give every item a permanent ID (Sora #0001–#2719 by date; music H-### / T-###). IDs get printed, so never renumber after printing. If the source must change, remap old → new IDs and spot-check.
  2. Lab before layout. Build a tiny interactive lab (grid density, columns × rows, margins, trim %) with real images, and let the owner pick settings visually. Report the page and book count live.
  3. Scrub or pick in an artifact with a database. Tap-to-cross-out (Every Frame scrub) or tap-to-pick (music feature picker). Picks save to the artifact's database and Claude reads them back, so no JSON goes back and forth. Show a live count against the target (e.g. "fits in 4 books", "54 / 54").
  4. Sample first, then the whole book. Build 3–4 varied spreads, get feedback, then build all 60.
  5. Preview as HTML on the home network (python3 -m http.server <port> --bind 0.0.0.0, then http://<mac-ip>:<port>/…). Show spreads as the printed book opens: image 1 alone on the right, pairs, image 60 alone on the left.
  6. Export only after explicit approval. Re-export only the pages that changed.
  7. Upload a few pages to Chatbooks and check its preview before ordering. Screenshots of the preview are the final truth.

4. Design system that held up

The music app's timeline view (Hindi above, Tamil below) that the owner wanted in the book; it became the 3-spread timeline with an orange spine across the fold.
The owner's sketch over a draft cover: title and date in the top half, one image across the bottom, index moved off the cover.
Index feedback: keep the H/T letter, the dash and the digits in their own lanes, and put the page number next to the name.
The finished music book in Chatbooks' preview: feature spread with equal columns, the era line with page numbers at the outer edges, nothing lost to the trim.

6. Mistakes to avoid (each one cost us a round)

7. Credits line (used on the intro and last page of the music book)

Curated by <agent> · Composed by <agent> · Steered by <owner> · <date>, set as small labelled blocks, centred. (Printed books only. Public web pages follow the public-attribution policy.)

8. Second book in the series: A.R. Rahman, The Complete Song Collection (Oct 2026)

Hardcover (album grid with the title running up a dark band) and the opening note page.

A whole-career book: 152 film soundtracks, 1,121 songs, 1992–2025, built on the same design system as the music book in about a day of back and forth. Grokbot gathered and verified the data; Claude composed the book; the owner steered.

Scope and math first. The book only works if the count fits 60 images, so every layout change started with the math:

Collecting with a second agent.

IDs. The collection moved to plain numbers (Roja = 115), with the old T-036 kept as an alias so the printed v1 QR codes keep working. The new book prints the plain number.

The hardcover band, four rounds: "Complete Works" → "The Complete Song Collection" over three lines → two lines with "rev 1.0" → the final, centred block.

Title.

Timeline, four rounds (first spread of each): 3 orange spreads with small stacks → 2 spreads with tall spikes → stacks capped at 3 + 4 on a grey spine → final: covers fill the safe area and run continuously across the fold.

Timeline rules that came out of it.

An album spread: cover, year and language, title, director, up to 11 songs, then one QR code straight to YouTube Music with the plain album number beside it.
The notes page created by the half-empty last spread, and the back page: three equal QR codes (this collection, All I Need Music, Pet Projects) with "Rev 1 / Oct 2026" in the credits (web edition shown; the print edition carries the full credits).

Colour. Teal replaced v1's orange for the accents. It reads well on black and on paper, and gives the second book its own identity.

Chatbooks crop simulation on the exported 1572 px PNGs: cover, note, both timeline pages, first and last album spreads, notes, index and back. Nothing important is lost.

Export.

Seven editions from one build

All seven editions of the A.R. Rahman book side by side, at true relative size: 5 × 5 (printed), 5 × 7, 7 × 5, 5 × 7 liner cards, then 8 × 8, 8 × 8 record sleeves and 8 × 8 mixed.

The printed book is 5 × 5 in. The same data and design system then became six more editions, each asking what a different page size does to the same 152 albums:

EditionWhat changesOpen it
5 × 5 (printed)3 album columns per page; timeline on a spine, Hindi above, Tamil below5 × 5
5 × 7portrait: 2 big columns, larger type; the timeline snakes down the pages5 × 7
7 × 5landscape: 4 columns per page; a wavy timeline road7 × 5
8 × 8the 5 × 5 layout scaled up, with more songs per album8 × 8
8 × 8 record sleevesone album per page with a full-bleed cover, like an LP sleeve8 × 8 sleeves
5 × 7 liner cardsfour liner-note cards per page; a ledger timeline5 × 7 cards
8 × 8 mixeddense album pages alternating with immersive feature spreads; a serpentine timeline8 × 8 mixed

5 × 5 printed: the timeline, covers stacked above and below a spine. Open ↗

5 × 5 printed: six albums per spread, songs and a YouTube Music QR each. Open ↗

5 × 5 printed: the half-empty last spread became a "My favourite songs" notes page. Open ↗

5 × 7: the timeline snakes down the portrait pages. Open ↗

5 × 7: two large columns per page. Open ↗

7 × 5: a wavy road across the landscape spread. Open ↗

7 × 5: four albums per page. Open ↗

8 × 8: the timeline with room to breathe. Open ↗

8 × 8: the 5 × 5 album layout, scaled up. Open ↗

8 × 8 record sleeves: one album per page, cover full bleed. Open ↗

8 × 8 record sleeves: Ye Maaya Chesave and Rockstar. Open ↗

5 × 7 liner cards: the ledger timeline. Open ↗

5 × 7 liner cards: four cards per page. Open ↗

8 × 8 mixed: the serpentine timeline. Open ↗

8 × 8 mixed: a feature spread for Roja, with the story of the album. Open ↗

8 × 8 mixed: a dense spread of album cards. Open ↗

1 / 16Flip through: two or three distinct spreads per edition, shown to scale (1 in = 80 px)

What the sizes taught us.

The digital edition: the same pages in a spread viewer with side arrows, a page scrubber and tap-to-play QR codes.

Book preview: the digital edition

For the next revision (rev 2).

9. Music cards – pilot (6 × 4 in fold cards, Oct 2026)

The printed books hold many albums per page. The cards try the opposite: one album per card, printed as an ordinary 6 × 4 in photo print and folded in half into a tiny record sleeve. The back holds the songs, credits and a YouTube Music QR; the front holds the album art, the title and the album number with a QR to its page. All three agents made a version from the same brief, which made it a good way to compare approaches.

Lagaan as a fold card by ChatGPT (Cardsmith, five layouts), Grok (three directions with generated artwork) and Claude (five layouts, then the two chosen for print).

ChatGPT · Cardsmith · immersive artists

ChatGPT · Cardsmith · poster detail

ChatGPT · Cardsmith · sleeve airy

ChatGPT · Cardsmith · editorial artists

ChatGPT · Cardsmith · immersive detail

Grok · direction a: generated artwork, cream back

Grok · direction b: dark back, artwork front

Grok · direction c: one painting across the fold

Claude · liner notes

Claude · poster

Claude · night record

Claude · spotlight

Claude · index card

Claude · rev 2 night record: the record takes the album's colour, numbered tracks, "Album 25" by the QR

Claude · rev 2 poster light: an inset cover on paper, so nothing at the top edge gets cut

1 / 15Flip through: the same album, every layout

How it went.

  1. Brief: three directions, original artwork allowed, real album data, print specs, a naming rule (6x4_<agent>_<layout>_<album-id>_<slug>_v01.png), and "don't pick the final direction".
  2. Explorations: each direction with original generated artwork and with the real album art. The real art won: people recognise an album by its cover.
  3. A set of 20 (10 Ilaiyaraaja, 10 A.R. Rahman) in five layouts, reviewed as an HTML page on a neutral grey table (a black page hides the edges of dark cards).
  4. Printed and scanned at a Walgreens photo counter, which gave the trim measurement below.
  5. Rev 2: two favourites, Night record and Poster Light, with fixes from the print: round record grooves, numbered tracks, the record tinted with the album's own colour, "Album N" by the QR, and Poster Light's cover inset so the top 1.5 mm cut doesn't clip lettering.
  6. The print run: one card per album with a random but balanced layout, skipping albums already printed by ChatGPT or Claude and any the owner marked "don't export". 254 cards at 600 ppi, with the measured trim compensated, plus a tally PDF of what was not printed.
Claude's early explorations for Roja: three directions, each with original generated artwork (top) and the real album art (bottom).
The first 48 of the 254-card print run: Night record and Poster Light, alternating by a seeded random choice.

What we learned from the cards.

Walgreens 6 × 4 in trim, measured

Source PNG with the measured print window (red) next to a scan of the actual Walgreens print: the trim is small and slightly heavier on the left and top.

How it was measured: scan the print, crop to the card, then slide the source PNG over the scan at small scale steps and keep the scale and offset with the highest correlation. The card edges mapped back to source pixels give the trim on each side. Two cards agreed to within ±5 px.

Album fold cards printed as standard 4 × 6 photo prints at a Walgreens store (S Mary Ave, Sunnyvale, CA), Oct 2026. Measured by aligning the source PNG to a scan of the print (two cards, correlation 0.94):

Trim (300 ppi px of 1800 × 1200)
Left~30 px (2.5 mm)
Right~12 px (1.0 mm)
Top~18 px (1.5 mm)
Bottom~11 px (0.9 mm)
Kept~97.6 % × 97.6 % (zoom-to-fill, aspect kept, slightly off-centre)

10. Fav Songs Listening Guide: immersive 8 × 8 and 5 × 5 books (Oct 2026, in progress)

The music books list albums. This one is about songs: a lyric-led 8 × 8 in book where each spread feels like opening a 12-inch record sleeve. A still from the song's own video sets the mood, and the lyric, singers and a play QR sit on top of it. It is being explored as four books (Tamil, Hindi, Ilaiyaraaja, A.R. Rahman), each with about 40 spreads, then a v2 of each in 8 × 8 and 5 × 5. Lyrics are placeholder text for now; song, album and credit data are real.

Title page: "Fav Songs Listening Guide", with an endpaper on the left.

Scene grid → focus: an album as a contact sheet of its songs, then one frame full bleed with the lyric.

Album insert: liner notes written only from catalogue facts, credits, and a track list with runtimes and singers.

Lyric sheet: two columns labelled the way the songs are built (pallavi, anupallavi, charanam; mukhda and antara for Hindi).

Callouts: facts computed from the data, e.g. track position and how many songs a singer has in the guide.

Duotone poster: the frame in two inks, the title stacked large.

Letterbox: the film's black bars kept on purpose, the lyric set as a subtitle.

Cinema ticket on a white page, with the play QR on the stub.

Polaroids on linen, taped down.

Gatefold: one frame across both pages, the subject moved off the fold.

Big record with a tonearm, the album art as the label.

Radio dial tuned to the song's year.

Contact sheet with grease-pencil marks.

Cover poster: for songs with no usable video, the album art carries the spread.

Cassette J-card and tape, for the Ilaiyaraaja era.

The printer test page (calibration spread).

About this book: how it was made, and the books composed so far.

1 / 17Flip through: spreads from the v2 books (8 × 8 unless noted)

From idea to four books.

  1. A layout lab first (lab): 20 spread types on 25 songs, each shown as two facing pages with a fold shadow and safe-area guides. Reviewing a whole vocabulary of layouts at once made it easy to see which ones felt like a record sleeve.
  2. Then four books (v1): about 45 layout types, dark and white, assigned so that no layout repeats within 8 spreads and the tones alternate. Overlay graphics (tape, grease pencil, viewfinder marks, waveforms, record grooves) can be switched off for the whole book or per spread.
  3. Then v2 (v2): each book in 8 × 8 and 5 × 5, with new text pages: title page, album inserts, lyric sheets, callouts, end credits, a printer test page and an about page.
How frames were chosen: an audio-only upload shows one poster throughout (skipped); a lyric video has text in its frames (skipped, and its third frame never fetched); a real song video gives clean scenes (kept, then checked by eye).

Finding mood frames without downloading video. YouTube keeps three stills from inside every video (maxres1–3, 1280 × 720), separate from the thumbnail.

The same album insert at 8 × 8 and 5 × 5, to scale. 5 × 5 is re-set rather than shrunk: fewer grid cells and lines, and no text under about 6.5 pt.

The printer test page. Every v2 book ends with a calibration spread, to be printed once per size:

Editing before export: asset labels name every image file, and the text toolbar sits above the selected lyric.

Editing and swapping before export. A local server (node edit-server.mjs) turns the books into a light editor:

What we learned.

↑ Top