Your next UI is already on film video.
video-to-ui watches a UI screen recording frame by frame — a Figma walkthrough, an app demo, a marketing clip — and hands back a design report, concrete code edits, or a runnable React app. Motion included: transitions, hover states, and timing that screenshots never survive.
$ npx skills add mmohajer9/video-to-ui --skill video-to-ui --global
frames 000–012 · why
A screenshot can't hold a transition.
Claude doesn't take video as input, and pasting screenshots one at a time loses context between frames — and everything that happens between them. So this skill extracts every frame, fans them out to parallel subagents, and synthesizes one coherent analysis. The dynamic layer lands in the report too, not just the static layout.
Screenshots capture
- ✓Layout, palette, typography
- ✕Transitions between screens
- ✕Micro-animations
- ✕Scroll-triggered reveals
- ✕Hover and active states
- ✕Timing and pacing
A recording captures
- ✓Layout, palette, typography
- ✓Transitions between screens
- ✓Micro-animations
- ✓Scroll-triggered reveals
- ✓Hover and active states
- ✓Timing and pacing
frames 013–048 · modes
One recording, four exits.
Point the skill at a video and pick a deliverable. Modes 3 and 4 build on mode 2's analysis and act on it differently.
mode 1 fastest
Extract frames
A folder of PNGs pulled from the video. No analysis, no synthesis — the raw stills, ready for any other tool.
frames/frame_00001.png … frame_00120.png
mode 2 the report
Analyze the design
A markdown write-up of the design system on screen — palette in hex, type scale, spacing rhythm, button and card styles — plus a chronological inventory of distinct screens.
design-analysis.md · screens/screen_01_hero.png
mode 3 human-approved
Compare against your code
Mode 2, plus a per-file list of concrete edits to bring your components closer to the video. Every entry cites the frames that justify it, and nothing is written until you approve.
replace --button-radius 4px → 8px · Button.tsx · frame 014
mode 4 runnable
Scaffold a React app
Mode 2, plus a working Vite + React + TypeScript + Tailwind + Framer Motion project — one component per screen, tokens from the analysis, a mock API that mimics the video's timing.
cd app && npm install && npm run dev
inclusion: 1 ⊂ 2 ⊂ 3 · 1 ⊂ 2 ⊂ 4
frames 049–096 · demos
The screening room.
Three real runs of mode 4. The recording on the left went in; the running React scaffold on the right came out.
All source files live in the repo at assets/demos/.
Full walkthrough — recording to running app
A soup-to-nuts run on the Stripe recording: drop in the video, pick mode 4, end up with a runnable React app. ~22 minutes of real work, compressed 4× to about 5 minutes. No audio.
demo-full-4x.mp4 · 05:12mp4 ↓
frames 097–110 · pipeline
Frames in, context out.
The main agent never reads a single raw frame. Disposable subagents do the looking in parallel and write compact reports; the main agent reads only those. That 2-tier walk keeps context small on long recordings, so cost scales with distinct screens — not total frames.
00:01 · extract
ffmpeg pulls the frames
Fixed-fps or scene-detection extraction via extract-frames.sh, rate scaled to video length. ≤120 frames proceeds silently.
00:02 · fan out
Parallel batch subagents
Batches of 10 frames go to disposable subagents that each write a compact batch_NNN.md report to disk, then vanish.
00:03 · synthesize
One coherent analysis
The reports merge into a design system — palette, type scale, spacing, radii, motion language — plus a screen inventory with frame ranges.
00:04 · exit
Your pick of deliverable
Stop at the report, produce a frame-cited edit list for your code, or hand it all to a scaffolder subagent that writes the React app in one pass.
The 2-tier subagent walk is adapted from fabriqaai/ffmpeg-analyse-video-skill. In mode 4, if the frontend-design skill is installed, the scaffolder reads it first — the video supplies the signal, frontend-design supplies the craftsmanship.
frames 111–120 · install
Rolling in one command.
Install, restart Claude Code, then point the skill at a recording — it asks which mode to run and where to put the output. It also auto-triggers on natural language like “scaffold a working frontend app from this video.”
skills.sh CLI
recommendedOne command via the open-source vercel-labs/skills CLI. Uninstall later with npx skills rm video-to-ui.
$ npx skills add mmohajer9/video-to-ui --skill video-to-ui --global
> /video-to-ui ~/Downloads/your-recording.mp4
Plugin marketplace
in-appStraight from inside Claude Code, no extra tooling.
> /plugin marketplace add mmohajer9/video-to-ui
> /plugin install video-to-ui@video-to-ui
Manual drop-in
no nodeClone and symlink — no Node, no marketplace command.
$ git clone https://github.com/mmohajer9/video-to-ui.git ~/src/video-to-ui && ln -s ~/src/video-to-ui/skills/video-to-ui ~/.claude/skills/video-to-ui