02UI
Sep 2, 2026
Murat BayralMurat Bayral7m read

What Claude Fable 5.1 can actually build for designers, tested on 3 briefs

What Claude Fable 5.1 can actually build for designers, tested on 3 briefs

Anthropic shipped Claude Fable 5.1 on 1 September 2026. I was travelling with 1 laptop and a weak connection, so I did the smallest useful thing I could: 3 open briefs, 3 outputs, no API key.

A creator I follow spent around $700 on the API testing this model for a single video. I wanted to know what the same model gives a designer sitting on a normal subscription.

All 3 prompts are on this page. You can copy each one and run it yourself. All 3 results are live, so you can open them before you decide whether the prompts are worth your time.

What changed in Claude Fable 5.1

The list price is the same. Fable 5.1 charges $10 per million input tokens and $50 per million output, exactly what Fable 5 charged. The change sits in prompt caching: cache reads dropped from $1.00 to $0.25 per million, a 75% cut, which Anthropic estimates lowers typical spend by about 25% and highly agentic spend by up to roughly 45%.

That distinction matters when you read comparison charts. The blended per-task figures you see quoted around launch are estimates of what a job costs to run, not the rate card. The rate card between these 2 models is identical. If your work is short one-off prompts, your bill will barely move. If you run agents that re-read the same context every turn, it will.

The capability jump is real and it is narrow. On Terminal-Bench-Science 0.1, a new agentic science benchmark, Fable 5.1 scores 52.6% against 24.7% for Fable 5, 29.0% for Opus 5 and 22.4% for GPT-5.6 Sol. Terminal-Bench 4.0 moved from 42.0% to 55.8%. AutomationBench moved from 17.1% to 31.4%. Short-horizon benchmarks moved a few points.

I put GPT-5.6 and Fable 5 through the same design brief in an earlier stress test, so I had something to compare this against by eye rather than by chart.

I am not a scientist and I cannot test the science claim. But the shape of the numbers explains what I did see. This model is tuned for work that runs for hours, not for a single screen.

Context window is 1M tokens with 128K maximum output.

Test 1, a showcase website with no images allowed

The brief was 1 sentence: build a website that demonstrates the absolute ceiling of your web design capability, your taste and your technical range, and choose what the site is for, because that choice is part of what is being evaluated.

Then I added the constraint. No images. No stock photography. Everything drawn as SVG.

That constraint is the actual test. Take images away from a designer and you find out fast whether they can hold a page together with type, spacing and shape alone. What came back was a tidal almanac for an invented headland called Harrow Ness. Every mark on the page is computed and drawn in the browser: the tide curve, the moon, the month's high water table, the seabed chart. There is not one image file in it.

See it for yourself: open the Harrow Ness almanac. It opens in a new tab and it recomputes the tide for the moment you open it.

As a finished piece of design, I would not call it ground-breaking. As raw material for a presentation or a section of a video, I would use it tomorrow. Hold onto that distinction when you evaluate any of these models, because most reviews collapse the two.

Adding a constraint to a brief is not the same as adding a rule to your instruction file. Constraints in the brief sharpen 1 job. Rules in a file pile up across every job, and that pile makes the output worse.

Test 1 prompt

Build one website that shows the ceiling of your web design ability: your taste, your artistic sense, your technical range. You pick the subject. That choice is part of what's being tested.

Context: this goes into a video testing what Fable 5.1 can do with web design, shown to a large audience, and the work is credited to you by name. Push it as far as you can.

Requirements:

1. Pick the concept yourself. Any subject, real or invented. Commit to something specific. A generic SaaS landing page is a wasted turn.

2. Typography and composition carry this. Before any effect: a deliberate type scale, a grid you actually hold to, whitespace used as a material, alignment that survives a squint test. Impeccable type with 3 effects beats default type with 30.

3. Restraint is part of the score. 3 techniques done perfectly beat 15 done at 70%. Cut anything that's only there to prove you can do it.

4. Skip the AI-default look: dark background, neon or purple gradient, glowing particle field, scroll-jacked hero, custom cursor. If you use any of these, earn it and make it specific to your concept.

