開発者はClaude Codeを使用し、ワイヤーフレームからプロダクション品質の支出チャートを一晩で反復的に作成しました。

Claude Codeによる反復的開発

個人財務アプリを一人で開発している開発者が、Claude Codeを唯一の開発ツールとして使用して支出チャートを再設計しました。このプロセスでは、1回のセッションで4回の修正を行い、約3時間でチャートをワイヤーフレーム品質からほぼ製品品質にまで高めました。

具体的なプロンプト駆動の修正

開発者は、良い結果を得るためには具体的で詳細なプロンプトが不可欠であることを発見しました。「チャートを良くして」のような曖昧なプロンプトは効果がなく、正確な指示によって即座に修正が行われました。

ラウンドごとの改善

• 第1ラウンド: チャートが画面幅の40%しか埋めていなかったのは、x軸が1日から31日までマッピングされていたためで、実際は3月13日までしかデータがありませんでした。開発者は問題をスクリーンショットで撮り、Claude Codeに説明すると、既存のデータポイントのみを使用するようにドメインを修正しました。
• 第2ラウンド: 1つのプロンプトで3つの問題を修正：線が画面左端からはみ出していた、グラデーション塗りつぶしが表示されていなかった（アクセントゴールドではなくテーマから暗い色を取得していた）、チャートの周りにデバッグ用のような点線のボーダーがあった。
• 第3ラウンド: Robinhoodのチャートと比較した後、開発者はy軸が0から始まっていることに気づき、支出の少ない日は下部に寄り、最近の急増は上部で圧縮されていました。Claude Codeはy軸を垂直範囲全体を使用するように再マッピングし、線が端に触れないように上下にパディングを追加しました。
• 第4ラウンド: センチメントカラーを実装（各チャートセグメントに喜びの緑、必要性のゴールド、後悔の赤）、グラデーション塗りつぶしがようやく表示されるようになり、線の平滑化が次のステップとして計画されました。

効果的なワークフロー

開発者の成功したアプローチは、各ラウンド後に実際のデバイス出力をスクリーンショットで撮り、参照（Robinhood）と比較して何が問題かを正確に説明することでした。これにより、3時間のセッション中にStack Overflowやドキュメント検索が必要なくなりました。