Code as a
medium for
storytelling
DECK WITH YOU
I never thought of myself as a coder
⤢ CLICK TO ENLARGE
Frontend slides
Code is the medium,
HTML is the canvas
What it feels like
Why HTML?
How to make HTML slides
that look stunning
How to prevent AI slop in design
purple gradients, italic, instrumental serif, etc
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.
Favourite podcasts become readable essays you can actually finish.
▶ VIEW DEMO
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.
▶ VIEW DEMO
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
How to talk to agents
Describe problems, not solutions
I hand Claude an asset or a pain point and leave the solution space open. The open brief is what makes room for ideas I could never have specced.
Most people: arrive with a feature spec, get exactly that, nothing more
Me: describe the mess and ask what we could do with it
all my browsing history in chrome is saved locally; let's build an extension that does something with it
MY ACTUAL PROMPT · THE ONE THAT STARTED TAB OUT
My own behavior is the spec
I report what I actually do, even when it's embarrassing. Features come from observed behavior, not from an imagined user.
Most people: spec features for a user they imagine
Me: confess my real habits and let the product follow
can you group 'landing pages' for common websites into one category? cos usually I wanna close them all at once
MY ACTUAL PROMPT · TAB OUT
Say it like a human, then make it law
Design feedback starts as a human verdict, no CSS, no jargon. Then the verdict gets written into the skill so the mistake can never come back.
Most people: fix one ugly output and move on
Me: legislate the ban into the system, permanently
the color scheme and aesthetics for the presentation is cliched and obviously vibe coded
can you not use purple gradients, ever. no purple and no purple gradients
MY ACTUAL PROMPTS · VIBE CODING JAM DECK
Cut more than you add
Agents make adding features cheap. That makes deleting them the real product decision. I once deleted the AI from my own AI tool.
Most people: only ever ask the agent for more
Me: the best feature is often the one you remove
actually let's get rid of the AI organization feature; we don't need any llm for this tool, just categorize by domain is enough
MY ACTUAL PROMPT · TAB OUT
Treat it as a cofounder, not a code printer
I ask what Claude thinks before telling it what to do. Sometimes I ask about the collaboration itself: we've done retrospectives, and even a 1:1.
Most people: instruction in, code out, like a vending machine
Me: questions, options, retrospectives
look at this issue and tell me what you think
the terminal limits our communication bandwidth. if you could decide, what kind of canvas would you want to communicate with me through?
MY ACTUAL PROMPTS · FRONTEND SLIDES + TAB OUT (TRANSLATED)
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:
github.com/zarazhangrui ↗