Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In

Product demo video: how to make one with an AI agent

What a product demo video is, the four-part structure, store limits for app previews, recording vs rendering your UI, and how to make one with an agent skill.

For
Founders and product teams who need a demo of a SaaS or app
Written for
Claude CodeCodexCursorGitHub CopilotGemini CLIOpenCodeAny agent that reads SKILL.md folders
Time
9 min read · updated Nov 10, 2026

The short answer

  1. A product demo video shows your product being used: one problem, the clicks that solve it, the result and where to go next. Keep it to one task, and make it readable with the sound off, because app stores autoplay previews muted.
  2. You can screen-record the real app or render the interface with code. App Store previews must be screen captures of the app; for your site, social posts and launch pages, an agent with a video skill can render a scripted demo to MP4 from your screenshots or a short brief.
Jump to:Product demo video vs launch film vs explainerThe structure of a product demo video that worksHow long a demo video can be, by channelRecord the real UI, or render it with code

A product demo video is the short film on a landing page, in a store listing or in an onboarding email that shows the product doing its job. Searchers usually find lists of example videos and of demo video maker tools. This guide covers the decisions behind them instead: what to show, how long each channel allows, whether to record or render, and how to make one with a coding agent such as Claude Code, Codex or Cursor.

Product demo video vs launch film vs explainer

Three videos a product team often confuses
VideoAnswersShows
Product demo videoHow do I use it?The real interface: the clicks, the screens and the result, in order
Launch filmWhy look at it now?A hook, a few features and a date or a link, cut for a feed
ExplainerHow does it work?The idea or the system behind it, often without the interface

A demo can be the longest of the three, because the viewer already cares. For the launch film, see Make a product launch video with an AI agent; for the explainer, How to make an explainer video with code and an AI agent.

The structure of a product demo video that works

  1. Step 1: The problem, in one line

    Name the job your user is trying to do, in their words: “Triage 40 new issues before standup”. One line on a title card is enough. If you need a paragraph, you are making an explainer.

  2. Step 2: The product in use

    The real steps in the real order: click, type, pick, confirm. One task, three to five steps. Cut every step that is setup rather than the job itself, and show each action long enough to read the screen it changes.

  3. Step 3: One outcome

    End the task on a visible result: the issue assigned, the report sent, the number that changed. One result reads better than a list of features after it.

  4. Step 4: The call to action

    One URL or one button on the last card, the same one the page around the video asks for. Hold it long enough to read.

How long a demo video can be, by channel

Most channels don’t set an ideal length, but the stores set hard limits, and both autoplay without sound. These are the rules from each platform’s own pages, as of 11 November 2026:

Length and format rules from the platforms’ own pages
Where it playsWhat the platform says
App Store app preview15 to 30 seconds; up to three per device size and language; .mov, .m4v or .mp4; at most 30 fps and 500MB. Accepted sizes depend on the device, such as 886 × 1920 for the large iPhones. Previews autoplay with the sound muted.
Google Play preview videoOne YouTube URL, public or unlisted, with ads turned off. It may autoplay muted for up to 30 seconds. Google asks you to show the real app within the first 10 seconds and to keep at least 80% of the video representative of the user experience.
YouTube ShortsSquare or vertical videos up to three minutes long count as Shorts.
Product HuntA YouTube link in the launch form, with no advice on length; see Product Hunt launch video.
Your own landing pageNo limit but attention. Show one task; a longer tour belongs in your docs.

Record the real UI, or render it with code

Screen recording

  • Shows the product exactly as it is, and is required for App Store previews
  • Fast to make once: open the app and record
  • Picks up stray notifications, cursor wobble, loading spinners and real customer data unless you prepare a clean demo account
  • Has to be recorded again after every UI change

Rendered from code

  • A scripted camera, cursor and typing, so every take is the same and text stays sharp at any zoom
  • Built from your screenshots or an HTML mock of your screen, so it shows what you write in the brief, with made-up data
  • A UI change means editing the brief and rendering again
  • A reconstruction: it is only as true as the screens you give it, and stores that want screen captures won’t take it

Many teams do both: a short screen recording for the store, and a rendered demo for the landing page, social posts and launch day, where a steady camera and readable captions matter more than a live capture.

How to make a product demo video with an agent skill

