Rebuilding the Official Website with Claude Fable 5.2: 85 Minutes Burned $52, Interrupted by Quota Cap

For independent developers going global, the most energy-draining part is often the product's official site: adjusting colors, matching designs, fixing mobile responsiveness one by one—days wasted.

Yesterday, Anthropic released the new model Claude Fable 5.2 (released on November 9, 2026; see the Anthropic official announcement and development docs). The official positioning is that it targets demanding reasoning and orchestration of multi-hour long tasks; compared to the previous generation, its generation speed is up to 30% faster, prices are lower at $8 input / $40 output per million tokens, and it introduces new safety evaluations against sandbox escapes.

Since my own website generator project, ShipSite, needed a refresh anyway, I tried it out: I ran Claude Code in the terminal, maxed out the thinking effort, gave it just one sentence—told it the repo was its own, asked it to autonomously refactor toward Awwwards-winning site quality, and not to ask me anything mid-way.

It ran in the background for 85 minutes, spawned multiple sub-agents, made 3 homepage directions, fixed on the "Atlas" direction, changed 20 files, wrote 4,320 lines of code (according to /cost stats, including its own tool scripts); but in the final stretch it hit the 5-hour quota cap, showing "You stopped the operation," and the bill came to $52.55.

After reading this, you'll see the full prompt for AI autonomous frontend refactoring and where long tasks actually break, and get the advice to split the task into two steps—compare and select, then targeted rollout—to avoid the 5-hour quota interruption and save on expensive compute costs.

Before Starting: Set the Effort to High, Save the Pre-Change Baseline

This time I didn't use the Claude desktop app; I used Claude Code CLI directly in Windows Terminal.

Enter the project directory and type claude to launch:

claude

After launch, it shows Claude Code v2.1.322, current model Fable 5.2, default thinking effort ○medium · /effort at the bottom right.

A full-site refactor needs strong reasoning and self-checking. In the input box, switch to high effort:

/effort high

After pressing Enter, the top updates to Fable 5.2 with high effort, and the bottom right becomes solid ●high · /effort.

Fable 5.2 adds an optional fast mode that speeds generation up to 2.5x, but doubles the per-token price (input $8 / output $40 doubles to $16 / $80). Type /fast in the terminal to view it; my current team has disabled this mode, so I pressed Esc to exit the panel and continued with standard mode.

Before the redesign, you must keep a baseline. I open a new terminal window and start the local dev server directly with npx next dev:

npx next dev

The local service runs fine in the local browser. Open Chrome and first take screenshots of the old site's first screen and inner page state as baseline.

The old homepage first screen was a dark fantasy mountain-and-sea background with headline "One keyword in. A live site out.":

Press PageDown to scroll to the second screen, showing four-step process cards (Research, Plan and price, Design and build, Launch):

Press F12 to open DevTools, switch to the mobile simulation view and scroll back to top, and save a baseline screenshot of the old mobile first screen:

With the old desktop and mobile baselines saved, let's see what AI can turn it into.

A Single "The Codebase Is Yours" to Hand the Whole Thing Over at Once

Switch back to the terminal running Claude Code.

Many friends habitually ask AI piece by piece, but for a full-site refactor, if AI frequently stops to ask whether this color works or what to change next, the human-in-the-loop cost is extremely high.

This time I condensed the request into one complete structured prompt. The key sentence is just: hand the whole codebase to it, let it match award-winning site quality, do it without stopping to ask me, and finish the whole thing in one go.

Prompt: This codebase (D:\Dev\Projects\shipsite-redesign) is yours. Help me refresh the ShipSite official website design to award-winning quality. Don't stop to ask me; finish the whole thing in one go:

