Best model for UI design, by tier

Claude Opus 5.5 is the model to point at most interface work, and Claude Fable 5.2 at the longest and hardest builds. That follows Anthropic's models overview, which suggests Opus 5.5 for most work and Fable 5.2 for demanding, long-horizon jobs, and the reason has almost nothing to do with visual judgment: the tiers differ in how many constraints they hold over a long session and in what each pass costs.

Tier changes cost and consistency far more than it changes taste. On Design Arena's Website board at the time of writing, where models build from short prompts, Claude Opus 5.5 scores 1324, Claude Sonnet 5.5 1315 and Claude Haiku 5.5 1257. Those are real differences in defaults, measured where the prompt left the decisions open. A fully specified card component leaves the defaults very little to decide.

The short call:

• Full interface, design system plus existing code: Claude Opus 5.5.
• The longest, hardest builds: Claude Fable 5.2.
• A screen at a time: Claude Sonnet 5.5.
• One component against a spec: Claude Haiku 5.5.
• The spec itself: written already, in the Thanor library.

Three interface heroes built from a spec that left no slot open:

UI output is a decision problem#

An interface is roughly thirty decisions repeated across every screen. A model asked to design one without those decisions does not refuse; it supplies the median and moves on.

The median is recognizable, and once you can name it you see it everywhere:

• Panel on page, both near-white, separated by a 1px gray line.
• 8px radius on the card, the input, the button and the avatar alike.
• Body copy at 14px, because dashboards default small, with no stated measure.
• A single hover state, no focus ring, no loading treatment, no empty state.
• Icons from one set at 20px, floating without an alignment rule.

That output is not broken. It is unowned, and a user feels that as flatness rather than as a bug. Interfaces earn their premium read from density and restraint, which are two of the first things a blank prompt discards.

Density is the one worth chasing first, because it is almost free. Body copy at 17px with a 1.62 line height and a 64ch measure, on a #0B0B0F ground with a #14141A raised panel, already reads as a considered product before a single component has been styled. The same layout at 14px on near-white with a gray hairline reads as an admin tool, and nothing else about it changed.

The repair is a page of values. Thirty decisions, written once, reused on every screen, which is the same discipline a design system encodes and the same one a real prompt library ships in place of adjectives.

The four Claude tiers, ranked by job#

Pick the tier by what has to stay in view, not by how good you want the design to be.

Claude Opus 5.5, released September 22, is the one to use when the existing codebase is part of the problem. Every current Claude tier lists a 1M token window, enough to hold the token file, the component inventory and the screens already built, so screen nine can obey the decision made on screen one rather than reinventing it. Claude Fable 5.2, released November 9, is the step up when a long build still falls short on Opus.

Two cautions before you configure anything. Claude Mythos 5.2 is real and limited to organizations verified through Anthropic's programs, so it belongs in a news item rather than in a workflow. And pin real model ids: claude-opus-5-5, claude-fable-5-2, claude-sonnet-5-5 and claude-haiku-5-5 are current, while Claude Fable 5.1, Claude Sonnet 5 and Claude Haiku 4.5 are now listed as legacy models.

The tier you pick also sets how you work. A flagship rewards one long, dense session where the whole system stays in view. A cheap tier rewards many short requests, each carrying the token block again, which is a different discipline and often a faster one.

What a UI brief names that a model will not#

Five groups. Every one of them is a value, and every one of them is the difference between a mock and an interface somebody owns.

1. Surfaces, as a stack. #0B0B0F page, #14141A raised, #1C1C24 overlay, and a border of 1px solid rgba(242,239,233,0.08) rather than a gray line with no relationship to either.
2. Density, as numbers. 17px body at 1.62 line height, a 64ch measure on prose, spacing off a fixed ramp of 4 / 8 / 12 / 20 / 32 / 52.
3. Response, as one curve. cubic-bezier(0.32, 0.72, 0, 1) at 240ms for anything a user triggers, 620ms and cubic-bezier(0.22, 1, 0.36, 1) for anything the page does on its own.
4. Six states per control. Rest, hover, focus, active, disabled, loading. Ask for six and you get six.
5. Refusals. No gradient behind text. The accent, #D8492B, appears on one element per screen. Nothing animates on scroll below the first viewport.

The refusal list is the half almost nobody writes, and it is the half that makes two interfaces built from the same library look unrelated to each other. Write it per design rather than as general advice, because the useful refusals contradict one another: an interface whose argument is density refuses whitespace, and one whose argument is calm refuses the counter and the draw-on.

Where cheap tiers hold up#

A fully specified component does not need a flagship. Claude Haiku 5.5, given a hex value, a radius, a ramp position and a 240ms duration, has nothing left to invent, because following an instruction is cheap and no taste is being asked for.

Where the cheap tiers slip is memory across a batch:

• Component four uses the 14px radius you named. Component eighteen quietly drifts to 12px.
• The focus ring offset is right in the button and missing in the select.
• The loading state exists on the form and not on the table.

All three are context failures, and all three have the same fix: paste the token block with every single request rather than relying on the conversation to remember it. A tier upgrade buys the same reliability at a higher price, which is a legitimate trade when the batch is large.

There is a cheap check for all three. Build one component, then ask the same tier for a second component that has to sit next to it, pasting the token block again. If the radius, the border color and the focus offset match without being corrected, the block is complete. If they drift, the block is missing a value, and it is faster to find out on component two than on component twenty.

Claude Design, Anthropic's design tool and now a template inside Claude, builds designs and prototypes on a canvas and exports standalone HTML, and it rewards the identical discipline. What it does with a real specification is the clearest demonstration of the point this article keeps making, and Claude Design prompts that don't give you the default look gives the brief to start from.

The verdict for interface work#

Claude Opus 5.5 for a whole interface, Claude Fable 5.2 for the longest and hardest builds, Claude Sonnet 5.5 for a screen, Claude Haiku 5.5 for a component. That is the entire tier question, and it is a budget decision.

Anybody arriving at this question because an interface came back looking ordinary is diagnosing the wrong part. The tier decided what the session could hold. The brief decided what the screen looks like, and the brief is the artifact you can change this afternoon.

The design decision sits elsewhere:

• Thirty values, written once. Surfaces, ramp, scale, radii, one curve, six states.
• Three refusals, stated per design. What this interface does not do.
• Pasted with every request, so no tier has to remember anything.

Do that and the tier becomes what it should be, a line on an invoice. The same check applied to Opus 5.5 lands in the same place, which is the reason this cluster treats the brief as the durable asset and the model name as the part that expires.

Thanor sells those values as finished art direction per design, from the palette in hex to the easing curves and every interaction, with the media the page uses, for personal and client work. Free accounts open the designs marked free, and the plans open the rest.

Open Vesperion and copy its prompt; it is free with an account. Read it as a token block before you spend another afternoon choosing a tier, then find the interface closest to yours in the library.