A video skill is a SKILL.md folder with a template and scripts. Agents that read that format load it, write a brief from your words, and render the MP4 on your machine with HyperFrames, which draws each frame in a headless browser. Lookbk’s demo skills call no AI model; the scenes come from your brief and your screens.

  1. Step 1: Pick a skill for your kind of product

    Demo skills by product type
    Your productSkillWhat you get
    A web app, shown task by taskZoom Cam Walkthrough40–60 s, 16:9: a camera that zooms to each action, a cursor that clicks and types, numbered chapters
    A web app with a few headline featuresGlass UI Tour Film27.5 or 32.5 s, 16:9: liquid-glass widgets that morph into panels of your UI
    A dashboard or analytics productDashboard Flow Film29 s, 16:9: tiles, rolling numbers, a streaming chart and an alert, redrawn from your numbers
    An onboarding or sign-up flowSign-up Flow Film24–26 s, 16:9 and 9:16 from one brief
    A mobile app, for social and your siteApp Preview Film25 s, 1080 × 1920: a phone that plays your screenshots with taps, swipes and scrolls
    A CLI, SDK or APITerminal Launch Film36 s, 16:9: your command runs, the product opens, a diff and an API call follow

  2. Step 2: Install it

    Terminal
    curl -fsSL https://lookbk.dev/cli.js | node - add zoom-cam-walkthrough

    Or paste the install prompt from the skill’s page. Install a skill in any agent has the details for each agent. The demo films need Node.js 22 or newer and FFmpeg.

  3. Step 3: Give the agent your four parts

    Ask in plain words, with the problem, the steps, the outcome and the end URL. Point it at your site or give it screenshots. Zoom Cam Walkthrough can draw your screen as a live HTML mock that the film types into, or point at regions of your screenshots.

    Your agent
    Make a Zoom Cam walkthrough of our issue tracker: four chapters
(new issue with C, assign from the command palette, drag on the board,
the cycle chart) and an end card with tally.example.

  4. Step 4: Check the stills before the final render

    The skill’s checker lists long captions and missing targets in the brief. Then look at frames from the middle of each step, not just the ends, where a caption can cover what the step is about:

    Terminal
    node <skill>/scripts/make-film.mjs --brief brief.json --out my-film --stills
npx --yes hyperframes@0.8.192 snapshot my-film --at 6,12,20,30,40 --no-end

  5. Step 5: Render, then place it

    The MP4 renders on your machine with its own soundtrack, written by code and free to use. Put it on your landing page, upload it to YouTube for Product Hunt or Google Play, and keep the brief: the next UI change is an edit and a new render.

Zoom Cam Walkthrough: an example of what it makes
video
Zoom Cam WalkthroughClaude CodeCodexCursor+3 more agents
Glass UI Tour Film: an example of what it makes
video
Glass UI Tour FilmClaude CodeCodexCursor+3 more agents
Dashboard Flow Film: an example of what it makes
video
Dashboard Flow FilmClaude CodeCodexCursor+3 more agents
Sign-up Flow Film: an example of what it makes
video
Sign-up Flow FilmClaude CodeCodexCursor+3 more agents
App Preview Film: an example of what it makes
video
App Preview FilmClaude CodeCodexCursor+3 more agents
Terminal Launch Film: an example of what it makes
video
Terminal Launch FilmClaude CodeCodexCursor+3 more agents

A demo inside your hero section

Sometimes the demo belongs in the page itself rather than in a video player. Phone Screen Showcase, which is free, builds a hero where one phone walks through 3 to 5 app screens tap by tap as the visitor scrolls, and its recorder also writes a 1920 × 1080 preview video. Cursor Tour Hero puts a scripted cursor in a product window beside your headline and records a 1080p MP4 of the same run. Both draw a designed stand-in of your interface, not a recording.

For more picks with the films they rendered, see product demo video examples.

Before you publish

Product demo video checklist

Common questions

How long should a product demo video be?
As long as one task takes to show, and within the channel’s limit. App Store previews must run 15 to 30 seconds, and Google Play may autoplay only the first 30 seconds. Lookbk’s demo films run from 24 to 60 seconds.
What is the difference between a product demo video and an app promo video?
A demo shows how the product is used, step by step. An app promo sells the app with its best moments and a download button, like App Preview Film. Many app promos are short demos with a stronger ending.
Can I use a rendered or animated video as an App Store app preview?
No. Apple’s App Review Guideline 2.3.4 says previews may only use video screen captures of the app itself, though you can add narration and text overlays. Use rendered films on your site, social posts and launch pages.
Do I need to screen-record my app to make a SaaS demo video?
Not for your own site or social posts. A video skill can render the demo from your screenshots or an HTML mock of your screen, with a scripted cursor and camera, so there is nothing to re-record after a UI change.
Should a demo video have a voice-over?
It should work without one, because the stores autoplay previews muted. Lookbk’s demo films use captions and an original soundtrack; they don’t record or generate voice, so add a voice track in an editor if you want one.

Sources

What this guide says about other companies’ tools comes from their own documentation, checked on Nov 10, 2026.

Did this guide help?

Read next

All guides

Make a product launch video with an AI agent

How agents make launch films from HTML, then a walkthrough from brief to MP4: pick a skill, capture real screens, approve a storyboard, fit a track, render.

Product Hunt launch video: what it needs and how to make one

The Product Hunt launch form takes an optional video as a YouTube link, two gallery images and a square thumbnail. How to make each with a coding agent.

How to make an explainer video with code and an AI agent

Script in scenes, storyboard, pick a style, and have a coding agent render your explainer video to MP4 from HTML. Plus when a web tool is the better choice.

How to make videos with Claude Code

Three ways to make MP4 videos with Claude Code: Remotion’s skills, HyperFrames, or a ready-made video skill. Setup, a first render and fixes.

See a skill’s result before you install it.

Every skill page shows what it makes, what it needs and which agents can run it.

Browse skills See pricing