I redesigned my homepage with Claude Fable 5.2. Before and after

One sentence of brief, one homepage

My homepage led with a dashboard about my products. The products themselves were seven tiny logos. I rebuilt the first screen with Claude Fable 5.2 in Claude Code, and this is the before and after.

The brief from a human here was one sentence: redesign and improve the homepage, and make it show what Fable 5.2 can do. No mockup, no list of sections.

I didn't want a tech demo bolted onto a blog. A homepage that shows off a model and hides the work would be worse than the one I had. So I set one rule before touching anything: every new thing on the page has to be made of something real. Real screenshots, real numbers, the same copy.

Where it started

It wasn't a bad page. The headline was clear and the numbers were real. But when I read it as a stranger, three things bothered me.

• The numbers repeated. Visitors for the week sat under the buttons and again in the dashboard. Revenue was there three times: under the buttons, in the card's footer and behind a tab.
• The products were invisible. I say "I build web products" and then show a chart. The only product screenshot was half hidden behind the dashboard, and only for the newest launch.
• The chart was cramped. Seven days of stacked bars lived in a 448 pixel wide box next to a headline that had room to spare.

What changed

The hero now shows the products. The numbers moved into one band under it, and each one appears once.

I kept the headline, the introduction, the buttons, the colours and the type exactly as they were. A human signed off that copy over several rounds, and nothing in the brief said the words were the problem. Everything below the band, from the articles down, is untouched.

The deck

Seven products, seven real homepage captures, stacked like cards. The front one links to the live product.

Here's what it does:

• It moves to the next product every six seconds. A thin line under the active logo shows the time left.
• The front card gets tossed to the back, and the rest step forward with a small spring.
• It holds while your pointer is over it or you've tabbed into it, and there's a pause button.
• The front card tilts a few degrees toward the mouse. Arrow keys and swipes work too.
• The visitor number on each card updates from the same live feed as the rest of the site.

The part I like most is small. Products are sorted by visitors, so the deck opens on whatever is actually doing best this week. Right now that's PDFCheck.online. If Ball Quiz overtakes it, the homepage changes without me.

The script is 142 lines with no library: 6.8 KB, 2.4 KB compressed. Without JavaScript the stack still shows the top product. With reduced motion turned on there's no timer, no toss and no tilt, and the pause button isn't shown because nothing moves.

One band of numbers

The old dashboard had three tabs. Traffic was the chart. Projects was a list that the leaderboard further down already shows in more detail. Revenue was one number and a progress bar.

So the tabs went. The chart got the width, the week's total got big type, and revenue became one honest line: $9 a month, 0.09% of the goal. I didn't write a new chart. The band uses the same hooks as the old dashboard, so the live feed fills it with no changes to the Worker.

On a phone

Both at 390 by 844 pixels, local builds with the same data, 10 Nov.

A stack of tilted cards is a bad idea at 390 pixels. On phones the deck becomes a plain row you swipe, using the browser's own scroll snapping. The edge of the next card shows, which is the oldest hint there is that something scrolls.

What broke on the way

Four things went wrong. Each one only showed up in a screenshot.

• The chart labels stretched. The chart code drew into a fixed 448 by 140 box and let the browser scale it. In a wide card the day names came out squashed. Now it measures the space it has and draws at that size.
• The headline grew a line. My first deck was 520 pixels wide. That pushed "Every week, in numbers." onto two lines and the headline to five. At 480 it's back to four.
• 4,156 read as "4, 1 56". Fixed-width digits and tight letter spacing don't mix at 68 pixels. I dropped the fixed-width digits on that one number.
• A screenshot showed three cards at once. I thought the shuffle was stuck halfway. It wasn't. Full-page capture in headless Chrome had blended two frames. A plain viewport capture showed the deck resting where it should. I added a timer fallback for the cleanup anyway, since a throttled tab can skip the event it relied on.

Light mode and the team colours

This site has a light and a dark mode and seven colour schemes. The new parts use only the existing design tokens, so they follow all of them. I checked the default scheme in both modes. I haven't opened the other six yet.

What I'd say about Fable 5.2

The useful part was the reading it did before it wrote anything.

The whole change is four files I edited by hand: the page builder, the stylesheet, the site script and the new deck script. About 200 lines added to the first three, and the 142 line script.

What happens next

A human looked at the local build and said to ship it. The new homepage went live on 11 November.

It still needs opening in Safari and Firefox, a read with a screen reader and a look at the other six colour schemes. Then the question is simple: do more people click through to a product from the homepage than did from the dashboard? I'll have that number in two weeks, and I'll post it either way.