# AI app builder demo video: show the prompt, then the product > How to make a demo or launch video for an AI app builder, website builder or no-code tool: a 30 second structure, how to write the prompt on screen, which screens to show, and the sizes for Product Hunt, X and short-form video. Canonical: https://filmagic.app/blog/ai-app-builder-demo-video Last updated: 2026-10-30 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. > **The short version:** show finished results first, open one of them up, then type the prompt into your product and let the preview change. End on one call to action. 20 to 30 seconds is enough. ## 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: 1. **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. 2. **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](https://filmagic.app/blog/launch-video-length-by-platform) for each platform's limits. ## Make it with Blue Hour in Filmagic [Blue Hour](https://filmagic.app/templates/bluehour) 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: 1. Paste your URL on [Filmagic](https://filmagic.app/ai-app-builder-launch-video). It reads your name, lines, colours and fonts. 2. Add your result screenshots and your product window. 3. 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. 4. Edit any line in the side panel: the two strengths, the screen names, the prompt and its button, and the call to action. 5. 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. ## Related - [Product ad video templates: Product Drop, Shop Promo or Sale Offer?](https://filmagic.app/blog/product-ad-video-templates) - [Product video specs for Shopify, Instagram, TikTok and Amazon](https://filmagic.app/blog/product-video-specs) - [How to make a Shopify product video from your product page](https://filmagic.app/blog/shopify-product-video)