SCENE
Build a tech-talk deck for a developer conference
A 4-skill pipeline for code-heavy conference talks — Slidev for the deck, mermaid for diagrams, terminal recordings for demos, frontend-design polish.
Pipeline
A tech talk deck is the opposite of a pitch deck: you’re not selling a recommendation, you’re explaining a system. The stack below is built for developers in a dim room with a projector, not investors over coffee.
Step 1: Pick Slidev for the base
Use slides-creator in Slidev mode. Slidev is the developer-conference standard for a reason: Markdown-first authoring, first-class code blocks with syntax highlighting that survives export, and keyboard navigation built in.
Use slides-creator (Slidev format) to build a 20-slide tech talk on
"Building reliable agent systems." Audience: backend engineers.
Use the dark theme. Include syntax-highlighted code blocks for
TypeScript and Python.
Step 2: Pre-render diagrams with Mermaid
Architecture diagrams in tech talks die at projection. Bare Mermaid blocks render fine on your laptop, fuzzy on a 1080p projector. Use mermaid-tools to extract every Mermaid block from your Markdown source and render to 2x retina PNG.
Use mermaid-tools on my talk.md. Render every mermaid block to PNG
at 2x density. Save under ./diagrams/. Replace the inline blocks
with image references.
Step 3: Record terminal demos with VHS
Live coding fails 30% of the time on stage. Pre-record terminal demos
with cli-demo-generator — write a .tape
script, get a deterministic GIF every render. Embed the GIF in Slidev
where you’d otherwise live-code.
Use cli-demo-generator to record `pnpm install`, `pnpm dev`, then
opening localhost:4321. 15 seconds, dark theme, monospace.
Step 4: Polish with frontend-design (optional)
If the default Slidev styling reads too generic, layer frontend-design on the embedded CSS. The “anti-AI-slop” rules (no centered layouts, no purple gradients, no uniform rounded corners) keep the deck from looking like every other AI-generated talk.
Variations
- Lightning talk (5 slides) — skip step 4, lean on Slidev defaults.
- Workshop (90 min) — add interactive code blocks Slidev supports natively.
- OSS launch announcement — record more demo GIFs, drop the architecture diagrams.
What this pipeline doesn’t do
- Inter-slide animations — Slidev does subtle transitions; for full motion graphics use nanobanana-ppt instead.
- Brand-themed corporate styling — for that, swap step 1 for ppt-creator + theme-factory.
This stack assumes the audience is technical, the room is dim, and the deck is judged on clarity not flair.
See also: AI diagram skills guide · ppt-creator vs slides-creator