The Problem
Software walkthroughs are slow to produce and difficult to maintain. Instructional designers often have to manually record, narrate, edit, caption, and re-record videos every time a workflow or UI changes.
Project Snapshot
I built an AI-assisted walkthrough generator that converts a user prompt into browser actions, records the workflow, adds visible cursor/click highlights, creates narration, and exports a narrated MP4 training video.
Stack
- OpenAI API
- Playwright
- FFmpeg
- Next.js / React
- Node.js
Demo Video Placeholder
Add your generated MP4 here.
The Solution
Walkthrough Studio AI lets a user describe the training task in plain language. The system translates the request into structured browser choreography, executes the steps, records the screen, adds narration, and outputs a shareable training video.
What I Built
The prototype includes prompt-to-action generation, browser automation, click highlighting, lightbox/iframe handling, narration generation, MP4 rendering, and a styled local interface for generating walkthroughs.
Why It Matters
This demonstrates how AI can accelerate customer education, sales enablement, LMS previews, internal training, and onboarding content production while keeping instructional intent at the center.
How It Works
1User prompt
2AI generates JSON steps
3Playwright controls browser
4Narration is generated
5FFmpeg exports MP4
My Role
Concept, product strategy, instructional design framing, prompt architecture, browser automation logic, interface design, and prototype development.