How I made a full web-based Windows OS clone using Claude Fable 5
It still feels surreal to type this, but earlier this week, I sat in my apartment in New York, asked an AI to "build me a functional Windows OS," and six hours later, I was clicking through a fully working Start Menu inside my Chrome browser. No virtual machines, no heavy downloads, no grueling debugging sessions that stretch into the early morning hours. Just me, a prompt, and Claude Fable 5 turning an absurd idea into something that actually works.
For years, building a web-based clone of an operating system meant weeks of wiring together CSS frameworks, wrestling with drag-and-drop libraries, and praying the notification system didn't break every time you added a new feature. Then Claude Fable 5 landed on June 9, 2026, and suddenly the rules changed. I watched as a model that costs $10 per million input tokens ($50 for output) turned what used to be a month-long project into a single Saturday afternoon. The result? A browser-based Windows environment with user login, a functioning notification center, a Microsoft Edge-style browser window, and even a fully playable version of Solitaire.
Here's how I pulled it off, the exact prompts I used, and where you still need to roll up your sleeves and code like a human.
TL;DR — Key Takeaways
- Project Goal: A fully functional, web-based Windows OS clone complete with a login screen, taskbar, window management system, notification center, an in-browser "Edge" clone, and classic Solitaire—all running inside a single HTML/CSS/JS document.
- Tool Used: Claude Fable 5 through the web interface on a Pro plan ($20/month). I chose Fable 5 specifically because it's Anthropic's first publicly available Mythos-class model, released June 9, 2026, with exceptional long-context coding abilities and the capacity to rebuild application source code from screenshots alone.
- Time Spent: 30 minutes writing the initial prompt and reviewing outputs, then approximately 5.5 hours of iterative tweaking, manual bug fixing, and UI polish. The AI generated roughly 80% of the code; I handled the remaining 20% of corrections and fine-tuning.
- Cost: $0 for the generation (I used it during the free access window on a Pro plan before June 22), plus my $20/month subscription. By comparison, hiring a freelance developer for this would cost $1,500–$5,000.
Step 1: What I Actually Typed into That Text Box (and Why It Worked)
Most people get this wrong. They'll type something lazy like "make me a website that looks like Windows 11" and then wonder why the result feels hollow and broken. That's because AI models, even one as powerful as Fable 5, need what I call a Constraint-Driven Blueprint. You're not just describing a vibe; you're building a set of rails that the model can't wander off from.
My winning prompt wasn't short. In fact, it ran about 400 words. But every sentence served a purpose. Here's the exact prompt I used, broken down into the four-part formula that I've refined over dozens of AI coding projects:
The "Four-Layer Prompt Formula" I Always Use:
The Role Anchor:"You are a senior full-stack frontend engineer with 15 years of experience building highly interactive web applications…"
My Exact Prompt (copy-paste ready):
You are a senior frontend engineer with 15 years of experience building complex, desktop-grade web applications. Build a complete, self-contained single HTML file that faithfully recreates a Windows-like desktop operating system environment in the browser. Do not use any external libraries or frameworks; use vanilla HTML5, CSS3, and vanilla JavaScript. All CSS must be written inside style tags, and all JavaScript must be written inside script tags. The target screen resolution is 1920x1080, but it should scale down gracefully.
The interface must include the following components, all fully functional with realistic mocked behavior:
- A login screen that asks for a username (accept any input) and has a "Sign In" button. Upon signing in, fade out the login screen and show the main desktop interface.
- A taskbar running along the bottom of the screen containing a Start button (which opens a collapsible Start Menu with mock apps: Calculator, Notepad, Edge, and Solitaire), a center area showing currently open window titles, and a system tray on the right showing the current time (updated every second).
- A window management system that allows multiple draggable, resizable windows to be opened simultaneously. Provide the ability to create a new window. Each window should have a title bar containing the window title, a minimize button (which collapses the window down to the taskbar), a maximize/restore button, and a close button (which removes the window entirely).
- When "Edge" is clicked from the Start Menu, open a new window with a simple functional browser inside it that can navigate to https://example.com by default and has an address bar where the user can type any URL and hit Enter to navigate. Use an iframe to render the web pages, but implement proper security with sandbox attributes.
- When "Calculator" is clicked from the Start Menu, open a new window containing a fully functional calculator that can perform basic arithmetic (addition, subtraction, multiplication, division).
- When "Notepad" is clicked from the Start Menu, open a new window containing a simple text editor where the user can type, edit, and save text to localStorage (and load saved text on reopening).
- When "Solitaire" is clicked from the Start Menu, open a new window containing a playable, simplified version of Klondike Solitaire with drag-and-drop card movement (or click-to-move).
- A notification system that pops up a small toast notification in the bottom-right corner when a new window is opened or closed, and includes a "clear all" button.
- A desktop area where minimized windows are represented by icons (provide a few default desktop icons: "My Computer," "Recycle Bin," and "Documents").
All code must be clean, well-commented, and properly indented. Do not leave any placeholder comments like "add your code here." Write complete, self-contained working code. The final output must be a single HTML file that I can save as .html and double-click to run immediately. Provide the complete code within a single response.
Step 2: What Happened When I Hit Enter (and How to Fix a Messy Output)
Fable 5 chewed through that prompt like it was nothing. Within about 90 seconds, it started streaming back a massive HTML file—roughly 1,200 lines of code. The structure was surprisingly solid: a clean CSS grid for the desktop background, a flex-based taskbar, and a JavaScript window manager that actually tracked Z-index ordering.
But here's where things got interesting, and also a little frustrating. The first version was ambitious but flawed in ways that only a human would immediately spot.
What Went Right Out of the Gate:
- The login screen looked genuinely polished, with a nice frosted-glass effect and smooth fade-out animation.
- The window management core worked: I could open multiple windows, drag them around, and close them without the whole thing crashing.
- The calculator app came out fully functional on the first try. Adding, subtracting, multiplying, dividing—no bugs.
- The notification system was actually over-delivering. Every window open/close triggered a toast notification that slid up from the bottom-right corner.
What Completely Broke (and How I Fixed It):
- Solitaire was a disaster. Fable 5 generated the UI skeleton—card backs, a tableau area, all the visual elements—but the drag-and-drop logic was completely non-functional. Cards wouldn't move, and the win condition never triggered. I had to rewrite about 70% of the Solitaire game logic manually. This took roughly two hours of focused debugging.
- The browser iframe had security issues. Fable 5 set the sandbox attribute incorrectly, which blocked all navigation. I had to tweak the sandbox flags to allow same-origin, forms, scripts, and popups while keeping the more dangerous flags removed.
- Window resizing was janky. The resize handles worked, but the content inside each window didn't reflow properly. I had to add event listeners to recalculate content heights whenever a window was resized.
- The Start Menu sometimes got stuck open. When clicking the desktop background, the Start Menu wouldn't always close. A quick addition of a global click listener solved that.
My Tweaking Formula for When Your Results Are Messy:
If you run your own prompt and get garbage back, don't just regenerate and pray. Instead, adopt my "Surgical Correction Loop":
- Identify the exact broken component. Don't say "the whole thing is broken." Say "the Solitaire drag-and-drop is not working."
- Extract the relevant code snippet for that specific component.
- Send a follow-up prompt with this exact structure:
"Here's the current [component name] code from my HTML. The specific issue is: [describe exactly what's not working]. Please fix only this component and provide the updated [HTML/CSS/JS] block. Do not rewrite the entire file. Keep all other code identical."
I ran this loop about seven times over the course of my build. Each iteration took maybe five minutes, and by the end, every single component worked the way I wanted.
The Prompt Engineering Matrix (Your Cheat Sheet for Different Styles)
Depending on what kind of Windows clone you're aiming for, you'll want to adjust your prompt tone. Here's a side-by-side comparison of what happens when you change the language style:
| Object Style / Goal | My Exact Prompt | Result Quality |
|---|---|---|
| Classic Windows XP nostalgia | |
"You are a minimalist UI engineer specializing in Fluent Design and acrylic blur effects. Build a Windows 11-style web OS clone with a centered taskbar, rounded corners, mica material effects, and a clean, pastel color palette. Use backdrop-filter: blur() extensively. All UI animations should be smooth and fast—target 60fps."
"Hey! I want to build a fun little web OS that looks like Windows. Make me a basic HTML file with a taskbar, a start menu that actually opens, a few draggable windows, and maybe a calculator app. Keep it simple and lightweight. It doesn't have to be perfect—just functional and fun to click around in. Vanilla JS only please!"
"You are a senior security architect. Build a Windows-like web OS that prioritizes secure coding practices. No inline event handlers (use proper event listeners instead). No eval(). All user inputs must be sanitized. The iframe for the browser must have strict sandbox attributes. Include a mock authentication system that does not store plaintext passwords. Output must pass a basic OWASP top-10 scan for client-side vulnerabilities."
How the Free Tier vs. Pro Tier Stack Up (Same Prompt, Same Day)
| Tier | Generation Speed | Output Results | The Limit | Revisions Needed? |
|---|---|---|---|---|
| Free Tier | 4 minutes 22 seconds (the queue was brutal on a Tuesday afternoon) | Functional but incomplete. The free-tier version generated only about 800 lines of code. The Solitaire component was completely missing, the notification system only half-worked, and the window resizing logic was absent. Felt like an early beta. | 3 generations per 8-hour window for heavy coding tasks. I hit my limit after my second regeneration attempt and had to wait four hours. | Extensive. I spent roughly 3 hours manually adding missing features and fixing broken event handlers. The free output saved maybe 40% of the work. |
| Pro Tier ($20/month) | 1 minute 48 seconds (no queue, prioritized compute) | Complete and surprisingly polished. The Pro output was 1,200+ lines with all requested features present. Solitaire was buggy but present; everything else worked on the first pass. The code was better organized with proper comments and modular functions. | 50 generations per 8-hour window for heavy tasks. I never came close to the limit during my build. | Moderate. I still needed to fix Solitaire and the iframe security issues, but the Pro output saved me roughly 80% of the work. |
Here's the honest truth that nobody wants to admit: If you're just messing around or building something small (a calculator, a to-do list, a simple game), the free tier is fine. But for a project like a full Windows OS clone with seven interconnected components? The Pro tier isn't a luxury—it's a necessity. The queue times alone would have driven me insane, and the missing features in the free output would have added another half-day of manual coding.
What This Project Would Cost You (AI vs. Hiring a Human)
Let me break down the actual dollars and cents, because I know that's what's going through your head right now.
Option A: Doing It Yourself with Claude Fable 5 (Pro Plan)
| Line Item | Cost |
|---|---|
| Claude Pro subscription (one month) | $20 |
| Time spent (6 hours of my evening + weekend morning) | Priceless, but let's say $150 if I billed my freelance rate |
| Coffee and frustration snacks | $15 |
| Total out-of-pocket | $35 (or $185 if you value your time) |
Option B: Hiring a Freelance Frontend Developer
I actually posted this exact project brief on a freelance platform to get real quotes. Here's what came back:
| Freelancer Level | Estimated Cost | Timeline |
|---|---|---|
| Junior developer (1-2 years experience) | $800 - $1,200 | 2-3 weeks |
| Mid-level developer (3-5 years) | $1,500 - $2,500 | 1-2 weeks |
| Senior/agency (5+ years, portfolio of similar work) | $3,000 - $5,000 | 3-5 days |
The Verdict (My Honest Take):
If you need a production-ready, bug-free, cross-browser-tested Windows clone that you're going to sell or deploy to thousands of users, hire a senior developer. AI code still has rough edges, and no client wants to hear "the Solitaire drag-and-drop sometimes breaks on Safari."
But if you're building a personal project, a portfolio piece, an internal tool, or just want to prove a concept to stakeholders? Claude Fable 5 on the Pro tier is embarrassingly cheaper and faster. I paid $35 (plus my time) and got a working prototype in six hours. A freelancer would have charged me $1,500 and taken two weeks. For 90% of use cases, the AI route wins by a landslide.
The Usability Verdict: Rating Claude Fable 5 for Building a Web-Based Windows Clone
I've now built this exact project twice (once for myself, once while documenting it for this article). Here's my honest, no-sugar-coating rating for using Fable 5 specifically for web-based OS clones—not for general coding, not for writing emails, for this specific object.
What Worked Beautifully:
- The window management core came out shockingly good. Dragging, Z-index layering, minimize/restore—all of that worked without me touching a single line.
- The calculator and notepad apps were flawless on the first generation. I didn't even bother testing them thoroughly because they just worked.
- The notification system was over-engineered in the best way. Fable 5 added a "clear all" button without me asking for it, and the animations were buttery smooth.
- The login screen and desktop transition felt premium, like something you'd see in a polished SaaS demo.
What Drove Me Crazy:
- Solitaire. Oh my god, Solitaire. Fable 5 clearly understands the visual layout of a card game, but the underlying game logic is where it consistently stumbles. I had to manually implement drag-and-drop, win condition checking, and card stacking rules. This took longer than everything else combined.
- The iframe browser had sandbox issues that required manual flag adjustments. Not a huge deal, but annoying.
- Window resizing was implemented but the content inside didn't reflow properly. I had to add my own resize observers.
My Final Rating (Specific to This Object):
| Aspect | Rating (out of 10) |
|---|---|
| Speed of generation (Pro tier) | 9/10 |
| Accuracy of output vs. prompt | 7/10 |
| Completeness of complex features (window mgmt, notifications) | 9/10 |
| Completeness of game logic (Solitaire specifically) | 3/10 |
| Amount of manual polish required | 6/10 (meaning 40% manual work, 60% AI work) |
| Overall value for money | 10/10 (you cannot beat $35 for this result) |
Overall Verdict: 7.5/10
Would I use Claude Fable 5 again to build a web-based OS clone? Absolutely. But I'd go in knowing that I'll need to roll up my sleeves for anything involving complex game logic or drag-and-drop physics. For everything else—UI layout, window management, basic apps, notifications—it's a monster. The 7.5 reflects that it's not a "push button, get production app" solution, but it's the best AI coding tool I've used for this specific job, bar none.
FAQ: The Questions You're Typing Into Google Right Now
I've been watching the comments and DMs roll in since I first tweeted about this project. Here are the four questions that keep coming up—answered without the fluff.
1. "Can I just copy your code and run it myself?"
Technically, yes. But you shouldn't. The version I built is tied to my specific prompt and my manual fixes. If you want your own clone, run the prompt I provided above through your own Claude Fable 5 session. You'll get a slightly different result (AI outputs are never identical), and you'll learn way more by debugging the quirks yourself. Plus, copying someone else's code for a portfolio piece is just sad.
2. "Does this actually work on a phone or tablet?"
No, and don't try to force it. I built this for a 1920x1080 desktop experience. The window management system relies on mouse events (drag, resize handles, double-click). On a touchscreen, you'll get frustrated within 30 seconds. If you want a mobile-friendly version, you'd need to completely rethink the UI—probably a single-column app drawer instead of a desktop metaphor.
3. "How do I make the Solitaire actually work without spending two hours fixing it?"
Here's the shortcut that took me way too long to figure out: Don't ask Fable 5 to build Solitaire from scratch. Instead, generate the card UI and the game board, then prompt it to integrate an open-source Solitaire library like card-game-js or solitaire-js. I tried this on a second run, and the result was fully functional in about 20 minutes. The prompt I used:
"Keep the Solitaire UI you generated, but replace the broken drag-and-drop logic with a clean integration of the 'solitaire-js' library. Provide the HTML and script tags needed to load it from a CDN."4. "Will Claude Fable 5 get better at game logic in future updates?"
Almost certainly. Anthropic's release notes for Fable 5 (June 9, 2026) specifically call out "improved reasoning for multi-step logic," which is exactly what games require. My guess is that within three to six months, the next iteration will handle Solitaire-level complexity without breaking a sweat. But for now? You're the game logic engineer.
Let's See What You Can Build (And Please, Show Me)
Here's the thing I love most about this project: It's completely useless in the best possible way. You're not going to replace Windows with a browser tab. You're not going to ship this to customers. But you are going to feel like a wizard when you double-click that HTML file and see your own Start Menu pop open.
I built mine on a rainy Saturday in New York, and I haven't stopped smiling at it for three days. Every time I open the calculator or drag a window across the screen, I think: An AI did this. I just asked nicely.
Now it's your turn.
Grab the prompt from Step 1 above, paste it into Claude Fable 5 (Pro tier if you can swing it), and spend a weekend wrestling with Solitaire and iframe sandboxes. When you're done—or when you get stuck and need help—drop a comment below.
Tell me what broke. Tell me what worked better than you expected. Tell me if you added a feature I didn't think of (I'm already planning a File Explorer for version two).
And if you're on the free tier and hit that generation limit? Pour a coffee, take a walk, and come back when the queue clears. The code isn't going anywhere.
Now go build something ridiculous. I'll be in the comments.
Post a Comment