5. Pick techniques that serve the concept, not a checklist. Menu: WebGL or 3D, custom shaders, signed distance fields, particle systems, procedural or generative art, fluid simulation, SVG filters, masks and clip-paths, scroll-driven narrative, View Transitions, physics-based motion, variable fonts, per-character type animation, art-directed light and dark mode, a designed preloader, real parallax, sound, generated-then-treated imagery. Choose a few. Don't work through the whole list.

6. Pull in any open-source library via CDN. Look up how to use any technique you need. Full creative freedom on execution.

7. Single self-contained index.html. No build step, no server, no API keys. Must run by opening the file.

8. No stock photography. Generate every visual in-browser: CSS, SVG, canvas, WebGL, procedural.

9. QA it for real: open it, scroll the whole thing, resize to 1440 and 1280, confirm nothing overflows, collides, or throws console errors.

Work autonomously. Don't ask what to build, decide and finish.

Done when: it runs clean from one file, the concept is a deliberate choice rather than a default, the typography would hold up with every effect switched off, and everything on the page earned its place.

Test 2, a real-time 3D scene in a single HTML file

Same brief shape: build a real-time 3D experience that demonstrates the absolute ceiling of your 3D and simulation capability, and choose the subject yourself.

It returned 1 index.html file. I opened it and I was standing on a dirt path through tall grass at the end of a summer day, with the wind simulated on the GPU. WASD to walk, shift to run, mouse to look around. Curly brackets move the sun angle. A separate control changes the wind strength. I dropped the wind, pushed the sun down into golden hour, and walked toward a rock I could not climb.

Walk through it yourself: open Long Field. Use a laptop or desktop. It needs a keyboard and a mouse.

About 10 minutes, on the desktop app, no API key. That matters more than it sounds. The desktop app and Claude Code do not give you the same thing from the same brief, which I tested on a Messi tribute site.

It is not a game and nobody should ship it. But if you present complex ideas for a living, a live scene running behind you while you talk beats another static slide, and that is now 10 minutes of work instead of a week of somebody else's.

Test 2 prompt

Build one real-time 3D experience that shows the ceiling of your 3D and simulation ability. You choose what it is. That choice is part of the test.

Context: this is a test of you, Claude Fable 5.1. It goes into a video for a large audience, and the work is credited to you by name. Show what you can do.

Rules

1. Build a place, not an object. The viewer is inside it and can move through it. It needs a floor, a horizon or an enclosure, a sense of scale, and things happening at more than one distance.

2. Do not build any of these: a black hole, a solar system, a planet, a nebula, a starfield, or a single object floating in a void with a turntable camera.

3. It has to look real or fully art-directed to a professional standard. Untextured primitives and flat-shaded blobs are a fail. Use whatever serves the place: PBR lighting, custom shaders, volumetrics, instancing, physics, fluid, procedural terrain, water, animation, camera choreography. Pick what fits. Do not work through a list.

4. Something in the scene must be genuinely simulated and responsive, not looped or baked.

5. Restraint counts. Three things done perfectly beat ten effects stacked on top of each other.

6. No default look. No dark void, neon glow, lens flare and particle field unless the concept earns it.

7. It must run in real time at a smooth 60fps and be interactive. The viewer can move, orbit, or affect the scene.

8. One self-contained index.html. Libraries via CDN are fine. No build step, no server, no API keys.

9. No hotlinked 3D assets or stock textures. Generate geometry and materials procedurally or author them yourself. Open source libraries on a CDN are allowed.

10. QA it for real. Load it, move through the whole scene, watch the frame rate, and fix anything that stutters, clips, or throws console errors.

Work fully autonomously. Do not ask for anything until it is finished.

Done means: it loads clean, holds 60fps, is interactive, something in it is simulated, and it is a place with scale.

Test 3, a motion graphic for a subject I do not understand

The third brief asked for a motion graphic at the ceiling of its motion design capability. It chose Kepler's second law: equal areas swept in equal times.

Watch it: open Equal areas in equal times. It plays once on load and holds on a final frame. There is a replay button.

I know nothing about astronomy. I cannot tell you whether the animation is physically accurate. What I can tell you is what I would do with it. If I were explaining that law on a stage, I would put the animation behind me and let it run while I talk. The story gets better and I never opened After Effects.

We have not covered motion on the channel before. This was the first attempt, and it is why we started the 02UI motion library. The useful finding is that the output is presentation grade rather than broadcast grade. Most of us need presentation grade far more often.

