# Retro rainbow coding talk deck

> A coding talk deck with numbered sections, HTML rationale cards, design guidance, product screenshots, a seven-tip grid with an expanded detail view, and a self-expression closing slide. Made with the creator's Frontend Slides skill.

- Kind: Slides
- Live deck: https://deck.zarazhang.com/
- Page: https://meetreference.com/v/vibe-coding-talk-deck-seventies-colors/
- Ready-to-use agent handoff: https://meetreference.com/v/vibe-coding-talk-deck-seventies-colors/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/vibe-coding-talk-deck-seventies-colors/prompt.txt
- Authorship: AI-made, per the source
- Made with: Not stated
- Model: not stated
- Built with: HTML and CSS
- Skills or plugins: frontend-slides
- Style: Decks; retro, seventies, rainbow accents, paper texture, chunky typography, editorial grid, hard shadows
- Playback: a muted visual reference. The original soundtrack is available only at the source.
- Shared by @zarazhangrui in X, Jun 19, 2026: https://x.com/zarazhangrui/status/2067850383758901669
- Prompt fidelity: Partial. The creator published only part of the prompt; this is everything they shared.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

Requirements reported by the source: frontend-slides skill (github.com/zarazhangrui/frontend-slides); Your own folder of images, videos and earlier decks; Your own slide copy.

## Recreating this deck

These are the creator's published instructions, unedited.

## Prompt

```text
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
```

## What it looks like

Written by Reference from the recording frames, not by the creator.

A playful, retro-styled talk deck about vibe coding, AI-assisted design, and interactive web content.

- Color: Warm cream and pale yellow backgrounds with bold red, orange, green, and blue accents, plus occasional dark panels.
- Type: Heavy, geometric sans-serif headlines with smaller clean sans-serif text and occasional monospaced labels.
- Framing: Minimal slide layouts pair large, high-contrast headings with concise text, interface screenshots, charts, and simple decorative accents.
- Structure: A sequence of presentation slides introduces concepts, offers practical guidance and examples, and closes on vibe coding as self-expression.

Storyboard, nine frames spread across the recording: https://meetreference.com/media/vibe-coding-talk-deck-seventies-colors/storyboard.webp

- Frame 1 at 7.1s: https://meetreference.com/media/vibe-coding-talk-deck-seventies-colors/f1.webp
- Frame 2 at 21.3s: https://meetreference.com/media/vibe-coding-talk-deck-seventies-colors/f2.webp
- Frame 3 at 35.5s: https://meetreference.com/media/vibe-coding-talk-deck-seventies-colors/f3.webp
- Frame 4 at 49.7s: https://meetreference.com/media/vibe-coding-talk-deck-seventies-colors/f4.webp
- Frame 5 at 64.0s: https://meetreference.com/media/vibe-coding-talk-deck-seventies-colors/f5.webp
- Frame 6 at 78.2s: https://meetreference.com/media/vibe-coding-talk-deck-seventies-colors/f6.webp
- Frame 7 at 92.4s: https://meetreference.com/media/vibe-coding-talk-deck-seventies-colors/f7.webp
- Frame 8 at 106.6s: https://meetreference.com/media/vibe-coding-talk-deck-seventies-colors/f8.webp
- Frame 9 at 120.8s: https://meetreference.com/media/vibe-coding-talk-deck-seventies-colors/f9.webp

## How it was made, per the creator

- Notes: Made with her own Frontend Slides skill. Self-reply: 'It's designed for coding agents like Claude Code and Codex'. Clickable images, nested content and interactive elements. Talk recording: https://www.youtube.com/watch?v=jvB2F_hYkXA

## Links

- View deck: https://deck.zarazhang.com/
- Original post: https://x.com/zarazhangrui/status/2067850383758901669