Agencies charge $5,000 for a 60-second product demo video. I make mine for $0. Here's the exact workflow.
The going rate for a professional SaaS product demo video in 2026 is $1,000 to $5,000 for a simple screen recording with transitions. A polished animated explainer runs $5,000 to $20,000. I've made five of them for my SaaS this month. Total cost: $0 beyond what I was already paying for Claude.
This is a long post. Stay with me — there's a technical detail in the middle that I think will genuinely surprise you.
The real problem with screen recording your product
Every founder's first instinct is to hit record and demo the actual product. I tried this. You probably know how it goes.
Your cursor drifts to the wrong corner. The loading spinner fires at the worst possible frame. The dummy data looks obviously fake. Your UI isn't in its ideal state — there's a stray notification, a tooltip that won't disappear, a layout that shifts during recording. You spend 90 minutes getting the take right and it still looks rougher than what you imagined.
There's a deeper problem: your real product shows things you don't want on camera. Real user data that needs blurring. Edge cases you haven't polished. The gap between "how the product works" and "how you want the product to appear in a video" is enormous.
I solved this accidentally.
The thing nobody's connecting yet
Anthropic launched Claude Design in April 2026. One of its headline capabilities: it reads your codebase and extracts your design system automatically. Your colors, typography, component patterns, spacing — Claude builds a profile of your UI and uses it in every output it generates.
So when you ask Claude to build an animated product demonstration, it doesn't build a generic interface. It builds your interface.
Here's the workflow I stumbled onto: give Claude your codebase (or the relevant UI files), describe the scene you want frame by frame, and ask it to produce it as a standalone HTML artifact. Claude builds an animated, interactive, pixel-accurate reconstruction of your product's core interaction — rendered entirely in HTML and CSS — with scripted motion, perfect timing, and exactly the data you want to show.
You open it in Chrome. You screen record it with QuickTime.
That's your footage.
Why the HTML version is better than your real product (on camera)
This is the part I want you to sit with for a moment.
The AI-generated HTML version of your UI is strictly superior to your actual product for video purposes. Not as a product — obviously — but as footage.
It loads instantly. It has no bugs. It always shows the ideal state. The cursor doesn't drift. The timing is scripted. There's no real user data to blur, no edge case to avoid, no spinner that fires at the wrong millisecond.
It's a stunt double for your product that performs perfectly every single time.
And because Claude has your design system, it uses your actual colors, your actual typography, your actual component shapes. To a viewer, it's indistinguishable from the real thing. The key difference is it does exactly what you want, exactly when you want it.
I built an animation showing a user typing a task — "Review client proposal tomorrow high priority #acme" — into Flowly's quick-add bar, watching it parse in real time into the correct due date, priority tag, and project. Then a task card drops in with a satisfying animation. The entire sequence runs in 8 seconds, timed to the beat of the background music, with no cursor drift, no loading state, nothing off.
That animation would have taken me three hours to film correctly with the real product. Claude produced the HTML in one conversation. I screen recorded it in five minutes.
The full stack — with real costs
Claude Pro ($20/month — you almost certainly already have this)
Claude Design is included in the Pro plan. Write your video script before you open Claude — know the angle, the hook, the story arc, how many seconds each scene runs. Then paste in your relevant codebase files, describe each scene, and ask for a standalone HTML artifact. Iterate in the same conversation. Export the file, open in Chrome, screen record.
ElevenLabs (free tier — $0)
The free tier gives you 10 minutes of high-quality text-to-speech per month. That covers roughly three 30-second videos with room to spare. Pick a voice, paste your voiceover script, export as MP3. The Starter plan at $5/month adds commercial rights if you want to run it as a paid ad later.
CapCut (free)
Import screen recording + ElevenLabs audio. Auto-captions in one click (this is non-negotiable — 85% of short-form video is watched without sound). Trim, sync, maybe a zoom or push. Export at 1080x1920.
Background music ($0)
YouTube Audio Library or Pixabay. Or run a Suno prompt for something custom and royalty-free. Keep it low in the mix — present enough to give rhythm, invisible enough to not fight the voiceover.
Total incremental cost: $0. One recording session → TikTok, Instagram Reels, YouTube Shorts, same day.
What I've actually made
I've built five videos for https://flowly.run this way.
The first two leaned hard on the animated UI approach — Claude rebuilt my task management interface, my analytics dashboard, my quick-add bar. The videos show real interactions: a 30-day time tracking reveal that breaks down unbilled scope creep by client, a pricing comparison that sweeps four competitor logos off screen to show one.
The most recent one shifts format entirely — POV morning routine, lifestyle angle, almost no product UI at all. Same stack, different creative mode.
You can see them here:
- TikTok: https://www.tiktok.com/@maxflowly/video/7636379132401667345
- Instagram Reels: https://www.instagram.com/reels/DXrRj7jjS5I/
- YouTube Shorts: https://www.youtube.com/shorts/ExHmOvQYIT0
What this actually unlocks (beyond the obvious)
The production problem is now solved. One hour of focused work produces a video asset that deploys across five channels.
But the less obvious thing: these HTML files are permanent, reusable assets.
When your UI updates, you re-prompt Claude with the new codebase. The animation updates in minutes. You don't reshoot — you reprompt.
The same assets that live on TikTok become your landing page demo, your Product Hunt gallery, your paid ad creative.
The agency route produces a video. This route produces a production pipeline.
The honest part
Views are still low on my account — this is a zero-follower channel that launched recently. I'm not going to pretend the distribution problem is solved, because it isn't. Short-form video without an existing audience is a slow compounding game.
What I can tell you is that the production quality is no longer the bottleneck, and the production cost is no longer an excuse.
For the first time in the history of SaaS marketing, a solo founder with a $20/month Claude subscription can produce the same quality of product demo video as a team with a $5,000 agency budget.
That's the unlock. What you do with it is still your problem to solve.
If you're building something in the productivity or time-tracking space — or honestly if you're just curious — https://flowly.run is my take on combining task management, time tracking, and calendar sync in one place. 14-day Pro trial, no card required.
And if you try this workflow, I'd genuinely like to see what you build.
The part that got me was "you don't reshoot, you reprompt." Every time I've made a product video it's been obsolete within a month because the UI changed. This fixes the maintenance problem more than the production problem.
That was the thing that changed how I thought about it. A traditional video is a snapshot that decays. The HTML file is a template you update. When Flowly's UI changes I'm not going back to an agency or re-recording — I'm opening the same conversation and describing what changed. The asset stays current for the cost of a prompt.
This is something I'm just discovering now... AI has become a driving force and people still do not believe... Only we developers can quantify the potential of AI
I get that feeling — the gap between what the tools can do today and what most people assume they can do is still huge. Developers see it because we’re the ones turning “vague demo” into something shippable in an afternoon.
I’m less interested in convincing skeptics in the abstract than in showing a concrete workflow like this one. Proof beats rhetoric.
If you try it on something you’re building, I’d love to see what you come up with.
Tried this yesterday after reading the post. Two things I didn't expect: Claude's first attempt was about 80% accurate to my actual UI without me doing anything special, and the iteration loop is genuinely fast — describe what's wrong, it fixes it, you're back in Chrome in under a minute. The part that took longest was writing the scene description upfront. Once that was clear the HTML came out close on the first pass.
The scene description being the bottleneck is exactly right, and it's actually the correct bottleneck to have. That's the creative work — knowing what you want to show and in what order. Once that's clear Claude handles the execution. The founders who struggle with this workflow usually haven't written a proper script before prompting. They describe a vibe instead of a sequence and the output reflects that. Glad the iteration loop felt fast — that's the part that surprised me most the first time too. What product were you demoing?
This is actually a pretty wild unlock
the “html as a stunt double for your product” idea is the part most people are gonna miss
everyone’s been trying to perfect screen recordings when the real move is just… not recording the product at all
also agree on the bigger shift....this isn’t just cheaper videos, it’s a repeatable pipeline
feels like the bottleneck just moved from production....distribution now
Exactly — people optimize the wrong layer. The hard part was never “get a clean capture”; it was controlling what’s on screen. HTML gives you that control without fighting your real app.
And yeah: cheaper is the boring headline. Repeatable is what actually changes how you work — same pipeline, new scenes, refreshed when the product moves.
Distribution is the bottleneck I’m staring at too. At least it’s the right one to have once production isn’t eating the calendar.
Thanks for reading — curious what you’re building?
the “html stunt double” idea is actually kind of genius 😄
especially the part about avoiding real loading states / awkward cursor movement. feels obvious once you say it, but i haven’t seen many founders talk about this workflow yet
also respect for being honest about the distribution side. a lot of people only share the polished “10k views overnight” version
Glad the stunt double framing landed — it felt obvious once I named it too, which is usually the sign of a real insight.
The honest distribution note was deliberate. The "10k views overnight" posts are real but they're survivorship bias dressed as a tutorial. The workflow is solved. The audience problem isn't.
yeah that part really resonated with me too
feels like distribution is becoming the new bottleneck now that building is faster than ever. a lot of founders can make something impressive technically, but getting consistent attention is a completely different skillset
also appreciate you being realistic about that instead of pretending the workflow alone solves growth 😄
Most early founders overpay for things before they even know if the product works.
Curious: did you notice any difference in conversion or user understanding compared to more “polished” agency videos, or was speed + clarity enough?
Feels like this approach makes way more sense at MVP stage, where learning fast matters more than production quality.
No direct conversion data to compare against since I didn't run an agency video first. But the signal I'm watching is whether someone who lands on the page starts a trial, and the videos haven't moved that number meaningfully yet.
Your framing is right though — at MVP stage the video isn't for conversion, it's for clarity. Does the viewer understand what the product does in 30 seconds? That's the only question worth optimizing for early on.
What are you building?
The 5000 to 0 framing makes the headline but the more honest number is your time. I tracked a comparable workflow in March and it was 11 hours of my own work to land a video I would actually ship to a buyer. At a self-billed rate that is somewhere between 800 and 1500, not zero. The agency model is collapsing not because AI made it free, it is collapsing because solo operators with taste can now hit 80 percent of the agency output at 10 percent of the price. The remaining 20 percent is what agencies will keep selling, and most clients have already decided they do not need it.
The time cost reframe is the honest version of this post and you're right to name it. $0 in tools but 11 hours of your own work at a self-billed rate isn't free — it's just a different budget line.
The 80/20 split on agency output is where I'd push back slightly. The 20% agencies keep isn't just polish — it's creative direction and the judgment about which story is worth telling. That part doesn't compress with better tools. It just becomes more exposed when production quality is no longer the differentiator.
Really liked the "HTML stunt double" framing for product videos. A couple questions:
Thanks for sharing the workflow.
Re-paste the relevant component files at the start of each new video conversation — Claude picks up whatever changed automatically. For cursor movement, script hesitation not smoothness: add micro-pauses before clicks and a slight overshoot. Pure linear motion reads as puppet. Small imperfection reads as human.
The "reprompt instead of reshoot" point is the real gem buried at the end. Most founders treat demo videos like a photograph — a snapshot that starts aging the moment you take it. Treating them as a living file that updates with your codebase completely changes the economics.
Also want to flag something I haven't seen others mention: the skill behind this workflow isn't prompting. It's art direction. You need to know exactly what story each scene tells, what the ideal data state looks like, what timing conveys the right feel. The founders who struggle with this won't be the ones who can't use Claude — they'll be the ones who haven't thought through their demo as a narrative before they start.
Really appreciate the honest bit at the end about distribution still being unsolved. That honesty makes the whole post more credible.
The art direction point is the one most people will miss and then blame the tool for. Claude can execute a scene precisely — it can't tell you which scene is worth making.
The founders who struggle will have great prompts and no story.
Did the same workflow for Molt week 3 — generated 12s Remotion scenes via Claude Code instead of recording real screens. Saved ~4h per cut. One add: cache the prompt+HTML as a reusable skill (I dump them to TokRepo so demo #5 starts from skeleton not blank prompt). Demo 1 took 2h iteration. Demo 5 took 25 min. The compounding from prompt re-use is the real moat — not the $0 cost.
Scene descriptions first, then component specs. Starting with "what should the viewer see and feel" before "how should it be built" keeps Claude oriented toward the output rather than the implementation. The skeleton I'm building now has a scene template at the top, design tokens in the middle, and a "do not include" list at the bottom for things that looked wrong in previous iterations.
25 minutes by demo five is the target I'm working toward.
This is genuinely one of the most practical posts I've read on IH in a while.
The "stunt double" framing is exactly right — the HTML version isn't a fake,
it's just your product without the camera anxiety.
The part that clicked for me: reprompt instead of reshoot. That alone changes
the economics completely. Most founders treat a video as a one-time asset.
Treating it as a living file you update with your product is a different mental model entirely.
Going to try this for my own apps this week. Appreciate you sharing the full stack —
most people would have gatekept the ElevenLabs + CapCut combo and turned it into a course.
"Reprompt instead of reshoot" is the line I'm most glad landed. The mental model shift from video-as-asset to video-as-living-file is what makes the whole workflow worth the setup cost.
The gatekeeping point is fair and intentional. The tools aren't the secret — the workflow is, and workflows only improve when more people stress-test them. Curious what you build with it.
It will certainly be very useful, and I'm becoming more and more of a fan of this incredible new world of AI. A few years ago, nobody could have imagined the wide range of tools and apps that would come. Thank you, AI... Good luck on your journey and for what's to come.
Appreciate that. The pace of change genuinely is remarkable — the tools that exist now vs three years ago are almost unrecognizable. Good luck with whatever you're building too.
This is the first workflow post I've read where the free tier math actually holds. Most "I made X for $0" posts have a hidden $50/month tool buried in step three. The ElevenLabs free tier giving 10 minutes per month is the one I wasn't sure about — that covers more than I thought. The thing I'd add: CapCut's auto-captions are good but they need a pass for technical terms and product names. It confidently misspells things that matter. Two minutes of correction but worth flagging for anyone going into it blind.
he caption correction pass is a real step I should have included. CapCut's accuracy on plain English is genuinely good. Anything product-specific — feature names, technical terms, your own brand name — gets mangled with confidence. I do a read-through before export on every video. The other one to watch is pacing: auto-captions sometimes chunk phrases in ways that read awkwardly on screen even when the audio is fine. Splitting them manually takes three minutes but makes a visible difference. Good addition — adding both to the workflow notes.
Curious how well this holds up for products with complex interactions — multi-step flows, conditional states, things that aren't a single clean animation. The Flowly quick-add example is elegant but it's also one input, one output. Does Claude handle the messier demos?
Honest answer: it degrades with complexity but more gracefully than I expected. Multi-step flows work if you break them into scenes and prompt each one separately, then stitch in CapCut. Where it struggles is genuinely conditional UI — states that depend on each other in ways that require real logic. The workaround is to fake the condition: script exactly what fires and when, and Claude builds that specific path rather than the full decision tree. You're not demoing a system, you're demoing a story. Most product demos are doing that anyway, they just don't admit it.
"The production quality is no longer the bottleneck" is the sentence every solo founder needed to hear in 2026.
Distribution is still the bottleneck. But at least now it's the right bottleneck to have.
The number is outstanding
Thanks — $5,000 to $0 is the number that lands but the real unlock is the workflow behind it.
My new project Emusic Tools, search it on Google if you want
This is a great example of tooling reducing production cost dramatically, but I think distribution still matters more than production quality for most early-stage SaaS products.
A lot of founders spend weeks polishing demo videos before validating whether users even care about the core problem.
Curious — have you noticed a point of diminishing returns on demo quality? Like where improving visuals further stops affecting conversions meaningfully?
You're right that distribution matters more than production quality at early stage. The workflow solves the wrong bottleneck for most founders — production was never really the problem.
On diminishing returns: yes, and it hits earlier than most people expect. "Good enough to not embarrass you" is a real threshold and it's lower than it feels. Beyond that point, another hour on the video does less than another hour finding the right subreddit or writing one honest IH post.
The honest version of this article is probably: production cost is no longer an excuse, but it was never really the excuse anyway.
What's your product?
The stunt double framing is the one. Nobody's going to say the HTML version is fake if it looks identical and performs perfectly.
And it never has a bad take. Every frame is exactly what you scripted. The real product has opinions about timing. The HTML version doesn't.