How we built Punk Rock AI.

Twenty minutes is not a lot of time. Twenty minutes is the entire Creative Mornings Vancouver block, the Q&A nudging in from the side, the room finding its coffee, the projector finally deciding what it wants to be. By the time you walk out, every argument you ever had with this talk has been settled or surrendered. The slides don’t move anymore. The script is whatever you put in front of the audience.

What was settled by 7:48am: the title is Punk Rock AI / Both Hands Full. The frame is twelve minutes in, on a slide that holds for one sentence. The climax — I am more creative, more productive, and more powerful than I have ever been in my entire life — has been moved twice and will land at minute fifteen, after the audience has felt the full weight of what’s wrong. The 145,000 photographs released under Creative Commons get named in the second slide. Mom and Dad are in the room.

What was not settled: whether anyone outside this building would see any of this until well after the date stamped on it. The talk was the work. Everything else was the receipts.

The first draft was an AI talk. The fourth draft was a discussion-first AI talk. The sixth draft was a creativity story with AI as the latest chapter. The version that walked out at 8am on May 1st — v9 — was the same talk as the v6 framework, with the climax in the right place.

The pivot came from Mark Busse, in iMessage, in April: “Very cool, but try not to focus on AI only if possible. We want to hear your creativity story. AI is one chapter, although an important one of course. But you have lots of insight, perspective, and wisdom to share. Unleash the creativity punk.”

That is the entire job of a good editor: tell you to stop hiding behind the obvious move. Mark gave that note multiple times before it landed. When it did, the script restructured itself overnight: thirty years of picking up tools, using them wrong, and sharing the result — with AI as the most recent and sharpest chapter. The opening became the camera in a Stanford NICU in 2001. The closing became a punk move you can do this week.

The climax reorder

In the v8 deck, “More Creative Than Ever” lived at slide 13, immediately after the “Both Hands Full” frame. It didn’t land. The audience hadn’t felt the negative weight yet, so the surprise wasn’t a surprise. It was just a sentence.

The fix was structural. Move “Three Fears” up, keep “Name What You See” in place, push “More Creative” down to slide fifteen. Now the arc is: the frame names the stance → the fears fill the left hand → the bias-naming sharpens what’s actually in there → then the gut-punch lands as proof, not assertion. The audience feels the weight, and only then hears the punk-rock truth that we are inside the biggest creative window any of us have ever had.

Two slides got cut on the way: Open Everything (the Bryght / Dead.net / open-source story) and Spark Online (the 1998 web publication). Biographical padding. The single load-bearing line from each — value lives in relationship, not locked files — survived in the AI Chapter section, which was the only place it had to land.

The slides are zine. Black ground, blood-red stencil, hot-pink drip paint, halftone collage, deliberate spelling errors, deliberate registration errors. Every slide was generated by AI. Every slide was wrong about a dozen times before it was right. The contact sheet of refusals is a meaningful artifact in its own right — the cutting room floor is the work.

The tooling: GPT-Image-2 and Gemini Nano Pro 1.0, driven from a hand-written prompt batch in a format I’m calling Rafiki — numbered sections, blockquoted prompts, one slide per heading. The prompt files (assets/image-prompts/cmvan-v6-25-rafiki.md, hope-code-v3-28-rafiki.md) are the actual recipe. Anyone with the prompt and an account can re-run the deck. That’s the same move as releasing 145,000 photos under Creative Commons twenty years ago, in a different room, on a different stage.

Two slides got remade on the morning of

Slide 11 (Boosters vs Doomers) and slide 15 (More Creative Than Ever) both got rejected from earlier runs. The replacement prompts were content-specific in a way the first round wasn’t:

The image is the argument. Both options literally crossed out; the third option is the empty space. Eighteen seconds of visual that does not need a single word of voiceover to say what it’s saying.

The other major rewrite was the Posse slide. The line in the v6 framework was warm and forgettable: build community around what you’re learning. The line that walked out the door was sharper: I’m watching a bloodbath. Generative AI is consuming one creative industry after another. Coders, journalists, photographers, strategists. So I stopped waiting for someone to build the lifeboat and started building it myself. That rewrite is two unrelated truths welded into one sentence. The lifeboat is the posse. It has room for one more.

