Stageshow · the prompts
Three UIs. Three prompts.
Each UI at the start of my Stageshow reel was made by a coding agent (Claude) with Stageshow, a skill by Benji Taylor, head of design at X. These are the exact briefs I gave it. Install the skill, paste a prompt, and your agent builds it as a React scene with the skill's kit.
npx skills add benjitaylor/skills --skill stageshow
01 · the hook
Stride: finish and save a run
A phone whips in on near-black, the clock rolls, the camera dives into "Hold to finish", the ring floods lime and the summary lands.
Build a dark-mode, high-motion product film of a running app for the opening (hook) shot of an Instagram reel. It plays full-width on a phone over a near-black (#0b0b0d) background for about 2.5 seconds, so it must grab attention instantly and be visibly alive at every moment. Subject: Stride, a running app: the last seconds of a run, hold to finish, the summary landing (route, 10.02 km, pace, splits), save. - Dark mode all the way: the ground must be dark (near #0b0b0d–#121214, optionally with a faint topographic texture or a soft accent glow behind the phone). A dark app UI with one vivid accent (volt lime is fine) and white type. - More motion, bigger motion: something LARGE moving at every moment, perceptible at phone size at a glance. The first 2.5 s matter most: open already in motion (the phone sliding/tilting in, the camera pushing in, the route drawing with a glowing runner dot, the clock and distance rolling), then the finger hold with the ring filling and the screen reacting, then the summary rising. Use a Camera that keeps travelling (push, pan, pull back), never parked. Overlap motions so there is never a still second; hold the payoff no more than ~0.8 s; the loop resets with motion. How: - Read SKILL.md and follow its workflow, plus references/motion.md, references/choreography.md, references/framing.md, references/looks.md, references/craft.md, references/products.md, and the kit entries you use (references/kit.md, especially Camera and the phone). Study examples/phone-touch, examples/dark-hero, examples/choreography, examples/controls (Camera) and examples/dynamic-island. - Size: 760px wide, about 1100–1250px tall. Loop 10–12 s. - Rehearse 5–8 passes: look at stills every half second through the first 3 s and every second after, judge each as a phone viewer would, and make sure no second is still.
02 · on "taste"
Stride: the features bento
Dark tiles with one orange accent. The camera pushes into a glowing route, pans to a live phone, the splits grow, the ring sweeps and the year bars rise.
Build a dark-mode, high-motion bento grid for an Instagram reel. It will play full-width on a phone over a near-black (#0b0b0d) background for about 2–4 seconds at a time, so it must read as stunning AND visibly alive at every single moment. Subject: the features section of Stride, a running app (route tracking, splits/pace, weekly goal ring, yearly distance, race-day bib, a phone showing a live run). - Dark mode: use the kit's theme="dark" (see references/looks.md) with a dark ground near #0b0b0d–#121214, dark tiles with subtle hairline borders, one strong warm accent (e.g. a vivid orange/coral or volt lime) plus white type. No purple, no sparkles, no gray placeholder bars: real numbers, names, routes. - Motion density: something LARGE moving at every moment of the loop, perceptible at phone size at a glance. Use real motion, not 1px ticks: tiles slide/scale in staggered at the start, a Camera push/pan travels across the grid (e.g. push in on the route tile, pan to the splits, pull back), the route draws as a thick glowing line with a moving runner dot, split bars grow one after another, the goal ring sweeps, big numbers roll, the phone screen scrolls or its map pans, a cursor or finger interacts with a tile (hover lift, press). Overlap the motions so there is never a still second; hold the final payoff no more than ~0.8 s before the loop resets with motion (not a cut to black). How: - Read SKILL.md and follow its workflow, plus references/bento.md, references/motion.md, references/choreography.md, references/framing.md, references/looks.md, references/craft.md, and the kit entries you use (references/kit.md, especially Camera). Study examples/staggered-bento, examples/dark-bento, examples/dark-hero, examples/controls (Camera) and examples/choreography. - Size: 760px wide, about 1150–1300px tall (fills a 9:16 frame). Loop 10–12 s. - Rehearse 5–8 passes: look at a still every second, judge each as a phone viewer would, and make sure no second is still.
03 · the dashboard
Ledgerly: filter and approve
A dark finance dashboard. The cursor filters to software, rides the glowing chart with a tooltip, then approves the pending Figma invoice as the camera follows.
Build a dark-mode, high-motion product shot of a finance dashboard for an Instagram reel. It plays full-width on a phone over a near-black (#0b0b0d) background for about 2–4 seconds at a time, so it must read as stunning AND visibly alive at every single moment. Subject: Ledgerly, a finance dashboard for small teams: someone filters this month's spending, the chart redraws, they approve a pending invoice, totals roll. - Dark mode: the kit's theme="dark" (see references/looks.md): a near-black ground, a dark window, hairline borders, one vivid accent (e.g. electric blue or green) with white type; amber for pending, green for approved. Real vendor names (the kit has brand marks), real amounts and dates. No purple, no sparkles, no gray placeholder bars in the focal area. - Motion density: something LARGE moving at every moment, perceptible at phone size at a glance: the window and its cards slide/scale in staggered at the start; the area chart draws in with a glowing line and a moving end dot; a big cursor travels with purpose (filter chip → chart scrub with a tooltip following → invoice → Approve); a Camera push-in follows the action (push into the chart while scrubbing, then onto the invoice row for the approve, then pull back); rows slide and reorder when the filter applies; numbers roll; the approve flips with a satisfying fill and a toast sliding in. Overlap motions so there is never a still second; hold the payoff no more than ~0.8 s; the loop resets with motion. How: - Read SKILL.md and follow its workflow, plus references/motion.md, references/choreography.md, references/framing.md, references/looks.md, references/craft.md, references/products.md, and the kit entries you use (references/kit.md, especially Camera and the chart). Study examples/chart-scrub, examples/payout-flow, examples/dark-hero, examples/controls (Camera) and examples/choreography. - Size: 760px wide, about 1150–1300px tall (fills a 9:16 frame; draw the UI large so text is legible on a phone). Loop 10–12 s. - Rehearse 5–8 passes: look at a still every second, judge each as a phone viewer would, and make sure no second is still.
The prompts are the exact briefs I gave the agent, with my local file paths and my own measuring script taken out. Each one ran as a single agent session with the skill installed, using Claude Sonnet.
Stageshow is Benji Taylor's work, not mine. This page is not affiliated with him or with X. His original post ↗