How to Make Faux Product UI That Looks Real (Stageshow Guide)

Open any SaaS landing page you admire and look at the hero. That screenshot did not come from pressing Print Screen. It was framed, masked, cropped, and choreographed. That gap — between what the product looks like and what the marketing page shows — is exactly the craft stageshow systematizes.

Why do marketing heroes look better than the real product?

Because they are not screenshots. A real app at 1440px wide has dense chrome, long labels, and empty states nobody wants to advertise. A hero needs one idea, readable in two seconds, at the exact crop a feature card allows. So teams stage the interface: a window cropped to the interesting part, data edited to tell one story, the cursor moving like a confident user. Stageshow treats this staging as its own discipline, separate from both product design and motion graphics — closer to set design for a play than to engineering.

What is stageshow?

Stageshow is a skill for AI coding agents plus a portable React kit, published in Benji Taylor’s benjitaylor/skills repository. It covers browser and app windows, dashboards, phones, notifications, terminals, bento grids, and cursor walkthroughs — framed, masked, and cropped the way a marketing page or docs hero needs them. The kit (Stage, Window, and supporting parts) imports its own CSS, needs no third-party animation runtime, and supports React 18 and later.

It ships with three things most screenshot pipelines lack:

• A kit — React components for windows, phone frames, app chrome, and common parts like rows, chips, and keycaps.

• Gold examples and teaching pairs — reference scenes plus explicitly flawed-then-corrected pairs that show what “looks staged” versus “looks real” actually means.

• Verification tools — a local playground and filming scripts that capture the staged scene so the agent can review its own work.

It installs with npx skills add benjitaylor/skills --skill stageshow.

How do you script a demo that never touches the real app?

Here is the key design decision: stageshow demos are authored illustrations, not automation. A scripted act like a.click() draws the click feedback and a.set() changes the scene — nothing reaches into a running application. That sounds like a limitation; it is the point. A real screen recording captures your product’s current bugs, loading skeletons, and boring data. An authored scene shows the product at its best, with plausible numbers, calm spacing, and one message per frame.

The workflow runs in three moves. First, pick a composition from the references — a full hero scene, a close-up crop, a phone beside a window. Second, build the scene from the kit and one of the nine visual styles, copying a gold example as the starting point. Third, choreograph the acts: what the cursor does, what changes, in what order. For Arabic-first products in the Gulf, this is also the only practical way to show a fully localized RTL interface in a hero before the real one is built.

What separates a staged UI from a fake-looking one?

The teaching pairs in the kit name the tells. The most instructive ones:

Framing does most of the work. The kit’s masking and crop conventions exist because a window shown whole reads as a screenshot; a window shown deliberately reads as a product.

How do you verify it actually looks right?

Stageshow’s answer is filming, not eyeballing the code. Its scripts capture the staged scene at desktop and phone widths, step through states, and gate the result — so a broken hover or a clipped cursor fails before it ships. The bundled playground adds the reviewer controls a human wants: pause, replay, slow down, advance one frame, and a reduced-motion view showing each scene’s still. That last one matters more than it sounds — a hero that only works in motion fails every user with reduced motion enabled, and every thumbnail view on social.

Put your next hero on stage

A marketing hero is a promise about your product, and a lazy screenshot breaks that promise in the first two seconds. Whether you adopt stageshow or just steal its discipline — frame deliberately, script the story, film the check — the craft is the same. If you would rather have the whole page designed that way, talk to Tremoloo about your marketing website: we design heroes, feature cards, and product stories that look as considered as the product behind them.

Tool credit: stageshow by Benji Taylor, MIT licensed.