Le développeur utilise Claude Code pour transformer le wireframe du graphique de dépenses en une version de qualité production en une seule nuit.

Développement itératif avec Claude Code

Un développeur créant une application de finances personnelles en solo a utilisé Claude Code comme seul outil de développement pour repenser un graphique de dépenses. Le processus a impliqué quatre séries de corrections en une seule session, faisant passer le graphique d'une qualité de maquette à une qualité quasi-production en environ 3 heures.

Corrections guidées par des prompts spécifiques

Le développeur a constaté que des prompts spécifiques et détaillés étaient essentiels pour obtenir de bons résultats. Des prompts vagues comme "améliore le graphique" étaient inefficaces, tandis que des instructions précises produisaient des corrections immédiates.

Améliorations tour par tour

• Tour 1 : Le graphique ne remplissait que 40 % de la largeur de l'écran car l'axe des x mappait le jour 1 au jour 31 alors que nous n'étions que le 13 mars. Le développeur a capturé l'écran du problème, l'a décrit à Claude Code, et celui-ci a corrigé le domaine pour n'utiliser que les points de données existants.
• Tour 2 : Trois problèmes corrigés en un seul prompt : la ligne débordait sur le bord gauche de l'écran, le remplissage dégradé était invisible (utilisant une couleur sombre du thème au lieu de l'or d'accentuation), et il y avait une bordure en pointillés ressemblant à du débogage autour du graphique.
• Tour 3 : Après comparaison avec le graphique de Robinhood, le développeur a remarqué que l'axe des y commençait à 0, ce qui faisait que les jours de faibles dépenses restaient collés au bas tandis que les pics récents étaient compressés en haut. Claude Code a remappé l'axe des y pour utiliser toute la plage verticale et a ajouté un espacement en haut et en bas pour que la ligne ne touche jamais les bords.
• Tour 4 : Les couleurs de sentiment ont été implémentées (vert pour la joie, or pour la nécessité, rouge pour le regret sur chaque segment du graphique), le remplissage dégradé est enfin apparu, et le lissage des lignes était prévu comme prochaine étape.

Flux de travail efficace

L'approche réussie du développeur impliquait de capturer l'écran de la sortie réelle de l'appareil après chaque tour et de décrire exactement ce qui n'allait pas par rapport à la référence (Robinhood). Cela a éliminé le besoin de recherches sur Stack Overflow ou dans la documentation pendant la session de 3 heures.