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:
1. 2023: Screenshot of blog why I'm not learning to code
2. 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
1. Every big thing stars as a small thing
2. Build for fun, build to learn
3. Opinionated products survive
### Slide 15
Build something opinionated
1. Frontend slides: HTML > PPT
2. Codebase to course: Learn to build (add strikeout on this line) Build to learn
3. 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
1. Use the best model (mostly)
2. Treat it as your cofounder, not your employee
3. Try everything, waste tokens
4. Always cut features before shipping
5. Put in the reps
6. Build in public
7. Make it fun