Claude Code is my media team. And it has blown me away when creating app overview videos.

This year, I knew I had to go all-out on marketing. It is a new area for a techie like me, but a core part of a good app is being able to understand it from the store page. My apps are simple, but also a little complex — so I wanted everything based around good visuals.

I considered Final Cut Pro. Then a little experiment from the past popped into my head: Remotion.

What Is Remotion?

Remotion is a framework that lets you generate videos from code. You write React components, define animations and transitions, and render them into video files. It is essentially video editing, but as a programming problem instead of a timeline problem.

That matters because code is the language all these AI assistants speak. If your media is code, then AI can help you build, iterate, and maintain it.

The First Attempt: Playwright + AI Vision

My first workflow was to use the Playwright MCP to do this loop:

1. Open a HubSpot page
2. Have the AI look at it and identify the CSS that needs to change
3. Add those rules to the extension

It was painfully slow. Minutes per page. And the AI could barely identify the right elements — it can navigate pages really well, but it still cannot see UI or design well at all. Every change broke old rules.

The Approach That Worked

So I tried again with a different strategy:

1. Claude one-shot a webcrawler that gathered 1,000 HubSpot URLs
2. From those URLs I created a “UI Map” — a JSON representation of every visible element and its styles
3. Then I used those maps to create the rules

Converting a visual problem into a text problem is what made it work. What would have taken weeks of manual inspection was done in a day.

How Our Video Pipeline Works Now

For app overview videos, the pipeline looks like this:

1. Script — outline the key points the video needs to cover
2. Narration — generate voiceover with ElevenLabs
3. Scenes — build Remotion components for each section (screen recordings, animated diagrams, text overlays)
4. Transitions — reusable transition components that work across all videos
5. Render — Remotion renders the final video

Claude Code orchestrates most of this. I describe what a scene should show, it writes the Remotion component. I want a timing adjustment, it updates the frame counts. I need the same transition style across five videos, it applies the shared component.

Why Code Beats a Timeline

The real advantage is not speed (though it is faster). It is that the entire media pipeline is now iterable.

• Improve a voice — regenerate the narration, and the animations re-sync automatically
• Fix a timing issue — adjust one value, and the fix applies everywhere that component is used
• Swap an asset — replace a screenshot, and every video that uses it updates
• Maintain consistency — transitions, colours, and text styles are shared components, not copy-pasted settings

Traditional video editing is destructive and manual. Code-based video is additive and composable. And when AI can write the code, the iteration speed goes through the roof.

Is It Perfect?

No. The voices are still a little robotic. The timing is sometimes off. Some animations feel a bit amateurish compared to what a professional motion designer would produce.

But it is dramatically better than what I had before. And unlike a traditional edit, every imperfection is a variable I can improve once and apply everywhere.

The Takeaway

If you want to supercharge any workflow with AI, you need to find a way to represent the problem in text or code. Visual problems that stay visual are rough for AI. Visual problems converted to structured data become solvable.

Remotion turns video into code. ElevenLabs turns narration into an API call. Claude Code ties them together. The result is a media pipeline that a two-person team can actually maintain — and one that gets better every time we touch it.