Why the disposable HTML file replaced the Figma mockup

You spend three days getting a modal flow right in Figma, auto-layout padding tuned, a token for every colour, hotspots wired for the click-through. Then an engineer builds it for real, and the empty state was never drawn, the German string breaks the container, and the animation you described as "snappy" became whatever cubic-bezier felt closest. None of that is anyone's fault. It's what happens when the artifact you designed with was never software.

The medium changed, not the tool

For twenty years the pipeline stayed the same shape regardless of which app you were in: Photoshop comps, then Sketch symbols, then Figma's auto-layout, each one faster at drawing rectangles, none of them changing the underlying deal. You built a simulation. Someone else rebuilt it in code, and the distance between those two things was where the translation penalty lived.

What replaced it is not a better canvas. It's a single, disposable HTML file, generated by a coding agent in seconds, thrown away as soon as it's answered the question it was built for. Anthropic's Artifacts feature, live since June 20, 2024 alongside Claude 3.5 Sonnet, is the plumbing this runs on: by a June 2025 update, Anthropic reported users had created over half a billion of them. On June 18, 2026, the same mechanism extended into Claude Code itself, turning a coding session's in-progress work into a page a whole team can watch update, not a file someone has to email around.

What a static frame genuinely cannot tell you

A mockup evaluates appearance. A running file evaluates behaviour, and those are different questions with different answers.

What Figma shows you	What a live HTML file shows you
A simulated hover state	A real hover, focus, and active state
A fixed-width comp	Actual reflow at a real viewport width
A clean, three-item happy path	Whatever your mock data throws at it, including the ugly rows
A described motion curve	A spring you can actually watch run

Motion is the clearest case. Telling an engineer "snappy, slight bounce on exit, damping around 20" is a description of a feeling, and it gets guessed at, correctly or not, once it reaches CSS. A live file skips the description. You watch the actual curve in the browser and say whether it's right.

Edge cases are the quieter case, and they're the one that actually breaks things later. A static mock defaults to the golden path: three tidy list items, a twelve-character name, a clean square avatar. Real data is never that polite. Ask a coding agent to seed the same screen with a name that's ninety characters long, a null value where an image should be, and a date from the wrong century, and you find out in the first minute whether the layout survives contact with reality, instead of finding out three weeks later when it doesn't.

Five variants, one reasoned pick

This is not a hypothetical inside Anthropic. In a July 8, 2026 interview, Claude Code's own design lead, Meaghan Choi, described a personal workflow built around exactly this: a custom /prototype skill that generates five standalone HTML variants of a screen in one pass and picks one back with stated reasoning, run inside its own git worktree so that several of these sessions running in parallel don't overwrite each other's output.

That detail matters more than it looks. Producing four structurally different navigation concepts used to mean duplicating frames and renaming layers by hand for the better part of an hour. A prompt that asks for the same four concepts side by side, wired to real interaction, costs closer to a minute of generation time. The scarce resource stops being your ability to produce options. It becomes your ability to look at five of them and say which one is actually right, which is a harder and more useful problem to be spending your day on.

Building a tool instead of fighting a prompt

The one place this genuinely struggles is fine-grained physical feel, exact spring damping, precise cursor timing, the kind of thing a model reasons about from a description rather than feeling directly. Typing "make it slightly snappier" five times in a row is not a workflow, it's a loop with no exit condition.

The fix that keeps showing up is to stop prompting for the feeling and ask for a tool that lets you dial it in by eye instead:

<div id="tuning-panel" class="fixed bottom-4 right-4 p-4 bg-zinc-900 text-white rounded-xl text-xs font-mono">
  <div class="font-bold mb-2 text-zinc-400">MOTION SCRUBBER</div>
  <label class="block mb-1">Damping: <span id="val-damping">15</span></label>
  <input type="range" id="input-damping" min="5" max="50" value="15" class="w-full mb-3">
  <label class="block mb-1">Stiffness: <span id="val-stiffness">120</span></label>
  <input type="range" id="input-stiffness" min="50" max="300" value="120" class="w-full mb-3">
  <button id="trigger-anim" class="w-full py-1.5 bg-blue-600 rounded font-semibold">Replay</button>
</div>

Ask for this once, alongside the component it's tuning, and you get sliders for the exact parameters you keep re-describing in words. You drag until it feels right, then copy the numbers into the real spec. The model is bad at guessing your intent from a second adjective. It is good at building you an instrument to find the number yourself.

Try it on the next component you'd normally sketch first

Pick one piece of UI you would otherwise open Figma for this week: a notification pattern, a drill-down accordion, an empty state you haven't designed yet. Ask a coding agent for a single, self-contained HTML file, plain Tailwind via CDN, vanilla JavaScript, no build step, showing two or three distinct approaches side by side with realistic mock data, long strings and null values included, not the clean three-item happy path.

That's a five-minute prompt and roughly thirty seconds of generation. Click through all of them, throw away the two that don't work, and keep going on the one that does. You will have spent less time than it takes to duplicate one Figma frame, and the thing you're holding at the end is closer to the real thing than the frame ever would have been.