ReleaseCode / SDK · ActionableTG: @tips_ai (Tips AI / IT & AI)→ original

X design head open-sources stageshow skill: an agent draws and animates interface demos

Benji Taylor, head of design at X and SpaceXAI, has open-sourced the stageshow skill. It addresses a common problem with agents: their interfaces work but lack visual taste. The skill gives the agent a workflow: choose a format and style, devise a 3–5-scene narrative, assemble a screen from a few real lines and placeholders, then animate it and inspect every frame. No screen recording is required.

AI-processed from TG: @tips_ai (Tips AI / IT & AI); edited by Hamidun News
X design head open-sources stageshow skill: an agent draws and animates interface demos
Source: TG: @tips_ai (Tips AI / IT & AI). Collage: Hamidun News.
Listen to article
Article Fact Sheet & Key Figures
ParameterDetails
Primary sourceTG: @tips_ai (Tips AI / IT & AI) ↗
Editor-in-Chief
Install it withnpx skills add benjitaylor/skills --skill stageshow
Key metric #2Themes and design-system tokens are passed through props
Key metric #3Suitable for infographics, landing pages, and promotional animations

If you have ever asked an agent to design an interface, you know the result: everything is in place, the buttons work, but it is painful to look at. There is no sense of style, no hierarchy, none of what designers call taste. Benji Taylor, head of design at X and SpaceXAI, has tried to encode that taste for an agent as a set of instructions. The result is the stageshow skill, now available as open source.

What it is and why it matters

Stageshow teaches an agent to create faux UI—in other words, interfaces that are not real. These are polished product demos for landing pages, promotional videos, and infographics. The actual application is not required: the agent draws the screen itself and animates it. According to the author, the examples in the post were made without screen recording. The agent drew and brought all of them to life.

The problem will be familiar to every product manager and marketer. Screenshots become outdated with every release, screen recordings look rough, and nobody will assign a designer to every illustration for an article. If an agent can assemble clean scenes from a description, this narrow piece of work can be delegated to it.

How it works under the hood

The skill's main value lies in its process, not the attractive images. It guides the agent through seven steps.

  1. Choose the format: static or animated, looping or single-pass, and the dimensions.
  2. Choose the look: light, dark, blueprint, or glass, as well as the product's real chrome and icons.
  3. Devise a narrative spanning 3–5 scenes.
  4. Take the closest reference example and adapt it.
  5. Assemble the screen: a few real lines, with placeholders for the rest.
  6. Set up the animation so the scenes overlap and the loop runs seamlessly.
  7. Render the demo with a script, inspect every frame, test it at phone width, and fix errors.

Several sound engineering choices are at work here. The agent does not start from scratch; it builds on a reference, which guards against arbitrary design decisions. The rule of “a few real lines, placeholders for the rest” prevents the screen from becoming overloaded with detail. The final step also creates a feedback loop: the agent inspects the output frame by frame and tests it at mobile width, as a careful human would.

What else it can do

The feature set is quite practical. The skill draws browser and application windows and phones, and supports the macOS 26 style. It offers several cursor variants: the cursor finds elements by name and changes shape on hover. There is a camera that zooms in on the relevant area, as well as annotations and bento grids. The examples include styles inspired by Linear, Slack, Figma, Notion, and other products.

Theme support is especially important. Tokens from your design system are passed through props: the scene is written once, while the theme changes its colors. For a team, this means the same scenario can be released in brand colors, in a dark version, and in versions for different segments without rebuilding the animation.

How to try it

Installation takes a single command:

npx skills add benjitaylor/skills --skill stageshow

The author of a post from the Tips AI channel says he uses the skill to create infographics for SEO articles about his application's features. That is a good example of a practical use case: content is needed regularly, while visuals usually become the bottleneck.

Limitations and conclusion

Expectations should remain realistic. The skill gives an agent discipline and a set of references, but it does not replace a designer. Output quality depends on the model executing the instructions and on how closely your product resembles the examples. A distinctive visual identity will require theme customization and, most likely, adding your own references. Moreover, faux UI is not a real interface by definition. Reviews, documentation, and legally significant screenshots require an honest recording; in marketing, it is worth remembering that users will not see exactly what appears in the image.

The practical conclusion is straightforward. If you create landing pages, promos, or content about product features, install the skill and test it on one task. It may be even more useful to study its structure: format, look, narrative, reference, assembly, animation, verification. This recipe for “taste as a process” can also be applied to other tasks where an agent lacks a sense of style.

Story

Key Questions Answered

What it is and why it matters?

Stageshow teaches an agent to create faux UI—in other words, interfaces that are not real. These are polished product demos for landing pages, promotional videos, and infographics. The actual application is not required: the agent draws the screen itself and animates it. According to the author, the examples in the post were made without screen recording. The agent drew and brought all of them to life. The problem will be familiar to every product manager and marketer.

How it works under the hood?

The skill's main value lies in its process, not the attractive images. It guides the agent through seven steps. Choose the format: static or animated, looping or single-pass, and the dimensions. Choose the look: light, dark, blueprint, or glass, as well as the product's real chrome and icons. Devise a narrative spanning 3–5 scenes. Take the closest reference example and adapt it. Assemble the screen: a few real lines, with placeholders for the rest.

What else it can do?

The feature set is quite practical. The skill draws browser and application windows and phones, and supports the macOS 26 style. It offers several cursor variants: the cursor finds elements by name and changes shape on hover. There is a camera that zooms in on the relevant area, as well as annotations and bento grids. The examples include styles inspired by Linear, Slack, Figma, Notion, and other products. Theme support is especially important.

ZK
Zhemal Khamidun — CPO at Alpina Digital, product manager of AlpinaGPT. Building AI products since 2019. Hamidun News is a pet project that grew into a production aggregator with 6,000+ readers.
✦ Hands-On AI Engineering · Hamidun Academy

Build & Ship Production AI Agents Without Boilerplate Code

Start your free 72-hour trial at Hamidun Academy (academy.hamidun.com) — interactive lessons on Claude Code & Cursor, live Tech Radar, and production agent templates.

Start 72h Free Trial →Vibe-Coding Intensive
What do you think?
Loading comments…