SKEUO-UI

One template, many skins

The whole project hangs on a single move: separate the geometry of the player from its appearance. The geometry — where the visualizer sits, where the knobs go, the arc the transport buttons follow — is one canonical layout. The appearance is a generated body wrapped around that layout. Below, the same control grammar reads as a burger, a translucent G3, a rusted war machine, a biomechanical skull, and a chrome fiend — five bodies, one player.

Alignment by construction

The hard part of a generated UI is making the painted cavities and the live controls agree. The naive approach — generate a wild body, segment it, then run computer vision to find where the screens and knobs landed — puts boxes 5–10% off, and a player that's 5% misaligned reads as broken. Skeuo-UI removes that whole class of bug by never detecting the layout at all. It draws it.

1 · Silhouette

An image model (gpt-image-2) designs only a flat silhouette — a reliable ask, and where the wild shape comes from. The prompt invites tall, squat, asymmetric, angular, organic — not a generic blob.

2 · Draw

The screens and control wells are drawn deterministically inside that exact mask, fitted band-by-band to the widest interior span. Every coordinate is known.

3 · Paint

Nano Banana paints the material over the blueprint, layout-preserving — chrome, flesh, plastic, bone — without moving a single well.

4 · Alpha + template

The same silhouette mask becomes the player's alpha (no segmentation, no holes), and the player template is emitted straight from the drawn coordinates.

Because the controls and the cavities come from the same coordinates, they cannot disagree. Sprites are mounted slightly oversized (knob caps 116%, molded transport faces 118% of their box) so the art seats into the painted rim instead of floating in the cavity. One silhouette can be fitted with different layout grammars — classic stacked rectangles, a hero center play button, an orbit round dial ringed by buttons, a squat capsule, a sparse minimal puck — all gated so the screens stay readable.

The controls are real

Every control is wired to a real action. Flip switches whose levers flip — because the same switch is rendered twice in one sprite sheet (lever down · lever up) and toggling swaps the actual art. Knobs whose caps turn. Faders with real caps. Molded transport buttons in the skin's own material, split out so a play button reads as a play button even when an organic body bridges its neighbours.

Underneath sits a generative WebAudio engine: a saw-chord pad → preamp → ten peaking EQ bands → tilt → pan → volume → analyser. The recessed screens show live content fed by that graph — a canvas spectrum off the real post-EQ analyser node, a scrolling marquee, a clock, a playlist, a radial spectrum and center clock on round dial screens, a circular seek ring you can drag. Turn the volume down or push an EQ band and you hear it and see it move in the spectrum.

The website carries the full kit: a sidebar of skins, swipe-to-switch on mobile, Create skin (generate a new body from a text prompt through the same pipeline, server-side), Edit template (drag and resize the control layout), and Connect Spotify to drive real playback through any skin. The same React bundle is also a Tauri desktop widget — a transparent, non-rectangular floating toy whose shape is the skin's own silhouette, with per-pixel click-through, a menu-bar tray, and a skeuo:// handoff so picking a skin on the site launches the desktop player already wearing it.

Stack

gpt-image-2 / gpt-image-1.5

Freeform silhouette design (wild shapes + typography), and transparent-RGBA sprite + molded-button sheets.

Nano Banana Pro (Gemini 3 Pro Image)

Structure-preserving paint pass over the blueprint — keeps UI edges crisp where gpt-image smears them through its low-res latent.

Python generation pipeline

wild_sculpt.py: silhouette → deterministic layout → paint → alpha → template. The interior is drawn, never detected.

React + WebAudio

Template → regions → sprite components; every control binds to a real action over a saw-pad → EQ → analyser graph that's audible and visible.

Canvas + Pointer Events

Linear and radial spectrum, scrolling marquee, draggable seek ring; touch and mouse.

Cloudflare Pages + Functions

/api/generate ports the pipeline server-side (FAL key server-held, per-IP + global cost cap). Live at skeuo-ui.pages.dev.

Tauri (macOS)

Same bundle as a transparent shaped desktop widget; per-pixel click-through, tray, window-state persistence, skeuo:// deep-link handoff, Spotify via a loopback OAuth listener.