Fable 5.1 FINALLY Kills AI Website Slop

I built five animated websites with Fable 5.1, including two from a single prompt.

The best results did not come from asking the model to make something professional. They came from showing it specific design references, naming the interaction I wanted, and making it verify what it built.

TL;DR

→ Start with brand guidelines plus the pain, person, and promise

→ Show the agent specific references instead of asking for a vague premium feel

→ Use layering and subtle scroll feedback to add depth without overwhelming the visitor

→ Reuse strong components from real design libraries

→ Verify the full desktop and mobile experience with screenshots

→ Fable 5.1 produced similar visual quality to Fable 5 in my tests, but it was consistently cheaper

What Premium Actually Looks Like

The AI Automation Society site is probably my favorite website I have built with Claude.

The hero is made from separate visual planes: mountains in the back, a tree line, a dynamic laptop, and foreground elements. They move at different speeds as you scroll, which creates depth without turning the page into a distracting 3D experience.

The same idea continues through the page.

Text enters as it reaches the viewport. Cards stack on top of one another. The classroom, live calls, events, and leaderboard sections switch dynamically. The pricing area covers the free community, Plus community, and certification cohort, followed by an animated FAQ, YouTube videos, and a final call to action that brings the layered landscape back.

The mobile version keeps the dynamic laptop and layered scenery. It also uses text animations. The cards use a simpler interaction than desktop, but the site still feels like the same product instead of a stripped-down backup version.

My personal site uses a different visual language.

The stats count upward. A restrained animated background adds depth behind the hero. Links react on hover.

The Recognition section uses floating 3D cards. Photos rise into view as you scroll.

The page also pulls in my book, new YouTube videos, a link to AI Automation Society, and a signature Fable found inside the pictures on my local computer. The navigation stays fixed through the whole experience.

Glido pushed the product-demo side further.

Its dictation bar types words into Slack, then shows messy speech being cleaned before it is pasted. Other sections demonstrate the same product inside Cursor, Gmail, Slack, and Claude Code.

The most interesting sequence sends app logos in opposite directions while the dictation interface stays in the center. A few logos were wrong, which is exactly the kind of issue a one-shot build can leave behind, but the interaction already communicates how the product feels before someone installs it.

Give AI Better References

“Make this professional” and “make this premium” do not give an AI model enough to work with.

For the AI Automation Society site, I used Fora as a reference. I liked its layered landscape and the way the page changed while scrolling, so I described the pieces I wanted to recreate: a back mountain, middle mountain, laptop screen, and front layer of trees.

I also pointed out the stacked-card interaction because that was a separate design decision. The agent did not have to guess what I meant by premium. It had a visual behavior to study and a clear reason for using it.

For my personal site, I pulled individual components instead of copying one whole site.

21st.dev has backgrounds, gradients, buttons, feature sections, FAQ layouts, and interactive elements. Many components include a prompt you can copy directly into an AI coding agent.

That gave me a much better starting point for the animated background, the mouse-responsive 3D element, sideways motion, and text that appears as it enters the screen.

I keep those principles inside ScrollCraft, my reusable design skill. It includes rules for layering, scroll behavior, text animation, and the other interaction patterns I use repeatedly.

Glido used a competitor reference.

I showed Fable the Lemon dictation site because its animations make the visitor feel like they are already using the product. Then I gave Fable the Glido brand guidelines and asked it to recreate that kind of experience for our product.

The result follows the reference closely, down to the soft watercolor-style background, but the brand and product demonstrations are Glido’s.

There are several places I use to find this kind of inspiration:

→ 21st.dev for individual components and implementation prompts

→ Godly for trending sites, heroes, calls to action, footers, and design categories

→ Awwwards for sites recognized for strong design

→ Motion Sites for animated backgrounds and motion ideas

The niche matters too. A restaurant, e-commerce company, fashion brand, and technology product should not all feel the same because the design needs to match the person buying from the business.

Two One-Shot Builds

I gave Fable one goal prompt and asked for two distinctly different ScrollCraft sites.

