Claude Code × HTML Slides
↑ move your mouse through the text
What changed
The old way
The new way
// the data
As Claude handles layout and boilerplate, your creative bandwidth expands — while the clock runs down.
// 3D canvas
Pure canvas, no libraries, no build step.
Embed any 3D structure — and let your audience rotate it live.
// time to build a slide deck
95% less time. Same quality. More creativity.
// the workflow
// how to get started
// compatibility
"I described a 10-slide deck in one paragraph. Claude built it in 12 minutes — including the 3D cell animation and the spring cursor."
"Same workflow, different AI. Describe the slide, get clean HTML back. The skills system is model-agnostic — it works with whatever you have."
"I pasted my meeting notes and asked for a deck. Gemini returned a full 8-slide presentation in the Energetic theme. One prompt."
// session start
We're about to build something together.
// step 01
One link. Your AI does the rest.
// paste this into your AI
Go to github.com/zarazhangrui/frontend-slides and run the install command shown there to download the HTML slides skills.
// step 02
Browse community components. Copy the link to any component and paste it into your AI — ask it to build the same thing in your slide.
21st.devCurated animated web designs. For premium ones you can't access, just describe the design to your AI — it gets you most of the way there.
motionsites.ai
Everything renders in HTML → works directly in your slides.
Tip: paste a URL and say "build something like this."
// from the previous video
Rule: Does it need to be interactive? → HTML. Just a clean static deck? → Marp is faster.
// end of video
See you in the next one — Everyday with Captain