When AI Can Write Code, But Lacks "Taste"
In the era of autonomous software engineering agents like Claude Code, Grok Build, and Codex, prompting an AI agent to generate working React components takes only seconds. However, any digital product designer or frontend engineer who has tasked an LLM with building interactive product preview demos (Faux UI) for marketing landing pages inevitably hits a frustrating ceiling: the output looks sloppy, heavy-handed, and fundamentally devoid of design taste.
Because an LLM understands tabular data, it instinctively crowds every single cell with realistic text, overwhelming the viewport. Because it knows software windows have chrome, it shrinks an entire desktop application into a tiny card like a pasted screenshot. Cursor animations hop erratically without realistic velocity curves, micro-interactions lack causal pacing, and looping states snap abruptly at cycle boundaries.
In November 2026, Benji Taylor—Head of Design at X (and xAI), and previously the design lead celebrated for crafting Stripe's iconic landing page experiences—open-sourced a landmark project titled Stageshow.
Stageshow is neither a novel foundational model nor a bloated graphics framework. It is an Agent Skill—a standardized capability package loaded directly into an agent's runtime context to bridge the gap between "syntactically valid code" and "exquisite craftsmanship."
THE AGENT CRAFTSMANSHIP WORKFLOW
┌────────────────────────────────────────────────────────┐
│ HUMAN INTENT ("Looping hero demo: assign issue to rep")│
└───────────────────────────┬────────────────────────────┘
▼
┌────────────────────────────────────────────────────────┐
│ STAGESHOW AGENT SKILL RUNTIME │
│ • Core Doctrine: Framed with intent • Purposeful motion│
│ • 5 Failure Modes: Too Much, Too Little, Boxed, Flat...│
│ • Clean React Kit (Stage, Window, Cursor, Camera) │
│ • Battle-Tested Gold Reference Examples │
└───────────────────────────┬────────────────────────────┘
▼
┌────────────────────────────────────────────────────────┐
│ AUTOMATED FRAME-BY-FRAME EVALUATION HARNESS │
│ • Headless sequence filming (film.mjs) │
│ • Multi-frame contact sheet generation │
│ • Automated 4px shift & layout boundary checks │
└───────────────────────────┬────────────────────────────┘
▼
┌────────────────────────────────────────────────────────┐
│ PRODUCTION DELIVERABLE: Native, Zero-Seam React Code │
└───────────────────────────┘
What is Faux UI, and Why Are High-Growth SaaS Companies Obsessed With It?
Visit the homepage of Stripe, Linear, Raycast, Vercel, or Apple, and you will rarely encounter static, uninspired screenshots or heavy, bandwidth-draining video files. Instead, the interface invites viewers into fluid, interactive microcosms: an automated cursor drags an invoice into an archive slot, MRR counters roll smoothly with dynamic font-metrics, or a notification banner gently cascades from the navigation header.
This is Faux UI (Simulated Product Interaction).
Faux UI is not the bloated production codebase connected to a live database. It represents a distilled, high-fidelity abstraction of a core workflow, rendered as lightweight, responsive React components. It loads instantaneously, scales crisply across Retina viewports, and communicates core product value in less than three seconds of user attention.
Yet building gold-standard faux UI manually consumes dozens of senior design and engineering hours. While no single step is mathematically complex, the discipline hinges on hundreds of micro-decisions: precise shadow diffusion, intentional crop offsets, knowing when to replace peripheral text with subtle placeholder bars, and shaping cursor bezier curves to mimic human biomechanics.
The 5 Failure Modes of AI-Generated Interfaces
Benji Taylor observes that when frontier models generate faux UI zero-shot, they consistently stumble into five architectural traps:
| AI Failure Mode | Observed Behavior | How Stageshow Resolves It |
|---|---|---|
| 1. Too Much | Cramming realistic text into every table row, creating unreadable visual noise. | Enforces strict narrative focus: real copy only on the active subject; placeholder lines for peripheral rows. |
| 2. Too Little | Abstract wireframes of plain grey boxes that fail to read as an authentic software product. | Inherits genuine application chrome, authentic brand marks, and standardized icon geometries. |
| 3. Boxed | Shrinking an entire browser or desktop window into a tiny container like a pasted thumbnail. | Intentional Cropping: Windows bleed intentionally off canvas boundaries, centering solely on the interaction payoff. |
| 4. Flat | Uniform visual weighting across all components, stripping hierarchy. | Introduces volumetric depth, frosted glass surfaces, and dynamic virtual camera push-ins. |
| 5. Bland | Utter absence of brand personality or distinctive system styling. | Native Design Token Mapping: Ingests real product palettes, typography, and corner radii seamlessly. |
"It reads as a real product, simplified to what the viewer needs, framed with intent, and every motion has a cause."
— Benji Taylor, Head of Design at X.
Deconstructing the 5-Step Evolution to Production-Grade Faux UI
To demonstrate how Stageshow elevates raw agent output, Benji walks through a canonical task: assigning a support ticket to teammate Maya.
Left to its own devices, an LLM defaults to Step 1. Stageshow guides the agent systematically through five aesthetic milestones:
- Step 1 — Screen (Unfiltered UI): The complete inbox window rendered in quiet grays. While syntactically correct, it feels boxed-in like a pasted screenshot, visually cluttered.
- Step 2 — Frame (Intentional Crop): The window pins to the frame boundary and bleeds off-screen. The focal card required by the story slides cleanly into view.
- Step 3 — Script (Autonomous Action): The menu triggers, Maya is assigned, and the state resets. Without a cursor, however, the interaction feels uncanny and ungrounded.
- Step 4 — Cursor (Causal Motion): A visible cursor connects causes with effects, arcing across coordinates with natural deceleration.
- Step 5 — Loop (Seamless Reversal): Maya's avatar docks and pauses for a visual payoff hold. The cursor then undoes the assignment on-screen, resetting the animation to its exact origin coordinate without any visible loop seam.
Technical Architecture: Driving Demos from State Machines
In Stageshow, every demo is architected as a Stage—a fixed-canvas container where visual components render strictly from internal state. An asynchronous choreography script alters that state beat by beat.
The cursor lives on the stage, targeting DOM nodes by semantic name:
// Stageshow Choreography Script Pattern
async function script(a: Act<S>) {
await a.click({ at: "share" }); // Cursor arcs toward the Share button, triggers press
await a.set({ open: true }); // Flips overlay state, awaits layout paint
await a.wait(2000); // 2-second payoff hold for viewer comprehension
await a.click({ at: "close" }); // Dismisses panel
await a.set({ open: false }); // Resolves closed state
await a.move({ x: 600, y: 300 }); // Returns smoothly to initial coordinates
}
Three Engineering Guardrails for Smooth Physics:
- Persistent DOM Mounting: Component trees remain mounted during exit transitions, eliminating jarring layout popping.
- Measured Geometry: Cursor landing coordinates and overlay alignments calculate dynamically from runtime geometry, preserving precision at arbitrary display scales.
- Decoupled Virtual Camera: A virtual viewport layer pushes in on key focal points (such as an anomaly spike on a metric chart) and pulls back gracefully without altering underlying scene markup.
Standardized Window Chrome and Design Token Integration
The application window serves as the hero element. Stageshow provides unopinionated, mathematically precise primitives (kit/):
- Standard & Tabbed Browsers: Essential for SaaS web applications, featuring realistic tab activity indicators.
- Frosted Glass: Inspired by Stripe's aesthetic, adapting translucency dynamically to surrounding backgrounds.
- Quiet Cards: Clean white surfaces resting over diffused shadows for content-dense landing pages.
- macOS Geometry: Accurate traffic light spacing, floating sidebars, and native toolbars.
Crucially, palettes, font scales, border radii, and gutters map to Design Tokens. When an agent reads an enterprise design system, it maps tokens directly onto the kit, allowing the generated demo to sit seamlessly beside real product interfaces.
"Filming over Screenshot": The Automated Evaluation Harness
Traditional coding agents evaluate their work by re-reading source code or capturing a static screenshot after initial render. Both approaches fail to identify motion flaws—which account for over 90% of perceived software clumsiness.
Stageshow resolves this through a three-tier headless evaluation harness:
film.mjs(Headless Video Capture): Executes the demo headlessly, records the interaction sequence frame by frame, and outputs a flat Contact Sheet.jumps.mjs(Single-Frame Snap Detection): Scans adjacent frames to catch 4-pixel layout snaps or dropped opacity states.layout.mjs(Bounding Box Validation): Algorithmic verification ensuring textual labels and controls never overflow parent boundaries.
When an anomaly occurs, the harness flags the exact frame number and coordinate offset, allowing the agent to self-correct CSS transitions before delivering code to human engineers.
Quick-Start Guide: Deploying Stageshow
You can equip any agent runtime (Claude Code, Grok Build, Cursor, Hermes) with Stageshow via a single terminal invocation:
npx skills add benjitaylor/skills --skill stageshow
Running the Interactive Playground:
Inspect reference implementations and component primitives locally:
cd ~/.skills/stageshow # Or your local skill directory
npm install
npm run dev
The playground renders gold standards and comparative studies side-by-side: examining flawed zero-shot output against refined Stageshow implementations.
Structuring High-Yield Prompts:
For optimal results, keep initial prompts focused: One interaction • One product • One explicit viewport size:
"Build a small looping hero demo for a task management tool: The user presses ⌘K, searches 'Assign', and assigns the issue to themselves. Crop the window off-screen; lean the camera in as the avatar docks."
Strategic Implications for Enterprise AI (OXMODE Perspective)
From Benji Taylor's work on Stageshow, OXMODE synthesizes three foundational directives for enterprise AI adoption:
- Refactor the Skill, Not the Model Output: When an agent yields subpar results, avoid manual code fixes. Document the failure criteria inside the skill (
SKILL.md), provide clear reference benchmarks, and re-dispatch a clean agent. The improvement is permanently codified for all future runs. - "Taste" is Codifiable Engineering: High-end craft is not an inexplicable gift; it is a discipline comprising hundreds of deliberate, micro-decisions. Core business capabilities—from B2B proposal synthesis to inventory audit—can be codified into analogous Agent Skills.
- Autonomy Requires Quality Gates (Evals): AI agents cannot achieve true autonomy without dedicated verification harnesses (like Stageshow's frame-by-frame filming) to measure and correct their own work independently.
References
- Taylor, B. (2026, October 31). Stageshow. benji.org. https://benji.org/stageshow
