How to Make a Product Demo Video with Claude

Claude can do most of the thinking behind a product demo video: it can read your product, pick the flow worth showing and write narration that sounds like a person. With Claude Code it can also write the script that clicks through your app and records it. What it can't do on its own is voice the video, draw the zooms and captions, and put it all together. That part needs other tools.

Here's the whole route, with prompts and code you can copy, and an honest note on where it gets fiddly.

Step 1: Have Claude write the storyboard

Start in a normal Claude chat. Give it your product's URL or paste the text of your landing page, and say who the video is for. Then ask for a storyboard, not a script, so you get the clicks and the words together:

You're writing a 60-second product demo video for [product], a [one-line description].
The viewer is [who], and after watching they should [the one action you want].

Write a storyboard of 3–5 scenes. For each scene give:
- what is on screen and the exact clicks or typing, in order
- the narration for that scene

Rules:
- The first sentence says what the viewer gets, not who we are.
- Show one task from start to finish, not a feature tour.
- Use "you". After each feature, one short line on why it matters.
- 100–150 words of narration in total.
- End with one call to action: [your CTA].

Read the result out loud with a timer. If it runs past 60 seconds, ask Claude to cut a scene rather than squeeze the words.

Step 2: Prepare a test account

The recording will show everything on screen, so don't use your own account. Create a test account, fill it with realistic sample data and keep its password out of any file you share or commit.

Step 3: Ask Claude Code to record the flow

Claude Code can turn the storyboard into a Playwright script that drives a real browser and records video. Give it the storyboard and ask:

Write a Playwright script (TypeScript) that records this storyboard as a 1920x1080 video.
Use the test account from the environment variables DEMO_USER and DEMO_PASS.
Sign in before recording starts. Pause about 1.5 s after each click so the edit has room.
Use role- and label-based locators, not CSS classes.

The core of what you'll get looks like this:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const context = await browser.newContext({
  viewport: { width: 1920, height: 1080 },
  recordVideo: { dir: 'videos', size: { width: 1920, height: 1080 } },
});
const page = await context.newPage();

await page.goto('https://app.example.com');
await page.getByRole('button', { name: 'New project' }).click();
await page.waitForTimeout(1500);
await page.getByLabel('Project name').fill('Q3 launch');
await page.waitForTimeout(1500);
// …one block per scene

await context.close(); // the video is saved when the context closes
await browser.close();

Run it a few times. Expect to adjust selectors and waits until the flow plays cleanly every time.

Step 4: Voice it and add captions

Claude doesn't produce audio. Paste the narration into a text-to-speech service such as ElevenLabs and download one audio file. Then ask Claude to turn the same narration into an SRT caption file, timed to the audio.

Put them together with ffmpeg:

ffmpeg -i videos/recording.webm -i voice.mp3 \
  -vf "subtitles=captions.srt" \
  -c:v libx264 -c:a aac -shortest demo.mp4

Where the do-it-yourself route gets hard

You'll have a narrated video at this point, but probably not one you'd put on your landing page yet:

• No cursor and no zoom. Playwright's recording shows the page only. There's no visible pointer, and nothing zooms in on the click, so on a phone the action is hard to follow. Adding both means animating the video yourself, with an editor or an HTML-to-video tool such as Remotion.
• Timing. The voice and the clicks were made separately. Lining each sentence up with the moment it describes is manual work, and every script change means doing it again.
• Brittle selectors. When your UI changes, the script breaks, and someone has to fix it before the next video.
• Logins and codes. Two-factor prompts and CAPTCHAs stop a script cold.
• Sound. Music, sound effects and loudness levelling are one more round of editing.

None of this is impossible. If you make one demo a year, the route above is fine.

Or let an agent do the whole thing

Demo Tool AI is built on the same idea, with the hard parts handled. Its agent runs on Claude: it reads your product, writes the storyboard for you to approve, operates the app in a cloud browser, and then voices the narration and edits the video with a smooth cursor, auto zoom on every click, burned-in captions and levelled music. If a login needs a code, it pauses and asks you.

Paste your product's URL in the box at the top of this page to try it. Your first video is free. For the script itself, our guide on how to make a product demo video covers what to show and how long to make it.