Back home

Stageshow

x 0.82
Visit source

Intro

Stageshow is a free, open-source agent skill that teaches AI coding agents to produce polished faux product UI — marketing stills, cursor-driven demo animations, bento grids, phone mockups and dashboard scenes. It was released on October 31, 2026 by Benji Taylor, head of design at X, and his launch post passed 4,700 likes within hours, spreading quickly in English, Chinese, Japanese and Persian developer circles.

Taylor's point is that most good models can already fake a UI, but the result usually looks sloppy and heavy-handed. Stageshow writes down the hundred small design decisions a designer makes by hand so an agent can make them too. It installs with one command — npx skills add benjitaylor/skills --skill stageshow — and works with any agent that supports skills, including Claude Code, Codex, Gemini and Grok Build. It is MIT-licensed.

Explain

What's inside

  • SKILL.md — the core idea in one sentence ("It reads as a real product, simplified to what the viewer needs, framed with intent, and every motion has a cause"), the five common failure modes, a seven-step workflow and a table of gold examples.
  • references/ — rules for craft (restraint, type, spacing, colour), motion (story, pace, the cursor), framing, grids, backgrounds, annotations, brand marks and filming, each with its reason and good/bad pairs.
  • examples/ — dozens of gold examples the agent starts from: hero demos, bento grids, a phone swipe, a dashboard paired with a lock screen and more.
  • kit/ — a small set of plain React parts (stage, windows, phones drawn from real geometry, frame-safe motion) that live in your codebase and can be restyled with your own design tokens.
  • Scripts — film.mjs films a demo and lays frames on a contact sheet, jumps.mjs catches one-frame snaps, and layout.mjs checks that text fits its boxes.

The five failure modes it targets

  1. Too much — real words in every cell, packed tight.
  2. Too little — a wireframe that doesn't read as a product.
  3. Boxed — the whole app shrunk into a card like a pasted screenshot.
  4. Flat — everything has the same visual weight.
  5. Bland — the brief's style never shows up.

The output is an ordinary React component, so the demo can be dropped into a landing page and edited like the rest of your code. Taylor notes most demos still take a few rounds of feedback, and that the skill may become unnecessary as model taste improves.

Usage

How to use it

  1. Install: npx skills add benjitaylor/skills --skill stageshow.
  2. Ask your agent for something small and specific: one interaction, in one product, at one size — e.g. "A small looping demo for our homepage hero: someone assigns an issue to a teammate."
  3. The agent reads the skill, starts from the closest gold example, builds the demo, films it and fixes what it finds.
  4. Review the contact sheet, give feedback, and iterate; then drop the React component into your site.
  5. Optional: run the playground (npm install && npm run dev in the skill folder) to browse every example and good/bad comparisons.

Good fits

  • Landing-page hero animations and feature bento grids.
  • Launch-post visuals and product-demo GIFs/videos.
  • Mapping your own design system tokens onto illustrative UI.

Requirements: Node 20.19+ for the playground; React 18+ for the kit. Note that the drawn windows are illustrations and not affiliated with the real products they resemble. Treat third-party skills like any dependency and review the code before installing.

Links