Test 3 prompt

Build one motion graphics piece that shows the best motion design you can do. You choose the subject. That choice is part of the test.

This is a test of you, Fable 5.1. The result goes into a public video and is credited to you by name.

Rules:

1. Pick a real subject. The piece must be about something: an idea, a product, a story, or a set of facts. The motion must help explain that subject. If the words could be swapped for lorem ipsum and the piece still made sense, it is not about anything.

2. Do not build any of these:
   - A film-style title sequence that fades up, shows some text, and ends on a logo.
   - An abstract particle or shader reel with text over it.
   - A logo animation.
   These are what a model builds when it wants to look impressive without picking a subject.

3. It plays on its own when the page loads. It runs 15 to 30 seconds. It stops and holds on a final frame. Add a replay button. It must feel like a finished, edited piece, not a loop.

4. Choreography is the test. Use whatever techniques serve the piece: kinetic type, staggered reveals, easing with real weight, overshoot, masks and wipes, SVG path drawing, shape morphs, blend modes, physics, 3D and camera moves, parallax, shaders, grain, match cuts. Do not work through the list. Pick what the subject needs.

5. Timing matters most. Beats should land on purpose. Some moments should pause. The piece should build. If everything moves at the same speed with the same easing, it has failed.

6. Restraint is graded. Four moves that land beat twenty that blur together.

7. No default look. Dark background, neon or purple gradients, glowing particles, thin all-caps spaced-out text drifting in and out. People have seen that hundreds of times. If you use any of it, it has to be specific to your subject.

8. One self-contained index.html. Any library from a CDN is fine (GSAP, anime.js, Three.js, Lottie, and so on). No build step, no server, no API keys.

9. No stock footage, no linked video. Everything is generated in the browser.

10. Test it by watching it. Play it start to finish several times. Check that beats do not collide, nothing appears unstyled, timing reads, and it holds 60fps.

Work on your own. Do not ask me anything until it is finished.

Done means: it plays end to end on first load as a finished piece, the timing is designed rather than uniform, it is about a real subject, and it is not a title sequence.

Why 2 people get the same looking result from an open brief

Here is the part that stayed with me. My 3D output looked strangely close to the one I had already seen from another creator, from a brief that deliberately refused to specify the subject.

That has a name. Researchers call the cause typicality bias: human annotators systematically prefer familiar answers, which trains models toward the middle and cuts off the tail of the distribution where novelty lives. The same work documents convergence in 2 directions. Intra-model, where repeated samples from 1 model land on the same ideas. Inter-model, where independently trained models produce similar responses. Anderson and colleagues showed in 2024 that using an LLM as a creativity support tool increases homogenisation at group level, because the model proposes similar ideas to different users, even while each individual produces more.

The practical consequence for designers is simple. The more open your brief, the closer you land to the statistical average. Specificity is now the only mechanism you have for pulling output away from the centre. My "no images, SVG only" line did more for the result than any adjective would have. If you want the longer version of that argument, it is how to write AI prompts that actually work.

How to run these 3 tests on a subscription instead of an API key

  1. Use the Claude desktop app on a Max plan. Not the API.
  2. Select Fable 5.1 as the model.
  3. Copy 1 of the 3 prompts above. Each one names the medium and asks for the ceiling, and leaves the subject to the model.
  4. Keep the hard constraint. Every prompt above has 1 line that removes an easy option. That line is doing most of the work.
  5. Ask for a single self-contained HTML file so you can open the result without a build step.
  6. Open it, use it, and judge it against a real job you have, not against a demo reel.

One thing worth knowing about the limits, because I had the wrong unit in my head while I was testing. On Max plans, Fable models are included up to 50% of your weekly usage limits, and that allowance is not additive. Other models draw from the same pool. So the ceiling you are working against is a weekly Fable cap, not a 5 hour reset. I did not reach it across an afternoon of design work. If you do keep hitting it, the fixes are in how to reduce Claude token usage.

If you want this method applied to a real component library rather than a demo, the 02UI components library came out of working this way, and so did DesignMD.

I went in expecting to be either impressed or disappointed and got neither. What I got was a clear line. This model produces material I would put behind me while I talk, and material I would not ship as the thing itself. That line will move. I would rather know where it sits today than argue about where it sits in 6 months.

Related posts