How I used Claude Code to reverse-engineer a SaaS promo video and build my own — frame by frame

Who am I

I'm a solo founder building DevOps Agents — AI agents that deploy and manage your production infrastructure from a chat interface. You give it a GitHub repo, tell it where to deploy (AWS, DigitalOcean, any VPS), and the agents handle the rest — analyzing your repo, planning the architecture, running the deployment commands, and validating everything works. All with your approval at every step.

I've been building it solo for the past few months. Bootstrapped. Wearing every hat — backend, frontend, infra, and now apparently, video production.

I thought I needed to outsource my intro video. Turns out, doing it myself was better.

A few weeks ago I needed an intro video for my landing page.

As I don't have prior video creation experience, I thought it would be smart to outsource it. Went to Fiverr. Went to Upwork. Spent days filtering profiles, comparing portfolios, checking prices. Some were too expensive for a bootstrapped product. Some had the wrong style. Some had 3-week turnarounds.

After a few days of this, I still had nothing.

The "what if" moment

Then a thought hit me: what if claude code could just... make it?

I didn't have a plan. I didn't have a tool in mind. I opened Claude Code and typed something like: "I need a promo video for my SaaS. Are there any MCP servers for After Effects? Or any way you can create videos programmatically?"

Claude Code searched around and came back with Remotion — a React framework where every video frame is just a React component. I'd never heard of it.

But I know React. Claude Code knows React. So we went for it.

(For context — Claude Code was running on its default model, Claude Opus 4.6.)

Step 1: Reverse-engineering a reference video

I found a SaaS promo on YouTube — clean dark theme, animated UI mockups, smooth transitions. Exactly the vibe I wanted. But instead of just bookmarking it for "inspiration," I decided to systematically reverse-engineer it.

I gave Claude Code the YouTube link and said: "Download this. Extract the frames. Analyze it."

It handled everything. Downloaded the video with yt-dlp. Extracted 177 frames at 2fps with ffmpeg. Then it produced a 160-line analysis document.

Not a vague summary. A full breakdown:

• Every scene with exact timestamps — "Act 1: Hook (0-7s), Act 2: Value Prop (7-15s)..."
• The design language — fonts, colors, spacing, animation patterns
• How transitions sync with audio beats
• Composition rules — "never more than 4-5 words per text card," "generous padding," "text cards hold 2-3 seconds"

It basically reverse-engineered the entire visual language of a professional promo video into a structured, reusable document.

That alone was worth the experiment.

Step 2: From analysis to a production plan

Next I said: "Now plan a similar video for DevOps Agents."

Claude Code created a 415-line plan document. Not a generic outline — a detailed production blueprint:

• 9 scenes, each mapped to specific frame ranges
• A comparison table: reference style vs our adaptation
• Exact animation timing for every element
• A phased build order

The plan adapted the reference flow to tell our product's story: user types "Deploy my GitHub app to Kubernetes" → agent analyzes requirements → plans architecture → executes deployment → success.

At this point I hadn't written a single line of code. But I had a complete creative direction grounded in something that already worked.

Step 3: The autonomous build loop (this surprised me)

Here's where it got wild.

I told Claude Code: "Build each scene, render the frames, review them yourself, fix whatever looks off, and keep looping until you think it's good enough."

And it did.

The cycle looked like this:

1. Write a React component for a scene
2. Render still frames at key moments
3. Analyze its own output — "spacing is too tight here," "that gradient needs to be more subtle," "stagger delay should be 15 frames, not 10"
4. Fix the code
5. Re-render
6. Analyze again
7. Repeat

I wasn't reviewing each iteration. Claude Code was its own designer, its own QA, its own creative director — building, rendering, critiquing, fixing. Dozens of cycles per scene. Spring physics for bouncy entrances. Typewriter character timing. Smooth terminal scrolling interpolated across 137 frames.

I'd check in occasionally, give a high-level note, and let it keep going.

The result: 2 hours, zero video editing

• 8 scenes with smooth transitions — typing effects, animated progress bars, terminal output, gradient animations
• 42 seconds at 1080p, 30fps
• Background music synced to scene transitions
• All React components. No After Effects. No Premiere. No video editing software touched.

Total time from "can you make a video?" to rendered MP4: about 2 hours.

Here's the final video:

Final thoughts

It has "Code" in the name, but it keeps surprising me with what it can do beyond coding. Video production wasn't something I'd ever think to throw at it. But here we are — it found the tool, analyzed the reference, planned the scenes, built the components, reviewed its own output, and iterated until it was good.

I keep discovering new things in my journey building devopsagents. I'm planning to share all my discoveries and experiences building DevOps Agents with Claude Code and other AI tools — follow me on Twitter/X if you're interested in that kind of thing.

Comments

[Hamza KONTE]

This is a fantastic use of Claude Code — using AI to reverse-engineer visual patterns and reconstruct them programmatically is exactly the kind of workflow that justifies these tools.

One thing I'd add: for complex multi-step prompting like what you're doing (analyzing frames, extracting patterns, generating code), prompt structure matters a lot. I built flompt (flompt.dev) — a free visual prompt builder that structures prompts into semantic blocks (role, objective, context, constraints, chain-of-thought, output format, etc.) and compiles to Claude-optimized XML. Claude specifically handles structured XML prompts very well. There's even an MCP server: claude mcp add flompt https://flompt.dev/mcp/ — so your Claude Code agents can decompose/compile prompts natively.

Impressive project — the frame-by-frame decomposition approach is clever!

[jeswin cyriac]

Thanks Hamza!
Does optimising to xml makes sense now as these llms are good at figuring out things from natural language itself?

[Hamza KONTE]

Good question. Yes, modern LLMs handle many formats well, but XML still has real advantages: semantic tags make the structure machine-readable for post-processing, Claude in particular was trained heavily on XML and handles it natively, and explicit tags give you a reliable parsing surface for agent pipelines. It's less about "the model needs XML to understand" and more about the downstream tooling benefit of a consistent, parseable structure.