This is the workflow behind the video you saw. Claude builds a real app, records it running live, writes and voices a script, then edits everything into a polished ad with Remotion. You copy five prompts and fill in the blanks.
Each step is one prompt. Run them in order in the same Claude Code session so Claude remembers the app, the recording and the timings.
# Claude Code npm install -g @anthropic-ai/claude-code # ffmpeg (macOS with Homebrew) brew install ffmpeg
A skill is a set of instructions Claude loads when a task matches it. This one teaches Claude a full launch-video workflow in Remotion: brief, storyboard, render, review and iterate. It comes with a starter Remotion project.
git clone https://github.com/EveryInc/product-launch-video
cd product-launch-video && npm install
# make the skill available to Claude Code
mkdir -p ~/.claude/skills/product-launch-video
cp SKILL.md ~/.claude/skills/product-launch-video/
Put the key in an environment variable instead of pasting it into the chat. Chat history gets saved, and a pasted key should be treated as leaked.
echo 'export ELEVENLABS_API_KEY="your-key-here"' >> ~/.zshrc
source ~/.zshrc
Pick a voice in the ElevenLabs voice library and copy its voice ID from the URL. For example, in elevenlabs.io/voices/AbC123… the ID is the last part.
Replace everything in [brackets]. Send one prompt, let Claude finish and check the result before you send the next.
Build me a dashboard UI for [your concept, e.g. "a fintech app for tracking business payments"]. Make it feel premium and modern, not generic AI output, with a distinct color scheme [optional: colors or a vibe, e.g. "warm paper with a persimmon accent"]. Include real micro-interactions: - numbers that count up on load - status badges or checkmarks that animate in one by one - a search bar that filters results live as I type - one action button, like "[Mark paid]", that updates the totals when clicked Keep it clean: at most [3] stat cards, one chart and one table. Use a single HTML file with Tailwind and vanilla JS so it loads instantly, and run it on localhost when you're done.
One file with no build step loads instantly, which makes the recording reliable. Asking for a clean layout up front saves a round of "too much going on" later.
Screen record the app running live, not screenshots. Use Playwright with Chrome's screencast, headless, at 2x device scale so frames come out sharp at a steady 60fps. Before recording, add a visible cursor to the page with a glowing [orange] comet trail that follows it, and a small burst when it clicks. The real cursor doesn't show up in the capture. Script the take: 1. Load the page and let the numbers count up and the checkmarks fire. 2. Move the cursor in smooth curved paths, not straight lines. 3. Click the search bar and type "[search term]" at a human pace. 4. Scroll to the table and click "[action button]". 5. Scroll back up so the updated totals are visible. Save every event's timestamp to marks.json and encode the result to a 60fps MP4.
The timestamps are what let Claude cut the video precisely later. Steady 60fps capture matters because uneven frames show up as jitter when you type.
Write a [15]-second ad script for this app. Open with the viewer's problem in under 2 seconds, give each feature in the recording one short line, and close with a tagline. Generate it as ONE continuous take, not separate lines, with ElevenLabs voice ID [your voice ID] using the eleven_v3 model. My API key is in the ELEVENLABS_API_KEY environment variable. Don't time-stretch the audio afterwards. Then run the take through ElevenLabs speech-to-text to get word-level timestamps and confirm nothing extra was spoken.
Lines generated one at a time sound stitched together and robotic. A single take keeps natural rhythm, and the word timestamps let captions and cuts land exactly on the words.
Use the Remotion skill to turn the recording and voiceover into a [16:9], [18]-second ad. Make it feel like a high-quality ad a business paid $10k for. - Sync every cut and caption to the word timestamps. - Open with kinetic type on the viewer's problem, then reveal the logo on the music drop. - Bring the dashboard in tilted in 3D, then zoom smoothly to each interaction as it happens. - Pop key UI moments out of the screen as large callouts, like the main total or a "Cleared" badge. - Captions appear word by word, with the key word in the accent color. - End with one tagline and one call-to-action button. - Generate upbeat [120 BPM] background music with ElevenLabs and keep it under the voice. - Play the recording at real speed and render at 60fps. Use smooth eased transitions and no whoosh sound effects.
Being specific about the scenes and the feel gets you most of the way on the first render. Real-speed playback at 60fps is the single biggest factor in how smooth it looks.
Render about 20 frames from the key moments and transitions. Spawn 4 reviewers in parallel to critique them: layout, text readability at 720p, pacing, and brand consistency with the real app. Merge their notes into one prioritized fix list, apply it, and re-render. Normalize the final audio to -14 LUFS.
Fresh eyes catch the things you stop seeing after a few renders: captions covering the action, text too small on a phone, a cut that lands half a second early.
Remotion lets you write a video as React code. Every frame is a function of the frame number, so animation is just math, and Claude is very good at writing it. The skill adds a proven process on top.
| Remotion piece | What it does |
|---|---|
Composition | Defines a video: size, frame rate and length |
Sequence | Places a scene at a point in time |
spring(), interpolate() | Turn the frame number into motion: pops, slides, zooms, count-ups |
OffthreadVideo | Plays your screen recording inside the video, frame-accurate |
Audio | Adds the voiceover, music and sound effects, with volume over time |
staticFile() | Loads files from the project's public/ folder |
# live preview in your browser, scrub through the timeline npx remotion studio # render one frame to check a moment npx remotion still [CompositionId] out/frame.png --frame 120 # render the full video npx remotion render [CompositionId] out/video.mp4 --codec=h264 --crf=17
"Play the recording at real speed and render at 60fps. Don't animate search results that are already showing, and remove any camera kicks on keystrokes."
"Regenerate the voiceover as one continuous take with eleven_v3, without speeding it up afterwards."
"Cut to about 18 seconds, tighten the script, and start the music drop on the logo reveal."
"Strip the app back to its three most important elements, and remove any overlay that repeats what the UI already shows."
"Reframe each shot so the interaction sits in the top two thirds and the captions sit below it."
"Add a 9:16 1080×1920 composition and reframe each shot for vertical instead of cropping the 16:9 version."
One rule that saves the most time: never let Claude invent labels for your app in the video. Everything on screen should match the real UI, because viewers notice when it doesn't.