ui-tutorial-video

---
name: ui-tutorial-video
description: Make a step-by-step video showing how a real software feature works. Use for onboarding, help videos, walkthroughs, and narrated interface tutorials.
---

# UI tutorial video

Teach the real path a person takes through the feature. The viewer should see how to start it, what to do next, and what success looks like.

## Verify the flow

Inspect the current app and its help text. Write down the trigger, each required decision, the resulting state, and any choice that changes the outcome. Use the UI's actual words and placement. If a privacy or billing setting is part of the flow, describe exactly what that setting changes.

## Script what happens

Open with the problem or desired result, show the feature paying it off, then explain the steps over the action. Use one short spoken line or caption per decision. Plain action labels work better than decorative step numbers: “CHOOSE A FILE”, “PRESS RECORD”, “REVIEW THE RESULT”.

Plan a shot for each step with time, screen state, pointer position, camera focus, and narration. A continuous screen and smooth camera can help the viewer keep their bearings. Cut only when a transition removes waiting or shows a new place more clearly.

## Show the actual interface

- Keep panels, overlays, menus, and notifications where the app places them.
- Show the trigger and resulting overlay together when both are needed to understand the action.
- Move the pointer to the exact target, hold it through the press, and verify the UI responds.
- Frame the subject without covering it with captions, arrows, or decorative effects.
- If zooming into a captured screen makes the UI unreadable, capture at higher resolution or build a faithful frame-based port from the app source.

Check stills before rendering and the final video after rendering. Confirm every click, label, and shortcut against the current app, inspect each aspect ratio, and verify that the narration describes the state visible at that moment.