Video to Code

Video to Code turns a video of a user interface into a build spec that Claude Code (or any coding agent) implements. Share a screen recording, a design shot or an app demo, and it returns the screens, the layout of each one, components, colours as hex values, the on-screen copy word for word, and a motion table: every animation with its element, what it does (moves, scales, fades, turns, changes colour), its delay, duration and easing as a CSS curve, and from → to values ready for CSS or SwiftUI.

For video files (an upload or a direct link), motion is measured from the frames themselves: starts and durations to about ±25 ms on 60 fps video (less exact at lower frame rates), the direction and distance of each move, scale and fades, plus key frames as images so the agent sees exact colours. For public YouTube videos, Google's Gemini reads the video through its link (nothing is downloaded) and the motion timings are marked approximate.

Tools:

• video_to_spec builds the spec for up to 30 seconds of a video, optionally with a reference implementation in React + Tailwind, SwiftUI, HTML/CSS, Vue, Flutter or Jetpack Compose.
• scan_video maps up to 5 minutes into screens and moments, marking the animations, so you can pick the part to rebuild.
• upload_video gives a private upload link, and in Claude Code a one-line curl command, for a recording on your computer.
• check_job returns a spec that took longer than 40 seconds.
• ask_video answers follow-up questions about a spec.
• my_usage and whoami show the signed-in account, its plan and what's used this month.

An account is created the first time you sign in (email or Google). The free plan includes 10 recreations and 10 scans a month; a Pro plan with 80 of each is described at videotocode.app/pricing.

Uploads and key frames are deleted after 7 days. The connector doesn't read your conversations, memory or files.