Budget Control | AI-assisted design
All work
AI-assisted design · Finance · In progress

Budget control: designing and building with Claude

An in-progress exploration using Claude and Claude Code to design and build a responsive budgeting tool from scratch, with real learnings about what AI-assisted design looks like as a practice, not just a talking point.

Work in progress

"This project is ongoing. What's documented here are real learnings from the process so far, not a polished retrospective."

This page will be updated as the project develops. The tool is live. try it below.

Try Budget Control

Overview

A personal finance dashboard, built without prior React experience

I built this personal finance dashboard in collaboration with Claude AI, without prior React experience. I started with a concept of what I wanted, focused on specific use cases, and added features as I went. Development was fast, which let me stay focused on realistic use cases, testing, and design adjustments rather than getting stuck in setup and syntax.

Connecting Claude with Figma gave me more control over the visual design. I'd iterate on designs in Figma, then Claude would update the tool to match. The loop between design and build was tighter than anything I'd experienced working with a traditional engineering handoff.

The tool

Budgeting tool dashboard
The budget dashboard: KPI summary cards, spending breakdown, and category tracking. Designed in Figma, built with Claude Code.

Responsive views

Desktop view
Desktop layout: full visualization suite with side-by-side KPI cards.
Mobile view
Mobile layout: reordered hierarchy with prioritised summary metrics.

Lessons learned

What working with AI actually taught me

  1. 01 Save your long prompts elsewhere during busy times. If Claude is slow to respond, your message is likely to disappear. Never to be found again.
  2. 02 Learn how to scan the code. You don't have to be a proficient coder, but it's worth scanning for things that look strange. You'll catch more than you expect.
  3. 03 Clear, specific direction produces good results. Vague requests don't. Remind the AI about project goals and use cases as you go. Claude will revert to splashy, useless nonsense if given too much free rein.
  4. 04 Incremental design changes created regressions. It was helpful to clarify when other tabs would be affected, or to force Claude to plan changes before committing them.
  5. 05 Claude is not a designer (yet). Basic design principles were skipped in favor of something that looked like other dashboards on the web. Icons in particular were a rabbit hole. I burned 12 hours of processing time on lousy SVGs with Sonnet 4.6.

The icon rabbit hole

A set of 6 failed custom SVG icons generated by Claude
All six. 12 hours of processing time - Claude generated SVG paths it couldn't see.

I asked Claude what it learned during the session

"The most instructive failure was asking [me] to design custom icons. I iterated through dozens of versions — an airplane, a paw print, a money sack — and the results were consistently poor. AI can generate SVG paths, but it can't see what it's drawing. I eventually maxed out my processing capacity pushing on something that wasn't going to work. The fix was simple: switch to Google's Material Design icon library and reference icons by name."

— Claude Sonnet 4.6

Status

In progress: check back soon.

✦

Active project: designs and builds ongoing

0→

Built entirely from scratch using AI-assisted design

↑

Learnings accumulating with each iteration

The tool is live and being built iteratively. More process learnings and final screens will be added as the project continues. Try the tool or get in touch to discuss AI-assisted design.

Open Budget Control