| name | video-to-prompt |
| license | Apache-2.0 |
| description | Turns a UI screen recording, product demo, or interface animation into a structured natural-language Design_Brief covering layout, components, text_content, spacing, colors, typography, states, motion, atmosphere, interactions, images, and target_stack. Use when someone shares a video or recording of a UI and wants to rebuild or recreate it as frontend code, for example "recreate this screen recording" or "build the UI from this demo video". Feeds the brief into generate-and-verify. |
| compatibility | Requires a vision-capable agent that can watch video or read it frame by frame. |
| metadata | {"author":"mihneaptu","version":"0.1.0-beta.6"} |
video-to-prompt
Turn a video of an interface into a natural-language Design_Brief, ready to hand to
generate-and-verify.
Requirements
Must be able to watch video (or read it frame by frame). If not, say so and stop.
Why this exists
A video shows not just layout but motion: what animates, in what order things appear, how the
UI reacts. Capturing that as design language lets a code model rebuild both the look and the
behavior. Keep the brief about what it looks and behaves like, never about how to code it.
Steps
- Watch the video and identify the interface and how it behaves over time. For any frame
whose text or detail is too small to read with certainty, pause and inspect that frame
closely before writing it down. Only after actually looking closer may something be
marked
illegible in source.
- Identify a key frame for the visual compare lens: a representative still (e.g. hero
at rest, modal open, final settled state). Note its timestamp in
notes and save or
export it if the host can, so generate-and-verify can compare layout against a still
image while the motion lens uses the clip.
- Write a
Design_Brief in labeled sections, following
../_shared/design-brief-format.md:
layout, components, text_content, spacing, colors, typography, states,
motion, atmosphere, interactions, images, notes.
- Video is where
motion, atmosphere, and interactions matter most; populate them
fully. Use states only for classical component states (normal/hover/focus/active/disabled).
- For lists, menus, or repeated rows whose items differ, enumerate per-item attributes
individually (chevrons, shortcuts, icons), same rule as
image-to-prompt.
- Describe in plain design language, never code.
- Recommend a
target_stack: simple/static → HTML/CSS; interactive/animated →
React+Tailwind. If the user named a stack, use theirs.
Output
A complete Design_Brief with source_type: video and inspiration_only: false. Hand it
to generate-and-verify.
Handoff gate: run every check in
../_shared/handoff-gates.md before handing off, including
the video key-frame gate.
If the video cannot be read
If the video is missing, unreadable, or an unsupported format, report that clearly and stop.
