What is a Claude Code presentation? {#what-is-a-claude-code-presentation}
Instead of dragging boxes around in a slide editor, you describe what you want in plain English — and Claude Code writes the HTML, CSS, and JavaScript to make it happen. The result is a self-contained HTML file that runs in any browser, with real CSS animations, interactive transitions, and your exact branding.
In practice, this looks like:
- A workshop deck with orbital floating shapes and moving gradients
- A pitch presentation with glassmorphic card effects and bold typography
- A product walkthrough with click-through navigation and a progress bar
The key difference from traditional tools is that you're working with code under the hood, which means the ceiling for what you can build is dramatically higher. But you don't need to write a single line yourself.
Claude Code presentations vs. Figma presentations
A lot of designers build their decks directly in Figma — and it makes sense, since you're already in your design tool with your brand kit right there. But Figma presentations are still static prototypes at the end of the day. You can't easily share them outside your team without a Figma account, the animation options are limited, and you end up spending hours on layout instead of content.
Claude Code gives you the full power of the web. Want a luminosity blend mode on a shape that matches each slide's color palette? That's a one-line prompt. Want glassmorphic cards with floating orbital elements? Describe it and it gets built. The output is a standalone HTML file — send it over Slack, email it, host it anywhere. Anyone with a browser can view it.
Why ditch traditional slide tools {#why-ditch-traditional-slide-tools}
We spend a lot of time at TDP helping teams move faster from design to production. Presentations are one of those blind spots where teams still burn hours on manual work that doesn't need to be manual anymore.
The real cost isn't just the time spent building slides. It's the creative ceiling. When you're limited to whatever Figma's prototyping tools offer, your decks end up looking like everyone else's. And when you're pitching clients or running workshops, that sameness works against you.
When you build presentations with Claude Code, the benefits compound:
- No more animation wrangling. Describe the effect you want — glassmorphism, floating elements, moving gradients — and it gets built. No keyframe editors, no timeline scrubbing.
- Brand consistency from your source files. Point Claude Code at your Figma designs or your existing repo, and it pulls colors, typography, and layout directly. No re-creating your brand kit in a slide tool.
- One file, shareable everywhere. The output is a single HTML file. No "request access" modals, no app downloads. Open it in Chrome and present.
How to build your first presentation {#how-to-build-your-first-presentation}
Here's the exact workflow we used to build an interactive workshop deck from Figma designs. You can adapt this whether you're starting from Figma or from scratch.
1. Set up your repo
Create a project folder (or work directly in your company's existing repo if you want Claude Code to reference your branding). Drop any assets — exported Figma frames, logos, images — into an assets folder. Open Claude Code in your terminal and navigate to that directory.
If you're working from Figma, export your slide designs as PDFs or PNGs. These give Claude Code the visual reference it needs to match your layout and color scheme.
2. Write a detailed first prompt
This is where most people go wrong. A vague prompt like "make me a presentation" will give you something generic. Instead, front-load your prompt with specifics.
Here's the kind of prompt that works well:
> "You are a world-class deck designer. We are designing a workshop presentation. I need you to upgrade it and make interactions, in and out text transitions, orbital elements floating, moving gradients, glassmorphism, and follow my already existing branding I'm attaching here."
The more direction you give upfront — effects, style, layout preferences — the fewer iterations you'll need later. We found that being specific about visual effects in the first prompt dramatically reduced back-and-forth compared to starting generic and layering on feedback.
3. Let Claude Code review its own work
If you have the Claude and Chrome extension installed (and you should), Claude Code can open the presentation in Chrome and visually review each slide. It catches issues like shapes rendering in the wrong Z-order, colors not matching the design, or layout glitches — before you even look at it.
This self-review loop is surprisingly effective. In our test, Claude Code identified that the 3D shapes weren't matching each slide's color scheme and proposed fixes on its own.
4. Iterate with targeted feedback
When something isn't right, be specific about which slide and which element needs fixing. Screenshots and Figma links help enormously.
A few prompting patterns that worked well for us:
- Reference a specific slide: "You see the 'What you'll learn' screen? The iridescent asterisk should be the same color as the page."
- Apply a fix globally: "Apply these luminosity changes to every screen in the presentation, making sure the shapes follow the same color scheme as the page."
- Use plan mode for complex layouts: When a slide has a complicated background (scattered shapes, noisy textures, layered glass effects), asking Claude Code to enter plan mode and propose an implementation plan before coding saved time.
Expect 3-5 rounds of iteration for a polished deck. Each round gets faster as Claude Code learns your preferences within the conversation.
5. Package and share
Once you're happy with the result, tell Claude Code to "package standalone HTML." It bundles everything — styles, animations, assets — into a single file. You can send this file to anyone. They open it in a browser and get the full interactive presentation with click navigation and a progress bar.
No Figma account needed. No "request edit access." No app install. Just a file that works.
Tips for better prompting {#tips-for-better-prompting}
A few things we learned the hard way:
- Don't try to fix everything at once. When Claude Code makes changes that break things, tell it to revert ("go back to the first render") rather than stacking more fixes on top of broken code.
- Send Figma links for complex effects. Claude Code can read Figma files through the MCP integration. For tricky effects like glass layers or blend modes, linking directly to the Figma node with the exact blur settings is faster than describing it.
- Name your exported frames. It sounds small, but "slide-01-hero.pdf" gives Claude Code better context than "frame.pdf" when it's mapping designs to slides.
Tools and resources {#tools-and-resources}
To get started with this workflow, you'll need:
- Claude Code — the CLI tool from Anthropic that runs in your terminal
- Claude and Chrome extension — lets Claude Code visually inspect your presentation in the browser and catch rendering issues
- Figma (optional) — for designing your slides before handing off to Claude Code, or for referencing existing brand assets
If your team is shipping decks regularly — for sales, workshops, investor updates — this workflow can cut your production time significantly while giving you a level of polish and interactivity that slide tools simply can't match.
At TDP, we've been integrating AI tools like Claude Code into our design-to-production workflows for clients. If your team is spending more time fighting with presentation tools than actually presenting, this is exactly the kind of workflow we help teams set up.
