Get your real product UI into the film
How to choose, capture and reuse the product screens that carry a demo — from the running app, in Frame24's secure browser or through your coding agent — so the film shows the product working instead of describing it.
Frame24 can read your website and get the positioning, the brand and the public imagery from it. What it cannot do is sign in. For most software companies that means the single most persuasive material — the product actually doing the job — has to be handed over deliberately. This guide is about doing that well, in about ten minutes, and never having to do it again.
1. Choose the screens that carry the argument
Start from the sentence the film has to leave behind: after watching, this person should understand that [product] makes [job] [better in this specific way]. Then pick the smallest number of screens that prove it. Almost always that is three: the state before the work, the moment of the work, and the outcome.
The instinct is to choose the screens you are proudest of — the dense dashboard, the settings panel with everything in it. Those are the screens that prove effort. The ones that prove value usually look quieter: an empty inbox, a finished document, a number that has moved.
| Screen | What it is doing in the film | Common mistake |
|---|---|---|
| The before | Establishes the problem in the product's own terms | Skipping it, so the outcome has nothing to be better than |
| The action | Shows a person doing one specific thing | A tour of the interface instead of a single action |
| The outcome | Makes the result visible and legible | A success toast nobody can read at 9:16 |
| The optional fourth | One piece of proof: a number, a list, an export | Adding three more features because they exist |
2. Capture them, one of two ways
Both ways capture the same thing — the real, running interface, element by element — so pick whichever fits how you work.
Capturing product screens
- In Frame24's secure browser, when the app runs on the webEnter your product's address, sign in as you normally do and click through the one job the film is about. Each screen is captured as you reach it, along with the control you clicked to get there, so the film can follow the same path.
- With your coding agent, when you work in Claude Code, Codex or CursorConnect Frame24 over MCP and ask for the film. The agent runs the app locally with demo data and captures each screen of the journey itself. For a mobile or desktop app it renders your own components from the code — a Storybook, a web build, or a small page that mounts the real screens — and captures that instead. Nothing is redrawn.
- Name them once, reuse them foreverCaptured screens are saved to your library with a name and the workflow position they came from. Later films pull from the same library, which is why the second film takes minutes rather than the first film's half hour.
- Swap real data for invented data after the factCapture first, sanitise second. Names, emails, sums and dates can be replaced with plausible substitutes that keep the same shape, so the layout still reads correctly. A screen you refused to capture cannot be recovered later.
3. Let the frame keep its context
A common request is to zoom hard into a single control. It rarely works. A number is proof of something only while you can still see it is a number on a dashboard; a button filling the frame could belong to any product on earth. Frame24 therefore shows the whole screen by default and leans toward the subject only when a claim needs it, pushing further only when something would otherwise be illegible.
- Keep the product's own chrome — the sidebar and the header are what make it recognisably your product.
- Let the cursor travel across a visible interface rather than appearing inside a crop of one control.
- If text on a screen is too small to read at 9:16, rewrite the screen rather than zooming until the context is gone.
4. What to check before you render
Watch the draft once with the sound off. You are checking three things: that the product is recognisable within the first three seconds, that the action reads as an action rather than a slideshow of states, and that the outcome is on screen long enough to be read twice. Everything else — pacing, music, a line of narration — is a sentence-long edit afterwards.
Questions people ask
Can Frame24 see my product if it is behind a login?
Not from a public URL. A crawler stops at the sign-in page, which is why you sign in yourself, once, in Frame24's secure browser — your password goes only to your product — or your coding agent captures the app running locally. Nothing asks you for your password.
How many product screens do I need for a demo video?
Three or four for a 30-second film, five or six for a 60-second one. More than that and the film becomes a tour, which is the most common reason a demo stops being watched.
Can I use screenshots or a screen recording instead?
No. Since October 2026 Frame24 only uses screens captured from the running product. A screenshot is one flat picture, so a film can only move it and draw on it; a captured screen is made of the product's real elements, so the film can lift a card, count a figure up or type into a field — while still showing exactly your product. For a mobile or desktop app, a coding agent renders your own components from the code in a browser and captures that.
Can I use screens with real customer data in them?
You can capture them, and you should — a discarded screen is gone, while real data can be swapped for invented data afterwards. Keep the shape (a five-figure sum stays five figures) so the layout still reads correctly.
Do I have to capture screens again for every video?
No. Captured screens are saved to your library and reused across films, which is what makes the second and third film so much faster than the first.
Keep reading
How to make a product demo video
The best demo is not a tour. It is proof that one important job becomes easier. Here is how to script and show that proof.
Best software demo video tools for SaaS in 2026, and how to choose
The value in software is usually invisible. That single fact rules out most of the tool categories.
How to edit a screen recording with AI
AI can accelerate the mechanical edit, but it still needs a clear job and a review pass. This workflow keeps the result accurate and human.