Real buildClaude's output, unedited
Open the live demo (Claude's unedited files, a made-up example)
I want AI to build me a budget tracker
Five plain-English prompts made a private monthly budget tracker in pounds that keeps your numbers in your own browser. Upload one file to GitHub and Cloudflare puts it live: free, no terminal.
- Prompts
- 5
- Claude's time
- 6 min 12 s
- Got wrong
- 5 things
- Tests passed
- 8 of 11
- Model
- claude-sonnet-5-5
- Run on
- 2 October 2026
For: A household that wants a simple monthly budget tracker on a phone and a laptop, wants its numbers kept private (no accounts, no bank connection, no server), has never built anything and has never opened a terminal.
What the five prompts made On the laptop, from a backup
01 · Before you start
Before you start.
You need three free accounts and nothing to install. A Claude account with “Code execution and file creation” switched on (Settings, then Capabilities; every plan has it, including Free), so Claude can hand you files. A GitHub account with an empty repository, which is where the file will live. And a Cloudflare account connected to that repository, which puts it on the internet. The set-up page walks through all three once.
This is a tool page, not money advice. Our example is Ellie and Sam, a made-up couple who want a simple monthly tracker for their household: Food shopping £420, Bills £260, Transport £140, Eating out £90, Fun £60 and Other £50, £1,020 a month. Those are their numbers in our example, not a recommendation. They didn’t want accounts, passwords, a bank connection or their spending on anyone’s server. Change the details to yours.
One thing to know now: the numbers are kept in the browser on the device you use. That is what keeps them private, and it’s also why clearing the browser loses them. The tracker has a backup button. Use it.
02 · Set up once
Set up once, then just talk to Claude.
Free accounts you make one time and reuse for every build. Each links to the step-by-step on the set-up page, with what each screen looks like.
- 1. Get a free Claude account. It's where you describe what you want and Claude makes it. The Free plan covers every guide on this site; for websites, Pro adds the shortcut where Claude saves changes to GitHub itself.
- 2. Let Claude hand you files. Everything on this site is a handful of files: a website, an app, an extension. With this switched on, Claude can make them and give them to you to download.
- 3. Get a free GitHub account and an empty repository. A repository is a folder on GitHub that keeps every version of your files. It's the one place your site lives: you (or Claude) change the files there, and Cloudflare publishes whatever is in it.
- 4. Get a free Cloudflare account and connect it to your repository. Cloudflare is where your site is live on the internet. Once it is connected to your repository, every change to the files on GitHub goes live by itself, in a minute or two. A site made of plain files costs nothing to host: Cloudflare says requests to static files are "free and unlimited".
- 5. Connect Claude to GitHub. So Claude can read the files that are live now before it changes them, even in a brand new chat. On Pro, the same connection is what lets Claude Code on the web save its changes to your repository.
03 · The prompts
Paste these five, in order.
Plain English, typed into an ordinary Claude chat. On the left, exactly what we sent, word for word; change the details to yours. On the right, what came back. One conversation with claude-sonnet-5-5, run on 2 October 2026. Read the full transcript.
Prompt 1 of 5
Describe the tracker, say your numbers are private, and ask where they'd be kept.
You say: I'd like a simple budget tracker that I can open on my phone and my laptop. I'm Ellie, and my partner Sam and I want to keep an eye on what we spend each month. What I'd like it to do: - I set a monthly amount for each category. Ours are: Food shopping £420, Bills £260, Transport £140, Eating out £90, Fun £60 and Other £50. - When we spend something, I add it: the amount, which category, a short note (like "Tesco big shop") and the date. - It shows how much is left in each category this month, and in total, and makes it obvious when we've gone over. - Everything in pounds. Our numbers are private. I don't want accounts or passwords, I don't want to connect our bank, and I don't want our spending stored on anyone's server. I'm not technical, and I want it to be free to run. Before you make anything, ask me anything you need to know, and tell me in plain English what you're going to make and where our numbers would be kept.
1,412 output tokens back · read the full reply
Prompt 2 of 5
Answer its questions, and show it a website you like.
Attach: a screenshot of a website you like the look of · the one we attached
You say: Thanks, that sounds right. My answers: 1. Mostly me adding things, on my phone. Option 2 is fine: please add the backup button so I can copy it to the laptop now and then. 2. I have an iPhone and Sam has an Android. The laptop uses Chrome. 3. The 1st of the month. I'd like to be able to look back at last month. 4. Each month starts fresh. No carrying over. 5. I'd like it online so I can open it from a link. I've got free GitHub and Cloudflare accounts, so please make it so I can upload it there. Instructions can come later. 6. By hand for now. Please also put in a few made-up spends for this month so I can see how it looks. I'll delete them. I've attached a screenshot of a website I like the look of. I like the off-white background, the big clean writing and the blue. Don't copy its words, just the feel. Please make it now. Keep it as simple as possible: just the files I'll need to upload, nothing I have to install. It must be easy to use on a phone.
14,215 output tokens back · read the full reply
Prompt 3 of 5
Ask it to try to break the tracker the way you'll use it.
You say: I opened it by double-clicking it and it looks great. Before we rely on it, please check it carefully as if you were me on a small phone, and as if you were trying to break it: - I type an amount like 12.5, £12.50, 12,50 or leave it blank, or type a minus number - I add a spend, close the page and open it again tomorrow: is it still there? - I add something by mistake and want to fix or delete it - the totals: do they add up exactly, with pennies? - the month changes while I'm using it - I clear my browser history, or my phone breaks: what happens to our numbers, and how do I keep a backup? - writing that's too small or too faint, anything that spills off the side, and anything that would trouble someone who uses a screen reader or only a keyboard Tell me in plain English what you found, then fix it in the files.
27,323 output tokens back · read the full reply
Prompt 4 of 5
Change something, the way you will once you're using it.
You say: We've been using it for a bit and want one change. Please add a new category called "Presents" with £35 a month, and change Eating out from £90 to £70. Then tell me which files you changed, so I know which ones to upload again, and whether the spends I've already added will still be there after I upload the new version.
6,173 output tokens back · read the full reply
Prompt 5 of 5
Ask how to put it live from GitHub, by clicking, and who can see your numbers.
You say: I've made free GitHub and Cloudflare accounts. On GitHub I made a new repository called ellie-budget (I switched on "Add README"), and in Cloudflare I went to Workers & Pages, Create application, Pages, Connect to Git, and picked that repository, so it should go live by itself whenever the files on GitHub change. I don't want to use the terminal or install anything. Please tell me, step by step, how to get the budget tracker into my repository using the GitHub website, what I should see at each step, how I find the address where it's live, and how I put a change live later (like the new category). Also: if it's on a public address, can other people who open it see our numbers? And if I add spends on my phone, will they show up on my laptop?
3,445 output tokens back · read the full reply
After prompt 1 of 5
Reply to prompt 1 · 13.9 s · 1,412 output tokens
Describe the tracker, say your numbers are private, and ask where they'd be kept.
A plan, an answer about where the numbers live, and some questions, and nothing made yet. Ours proposed one web page, said spending would be saved inside the browser on the device you use and never sent to a server, warned that a phone and a laptop would each keep their own copy, recommended a backup button, and asked six questions.
Reply to prompt 3 · 3 min 6 s · 27,323 output tokens
Ask it to try to break the tracker the way you'll use it.
A plain-English list of what it found and fixed, and an updated index.html. Ours found that '12,50' was read as £1,250 and fixed it, added clearer error messages, an Undo after deleting, a backup reminder, a warning if the browser won't save, and a page that catches up when the month changes. It gave its own check of the sample sums and said it had checked by reading the code.
Reply to prompt 5 · 30.7 s · 3,445 output tokens
Ask how to put it live from GitHub, by clicking, and who can see your numbers.
Click-by-click steps and no new files. Ours: Add file, Upload files, Commit changes; Cloudflare's setup screen with framework preset None and the build command empty; wait for Success under Deployments; find the pages.dev address and always use that same address. It said anyone with the link sees an empty tracker with the samples, your numbers stay in your own browser, and the phone and laptop don't share them without the backup.
04 · The result
The real thing, on the stage.
Screenshots of exactly what Claude produced, running on our machine on 2 October 2026. Nothing retouched.
We typed five plain-English prompts into one conversation with claude-sonnet-5-5 on 2 October 2026. We ran them through Anthropic’s command-line tool with only its file tools switched on, so Claude could save files into an empty folder, much like file creation on claude.ai. We didn’t use the claude.ai website itself, so your screen will look different. The replies are published as they came back and we edited nothing by hand. Claude spent 371.7 seconds writing them, about six minutes.
The first prompt described the tracker, said the numbers were private and asked where they’d be kept. Claude made nothing yet. It said the spending would be saved in the browser on the device and never sent to a server, and that the page you put online is just the empty tracker. It warned that a phone and a laptop would each keep their own copy, recommended a backup button, and was plain that clearing the browser or losing the phone would lose the numbers. Then it asked six questions.
In the second prompt we answered (mostly Ellie on her iPhone, a month that starts on the 1st, no carry-over) and attached a screenshot of one of our own sites for the look. Claude saved one file, index.html, with 14 made-up sample spends marked “sample” and a button to remove them. It said it hadn’t tested it in a browser.
We tested it at laptop and phone size: 35 of 49 checks passed. The sums were right, but there was no main heading, text as small as 11px, and typing “12,50” saved £1,250. Left open over midnight at the end of the month, it stayed on the old month.
Prompt 3 asked Claude to try to break it the way we’d use it. It found the “12,50” bug itself and fixed it, added a clear message for each kind of bad amount, an Undo after deleting, a reminder when there’s no recent backup, a warning if the browser won’t save, and a page that catches up when the month changes. It worked out the sample sums by hand (£561.93 spent, £458.07 left) and was clear that it had checked by reading the code. Prompt 4 added Presents at £35 and cut Eating out to £70. Claude changed only index.html and said the spends would survive the upload, because they’re kept in the browser and not in the file.
The final file passed 48 of our 50 page checks; the two misses are 12px text. Then we used it. Every total matched our own sums, in pence, after every change. 12.5, £12.50 and 12,50 all saved £12.50, and a blank, -5, 0 and “abc” were refused with a reason. A second browser at the same address saw only the samples. A backup pasted into it brought across exactly the same £611.43. A spend added under the prompt 3 file was still there after we swapped in the prompt 4 file, which is what uploading a new version does. And left open at 23:58 on 31 October, the page moved to November four minutes later, with the late spend still in October.
It isn’t perfect. Three things Claude meant to hide still show: an Undo button with nothing to undo, a bare “Choose File” box under the backup buttons, and the “Remove the made-up sample spends” button after the samples have gone. None of them breaks anything. We didn’t try it in Safari, on an iPhone or on an Android phone.
demo.iwantaito.com/build-me-a-budget-tracker/: Claude's unedited files, a made-up example.
index.html
05 · What we tested
We tried to break it. 8 of 11 held.
Run on our own machine against the unedited files. Nothing deployed while testing.
| What we tried | What happened | Result |
|---|---|---|
| Prompt 4 file opened from disk, laptop (1440x900) and phone (390x844) size in headless Chrome | 48 of 50 checks passed: no errors, nothing loaded from other websites, no sideways scrolling, one main heading, every field labelled, keyboard focus visible, lowest text contrast 5.28:1 (the WCAG AA minimum is 4.5:1) | Pass |
| Smallest text | The small capital line at the top and the 'sample' tags are 12px, below the 14px we look for (the 2 failed checks) | Fail |
| Do the totals add up? | We worked out every category and the total ourselves, in pence, after every change. All matched: the samples came to £561.93 of £1,035.00, £473.07 left, with Eating out £49.00 over | Pass |
| Awkward amounts | 12.5, £12.50 and 12,50 were all recorded as £12.50, and 1,200 as £1,200.00. A blank, -5, 0 and 'abc' were refused, each with a message saying why | Pass |
| Mistakes and reopening | A £1,200.00 typo edited to £12.00; a deleted spend came back with Undo; closing and reopening the page kept every spend; last month showed 'Nothing spent in September yet.' | Pass |
| Is it private on a public address? | A second browser at the same address saw none of our spends, only the samples. Nothing in the whole run made a request to anything but the page itself | Pass |
| Backup to another device | Copy backup gave 2,203 characters of text and Download file gave budget-backup-2026-10-02.json. Pasted into the second browser with Restore from box, it showed the same £611.43 spent | Pass |
| Uploading a new version | A £23.40 spend added under the prompt 3 file was still there after the prompt 4 file replaced it at the same address, and Presents (£35.00) and Eating out (£70.00) appeared | Pass |
| The month ends with the page open | With the clock at 23:58 on 31 October we added a spend; four minutes later the page showed November, £1,035.00 left and a date of 1 November, and the spend stayed in October | Pass |
| Things that should be hidden | From prompt 3 on, an Undo button shows when there's nothing to undo and a bare 'Choose File' box sits under the backup buttons; 'Remove the made-up sample spends' stays on screen after the samples have gone. Undo and the sample button do nothing when there's nothing to act on, and the 'Choose File' box works like Restore from file | Fail |
| Prompt 2 first build, same checks | 35 of 49: no main heading, an unlabelled backup box, 11px text, contrast 3.64:1, '12,50' saved as £1,250, a blank amount gave no message, and a page left open didn't move to the new month. Prompt 3 fixed all of these except the 12px text | Fail |
06 · Ship it
Put it live from GitHub, no terminal.
Your files go into your GitHub repository and Cloudflare publishes them by itself. The steps start from Claude's own answer and are checked by us against GitHub's and Cloudflare's documentation, which the sources below link to.
These steps assume you’ve done the set-up page: a GitHub repository (ours would be ellie-budget, with “Add README” on) connected to a Cloudflare Pages project with Connect to Git. The clicks follow GitHub’s and Cloudflare’s documentation. Claude’s unedited file is live at demo.iwantaito.com/build-me-a-budget-tracker/ (we host it ourselves, with a thin bar on top saying it’s a made-up example). It shows sample spends, and anything you add there stays in your own browser.
- Download the one file Claude made, index.html.
- On GitHub, open your repository and select Add file, then Upload files. Drag in index.html and select Commit changes. The repository now lists index.html next to README.md.
- If Cloudflare’s setup screen is still open, check the production branch is main, the framework preset is None and the build command is blank, then select Save and Deploy. If you’d already finished it, your commit starts a deployment by itself.
- In Cloudflare, open Workers & Pages, then your project. Under Deployments, wait for the newest one to show Success. The address is on the project page and ends .pages.dev, such as ellie-budget.pages.dev.
- Open that address on your phone, select “Remove the made-up sample spends”, and bookmark it. Always use that same address: the numbers are kept per address, so a different one, including a preview address Cloudflare makes for another branch, starts empty.
- Add a couple of spends, close the browser, open the address again and check they’re still there. Then open the backup section, select Copy backup and send the text to yourself.
- To change something later, ask Claude in the same chat and download the new index.html. On GitHub, select Add file, then Upload files, drag it in and select Commit changes. The file with the same name is replaced, and Cloudflare publishes the change by itself. Your spends stay, because they’re in your browser, not in the file.
To see your spends on the laptop too, select Copy backup on the phone, send the text to yourself, paste it into the box on the laptop and select Restore from box. Restoring replaces what’s on that device; it doesn’t merge.
On Claude Pro, Claude Code on the web can save a change to a branch of your repository for you to merge on GitHub, after which Cloudflare puts it live. The set-up page shows how.
Free plan: Claude makes the files, you upload them
FreeTo change something: ask Claude, download the files it changed, and upload just those the same way. Files with the same name are replaced; the rest stay as they are.
£0: Claude Free, GitHub Free and Cloudflare's free plan.
Pro: you chat, Claude saves the change, Cloudflare publishes it
Claude Pro, $20 a monthClaude edits the files and saves them to GitHub on a separate branch, a draft copy. Cloudflare gives that branch its own preview address, so you can look before anything changes. Happy with it? Select Create PR, then on GitHub select Merge pull request, then Confirm merge. Cloudflare puts it live by itself.
07 · What it costs
What it costs.
£0 a month on Cloudflare's free plan, GitHub Free and Claude's Free plan. No bank connection or app subscription; your own domain is optional.
Hosting is £0 a month. The tracker is one plain file, and Cloudflare says requests to static assets are free and unlimited. GitHub’s Free plan holds it, and Claude’s Free plan covered all five prompts. There’s no bank connection or app subscription to pay for. A domain is optional and the only possible cost.
08 · What it got wrong
5 things Claude got wrong, or left to you.
If Claude gets something wrong, we say so here. We never fix its files by hand; a fix is a follow-up prompt you can see above.
Its own buttons that won't go away
Three things Claude meant to hide still show: an Undo button with nothing to undo, a bare 'Choose File' box, and the 'Remove the made-up sample spends' button after the samples are gone. Claude checked by reading its code and didn't catch it. Ask it to 'make sure hidden buttons are really hidden' if they bother you.
Miscounted the samples
After prompt 2 Claude said it had added 13 sample spends. There were 14. It noticed and said so in its next reply.
The build output directory
Claude said to leave Cloudflare's build output directory empty, 'type / if it won't let you'. Cloudflare's Git integration page says to leave the build command blank for a site with no build step, and doesn't mention '/'.
A taken project name
Claude said the address 'may have extra letters if that name was taken'. We couldn't find that on Cloudflare's Git integration page. Use the address the project page shows.
Not tried on a real phone
Our tests ran in Chrome on a computer. Safari, an iPhone and an Android phone were not tested. Safari's rules on stored data are different (see the FAQ), so add a few spends on the iPhone and check they're still there the next day before relying on it.
Ours, disclosed
Built it? Where we can help next.
Ours: made by the same studio that runs this site. None of them changes anything above.
Ours
How to get AI to
If a spreadsheet would suit you better than a web page, free step-by-step guides to getting AI to do that kind of job.
Ours
Adapt Progress Evolve
We build tools like this properly, if you'd rather not do it yourself.
Questions
Questions people ask.
Can AI build me a budget?
It can build you the tool, which is what we tested: five prompts to Claude made a monthly budget tracker where you set an amount per category, add what you spend and see what's left, in pounds. The amounts are yours to choose. This page isn't budgeting advice, and we didn't ask Claude for any.
Can ChatGPT build me a budget tracker?
We only ran these prompts in Claude, so we can't say what ChatGPT would make. The prompts are plain English and will paste into any assistant that can hand you a file, but test the result the way we did: add spends, reopen the page, and check the totals yourself.
Where are our numbers kept, and can other people see them?
In the browser on the device you use, and nowhere else. Anyone who has the link can open the page, but they get an empty tracker with sample spends. We checked: a second browser at the same address saw none of our spends, and the page made no requests to anything but itself. Anyone using your unlocked phone in the same browser could see them, though.
What happens if I clear my browser or lose my phone?
The numbers go with it. The tracker says so, has Copy backup and Download file buttons, and shows a reminder after 14 days without a backup. Safari can also delete a site's stored data after seven days of using Safari without visiting it (WebKit says home-screen web apps have their own count), so back up regularly.
Will spends on my phone show up on my laptop?
Not by themselves. Each device keeps its own copy, which is the price of keeping it off a server. Copy backup on the phone, send the text to yourself, then paste it in on the laptop and select Restore from box. Restoring replaces what's on that device rather than merging.
Do I need a terminal, or to connect my bank?
Neither. You type in a Claude chat, download one file, index.html, and upload it on the GitHub website. You add spends by hand; nothing connects to a bank.
Sources for this page
8- Claude help: create and edit files with Claude (all plans; Settings > Capabilities)
- GitHub Docs: adding a file to a repository (Add file > Upload files; 100 files at once, 25 MiB each)
- Cloudflare Pages: Git integration (leave the build command blank; deploys on every push)
- Cloudflare Pages: preview deployments (each gets its own hash-based address)
- Cloudflare Pages: serving pages (no 404.html means single-page app behaviour)
- Cloudflare Workers pricing ('Requests to static assets are free and unlimited')
- MDN: Window.localStorage (kept per site address, no expiry; undefined for files opened from disk)
- WebKit: full third-party cookie blocking and more (Safari's seven-day cap on stored data; home-screen apps have their own counter)
For developers
For developers.
Skip this if you've never used a terminal. You don't need it.
The command-line route
The git route: clone the repository, copy index.html to its top level, commit and push to main. Cloudflare Pages deploys every push to the production branch (no build command for a plain file).
git clone https://github.com/<you>/ellie-budget.gitcp ~/Downloads/index.html ellie-budget/cd ellie-budgetgit add index.htmlgit commit -m "Budget tracker"git push origin mainEverything is one localStorage key (budget-tracker-v1) holding budgets by month and spends in whole pence; a schema number triggers the one-off prompt 4 change on first load. Our tests are in demos/build-me-a-budget-tracker/tests/: a Playwright script that serves the file the way Pages does, checks every total against its own sums, swaps the prompt 3 file for the prompt 4 file mid-test, and pins the clock to 23:58 on 31 October.