O desenvolvedor usa Claude Code para iterar o gráfico de gastos de um wireframe para qualidade de produção em uma noite.

Desenvolvimento iterativo com Claude Code

Um desenvolvedor que está construindo um aplicativo de finanças pessoais sozinho usou o Claude Code como sua única ferramenta de desenvolvimento para redesenhar um gráfico de gastos. O processo envolveu quatro rodadas de correções em uma única sessão, levando o gráfico de uma qualidade de wireframe para uma qualidade quase de produção em cerca de 3 horas.

Correções orientadas por prompts específicos

O desenvolvedor descobriu que prompts específicos e detalhados eram essenciais para obter bons resultados. Prompts vagos como "melhore o gráfico" eram ineficazes, enquanto instruções precisas produziam correções imediatas.

Melhorias rodada por rodada

• Rodada 1: O gráfico ocupava apenas 40% da largura da tela porque o eixo x mapeava o dia 1 ao dia 31 quando era apenas 13 de março. O desenvolvedor tirou uma captura de tela do problema, descreveu para o Claude Code, e ele corrigiu o domínio para usar apenas os pontos de dados existentes.
• Rodada 2: Três problemas corrigidos em um único prompt: a linha estava vazando pela borda esquerda da tela, o preenchimento gradiente estava invisível (puxando uma cor escura do tema em vez do dourado de destaque), e havia uma borda tracejada que parecia de depuração ao redor do gráfico.
• Rodada 3: Após comparar com o gráfico do Robinhood, o desenvolvedor percebeu que o eixo y começava em 0, fazendo com que os dias de gastos pequenos ficassem colados na parte inferior enquanto os picos recentes ficavam comprimidos no topo. O Claude Code remapeou o eixo y para usar toda a faixa vertical e adicionou preenchimento superior/inferior para que a linha nunca tocasse as bordas.
• Rodada 4: Cores de sentimento foram implementadas (verde para alegria, dourado para necessidade, vermelho para arrependimento em cada segmento do gráfico), o preenchimento gradiente finalmente apareceu, e o suavização da linha foi planejada como o próximo passo.

Fluxo de trabalho eficaz

A abordagem bem-sucedida do desenvolvedor envolvia tirar uma captura de tela da saída real do dispositivo após cada rodada e descrever exatamente o que estava errado em comparação com a referência (Robinhood). Isso eliminou a necessidade de pesquisas no Stack Overflow ou na documentação durante a sessão de 3 horas.