The prompt told it to study the AI Automation Society site, pull components from 21st.dev, browse Godly and other design references, use layering, and generate any assets it needed.

It could use tools such as Kie.ai or Higgsfield for images and video.

The direction was simple: subtle, premium, and visually impressive.

The first result was Ferna, a site for growing fresh herbs without a windowsill.

The hero separates the plant PNGs, leaves, and background image onto different planes. Text fades in and cards stack.

A scroll-controlled video makes the plant grow as the visitor moves through the page. By the end, the sequence shows a fully planted trough.

Later sections bring the layered plants back at different speeds. The final video turns on a light before the page closes.

The second site was Low Key, a mechanical keyboard product.

Keys press inside the hero animation. The keyboard and background move at different speeds. Text enters from several directions.

Then the keyboard comes apart so the visitor can see inside it before selecting a color.

The desk keeps moving while the keyboard returns for the final call to action.

One transition had a visible hard cut. I would fix that in another iteration, but both sites gave me a strong base from one prompt.

The two one-shot builds made the method easier to see.

Fable can produce ambitious design quickly, but the prompt still needs references, constraints, and a definition of what good looks like.

The Seven-Part Design System

The process comes down to seven parts.

1️⃣ Brand guidelines

Define the colors, typography, and visual language so every section feels like the same company.

2️⃣ Pain, person, and promise

Name the pain the business solves, the person it solves it for, and the promise the product makes. Those three inputs keep the design tied to the actual customer instead of a generic visual trend.

3️⃣ Scroll feedback

Give the visitor some response as they move through the page. It can be as subtle as text fading in, numbers counting upward, or two layers moving at different speeds.

Some people hate the experience of flying through an elaborate 3D world, and that criticism is fair. The right amount of motion depends on the business and its audience. A small amount of feedback can still make the page feel much more deliberate.

4️⃣ Specific inspiration

Choose the exact things you like about a reference. It might be the layering, pricing section, interactive background, card behavior, or typography.

5️⃣ Reusable components

Strong buttons, borders, feature sections, and FAQ layouts already exist. Giving the agent proven components reduces the amount of visual invention it has to do from scratch.

6️⃣ Mobile design

The site has to work on a phone. Many visitors will discover the business through a link they opened on mobile, so the animated desktop version cannot be the only experience that gets reviewed.

7️⃣ Visual verification

Have the agent screenshot the entire page while it scrolls. For complex animation, capture it frame by frame so the model can inspect what a visitor will actually see.

That loop catches elements outside the frame, bad colors, broken layers, awkward cuts, and unfinished animations. Without screenshots, the agent is judging its code instead of judging the website.

Fable 5 Versus Fable 5.1

I also ran the same website assignments through Fable 5 and Fable 5.1.

Each model received the same prompt, assets, brand guidelines, and ScrollCraft skill. The finished designs were very similar, with only minor differences. Fable 5.1 did not automatically crush Fable 5 on visual quality.

The seven inputs above mattered more than the model version.

The cost difference was more consistent:

→ $18.24 with Fable 5.1 versus $20.22 with Fable 5

→ $14.52 versus $14.67

→ $12.83 versus $21.64

→ $11.18 versus $17.37

Anthropic said Fable 5.1 could be roughly 25% cheaper on knowledge work and as much as 45% cheaper on heavy agentic coding because it uses tokens more efficiently.

My early usage matched that direction.

After five to six hours of website experiments and other knowledge work, I had used about 45% of my weekly Fable allowance. I have burned through the full weekly limit in one to two hours with Fable 5 while driving similar work.

Fable 5.1 felt a little faster and cheaper, but the model upgrade did not replace good direction or verification.

Wrap

AI website design gets better when “premium” becomes a set of concrete decisions the model can inspect and reproduce.

Give it the brand, customer, references, components, motion rules, mobile target, and screenshot loop. The model handles the implementation, but those inputs decide whether the result feels intentional.

I walk through every site, prompt, and comparison in the full video. Link in the first reply.

Full video: youtu.be/FFWtxjvW2ts?si…

Scroll-craft skill: github.com/nateherkai/scr…