DEV Community

Cover image for I made a Claude Code plugin that turns your project into a demo video
Felipe Maschio
Felipe Maschio

Posted on

I made a Claude Code plugin that turns your project into a demo video

You know how much work goes into making a decent product demo. I built a Claude Code plugin that does most of it for you.

Because it runs inside Claude Code, it already knows your project. It can identify the main features, run the app and build the film with one command:

/product-film
Enter fullscreen mode Exit fullscreen mode

The output is a single HTML file, and that file is the film. Open it in Chrome and you'll get a start screen with one card for each cut. I usually ask for a full demo and a shorter loop for Product Hunt. Each card has its own ▶ Watch and ● Record buttons, and there's a theme-music picker that applies to whichever cut you record.

The start screen of a generated film: two cards, Full cut and Short loop, each with its own Watch and Record buttons, and a theme-music picker below them.

Hit Record and the film captures itself from beginning to end, then drops an MP4 into your downloads. Firefox exports WebM. There's no screen recorder, OBS, editor or timeline involved.

A few tracks are included, and you can upload your own audio. A friend discovered it doesn't even have to be music: he recorded a narration, uploaded the MP3 and used that instead.

The bare command is enough, but you can also direct the film in the same message: which flow to show, what to leave out and which screen deserves more time. Since it's still a conversation with Claude Code, the first cut doesn't have to be the final one. You can say, "Drop the pricing scene and hold longer on the deadlock," and it'll generate a new version. You only hit Record when you're happy with it.

If you want to see the result, the demo on ThreadMine's landing page was made entirely with the plugin. The short loop plays on the page, and clicking it opens the full version with music.

The biggest advantage over AI video generators is that product-film doesn't have to guess what your application looks like. Those tools can make slick videos, but getting them to reproduce a coherent sequence of your actual screens is another matter. You either accept a slightly fictional version of the UI or spend a lot of time feeding them screenshots and correcting the details when they drift.

Recording yourself clicking through the app works, but the result usually still needs editing. Hiring an editor costs money and takes time. Claude Code already understands the project, so it can skip most of that setup.

It also doesn't upload your application or captured screens to a separate video service. The plugin works from a real run of your app on your machine.

In my case, the app is ThreadMine, a thread-dump analyzer. The demo shows a dump being genuinely analyzed: health score F, 30 out of 100, with a real deadlock where DeadLockThread1 waits on DeadLockThread2, which waits on DeadLockThread1.

I didn't choose 30 because it looked dramatic. That's the number the engine returned. Paste the same dump into the live tool and you'll get the same F 30. The video can't show a result the product didn't actually produce.

Before creating a single frame, the plugin runs the real application with Playwright, clicks through the actual flow and captures the real screens and values. That's the source of truth. The film is then choreographed on top of it: a cursor easing into buttons, captions appearing after each action and a slow push-in on whatever deserves attention.

Every visual is a pure function of t. That means the film can seek to any point, verify itself beat by beat and record a take that begins and ends exactly where it should.

It's open source and MIT licensed. Installation takes two commands:

/plugin marketplace add alliah-tech/product-film
/plugin install product-film@product-film-marketplace
Enter fullscreen mode Exit fullscreen mode

One practical tip: open /plugin, go to Marketplaces and enable auto-update. Claude Code doesn't turn it on by default for third-party marketplaces, and I'm still releasing updates.

I'd also run it with the most capable model you have and set effort to high. The difficult part isn't writing the code. It's reproducing the real interface without deciding to "improve" it along the way. Weaker models sometimes get creative and prettify parts of the UI, which breaks the one rule that keeps the result from becoming AI slop.


I'm Felipe. I built ThreadMine, the analyzer used in the example, and product-film, the plugin. Happy to answer questions in the comments.

Top comments (0)