Workflow + Motion
Automated Userguide
Company
Avada
Timeframe
2026
Role
Creative Design
A personal proposal for applying AI to daily work — a pipeline that uses automation to turn a slow, specialist-only task into something anyone on the team can run, with immediate gains in output and accuracy.
The Pain Point
Text-and-image user guides aren't intuitive enough — users skim them, miss details, and still end up confused. Video guides solve that, but producing them is expensive: scripting, recording, editing, and voiceover take hours per video and demand an experienced motion designer. The result: most features never get a proper video guide, and the ones that exist go stale as the product evolves.
The Solution
Claude combined with Playwright MCP is the breakthrough that makes this pipeline possible. Claude reads a user guide, reasons through the exact flow a user would take, and writes the interaction script as real code. Playwright MCP gives it hands — letting it drive the live app in a browser, click through every step, and capture the screen exactly as a real user would see it. That pairing turns "producing a user-guide video" from a manual creative task into something an AI agent can handle end-to-end, while the other tools (Remotion, ElevenLabs) simply polish the output.
How It Works
Four stages, orchestrated end-to-end: • Claude + Playwright MCP write the interaction script and drive the real app in a browser, recording the screen automatically. • Pipeline + Remotion edit the recording — smooth zoom in / zoom out on key moments, with automatic trimming of loading and idle time. • Auto-diff compares the user-guide docs against the live frontend, flags mismatches, and updates the docs based on what the app actually shows. • ElevenLabs API generates voiceover in sync with the script.
Result
The workflow runs continuously and needs only one person to do a simple double-check before publishing. In practice: 20 step-by-step user-guide videos produced in 2 hours — work that used to take days. Just as important, the auto-diff step keeps the user guide aligned with the actual UI, so documentation accuracy improves as a side effect of production speed.
