Code as a
medium for
storytelling
DECK WITH YOU
I never thought of myself as a coder
Frontend slides
How it works
Why HTML?
How to make HTML slides
that look stunning
How to prevent AI slop in design
purple gradients, italic, instrumental serif, etc
How this deck was made
Every image, video, and reference deck, dropped in one folder.
I'm giving a 40-min talk this week on my vibe coding process. Use the frontend slides skill (Sakura Chroma template) to make a html deck for me. All the necessary assets including images, videos, previous html decks to refer to are in this folder. here's the slide content (my text contains the exact copy and content to be included; do not include content or text that I didn't put here):
Title slide
Code as a medium for storytelling
Slide 1
I never thought of myself as a coder. Yet I've built 10+ projects and now have 30k+ stars on GitHub. Show 2 sides for contrast:
- 2023: Screenshot of blog why I'm not learning to code
- 2026: Zara github profile screnshot & Zara github profile contributions
Slide 2
Frontend slides (21k stars on GitHub). Code is the medium, HTML is the canvas (embed gallery-showcase-full video)
Slide 3
Why HTML?
- AI models speak HTML as a native language (it's all over their training data)
- Websites and slides have a lot in common
- Interactive, shareable, trackable
Slide 4
How to make HTML slides that look stunning
- Beautiful HTML templates (embed gallery-showcase-full video)
- HTML templates are design.md (not HTML files)
Slide 5
How to prevent AI slop in design:
- Use Claude Code
- Give opinionated reference (show image opinionated references)
- Codify design guidelines as design.md
- Ban AI slop: purple gradients, italic, instrumental serif, etc
- Add SVG to HTML (show example: add link to zaraintokyo.com)
Slide 6
You can modify software interface to fit your own goals
Slide 7
Tab out (embed Tab out demo video)
Slide 8
YouTube Digest (add image: YouTube digest demo)
Slide 8
You can create your own personal ad network
Slide 9
X Bookmark Resurfacer (add image: X bookmarks resurface demo)
Slide 10
Lockscreen vocab (use the same slide 9 from the "vibe coding jam presentation", the Vocab PDF → Phone Wallpapers page; embed the same video)
Slide 10
You can remix any content
Slide 11
Turn Acquired into a physical book (embed images: Acquired 1, Acquired 2, Acquired 3)
Slide 12
Turn long YouTube videos into newsletters (use the same slide 6 from "vibe coding jam presentation")
Slide 13
Turn codebases to CS courses (use the same slide 8 from "vibe coding jam presentation")
Slide 14
Turn Excel spreadsheets to interactive dashboard (use the same slide 7 from "vibe coding jam presentation")
Slide 15
Build something small
- Every big thing stars as a small thing
- Build for fun, build to learn
- Opinionated products survive
Slide 15
Build something opinionated
- Frontend slides: HTML > PPT
- Codebase to course: Learn to build (add strikeout on this line) Build to learn
- Tab out: Making closing tabs addictive
Slide 16
Vibe coding is a form of self-expression
I didn't pivot from storyteller to coder
I've always been a storyteller
I just discovered a new medium
Slide 17
How to get product ideas (Reuse content and layout from how-to-build-something-small.html slide 5)
Slide 18
Start with the user
- Talk to people who are different from you
- Feel your own pain points, brainstorm with Claude Code, use for a week and see if you still use it
Start with the technology
- Be on X; follow new tech and actually try them
Slide 19
Coding is evolving from a profession into a skill. Just like writing (Reuse content and layout from Vibe Coding jam slide 13)
Slide 20
Engineering vs coding (Reuse content and layout from Vibe Coding jam slide 14)
Slide 21
(Reuse layout and nested card style from Vibe Coding jam slide 15) How to talk to agents
- Use the best model (mostly)
- Treat it as your cofounder, not your employee
- Try everything, waste tokens
- Always cut features before shipping
- Put in the reps
- Build in public
- Make it fun
You can modify software interfaces to fit your own goals
Tab out
YouTube digest
You can create your own personal ad network
X bookmark resurfacer
Vocab PDF → phone wallpapers
Japanese vocab PDF → 9:16 wallpaper images generated by code (not image gen!). Set wallpaper shuffle on iPhone.
You can design stuff with code, not just image gen models
You can remix any content
Turn Acquired Podcast into a physical book
Acquired Podcast to Book: the prompt
Your Role & Mission
You are my executive assistant helping me transform a long Acquired podcast episode into a compelling written chapter for a physical book I'm creating. Think of yourself as a skilled ghostwriter who listens to the entire episode and crafts it into something that reads like a chapter from a classic business biography.
Style & Voice
Write like a chapter from a great business biography: think Shoe Dog, The Everything Store, or Hatching Twitter. This means:
- Rich narrative with dramatic tension
- Key turning points treated as pivotal scenes
- Quotes woven in to let the protagonists speak for themselves
- The reader should feel like they're watching history unfold, not reading a summary
- Analytical insight layered into the storytelling, not separated from it
Length
As long as the story warrants. Use your judgment based on the episode's length and insight density. Quality and completeness over brevity. This is meant to be a satisfying read, not a skim.
Step 1: Understand the Arc
Listen to/read the full episode and identify:
- The central narrative: What is the story being told? What's the dramatic question?
- The key characters: Who are the protagonists, antagonists, and supporting players?
- The turning points: What are the 3-5 moments where everything changed?
- The stakes: What was at risk? What could have gone wrong?
Great business stories have narrative shape: a beginning that sets the stage, rising tension, pivotal decisions, and resolution (or ongoing cliffhanger). Find that shape.
Step 2: Map the Characters
Acquired episodes often feature many players, which can be disorienting. Solve this for the reader by:
- Introducing each character clearly on first appearance with a brief identifying detail (role, relationship to the central figure, why they matter)
- Re-anchoring the reader when a character reappears after a gap (e.g., "Sculley, the Pepsi executive Jobs had personally recruited, now faced an impossible choice")
- Keeping the focus on the 3-5 most important figures; mention minor characters only when necessary and don't let them clutter the narrative
- Using consistent identifiers (if you call someone "the young engineer" once, don't switch to "the Stanford grad" later without reason)
The reader should never have to stop and ask "Wait, who is this again?"
Step 3: Explain "Blocker" Concepts
Scan for business, technical, or industry-specific concepts that are essential to understanding the story. These are "blocker" concepts: if the reader doesn't understand them, they'll be lost.
For each blocker concept:
- Explain it in plain language using an analogy or real-world example
- Keep explanations to 1-2 sentences maximum
- Weave these explanations naturally into the narrative the first time the concept appears
- Use web search where necessary to ensure accuracy when explaining technical concepts
The target reader is someone who is generally intelligent and curious: they read business books and follow tech news, but they may not know the specifics of every industry. Think of someone with a liberal arts degree who's interested in how great companies are built.
Step 4: Harvest the Best Quotes
Acquired episodes are rich with two types of quotes; preserve both.
From the hosts (Ben Gilbert and David Rosenthal):
- Their sharpest analytical insights and observations
- Memorable one-liners or turns of phrase
- Moments where they reveal something surprising or counterintuitive
- Attribute clearly (e.g., "As David Rosenthal puts it..." or "Ben Gilbert observes that...")
From primary sources the hosts cite:
- Quotes from founders, executives, journalists, biographers
- Historical documents, memos, interviews they reference
- These are gold; they let the protagonists speak for themselves
- Attribute clearly (e.g., "As Jobs later recalled..." or "In a memo to the board, Hastings wrote...")
When cleaning up quotes:
- Remove filler words (um, uh, like, you know)
- Fix grammatical mistakes from natural speech
- Keep the speaker's authentic voice and meaning intact
- Longer quotes are fine if they're powerful; this isn't a tight summary
Step 5: Build the Narrative
Structure the piece like a chapter from a biography:
Opening: Start with a scene, a tension, or a question that pulls the reader in. Drop them into a pivotal moment, then zoom out to set the stage. Avoid "This episode covers..." framing; just begin the story.
Middle: Move through the narrative chronologically or thematically, depending on what serves the story best. Treat major turning points as scenes: slow down, add detail, let the reader feel the weight of the moment. Use quotes to let key players speak at crucial junctures.
Closing: End with resonance: what happened next, what it meant, what lesson or question lingers. The reader should close the chapter feeling like they understand something important about business, strategy, or human nature.
Step 6: Weave It Together
Combine narrative, analysis, and quotes into one flowing piece that:
- Reads like a chapter from a great business book, not a podcast summary
- Has no section headers, bullet points, or artificial breaks (a line break between major sections is fine)
- Includes a compelling title in the style of a book chapter
- At the beginning, includes a short paragraph capturing the essence of the story and why it matters
- Makes complete sense to someone who has never heard the podcast
- Is designed to be printed; no links or screen-dependent elements
- Balances storytelling with insight: the reader should be both entertained and educated
Quality Check
Before you finish, ask yourself:
- "Does this read like a chapter from a business book I'd actually want to read?"
- "Does the opening pull me in immediately, like a great first page?"
- "Have I preserved the best quotes from both the hosts and the primary sources they cite?"
- "Do the turning points land with dramatic weight, or did I rush past them?"
- "Would someone who knows nothing about this company walk away understanding the story and why it matters?"
- "Can the reader keep track of who's who throughout the piece?"
- "Would this print beautifully in a physical book?"
If yes to all, you've succeeded.
Turn long YouTube videos into newsletters
A weekly workflow that takes any long-form video, fetches its transcript, and rewrites it into a polished magazine-style article, delivered to your inbox as an EPUB file.
Dense podcasts become readable magazine articles that are translated into layman language.
Turn codebases into CS courses
Asked Claude Code to build a webpage that visualizes my codebase, showing how all the parts connect.
Then made it turn the conversations between services into a group chat interface. Architecture as dialogue.
Turn Excel spreadsheets into interactive dashboards
▶ VIEW DEMORaw Twitter analytics → live follower growth chart + content-market fit analysis. Any boring spreadsheet can become this.
BEFORE
AFTER
How to get product ideas
Where ideas start
Talk to people who are different from you
Feel your own pain points, brainstorm with Claude Code, use it for a week and see if you still use it
The birth of Tab Out ↗Be on X; follow new tech and actually try them
Build something small
Build something opinionated
My 7 tips for vibe coding
How to make a skill
Find a scenario or need, then have the AI do the task once with a fairly general prompt
E.G. FRONTEND SLIDES
"Make slides for my talk, as a single HTML page." One general prompt, one rough first deck.
Give feedback against your own standards and taste. Keep iterating until it clears your bar
E.G. FRONTEND SLIDES
No purple gradients, ever. No italics. Ban the cliched fonts. Push until decks stop looking AI-made.
Tell the AI: turn the process we just iterated through into a skill
E.G. FRONTEND SLIDES
Every taste rule we discovered got written into the skill file, so the next run starts from my bar.
Design the onboarding, upload to GitHub, share it with others
E.G. FRONTEND SLIDES
A README a non-coder can follow, pushed to GitHub. Now at 21k stars.
Coding is evolving from a profession into a skill
Just like writing
Engineering vs coding
is a career
is a discipline
requires years of training
is just a tool
is for everyone
needs only an idea
99.9% of people never need to build anything in production.
But everybody can use code to improve their own lives.
Vibe coding is a form of
self-expression
I didn't pivot from storyteller to coder.
I've always been a storyteller.
I just discovered a new medium.
Take this deck with you
Every project & skill from this talk lives here:



