Create Video Storyboards with Claude Code and Playwright

Before creating demo videos for ytgify - a Chrome extension that lets you clip GIFs right from YouTube - I wanted to map out the user flow with real screenshots.

I wondered if Claude Code could help me whip up a storyboard to help me visualize the demo, so fed it this prompt:

"I want to create a video walkthrough of this chrome extension app. But first, I want to create a storyboard with real images of it. Use playwright and run through the extension, taking screenshots of important moments in the standard user flow. Then create a storyboard from those screenshots. Each screenshot in the storyboard should be numbered, with a brief description of what each step is about."

I then followed up a few times, telling Claude that I wanted the storyboard in html, and adjusted some of the vocabulary. Not bad!

Here's the resuling storyboard:

Claude Code used Playwright to navigate the extension, captured 11 screenshots of key moments, and generated a complete HTML storyboard with numbered steps, descriptions, visual flow summary, and navigation menu.

I ended up following most of this in the final video walkthrough - made creating the demo walkthrough a lot easier!