App tutorials · music-cut · landscape 16:9
How to make an app tutorial video
The problem with tutorial videos is that nobody watches a tutorial for an app they do not already use. The fix is to wrap the walkthrough in a reason to care: open as a text thread where someone hits a real problem and gets told about your app, fold the thread into a phone, walk the key screens with bold two-line callouts, then return to the conversation for the payoff. baz ships this as the SMS Story App Tutorial skill — 30 seconds, landscape, every cut a match cut on the beat.
The shortcut: run a skill instead of starting from scratch
A skill is a context file that teaches an AI agent one specific video style — its structure, pacing, typography, motion grammar and sound design. Hand an agent the skill plus your product, and it rebuilds that video for you. The steps below are what the SMS Story App Tutorial skill already encodes, so you can follow them by hand or let the skill carry them.
baz is a library of video skills: context files that teach an AI agent a specific motion-graphics style, so it can rebuild that video for your product, with your brand, from your inputs. Run a skill inside your own coding agent — Claude Code, Codex — or directly in the baz editor.
What you need before you start
Required
- Your app icon
- Your brand wordmark
- A screenshot of your primary product surface
Makes it materially better
- Screenshots of each screen in the flow you are teaching
- Your App Store listing and website copy
- A described user flow — the actual sequence a new user follows
How to make an app tutorial video: step by step
Write the text thread before the tutorial
The conversation is the hook and it has to feel real. Someone has a problem, a friend replies with the app. Two or three messages, written the way people actually text — not as a scripted testimonial.
Make the problem one your app genuinely solves in one flow
The thread sets an expectation that the walkthrough must pay off. If the problem is broad and the demo only addresses part of it, the return to the thread lands flat.
Fold the thread into the phone
The transition from conversation to app is the structural hinge — the message becomes the device. Done as a match cut it feels inevitable; done as a dissolve it feels like two videos stitched together.
Use two-line callouts, not paragraphs
Each screen gets a bold two-line callout naming what is happening. Two lines is enough to orient and short enough to read at the pace the cuts are moving.
Return to the thread for the payoff
Close the loop by going back to the conversation with the problem solved. This is what makes it a story rather than a demo, and it is the beat most tutorial videos are missing.
Re-derive the bubble timings from your own track
The message bubbles land on percussive hits. If you change the music, re-derive those onsets rather than scaling the existing frame numbers proportionally — stretching drifts the bubbles off the beat.
What the finished video actually contains
Approximate timings for a ~30 seconds cut. Treat them as a shape to hit, not a spec — the exact durations shift with your script and your music.
| Time | Beat | What is on screen |
|---|---|---|
| 0:00–0:07 | The thread | Text bubbles landing on percussive hits: a problem, then the recommendation. |
| 0:07–0:10 | Fold to phone | The conversation becomes the device — the structural match cut. |
| 0:10–0:14 | App store entry | The listing, then the first launch. |
| 0:14–0:24 | Screen walkthrough | Primary screens with bold two-line callouts, in-progress stages, confirmation. |
| 0:24–0:28 | Payoff return | Back to the thread, problem solved. |
| 0:28–0:30 | Brand close | App icon and wordmark. |
Mistakes that cost you the view
Generic fades at the seams
Do this instead: Use a named transition move at every seam. A dissolve in a beat-cut piece announces that the edit ran out of ideas.
Proportionally stretching bubble timings for a new track
Do this instead: Re-derive from the new beat grid. Scaled timings put every bubble slightly off its hit, which reads as lag.
A blur transition between mismatched brightness
Do this instead: Use a whip when cutting between a white screen and a dark one. Blur cannot conceal a large luma jump, and the cut flashes.
Writing the thread like ad copy
Do this instead: Write it like texting. The moment the conversation sounds scripted, the framing device stops working and you are back to a plain tutorial.
Never returning to the thread
Do this instead: Close the loop. Without the return, the opening was decoration rather than structure.
Run it from your own agent
Skills are designed to run inside a terminal agent like Claude Code or Codex, against a project you control. The same skill produces the same style whether it runs in your agent or in the baz editor.
npm install -g bazaar.it@latest
# Install this skill into your agent (Claude Code, Codex or Cursor)
baz skill add sms-story-app-tutorial-promo
baz project create --name "SMS Story App Tutorial for my product"
baz prompt "make an app tutorial video" --stream-json
baz review --summary --json
baz export start --wait --format mp4 --jsonOperations draw from a prepaid balance. See the CLI reference for the full command set.
Common questions
Is 30 seconds enough to teach a flow?
It is enough to teach one flow and make someone want to try it. A tutorial video is an invitation, not documentation — the goal is a download, and the app itself does the actual teaching.
Does this work for a web app?
The phone fold is built around a mobile app, but the structure — conversation, problem, walkthrough, return — transfers. Replace the device fold with a browser and keep everything else.
Do I need video editing experience?
No. The skill carries the editing decisions — shot order, pacing, type treatment, transitions, sound design. You supply the raw material and the facts about your product; the agent assembles the cut. You review it and ask for changes in plain language.
Can I run this in my own coding agent instead of the baz editor?
Yes. Skills are designed to be run from a terminal agent like Claude Code, Codex or Cursor. Install the CLI with `npm install -g bazaar.it@latest`, then `baz skill add <slug>` to pull the skill into your agent. The same skill produces the same style whether it runs in your agent or in the baz editor.
What does it cost?
baz bills against a prepaid dollar balance rather than a seat subscription — you top the balance up and each operation (generation, voiceover, render, export) draws a listed amount from it. There is no per-seat fee to make a video, and the price of each operation is published.
Can I change the video after it renders?
Yes, and this is the point of doing it as code rather than as a flat render. Every scene is a real component you can edit — ask the agent to re-time a beat, swap a screenshot, rewrite a line, or change the accent colour, and only that part rebuilds. You are not re-rendering from scratch each time.
Will every video from this skill look the same?
The grammar is the same — that is what makes it a skill and not a template. The content is not: your brand colours, typography, screenshots, copy and data all come from your inputs. Reusing one skill across a series is a feature, because episode three lands in the same visual language as episode one instead of being rebuilt from scratch.
Related guides
Pick a skill. Get the video.
Run the SMS Story App Tutorial skill in your own coding agent, or in the baz editor. Usage comes out of a balance you top up, with a listed price per operation — no seat subscription to make a video.