X and SpaceX design lead open-sources Stageshow faux UI demo Skills

Recommended by the design lead of X & SpaceX: "Product Illustration Taste" Skills

@benjitaylor's open-source Stageshow skills turn the hundreds of small decisions Benji makes when hand-crafting fake UIs (stills, motion, bento) into workflows, gold-standard examples, and film self-checks, specifically targeting that "looks like a real product, but is actually choreographed illustration" style found in marketing pages and doc heroes—stills, short animations, cursor walkthroughs, phone touch interactions, bento grids.

Open-source project: https://t.co/osT6EgToQW

Skills deliverables · Skill (SKILL.md + references/): one overarching principle—read like a real product, keep only the information the viewer needs, compose with intent, give every action a reason; plus five failure modes spelled out (too much / too little so it looks like a wireframe / Boxed, cramming a whole window into a card / Flat, everything weighted the same / Bland, no brief or style). The seven steps are mostly settled before writing code: medium and dimensions, look, a 3–5 beat story, copy the nearest gold standard then adapt it to your own product, real string budget, choreography loop, film against the gold standard.

· kit/: React components you can copy into a project (Stage, Window, Phone, cursor, and a few quiet parts), with bundled CSS and no third-party animation runtime; the hard-to-get-right things (digits that only roll the changing places, cards flying into slots, messages growing out of the input box, etc.) are handled by the kit. Theme/palette/real-word density are stage props, and you can also map your product's design tokens onto them so the demo fits your own product instead of a generic gray window.

· examples/: a large set of gold standards (hero, bento, form errors, drag-to-reorder, chart scrub, Dynamic Island, upload-and-share, etc.) and recognizable product studies (Figma, Linear, Slack, Raycast, Finder, Spotify, etc.), borrowing interactions, not other people's brand identities. The agent is instructed to first film the nearest gold standard and copy the whole folder before modifying, rather than glancing at it and rewriting.

· Playground + film.mjs: local preview of nine styles and bad/good sample pairs; filming produces a contact sheet, measures layout, and captures a frame jump. The author stresses: reading only the code or filming a freeze-frame hides the fake that only shows in the in-between frames; passing --gate is necessary but not sufficient—a human still has to watch it once.

How it differs from "letting the model generate UI directly" The output is ordinary React—it can go into a repo, be modified, and go compact by page width, rather than being an unmaintainable image. The demos are scripted illustrations: https://t.co/fpSn1oKp9q() draws press feedback, a.set() changes the scene, and it does not automate real app controls. Clips like the holiday Japanese keyboard, multiple cursors, Live↔Publish, and chart jitter sell choreography and loop seams, not browser screen recordings.

How Benji validates it and sees the future He compares everyday product snippets (Figma, Gmail, Finder, Spotify, etc.) with and without the skill, and says it is consistently better once attached; the iteration method is to write any problem found into the skill and rerun the whole round, rather than hand-fixing once and calling it done.

He judges that model taste will improve in the future, and some rules (like traffic-light sizing) have already stopped applying to newer models, but composition and motion causality still often need to be pointed out; so the skill may be useful for a phase, and the demos it produces will themselves become small examples the model can learn from—"helping itself become obsolete" is written up as an acceptable ending. The limitations are also spelled out: the checks catch errors, not boring ideas; it can't draw; the rules are the author's taste, not a neutral standard; and most demos still need a few rounds of human feedback.