Claude Fable 5.1 for web design

Claude Fable 5.1 has been Anthropic's top model since 1 September 2026 and it is generally available today. It writes a full responsive page with labelled controls, ordered headings, clamp() type and a working reduced-motion branch from a single paragraph of instruction.

Which is why the interesting artefact is not the model. It is the paragraph. Fable 5.1 given adjectives produces the category median with excellent code under it; given values it produces something a client cannot place.

The short call: use Fable 5.1 for a page where copy and composition have to agree, and spend your preparation on the prompt below rather than on the model picker. The finished version of that prompt is what the Thanor library contains.

Where Fable 5.1 sits in the lineup#

Four Anthropic tiers are worth planning around, and the one you pick is a capacity decision.

• Claude Fable 5.1, 1 September, the top model. A whole interface, or a page where the words and the layout are one job.
• Claude Opus 5.5, 22 September, 1M tokens. Long builds where existing code must stay in view.
• Claude Sonnet 5, the default for a screen or a section at a time.
• Claude Haiku 4.5, enough for one component against exact values.

Claude Mythos exists with limited access, so treat it as news rather than something to build a workflow on. Claude Opus 5 is real and superseded, so new work should not sit on it, and at least one guide in circulation documents an Opus version that was never shipped. Check a model id against the provider's own list before a script depends on it.

None of those four has a different opinion about colour. Hand all four the word "premium" and all four return Inter, a grey sitting on the neutral axis, an 8px radius on every corner and a fade plus translateY(20px) at around 300ms. That convergence is the single most reproducible result in the category, and it is produced by the empty slot, not the model.

Fable 5.1 does one thing noticeably better than the tiers below it, and it is worth knowing what: it holds more explicit constraints to the end of a long generation. Hand it forty numbered requirements and the fortieth still lands. That is a reason to write a dense brief, not a reason to expect judgement, and the comparison across every current flagship reaches the same conclusion from the other direction.

The six values a design prompt must carry#

Six slots. Fill them and Fable 5.1 stops inventing.

Two of those rows are constraints disguised as values. "One element per section" caps the accent, and a stated measure caps the line length that a full-width grid would otherwise stretch to 110ch. A cap is a design decision no model volunteers, because more is always easier to justify than less.

The hue bias on the neutral is the smallest change with the largest effect. A grey sitting exactly on the axis is the clearest signal that nobody chose it, and moving it four degrees toward amber costs one hex value.

Two further slots are worth adding once the six are in place. A spacing ramp of 4 / 8 / 12 / 20 / 32 / 52 with a rule that nothing sits off it, and radii split by role, 2px on controls against 14px on cards. Both turn a free number into a choice between six options, which is what makes a page built on Tuesday match one built on Friday.

A Claude Fable 5 website design prompt, in full#

Paste this above your own copy. It is the shape, not the only palette.

Build a single responsive marketing page. Follow every value exactly.

PALETTE   page #0B0B0F / raised #14141A / overlay #1C1C24
          text #F2EFE9 / muted #8A8577 (hue biased toward amber)
          accent #D8492B, ONE element per section, never on body text
BORDERS   1px solid rgba(242,239,233,0.08). No shadows.
RADII     2px on controls, 14px on cards. Nothing else.
TYPE      body 17px / line-height 1.62 / measure 64ch
          scale ratio 1.26, five steps, top step 86px
          two weights only; -0.025em tracking on the top step alone
SPACING   ramp 4 / 8 / 12 / 20 / 32 / 52. No value off the ramp.
MOTION    reveal: cubic-bezier(0.22, 1, 0.36, 1) over 620ms
          response: cubic-bezier(0.32, 0.72, 0, 1) over 240ms
          stagger 90ms, maximum four items
          first viewport only. Nothing animates on scroll below it.
SECTIONS  1 full-bleed statement, one line, no subhead, no button
          2 proof strip, three numbers at 21px
          3 argument, two columns asymmetric 7/5
          4 signature moment: the wordmark draws its own stroke once, 900ms
          5 objections, accordion, four questions
          6 price, plain, no badges, no comparison table
          7 close, one line and one button
REFUSE    no gradient anywhere. no grey on the neutral axis.
          no third typeface. no icon set. no testimonial carousel.

Fable 5.1 follows that literally, including the refusals, which is the part worth testing first. Delete the REFUSE block and rerun it to see how much of the page's character was being held by five negative sentences.

What Fable 5.1 invents when you leave a gap#

Three gaps get filled predictably, and each is worth one sentence in the prompt.

1. Depth. With no surface stack named, a gradient appears behind the hero text, because a gradient is what fills undecided depth. The three surface values above remove it permanently.
2. Motion budget. Asked for polish, the model animates everything, since more movement reads as more effort. The budget has to be written as a limit: first viewport only, one signature moment, nothing else.
3. Iconography. Left open, a page grows a set of 20px outline icons in every card, aligned to nothing. "No icon set" is three words.

The pattern behind all three: a model fills an absence with the safest common choice, and safe common choices are exactly what makes two pages resemble each other. A refusal list is the cheapest divergence you can buy, and free component sets never carry one.

Write the refusals per design rather than as general taste advice, because the useful ones contradict each other. A page whose argument is density refuses whitespace. A page whose argument is calm refuses the counter and the draw-on. Generic advice cannot hold both positions at once, and a library that states them design by design is what makes two builds from one source look unrelated.

The verdict on Fable 5.1#

Claude Fable 5.1 is the model to point at a website when the copy and the composition are one job, and it is available now. It writes better frontend code than the generation before it and holds a denser brief without dropping constraints near the end.

That second property is the one to spend. A model that keeps forty requirements alive rewards a longer specification, so the right response to this release is to write more values down rather than fewer, and to stop describing anything you could measure instead.

What it will not do is decide:

• With adjectives: the median page, cleanly built.
• With the six values: a page with a point of view.
• With values, order and refusals: a page that reads as art-directed.

Reach for Claude Opus 5.5 instead when a long existing codebase has to stay in the window, and the same prompt goes in unchanged. That portability is what makes a brief worth writing carefully: the model id on the first line expires every few weeks, and the values under it do not.

Thanor sells finished versions of that prompt, one per design, in exact values, covering UI, app and SaaS interfaces, page sections and animated backgrounds, for personal and client work: $89 for three months, $189 a year, $299 once. Free accounts open the designs marked free.

Browse the Thanor library and paste one in tonight, refusals included.