How I Stopped Manually Updating Marketing Screenshots (Storybook + Playwright)

I've been building my first microSaaS, SnapMenu—and yes, I've redesigned it at least six times. At some point it hit me: I'm a digital product. My marketing should probably show the product. You know, the UI people actually use and the logic behind it. So I decided the hero of my marketing had to be the app itself.

The Problem

The catch: the app changes all the time. Almost every iteration touches the UI. Manually re-taking and cropping screenshots after every change is boring, easy to forget, and still matters—for accurate positioning and consistent brand. I needed a way to keep my marketing visuals in sync without turning it into a second job.

The Solution

Storybook + Playwright. Storybook is my single source of truth for “marketing scenes”: I write stories for the landing page, reservation operations, menu experience, and the full menu-creation journey. Each story is a specific state or flow I want to show. Then a dedicated Playwright config spins up Storybook in CI (or locally), and a small test file drives the browser: it opens each story in an iframe, sets the viewport I care about, waits for fonts and network to settle, and takes a full-page screenshot. Those PNGs land in something like exports/marketing-screenshots/ with predictable filenames (e.g. 01-landing-page-desktop.png, 03-menu-experience-premium.png). One command—or one CI job—refreshes every marketing screenshot from the same stories I already use. No more “oh, the site looks different than the homepage” and no more manual screenshot duty.

Colclusion

So: treat your UI as the hero, put that hero in Storybook, and let Playwright snap the pictures. I get always-fresh marketing assets, a single source of truth, and my sanity back. My future self (and my sixth redesign) will thank me.

Keywords: Storybook screenshots, Playwright automation, SaaS marketing automation, UI screenshot automation, CI screenshot generation