El desarrollador usa Claude Code para iterar el gráfico de gastos desde un boceto hasta calidad de producción en una sola noche.

Desarrollo iterativo con Claude Code

Un desarrollador que construye una aplicación de finanzas personales en solitario utilizó Claude Code como su única herramienta de desarrollo para rediseñar un gráfico de gastos. El proceso involucró cuatro rondas de correcciones en una sola sesión, llevando el gráfico de calidad de wireframe a calidad casi de producción en unas 3 horas.

Correcciones impulsadas por prompts específicos

El desarrollador descubrió que los prompts específicos y detallados eran esenciales para obtener buenos resultados. Los prompts vagos como "mejora el gráfico" eran ineficaces, mientras que las instrucciones precisas producían correcciones inmediatas.

Mejoras ronda por ronda

• Ronda 1: El gráfico solo ocupaba el 40% del ancho de la pantalla porque el eje x mapeaba del día 1 al día 31 cuando solo era 13 de marzo. El desarrollador capturó la pantalla del problema, lo describió a Claude Code, y este corrigió el dominio para usar solo los puntos de datos existentes.
• Ronda 2: Tres problemas corregidos en un solo prompt: la línea se salía por el borde izquierdo de la pantalla, el relleno degradado era invisible (tomando un color oscuro del tema en lugar del dorado de acento), y había un borde discontinuo que parecía de depuración alrededor del gráfico.
• Ronda 3: Después de comparar con el gráfico de Robinhood, el desarrollador notó que el eje y comenzaba en 0, haciendo que los días de gastos pequeños se agruparan en la parte inferior mientras los picos recientes se comprimían en la parte superior. Claude Code reasignó el eje y para usar todo el rango vertical y añadió relleno superior/inferior para que la línea nunca toque los bordes.
• Ronda 4: Se implementaron colores de sentimiento (verde para alegría, dorado para necesidad, rojo para arrepentimiento en cada segmento del gráfico), el relleno degradado finalmente apareció, y se planeó el suavizado de línea como el siguiente paso.

Flujo de trabajo efectivo

El enfoque exitoso del desarrollador involucró capturar la pantalla de la salida real del dispositivo después de cada ronda y describir exactamente lo que estaba mal en comparación con la referencia (Robinhood). Esto eliminó la necesidad de búsquedas en Stack Overflow o documentación durante la sesión de 3 horas.