Stageshow: I Tested X’s Head of Design Skill in Claude Code

Hi, this is Darius. On October 31, Benji Taylor, who leads design at X, gave away the process he uses for the small animated product demos you see on landing pages. He packed it into a free skill called Stageshow, and his launch post on X passed 1.5 million views.

I wanted to see whether Stageshow really changes what Claude Code makes. So I ran the same prompts twice, once in plain Claude Code and once with the skill loaded, and put the results side by side.

What is Stageshow?

2.6K GitHub stars14.8K installsMITFree

It’s an open source agent skill from Benji Taylor. It teaches a coding agent to build faux product UI, meaning a simplified, working copy of one screen of your app, made for a landing page, a feature card or a docs page. It makes stills, cursor walkthroughs and bento grids, and the output is plain React and CSS.

The folder holds the instructions, a small React kit, dozens of example demos Benji calls gold examples, a playground to browse them, and a script that films the result. It works in Claude Code, Codex, Gemini and other agents.

The five mistakes Stageshow fixes in AI demos

Ask an agent to animate your app and the result is usually close, with one small detail that gives it away. Benji named five of those details:

• Bland is when you ask for a style and get a template back.
• Too much is real words in every corner, so nothing stands out.
• Too little is a set of gray boxes that no longer looks like your product.
• Boxed is the whole app shrunk into a card, like a pasted screenshot.
• Flat is when every element on screen has the same weight.

How Stageshow works: seven steps

Benji’s view is that taste is mostly small decisions made over and over until you know which ones hold up. Stageshow writes his decisions down as seven steps, and most of them happen before the agent writes any code.

1. Pick the medium: a still or an animation, looping or played once, and where it sits on the page.
2. Set the look: light, dark, blueprint or glass, one accent color, and the product’s real chrome and icons.
3. Plan the story: what using the product feels like, cut into three to five beats.
4. Start from an example: copy the closest gold example and adapt it to your product.
5. Fill the screen: a few real words where the story needs them, placeholder lines everywhere else.
6. Choreograph the motion: beats overlap, groups stagger, and the loop ends where it began.
7. Rehearse: film the demo, review every frame at desktop and phone width, and check the loop seam.

I haven’t seen the rehearse step in any other design skill. A script plays the demo in a headless browser, lays the frames out on one contact sheet and measures things like jumps, cramped padding and text that doesn’t fit. The agent can’t hand the demo over until the check prints “rehearsal passed”. It then writes REHEARSAL.md, a short note on which example it copied, what it changed and what it didn’t check.

For more skills that improve how Claude designs, see my list of Claude Code design skills.

Stageshow vs plain Claude Code: my test

I used Claude Code with Opus 5.5. Each prompt ran in a fresh chat without the skill, then in a second fresh chat with /stageshow in front of the same words.

Test 1: a basic prompt

The first prompt asked for a short animated demo of the Claude Code app: someone types “make me a landing page”, clicks send, and index.html slides into the sidebar.

Before showing me anything, the skill filmed its own demo and caught five problems. Among them were a big empty gap above the chat, uneven padding in the code card and text cut off on the phone. It fixed them and filmed again until the check passed.

• Without the skill, the window floats in the middle of a dark frame, so all the text is small. The skill lets it run off the edge, and everything reads larger.
• Plain Claude wrote every session and file name as real text. The skill kept the prompt, the file names and the code, and turned the rest into gray bars.
• Six seconds in, the plain version still showed “Thinking” over an empty screen, while the other one was already writing code.

Test 2: a harder prompt

The second prompt packed in six moments: a request for a coffee shop landing page, a three step plan that ticks off, three files appearing in the sidebar, a preview pane opening on the finished page, and a cursor clicking View menu to scroll down. It also asked for a separate phone version, a loop with no visible restart and a still frame for people who turn animations off.

Plain Claude Code handled this one well. Its coffee page has a strong hero with a cup, and it looks good. Benji says the best models already get close and that small details give them away, so that’s where the two versions differ.

• The file list shows how many lines each file got: +64, +118 and +32.
• The plan names the file each step writes, and finished steps are crossed out.
• Other sessions in the sidebar turn into gray bars, so they don’t compete with the story.
• The window runs off the bottom of the frame.
• The recording plays at 60 frames a second, against 30 for the plain one, so the cursor and slides move more smoothly.

The phone version

The phone showed the biggest gap. Without the skill, Claude Code drew a whole iPhone with a status bar and a keyboard, and when the keyboard slides away a strip of it stays stuck at the bottom edge. With it, Claude drew no phone at all. It laid the app out again for a narrow screen, with the files in one strip with a running line count and cards big enough to read.

A Stageshow run takes longer than a plain prompt, since the agent plans, builds, films and fixes before it hands anything over.

Want to put demos like these on a real site? Here is how to build a website with Claude Code.

How to install Stageshow

npx skills add benjitaylor/skills --skill stageshow

1. Run the command in your project folder, or ask Claude Code to run it for you.
2. Pick Claude Code as the agent, then choose this project or every project.
3. Start a new chat so the skill loads, then type /stageshow and describe one interaction in one product.
4. To browse Benji’s examples on desktop and phone, ask Claude to open the Stageshow playground.

Frequently asked questions