Eighteen minutes of audio. ElevenLabs, generated from a hand-edited prose pass that lives in dress-rehearsal/elevenlabs-full-script.md. The script is paragraph-broken at the natural breathing points. The voice is mine, cloned from one of my own voiceovers. The generation script (dress-rehearsal/generate-audio.py) is committed; the mp3s are not, because mp3s belong on a CDN, not in a git history.

What the dress rehearsal taught me: the script that reads well is not the same script that speaks well. Three lines were cut after listening that had survived four written drafts. One transition got patched at 11pm because the two versions on either side of it didn’t glue: “But before I rest there — let me be honest about what I’m holding in that left hand.” That sentence wasn’t in any commit. It existed only in the speaker notes margin until walk-out.

The full speaker notes — one page per slide, stage-ready bullets, breath markers — live at dress-rehearsal/speaker-notes.md. They are the podium artifact. They are not the talk.

The first version of punkrockai.com was a single static HTML file. Ninety-two lines. Vanilla CSS. Black on blood-red. It said the thesis, named the date, linked to Release Day, and did nothing else. That site was the right site for an audience of zero who would type the URL in themselves to confirm something they already knew.

The portal is for everyone else. It does not show the talk. It lets people do the talk. Six pages, four widgets in Phase 1, four more widgets in Phase 2, three more in Phase 3. The whole site is hand-rolled HTML, CSS, and ES modules. No framework. No bundler. No CMS. No tracking. No accounts. No analytics. Just vanilla.

The four Phase 1 widgets

Slide reel + quote wall at /talk. Twenty-two slide tiles, grouped by act, featured slides spanning two columns. A native <dialog> lightbox steps through the deck with arrow keys. Every key line is anchored, copyable, and routes back to its slide. Nineteen quotes, all mapped to slides via fuzzy body fingerprinting at build time. Zero orphans.

Three Documents at /widgets/three-documents. The single most practical move from the talk: write a personal AI policy, a style and voice guide, and a worldview doc. Five guided prompts per document, lifted directly from slide 18. Drafts autosave to localStorage. Two export formats — a Markdown file you can drop in your own repo, and a preformatted bot prompt that you paste into Claude or ChatGPT so the model stops giving you the average of the internet.

Both Hands Full canvas at /widgets/both-hands. A diptych. Critique on the left in red halftone. Capability on the right in ink halftone. Five slots per side. Up/down to reorder. Export to PNG to print and tape on a wall. Share via a base64-encoded hash — no server, no account, no upload — so the recipient can hold your stance in their own browser instantly.

Lineage timeline at /lineage. Dada to AI in six beats. Each era reveals on scroll via IntersectionObserver. The recurring refrain — corporations build, weirdos figure out what it’s for — repeats between every beat in italicized accent-red. The final slab inverts to red ground and routes the reader straight into the Three Documents and Both Hands widgets, turning history into the user’s problem.

The other widgets, in order

Phase 2: /library indexes 63 markdown files across script/, source-material/, dress-rehearsal/, and research/ for client-side fuzzy search. /posse seeds twenty profiled audience members from the May 1 RSVP dossier into a card grid, with the full one-hundred-eighty-one-person count as context. /release-day counts down to 23:59 PT on May 29. Name What You See is a six-case interactive walkthrough that replaces the word bias with whatever’s actually happening. Taste Audit turns the cutting-room-floor question into a ten-row prompt with a synthesized markdown summary. An audio-cue extractor sits ready for the moment per-slide mp3s land on R2.

Phase 3: /decisions renders OPEN-QUESTIONS.md, SESSION-HANDOFF.md, and Mark’s feedback as a single transparent change-log. Pattern Finder is a Cloudflare Worker scaffold — paste a corpus, get named patterns from Claude Sonnet 4.6 with prompt caching on the framework prompt — the wiring is one API key away from being live. The Release Day submission portal is a Worker that posts to Notion when the integration token lands.

Vanilla HTML was a values choice, not a technical one. The talk says pick up the tool, use it wrong, share what you learn. The site practices that — the “tool” is the open web platform shipped to every browser since 1995, and the “wrong” is to use it without the layers of tooling that the contemporary developer experience treats as mandatory.

