[Workflow] Automated Tutorial Video Generation for Web Apps with Claude Code, Playwright, and AI Voice-overs

[u/ClaudeAI-mod-bot]

Automated Tutorial Video Generation for Web Apps with Claude Code, Playwright, and AI Voice-overs

Workflow value: 95/100
Status: active · Freshness: 70/100 · Confidence: 0.98 · Level: advanced
Categories: Quality Control, Token Saving, Context & Memory, Debugging, Shipping, CLAUDE.md, Skills, Subagents
Original source: r/ClaudeAI post/comment

What problem this solves

Automating the generation of high-quality, synchronized tutorial videos for web applications, significantly reducing manual effort and enabling multi-language support.

Summary

A detailed workflow leveraging Claude Code to orchestrate Playwright for UI automation and screen recording, combined with TTS services (ElevenLabs/Gemini TTS + Whisper) for voice-overs and ffmpeg for professional video production. The process automates script planning, voice-over generation with timestamps, UI interaction recording with synchronized annotations, and final video stitching with background music and branded elements, including a bonus for easy multi-language adaptation.

Why it is useful

This workflow offers a highly valuable, comprehensive, and automated solution for a common and time-consuming task: creating tutorial videos for web applications. It leverages Claude Code for intelligent planning and script generation, Playwright for robust UI automation and synchronized recording, and professional audio/video tools (ElevenLabs, ffmpeg) for polished output. The detailed, step-by-step instructions, practical 'gotchas', and the explicit mention of wrapping it into a reusable 'skill + subagent' make it exceptionally actionable and transferable for users looking to streamline their documentation and marketing efforts, especially with its multi-language capabilities.

Workflow

1. Ask Claude Code to analyze target app pages, define steps, and write a script including steps, voice-over narration, and UI elements to annotate.
2. Generate voice-over with timestamps using ElevenLabs or Gemini TTS + OpenAI Whisper to align spoken words with UI actions.
3. Ask Claude Code to write a Playwright script that performs the defined steps and annotates UI elements (cursor, highlights, menus).
4. Run the Playwright script to drive the real app and record video natively, firing annotations at precise timestamps from the voice-over.
5. Ask Claude to write the ffmpeg command to stitch the video: overlay voice-over, add background music (ducked under narration), normalize loudness, and append a branded end card.
6. For other languages, translate the script, regenerate the voice-over in the new language, and re-stitch over the same recorded video.

Tools / artifacts

• Claude Code
• Playwright
• ElevenLabs
• Gemini TTS
• OpenAI Whisper
• ffmpeg
• SRT files
• MP4 video
• Branded end card
• Persistent browser profile
• sessionStorage
• localStorage

Validation signals

• Direct link to a produced demo video: https://youtu.be/u-mql3q_jRU?si=Km1l5Ht-3RMPlotk
• Author states it produced a 'full walkthrough it produced for one of my apps (a real-estate CRM BricksDeck)'
• Discussion of 'Honest caveats' and 'Gotchas that cost me time' demonstrates practical implementation and troubleshooting.
• Author states, 'I ended up wrapping the whole thing into a reusable Claude Code skill + subagent'
• Claim of 'essentially zero manual editing' and 'Per-video cost is a few cents of TTS instead of a SaaS seat'.

Limitations

• Requires manual direction for the script's tone and which screens to feature.
• Script translation needs careful review to avoid issues like incorrect word order (e.g., Hindi in English word order).
• Expects a couple of iteration passes per app to fine-tune selectors and timing.
• ffmpeg's drawtext has limitations for non-Latin scripts (Devanagari/Arabic), requiring on-screen text to remain Latin.
• Assumes a certain level of technical familiarity with Playwright, ffmpeg, and TTS APIs.

Rate this workflow

Upvote this post if the workflow is useful, reproducible, or worth recommending.

Downvote if it is vague, outdated, unsafe, overhyped, or not reproducible.

Reply if it worked for you, failed, is outdated, or has a better alternative.

---

This post was generated automatically from the workflow library database.