Developer uses Claude Code to iterate spending chart from wireframe to production quality in one night

Iterative development with Claude Code

A developer building a personal finance app solo used Claude Code as their only development tool to redesign a spending chart. The process involved four rounds of fixes in a single session, taking the chart from wireframe quality to near-production quality in about 3 hours.

Specific prompt-driven fixes

The developer found that specific, detailed prompts were essential for getting good results. Vague prompts like "make the chart better" were ineffective, while precise instructions yielded immediate fixes.

Round-by-round improvements

• Round 1: The chart only filled 40% of screen width because the x-axis mapped day 1 to day 31 when it was only March 13. The developer screenshotted the issue, described it to Claude Code, and it fixed the domain to only use existing data points.
• Round 2: Three issues fixed in one prompt: the line was bleeding off the left edge of the screen, the gradient fill was invisible (pulling a dark color from the theme instead of accent gold), and there was a debug-looking dashed border around the chart.
• Round 3: After comparing with Robinhood's chart, the developer noticed the y-axis started at 0, causing small spending days to hug the bottom while recent spikes compressed at the top. Claude Code remapped the y-axis to use the full vertical range and added top/bottom padding so the line never touches the edges.
• Round 4: Sentiment colors were implemented (green for joy, gold for necessity, red for regret on each chart segment), gradient fill finally showed up, and line smoothing was planned as the next step.

Effective workflow

The developer's successful approach involved screenshotting the actual device output after every round and describing exactly what was wrong compared to the reference (Robinhood). This eliminated the need for Stack Overflow or documentation searches during the 3-hour session.