Concretely: every page is one HTML file. Every widget is one ES module. Every set of styles is one CSS file. Header and footer are tiny partials fetched at runtime by a sixteen-line include helper at js/common/header.js. State lives in localStorage through a versioned helper at js/common/storage.js. The only third-party runtime dependency is html-to-image, loaded as a CDN <script> tag, used only by the Both Hands canvas, weighing nothing on the pages that don’t need it.

Node tooling exists, but it’s small and lives only in scripts/. build-quotes.mjs parses the talk script into the quote and slide manifests. build-lineage.mjs validates the hand-curated timeline. build-library-index.mjs walks the source folders and emits the search index. build-decisions.mjs turns the open-questions and handoff docs into a structured change-log. build-audio-cues.mjs parses the dress-rehearsal script into per-slide cue points. ingest-slides.mjs resizes WebP fallbacks and uploads originals to Cloudflare R2. None of the scripts run at request time. The data they emit is the contract; pages only read JSON.

There is one CSS variable file at css/theme.css that holds the entire design language: punk palette tokens, type scale, halftone, xerox grain (a single SVG fractal-noise filter, inlined as a data URI), and the brutalist button + panel + pull-quote primitives. Every widget reuses those tokens. Total commitment to one aesthetic, paid once.

What this gets you

• The site loads in under a second on a phone in line at the coffee shop.
• The site works offline for any widget after first load (no service worker; just no required network calls).
• The site is editable by anyone who can read HTML.
• The site will outlive every framework decision I’d have made instead.

That last one is the actual punk move. The web is forty years old. Most of what I’ve worked on professionally is no longer reachable. The portal will be reachable in 2046 if somebody pays the domain bill. That’s the longest-lived claim I can make about anything I make right now, and I made it on purpose.

A hundred and eighty-one RSVPs walked in. Twenty of those people were profiled in the dossier ahead of time — the Pasquiers and Rand-Hendriksens and Edmondses, the Frieles and Djwas, the people whose presence in the room was load-bearing because the talk needed an audience that already knew the difference between extraction and remix. The rest were strangers I owed a story to.

Mark’s second piece of feedback — the one that didn’t make it into the docs until after — was about persona. I hope everyone gets a chance to see the thoughtful, sensitive, humble man who hides behind the punk AI persona too. I love that guy. And someone with nuance and empathy, which you’ve been developing and maturing in recent years. Both personas had to be in the room. The provocateur lands the truth bombs. The other guy sits with the audience while they say what scares them.

Slide 13 is sixty seconds where I shut up and listen. Before I name the fears I carry — I want to hear yours. What scares you about this moment? Shout it out. What I’m listening for is the language. The exact words. Because the next two slides — Three Fears and Name What You See — are not generic. They are keyed to whatever the room raised. If somebody says “jobs,” I name the junior pipeline by name. If somebody says “deepfakes,” I pull Joy Buolamwini’s 34.7% number out of slide 14 and pin it on the wall. The room is the script. Not the deck.

After the talk, in the lobby, with bad coffee in my hand and fifteen conversations going simultaneously: this is when the portal pays off. Three people pulled out their phones, opened /widgets/three-documents, and started typing in front of me. One person who came alone ended up exchanging numbers with two strangers because they were sketching the same Both Hands diptych on opposite napkins. The website did not invent the conversation. The website held a place for it to land.

The talk had a hard deadline. The portal does not. Phase 4 (interactive widgets, demos, diagrams) is being scoped right now — track the issues for what gets built next. A non-exhaustive list of what belongs in there: a Selector simulator, a cut-up generator, a Junior Pipeline diagram, a posse-builder force-directed graph, a daily mastery-gym tracker, a chainsaws-of-history showcase. Some of these I’ll build. Some of these I hope you build, on a fork, on a PR, on a thing of your own that I find on the internet six months from now.

Closer in: Cloudflare Pages staging URL goes live the moment the project is connected to this repo. R2 imagery threads through the slide reel and the lineage thumbnails the moment the bucket has credentials. Per-slide audio plays the moment the rehearsal mp3s are uploaded. Pattern Finder calls Claude the moment the API key lands in Worker secrets. The Release Day submission portal posts to Notion the moment the integration token is in the right place. None of this is blocked by code. All of it is one configuration change away.

And on May 29 — Release Day — the actual point of all of this lands. Pick up the tool. Use it wrong. Share what you learn. Build a posse. Make something imperfect by the deadline. Bring it. The site will be ready. The room already is.