xClean Café: Built in 1 Hour with Claude Fable 5

The Claim: Fable 5 Built This Website in 1 Hour

Here it is, plainly: the first living version of xClean Café went from an empty repo to a deployed website in about an hour. Claude Fable 5, Anthropic's newest model, driving Claude Code. One human, one AI, one hour, one cozy pixel art coffee shop on the internet.

Not a mockup. A virtual coffee shop where robots clean, a cat supervises, the sun sets in the window every 4 minutes, and every real visitor appears as a pixel patron sipping their own coffee. The polish came later, in short playful sessions. The life shipped on day one.

That is the real headline of this page: Claude Fable 5 is genuinely powerful. Not "autocomplete with confidence" powerful. Ship-a-living-world-before-your-coffee-cools powerful. What follows is the experience of building with it: what broke, how it got fixed, and what we learned.

7 Things That Broke (and How Fable 5 Fixed Them)

An AI built website in one hour sounds like a stunt until you see the bug list. These are the real ones, with the real fixes.

1. Browsers block audio autoplay. Fix: the music arms a one-time pointer listener and fades in at your first tap.
2. The music loop had an audible seam. Fix: a manual loop with a 3-second fade-out into a fade-in.
3. The presence count drifted up from ghost sockets left by closed laptops. Fix: server-side keepalive timestamps plus an alarm that sweeps stale connections, so the count self-corrects.
4. A premature git squash erased a day of café-life features. Fix: restored from the reflog. Verify before you squash.
5. The crescent moon rendered as an L-shaped blob made of two overlapping rectangles. Fix: a real 10x10 pixel sprite.
6. Patrons sipped from a floating third cup while two cups sat untouched on the table. Fix: the sip animation now lifts the patron's own table cup, hand wrapped around it, and puts it back.
7. The readable source had to stay private while the JS stays public. Fix: a deterministic build pipeline (syntax check, terser, artifact assertions, atomic write) plus a domain lock buried in the minified file.

4 Lessons From Vibe Coding With Fable 5

This project was built with Claude Code end to end, and the workflow taught us more than the code did.

1. Screenshots are the review loop for pixel art. The human pastes a screenshot, the AI reads it and fixes the exact pixels.
2. Small PRs with a single verify command (build + typecheck + tests) kept every AI iteration shippable.
3. Pin tests to the built artifact, not just the source. The minified file must still contain the public API and the moon sprite.
4. The best AI workflow was conversational. "The moon is not like a moon" is a perfectly good bug report. Fable 5 read it, found the two overlapping rectangles, and drew a real moon.

A cozy pixel art coffee shop, built in 1 hour with Claude Fable 5. The robots clean. The cat supervises. You just study.

8 Things Alive in This Pixel Coffee Shop

So what does one hour (plus the polish) actually buy? A living café. Everything below runs right now, in your browser tab, with no frontend framework behind it.

1. Momo the robot (plus Mocha, Berry, and Volt: 4 switchable robots) endlessly cleans dust, crumbs, paper scraps, and leaves. The batteries are real: they drain and recharge at a wall-outlet dock.
2. Latte the cat naps on a pink cushion and talks in tiny speech bubbles. "DO NOT DISTURB." "I SUPERVISE ONLY."
3. Click anywhere to drop a crumb. The robot paths around the furniture to come clean it.
4. The window runs a full day every 4 minutes: sun, clouds, a bird, then a crescent moon, 9 twinkling stars, the occasional shooting star.
5. Peaceful looping café music with a 3-second crossfade at the seam, plus soft 8-bit dings when a robot finishes a job.
6. Live presence: every real visitor becomes a pixel patron seated at the tables, sipping their own cup. A badge shows "N here" in real time.
7. Robots change shifts every few minutes. They announce it and hand over.
8. Light theme is the day café. Dark theme is the night café. There is even a tiny ad sign next to the cat's cushion, currently promoting itself.

Stay a While: a Coffee Shop with Peaceful Music for Studying

Here is the part that matters more than the tech. xClean Café is a third place that fits in a browser tab: peaceful music for studying, a lofi café ambience that loops without a seam, robots that quietly do their job while you do yours.

Open it next to your work. Watch the sun cross the window while you relax and focus. Drop a crumb when you need a ten-second break and let Momo handle it. Every patron at the tables is a real person, studying beside you right now. It is study with me, except "me" is whoever else has the tab open tonight.

The door is always open. The cat will not get up. The coffee is imaginary. The calm is not.