1. First read the existing brand and design docs in the repo (ShanHaiSi), while also saving a full pre-redesign SEO/GEO snapshot and measuring the current first-screen load speed as baseline;
2. Go online to look at Awwwards, FWA, and CSS Design Awards winners from the past two years, pick a few that match the ShanHaiSi brand tone, tell me which ones you picked and what you're learning from each (don't reference the overused Linear, Stripe, or Vercel);
3. For the homepage, produce 3 different design directions, screenshot both desktop and mobile widths yourself, compare and critique, pick the best direction, then roll that direction out to all pages—pricing, cases, docs, etc.;
4. Each round you must screenshot desktop and mobile widths yourself, critique and fix. Use only real ShipSite product screenshots from the repo for all assets, no fake placeholders. Rework interactions and copy to be friendlier to total beginners;
5. After finishing, compare the changed pages against the pre-change snapshot item by item to verify SEO/GEO (ensure nothing got worse) and first-screen load speed (ensure it didn't get slower). Keep before/after comparison screenshots, start a local preview server for me to view directly. Only local preview—do not deploy, do not push to remote repo. Finally, report the reference sites you picked, the three-direction comparison conclusions, your self-check revision records, the SEO and load-speed verification results, and total time.

When following along, replace the directory in the first line with your own local project's absolute path.

Press Enter to send. Fable 5.2 immediately enters high-intensity thinking, showing Zigzagging… at the bottom and spawning 3 parallel agents. It didn't start blindly; it followed the first prompt item to read the ShanHaiSi brand style doc.

After reading the brand definition, it starts inventorying real product screenshots and runs build and web search commands to keep the speed test and snapshot baseline:

Then it starts a baseline service in the background and writes a snapshot script to save 79 pre-redesign site-wide screenshots.

Next, the main orchestrator spawns multiple web-scraping agents to search for Awwwards, FWA, and CSS Design Awards winners from the past two years. It avoided the overused Linear and Stripe dark styles, picking Oryzo AI, Getty Tracing Art, Mosby's Files, and ORVAE, extracting layout grid, old-book atlas feel, and image-text whitespace rhythm from each.

At the same time, it runs a make-product-shots.mjs script to batch transcode and crop the real product screenshots stored in the docs into AVIF and WebP formats suitable for web loading.

Three Sub-Agents Compete in Parallel, Picking "Atlas" to Roll Across the Site

After the assets and references are ready, the interesting part happens.

Fable 5.2 didn't just write one page set out of thin air; it spawned 3 sub-agents via background fork agents:

• Direction A "Night Voyage"
• Direction B "Atlas"
• Direction C "Viridian"

The three sub-agents each write their own prototype code in parallel. After finishing each screen, they call a headless browser to screenshot both desktop and mobile renders, look at the images, and critique. They iterate from round-one fixes, to fix2, all the way to fix3.

Direction A and Direction C converge and finish first: Direction A leans dark minimal, Direction C leans deep stone-green stage with gold lines; Direction B "Atlas" took the longest to polish (20 minutes 12 seconds).

When all three prototypes are submitted, the main agent stitches the screenshots into side-by-side long images and compares them section by section:

• Direction A's visuals are clean but weak on brand memory;
• Direction C has color, but the sans-serif headline feels neutral and cold;
• Option B "Atlas" presses the dark real product UI onto a paper-toned old scroll background—the contrast is most striking—and breaks the complex site-building process into a four-step archive tab, clearest for total beginners.

The main agent decides on the spot: adopt Option B "Atlas" and start site-wide rollout!

After selecting the direction, the model rewrites the global CSS and shared components, and rolls the new styles across both Chinese and English homepages, pricing (/pricing), gallery (/gallery), and docs (/docs).

During the rollout, it continues to use the headless browser to screenshot inner-page mobile long pushes for self-check. The terminal shows it confirmed no horizontal overflow and found several click targets smaller than 44px on the docs sidebar, contact page links, keyword tabs, etc., proactively fixing them and re-checking screenshots.

Hitting the Quota Cap: Task Interrupted and a $52 Compute Bill

Just as it was modifying the login and register page styles and preparing final acceptance, the terminal suddenly shows a line:

You've hit your 5-hour limit · resets 9am

It hit the account's 5-hour usage quota cap, and the autonomous long task was force-interrupted, returning to the command input.

I had originally asked it in the prompt to compare before/after SEO and first-screen speed and output a final report, but that final step never happened in the terminal.

I immediately typed:

/cost

To bring up the real bill panel for this 1+ hour run:

Looking at the panel's core data:

• Wall duration: 1 hour 25 minutes 34 seconds
• Total cost: $52.55 (Fable 5.2 spent $52.21, the Haiku 5.5 sub-agent used for scraping spent $0.34)
• Code changes: 4,320 lines added, 421 deleted, 20 files modified
• Prompt cache hit rate: 98% (of 130 requests, 98% of input tokens hit cache, saving huge repeat-read fees)
• Quota status: currently shows exhausted, with a reset time about a few minutes away.

Even with the high cache hit rate, burning $52.55 in 1.5 hours is not an expense a solo independent developer can casually throw around.

What It Delivered and What's Still Unfinished

Though interrupted midway, the Next.js preview server still running locally hot-reloaded the Option B "Atlas" code. I switch back to Chrome to see the result.

New homepage first screen: background changed to old-book atlas paper tone, big headline changed to "See the plan first. Decide after.", with an ultra-direct "Plan my site free" button for zero-experience users.

Click into the pricing page: top headline is "Complete your first site free, then upgrade by actual usage", with a clear monthly/yearly toggle for 20% off; the bottom plan cards line up with clear tiers.

But to be honest, there are unfinished flaws: because the final stage got cut off by the quota, the login page's left/right padding is still uneven on some mobile widths; and because the task stopped early, the full mobile screenshot self-check for gallery and docs inner pages was not completely finished.

My Follow-Up Verification Data and Real Judgment

Because it couldn't output the final SEO and speed report itself, I re-ran the test scripts it had written locally. The core metrics before and after are:

Metric	Before	After	Change & conclusion
Total code volume	Original baseline	+4320 lines / -421 lines	Refactored 20 pages and components
SEO/GEO check	91 page baseline	91 pages passed item by item	0 items worsened, index tags intact
Docs page size	~5MB	~0.8MB	Generally smaller (transcoded to AVIF/WebP)
Desktop first-screen load	Baseline	Basically unchanged	Desktop basically equal or faster
Mobile first-screen load	Baseline	Slower by 0.1 to 0.3s	4 pages slower (English pricing page slowest at 0.33s)

From the data it's clear: the prompt required no SEO regression, and it did deliver that; but the requirement that first-screen load not get slower was not fully met on mobile, with 4 pages 0.1 to 0.3s slower.

After experiencing this 85-minute whole-site refactor, my real judgment is:

First, Fable 5.2's ability to orchestrate long tasks is very strong. It truly spawned background sub-processes to write prototypes, took headless browser screenshots to critique itself, and rewrote CSS itself. It changed 4,300+ lines and automatically found hidden usability issues like mobile click targets under 44px. Doing that alone would have taken a full day before.

Second, don't throw a whole site project to a single long task with no guardrails. High-effort reasoning is extremely deep but also extremely quota- and compute-consuming. The most painful lesson this time was getting cut off by the 5-hour usage cap right near the end.

If you also plan to use Claude Code with Fable 5.2 to refresh your product site, you can follow these steps tomorrow:

1. Run the first phase: send the first 3 prompt items, let it only fetch reference sites, produce 3 homepage directions, and complete the comparison;
2. After confirming, run the second phase: once the direction is decided, open a new session (type /clear), feed it the selected style spec, and let it roll out to inner pages and do mobile responsiveness.

Splitting it into two steps like this keeps the bill in check and avoids getting stuck halfway up the mountain by a quota wall right before the finish.

---

👋 I'm Meng Jian, former Tencent T11, former ByteDance Tech Leader, now full-time AI programming.

🔥 More AI programming in practice:

• GitHub: @mengjian-github
• Column: AI编程实战
• Full list for this issue: leave a comment "长任务避坑" and I'll send you the instructions

Found it useful? Like + save is the biggest support 🙏

This article was organized with AI assistance; content was tested and reviewed by the author.