Skip to content
All posts

Building disposable UI

New
5 min read

When AI hands me nine options, I build a page to judge them, then throw the page away. The decision is the only part I keep.

This week I listened to 72 sound effects on a page Claude Code built for me. I picked my favorites. I will never open that page again.

I build pages like this almost every day now. Not products. Small, throwaway interfaces with one job: help me judge something. Which sound. Which thumbnail. Which layout.

I call it disposable UI. Here is what it looks like in three kinds of work, and what it taught me.

Why a page beats a folder

AI rarely gives me one answer. It gives me nine.

Judging nine things in a folder means opening a file, listening, opening the next one, and forgetting the first. A page puts all nine in front of me, side by side, in context.

One user, which is me. One job. One lifespan: until I've decided.

Watching: video editing

A video editor wants me to commit. So I build the comparison next to it.

For my showreel, every kind of sound effect got a switch: A, B, C or off. The video keeps playing while I flip, so I hear each whoosh where it will actually land.

A review page titled Showreel, Round 3. A video player sits above a grid of cards, one per kind of sound effect: whoosh, tick, pop, impact, riser and UI tap. Each card has a switch with A, B, C and Off, and lists the three candidate sounds.
Every kind of sound gets a switch. The video keeps playing while I flip.

On a longer video I wanted to jump straight to the parts I was worried about. So the page lists every shot and sound in the cut. Click a row and the video goes there.

A cue index. A video player on the left, and on the right a list of rows, each with a timestamp, the B-roll shot at that moment and the sound effects on it.
Every shot and sound in the cut. Click a row and the video jumps there.

And before anything renders, I lay the key frames out on one canvas. Changing a still is free. Changing a render is not.

Sixteen frames from a storyboard in a four by four grid: Portfolio of Mahdi Farra, a row of company logos, product names, and a sequence where a dot opens into a hole and the Peeko logo rises out of it.
Key frames for my showreel, laid out before a single second was rendered.

Hearing: the blind sound test

Sometimes the answer is that there is nothing to fix. I compared three masters of the same video, matched for loudness, and couldn't tell them apart. The master stayed. A page that says "stop fiddling" saves more time than one that tells me what to change.

The audio test section of a review page. Stretches of the video, each with three versions to switch between: Original, Current master and Peak limiter, with their loudness listed. A Match loudness checkbox is ticked.
Three masters of the same video, matched for loudness. I couldn't hear a difference.

The sound effects test is the one I'd tell you about at dinner. Eight kinds of effect, nine takes of each. Three from a free library, three from a model running on my Mac, three from ElevenLabs. All the same loudness, shuffled, with the source hidden until I submitted.

A dark page titled Sound effects, blind. Under the heading Whoosh there are nine numbered rows. Each row has an Alone button, an In context button, ratings from 1 to 5, and Unusable and Favorite buttons. No row says where the sound came from.
The blind test. Nothing on the page says where a sound came from.

Three things came out of it.

The sources were close. The generated sounds held up next to the library ones, all within a third of a point out of five.

An AI couldn't pick for me. I asked an audio model to rank them, and it matched my favorite in one kind out of seven.

And I'm not consistent. The page quietly repeated two sections at the end. On one I matched my own ratings almost exactly. On the other, barely.

The next day the same idea moved into Warbloc, the strategy game I'm building. Each sound plays inside a looping scene, at the exact moment the game would play it. I rated 412 candidates there, and 69 of the game's sounds are ones I picked.

The Warbloc sound lab. A list of sound events on the left, a 3D scene of a desert base in the middle, and on the right a stack of candidate sounds, each with trim and gain sliders, ratings from 1 to 5, Unusable and Favorite.
The sound lab inside Warbloc. The scene loops and the sound plays when the game would play it.

Looking: design with knobs

For design, I ask for a mockup and a control panel for that mockup in the same file. The refresh of this site had seven directions with 45 controls each: colors, fonts, spacing, motion.

The design lab showing a minimal homepage mockup on the left and a dark controls panel on the right, with groups for colors, typography and layout. Each control is a color swatch, a font menu or a slider with a number.
One direction with its control panel open. Every slider changes the page live.

When it looks right, I export. This is everything that leaves the lab:

{
  "variant": "variants/01-hairline.html",
  "name": "Hairline",
  "tweaks": {
    "--h1-size": 96,
    "--band": 208,
    "--gutter": 64
  },
  "customCss": ""
}

I paste that into Claude Code and say build the real thing from this. The mockup itself never gets used.

A grid of twelve homepage mockups for mahdif.com in a four by three layout, ranging from white with thin rules to black, serif on cream, dark green, and a rust and cream split.
Twelve of the directions I looked at for this site. None of this code is in the site you're reading.

It took four rounds, and in the end I drew the final design by hand in Figma. I couldn't have drawn it first. The mockups showed me what I didn't want.

Smaller calls work the same way. Seven button colors on the same Warbloc screen:

Seven copies of the Warbloc main menu, identical except for the color of the Skirmish button: two blues, a light blue, a peach, and three reds.
Seven button colors on the same screen. I went with crimson.

Twenty seven logo concepts for 30 cents, to pick one I then redrew myself:

A sheet of nine numbered logo concepts for Warbloc in a three by three grid, each a geometric mark in light blue and peach above the WARBLOC wordmark.
One of three sheets of generated logo concepts.

And a column for rating posts in one of my tools, which went from first mockup to merged in about an hour:

A design lab titled Radar judgment column, with five tabs for variants named Sections, Ledger, Dial, Quiet and Steps. The page shows a post card with a verdict column on the right.
Five versions of one column, flipped through in a tab bar.

When to build one

Build one when you're arguing with yourself. Going back and forth in your head means you can't see enough options at once.

Build one when judging needs a sense a chat window doesn't have. Hearing it, seeing it at feed size, feeling the spacing.

Build one when the answer should be blind. Hiding the source and the order is tedious by hand and trivial on a page.

What it doesn't do

A page doesn't tell me what's right. Before any of the site mockups existed, I wrote down what wasn't allowed:

  • Gradient text of any kind.
  • Glassmorphism, frosted panels, backdrop-blur decoration.
  • More than one accent hue. Zero is a legitimate and welcome choice.

No slider produced that list. Taste picks the direction. The knobs only make it exact.

It isn't free either. 412 ratings is hours of listening.

And it has to stay disposable. I once let one grow into a real tool for making share images. Within a day I was telling Claude that Figma was easier.

The part that moved

Building the tool to decide used to cost more than the decision. So I decided by feel. Now the page costs minutes, and my time goes to the decision.

The code is disposable. The decisions are what I keep.

0 hearts

Get new posts by email

I write when there is something worth saying. One email per post, nothing else.

No spam. Unsubscribe in one click.

  • ai
  • design
  • craft
  • workflow