AI NewsDev toolsAnnouncement

Stageshow is a free skill for coding agents to build product demos

Stageshow is a free skill for coding agents. It makes the small UI demos that sit on a product homepage.

AI News

Editorial2 min read

LinkedInX

Why it mattersMarketing demos take hours of design work for each one. A skill that writes down those decisions lets an agent do the rough pass.

Product homepage demos take longer to build than they should. Each one is a hundred small decisions, and every one of them shows.

Stageshow is an open-source skill from the designer Benji Taylor. It came out on 31 October 2026. The GitHub repository benjitaylor/skills has 286 stars six days after it was created. One command installs the skill. It works with Grok Build, Claude Code, Codex and Gemini.

What the agent builds

The skill makes faux product UI. That means still images, feature cards, cursor demos, bento grids and short looping animations. The output is a plain React component. The team can drop it into its site and edit it by hand later.

Taylor says most good models can do this now without a dedicated skill. The results often look sloppy. The skill is built around one sentence. A demo should read as a real product. It should carry only what the viewer needs. Every motion should have a cause. The skill names the five ways a faux UI goes wrong. Too much means every cell is filled with real words. Too little means a wireframe that does not read as a product. Boxed means the window is shrunk into a card, like a screenshot. Flat means everything has the same weight. Bland means the brief's style never shows up.

How a demo is built

Every demo is a stage. The stage is a React canvas at a chosen design size. The agent writes a short script that changes state one beat at a time. The cursor is part of the stage. It aims at things by name. A click lands in the right place even if the layout changes. Parts stay mounted while they move. A card flies into a slot instead of popping into view.

The repository carries a kit of React parts: windows, phones, cursor, number counters and message bubbles. It also carries dozens of gold examples. The agent reads them first and holds its work against them. Three scripts help. film.mjs films the demo and lays the frames on a contact sheet. jumps.mjs catches one-frame snaps that a contact sheet misses. layout.mjs checks that every text block and control fits inside its box. A references/ folder covers craft, motion, framing and grids. It also covers backgrounds, annotations, and brand marks of real products the agent can copy.

What it costs to try

The skill is Apache 2.0. It installs with one line. Each demo still takes a few rounds of feedback. The first pass is a big step up from what an agent would make on its own. It is rarely the final cut. A playground comes with the skill. It shows every example and a set of side-by-side comparisons: the same thing done badly and done well, so the agent and the viewer can see the difference.

For a team building a product site, this moves the slow part of a homepage demo. It goes from a designer's week to an agent's rough pass. The designer then polishes it. The agent will not pick up a brand's tone on its own. A short style note at the start of the request still matters.

Source

Stageshow on GitHub, Benji Taylor. How it works, Benji Taylor.

SourceGitHub

This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.

Share
LinkedInX
Start a project