Fable 5.1 FINALLY Kills AI Website Slop
What this video is
⚡ a 16-minute video, readable in 60 secondsThis video demonstrates a workflow, built around the creator's own 'ScrollCraft' skill, for getting Fable 5.1 (Claude) to build premium-feeling, scroll-layered marketing websites instead of generic 'AI slop.' The creator studies real sites (AI Automation Society, his own personal site, and Glaido) plus competitor Lemon for reference, then has Fable 5.1 one-shot two original concept sites, Ferna and a keyboard brand called Low Key, pulling components from 21st.dev and inspiration from Fora, Godly, and Awwwards. He also builds parallel versions of a coffee-protein brand site, PerkForm, to compare Fable 5 against Fable 5.1 on cost and output quality. This is a demo assembled for the video to test and teach the technique, not a system the creator runs day to day.
System does: [04:05] Fable 5.1 can't be told simply to 'make this look professional' or 'make this feel premium'; it needs something concrete to work from.
Key takeaways
- System does: [06:01] The core technique is the creator's own 'scroll craft skill,' which produces the layered, scroll-triggered site effect.
- System does: [06:05] The scroll craft skill is free, linked in the creator's Skool community and referenced in the video description.
- Status: [13:48] The creator built multiple test sites for a coffee-protein brand called PerkForm specifically to compare Fable 5 against Fable 5.1, not for production use.
- Stack: [00:00] The AI Automation Society site is described as built with Claude.
+ 43 more takeaways
- Stack: [01:21] Fable 5.1 replicated the same dynamic laptop screen and layered scroll effect on mobile as on desktop.
- Stack: [05:18] 21st.dev is a UI component library site offering prompts for animations that can be given directly to an AI agent.
- Stack: [05:30] On 21st.dev, the 'container scroll' component prompt is copied and the agent copies the element.
- Stack: [14:08] The Fable 5 vs Fable 5.1 comparison test sites used the same prompts, same assets, same brand guidelines, and the same ScrollCraft skill.
- On-screen prompt text was never shown verbatim in the extracted points; the lines below are the creator's spoken description of what he told the AI, not quotes.
- PROMPT (described, not verbatim): [07:07] a one-shot prompt asked the agent to build two distinctly different, highly polished 'scroll craft' layered sites using their skills.
- PROMPT (described, not verbatim): [07:15] told the agent to look at the AIS site as a reference for the desired layering effect.
- PROMPT (described, not verbatim): [07:17] instructed the agent to grab components from 21st.dev.
- PROMPT (described, not verbatim): [07:20] told the agent to reference godly.websites (godly.design) for trending sites, logos, hero sections, CTAs, footers, and OG images.
- PROMPT (described, not verbatim): [08:05] referenced a site called Motion Sites for grabbing animated background assets.
- PROMPT (described, not verbatim): [08:47] told the agent it could generate its own assets using tools like Higgsfield, as long as the result stayed subtle but premium.
- Wiring: [04:25] Credited community platform Fora for the layered hero-section effect and had Fable 5.1 build a four-layer hero section that reveals as you scroll.
- Wiring: [04:41] The four layers are a back mountain, a middle mountain, a laptop screen, and a front layer of trees.
- Wiring: [04:59] Used the Fora website as inspiration and told Fable 5.1 to replicate its feel, including how the cards stacked.
- Wiring: [06:18] For the Glaido project, looked at competitor site Lemon, a voice-to-prompt dictation app.
- Wiring: [06:21] Asked the AI to insert brand guidelines onto a page styled like Lemon's, because he loved how Lemon's animations felt like already using the product.
- Wiring: [06:37] Directly cloned Lemon's page; Fable 5.1 inspected the reference and generated a version with a similar watercolor-painting background vibe.
- Wiring: [06:54] Briefly opened Godly, a design-inspiration gallery site showing a 'Trending' tab grid of credited screenshots.
- Wiring: [07:43] Mentioned Awwwards.com, where award-winning designs can be browsed by category like technology, e-commerce, restaurant, and fashion.
- Wiring: [10:53] The first important element for building websites is having brand guidelines for consistency in logo and colors.
- Wiring: [11:03] The framework used is the '3 Ps': Pain, Person, and Promise, part of an AI monetization readiness assessment.
- Wiring: [11:23] The next element is 'scroll lock' or responsiveness, meaning the user should feel in control via scroll feedback.
- Wiring: [12:12] AI website output can feel like 'AI slop' unless using a skill, template, or drawing on inspiration such as other websites' layering and pricing section design.
- Wiring: [13:03] Part five of the framework is understanding what components can be grabbed from existing sites to make a site feel more dynamic and branded.
- Wiring: [13:12] Point six of the framework is making sure the site works on mobile, since many people click links on mobile.
- Wiring: [13:24] Point seven is verification: have Claude screenshot everything, especially frame by frame or pixel by pixel during scroll animations, to catch bad layouts or off colors.
- Artifact: [08:58] The first ScrollCraft demo site built was Ferna, a countertop herb garden concept with the tagline 'Fresh herbs, without the windowsill.'
- Artifact: [09:45] The second demo site was Low Key, a keyboard-themed concept site.
- Artifact: [10:03] Low Key's headline reads 'THE DESK YOU HAVE,' describing most keyboards as built for a desk nobody owns.
- Artifact: [10:21] Low Key's keyboard specs include PBT dye-sublimated keycaps with cylindrical tops and 1.4mm walls, low-profile linear 45g factory-lubed switches with 3.2mm of travel, and a 1.2mm gasket-mounted aluminium plate.
- Artifact: [10:27] Low Key ships in three finishes, Graphite, Bone, and Moss, each with the same switches, case, and one lit key.
- Artifact: [03:47] The Glaido site's pricing page shows three plans: Basic (free), Pro ($17 per month, marked most popular), and Enterprise (custom).
- Cost: [14:27] Across several site builds Fable 5.1 was consistently cheaper than Fable 5: $18.24 vs $20.22, $14.52 vs $14.67, $12.83 vs $21.64, and $11.18 vs $17.37.
- Cost: [14:46] Fable 5.1 used 1118 tokens/cost units versus Fable 5's 1737 for the same task.
- Cost: [14:51] Anthropic's release blog said Fable 5.1 is about 25% more efficient (cheaper) on knowledge work and regular tasks compared to Fable 5.
- Cost: [15:01] Anthropic's release blog said Fable 5.1 could be up to 45% cheaper than Fable 5 on heavy agentic coding and multi-step tasks.
- Cost: [15:15] Across all demoed experiments, websites, and additional unshown testing, the presenter used only about 45% of the weekly Fable limit.
- Cost: [15:26] The presenter previously blew through the weekly Fable limit in one to two hours using Fable 5 on similar work.
- Cost: [15:51] A cost breakdown for Fable 5.1 showed Input 202, Output 1.1k, Cache read 17.6M, Cache write 395.7k.
- Limitation: [01:14] Cards stacked differently on mobile than desktop, but the speaker says this could be fixed with one prompt.
- Limitation: [10:04] The creator noted a hard cut in the Low Key site he did not like, saying a verification loop or iteration pass would fix it, but this was a one-shot prompt.
- Limitation: [14:16] Fable 5.1 did not clearly outperform Fable 5 on these builds; the seven principles discussed matter more than which model is used.
- Limitation: [15:53] Overall conclusion: Fable 5.1 feels a little faster and a little cheaper than Fable 5.
How this brief was shaped: Personal AI Build / System Demo · confidence Medium
Creator narrates a screen walkthrough of a website he built with Claude, calling out specific techniques like layering and scroll animation, then pivots to explaining how to prompt Fable 5.1 so it avoids AI slop and needs material to work from. OCR confirms it is a live capture of the actual built site, matching a system demo rather than a pure code tutorial.
The lens sets this brief's structure, never its facts — every claim is held to the same citation and fact-check standard.
Jump to a moment
Their links, sorted & clickable
🏛️ Communities & courses1
My FREE resources🤝 Work with them1
My playbook for growing a $1M AI agency🛠️ Tools they use1
FREE MONTH voice to text📢 Sponsored / affiliate1
Code NATEHERK for 10% off VPS (annual plan)💼 Sponsorship & business1
Sponsorship InquiriesWas this brief useful?