On this page
An AI app builder sells a moment: someone types what they want, and a working product appears. That moment is hard to capture in a screenshot and easy to lose in a long screen recording. A short demo video can show it in under thirty seconds, if it's cut in the right order.
This guide is for teams launching an AI app builder, a website builder, a no-code platform or any tool whose product is "describe it and get it". It covers what to show, a structure you can copy, how to write the prompt that appears on screen, and how to export one edit for every channel.
Why the order matters
Most builder demos start in the empty editor. It feels logical, since that's where a user starts, but viewers have no reason to care yet. An empty canvas looks the same in every tool.
Lead with the output instead. A wall of finished pages, apps or templates answers "what can I make with this?" before the viewer asks. Once they want one of those results, the prompt that produced it becomes the interesting part.
A 30 second structure
| Time | Scene | What it shows |
|---|---|---|
| 0 to 3 s | Introduction | Your name, with your screens around it |
| 3 to 6 s | Results | A wall of finished screens, then one up close with two short lines on what it does |
| 6 to 11 s | One result, opened | A click opens one screen in a browser and the page scrolls |
| 11 to 14 s | Variety | Three more results, each named |
| 14 to 20 s | The prompt | A short request typed into a prompt box |
| 20 to 24 s | Your product at work | The prompt in your interface while the preview changes |
| 24 to 30 s | Close | One closing line, then your call to action and address |
For a 20 second cut, keep the introduction, the results, the opened result, the prompt, your product window and the call to action.
Write the prompt like a user would
The prompt is the one line every viewer reads closely, so it has to sound real.
- Specific beats grand. "Make this a store for handmade ceramics and switch to a warm palette" is believable. "Build me anything" isn't.
- Under 90 characters. It has to be readable while it types. One or two lines in the box.
- Match the screen that follows. If the prompt asks for a store, the preview should show a store.
- No invented results. Show what your tool actually made. If you tidied the output by hand, say so or pick a different example.
A short typed line before the prompt box works well as a bridge, such as "Make it yours", typed and erased.
Which screens to show
You need two kinds of screenshot:
- Results. Pages, apps or templates made with your tool. Six to twelve gives a wall, and one tall full-page screenshot scrolls well inside a browser window.
- Your product window. The interface where the prompt goes, plus two or three preview states to change through.
Use screens you have the right to show: your own templates and starter projects, or work your users agreed to share.
Sizes for each channel
Make one edit and export each shape from it:
| Channel | Shape | Length |
|---|---|---|
| Product Hunt gallery and your homepage | 16:9 | 20 to 30 s |
| X and LinkedIn | 16:9 or 1:1 | 20 to 30 s |
| Reels, TikTok and Shorts | 9:16 | about 20 s |
See launch video length by platform for each platform's limits.
Make it with Blue Hour in Filmagic
Blue Hour is built on this structure. It runs on a deep ground lit from below in your brand colour, and every scene is filled from your product:
- Paste your URL on Filmagic. It reads your name, lines, colours and fonts.
- Add your result screenshots and your product window.
- Pick Blue Hour. It builds the introduction, the wall of results, the browser, the named screens, the typed prompt, your product window and the call to action.
- Edit any line in the side panel: the two strengths, the screen names, the prompt and its button, and the call to action.
- Export 16:9, 9:16 or 1:1, at 20 or 30 seconds.
Nothing is made up: every screen is one you added or one Filmagic captured from your site, and every line is yours to change.
Frequently asked questions
How long should an AI app builder demo video be?
20 to 30 seconds for a launch, on Product Hunt, X and your homepage. A longer walkthrough belongs on your docs or YouTube, after people are interested.
Should I show the prompt or the result first?
The result. A finished page tells viewers what's possible; the prompt then explains how they get there.
Do I need a voiceover?
No. Most people watch launch videos muted in a feed, so the typed prompt and short on-screen lines carry the story. Add a voiceover for your homepage if you like.
My tool has no prompt box. Does this still work?
Yes. Replace the prompt with the action your users take, such as picking a template, connecting a source or searching. The order stays the same: result, action, your product at work, call to action.
