HeadlinesBriefing favicon HeadlinesBriefing.com

Guia designs consistentes com Claude Code

Towards Data Science •
×

Criar designs consistentes em todo o seu aplicativo parece uma tarefa muito trivial que você pode alcançar com agentes de codificação. No entanto, se a maior parte do seu código é escrita por agentes de codificação, acredito que isso pode rapidamente se transformar em um aplicativo com muitos elementos de design diferentes se você não prestar muita atenção em exatamente como o agente de codificação está implementando as coisas, e você estiver consistentemente refatorando e centralizando o código para aderir ao princípio DRY (não se repita). Por um bom tempo, ao desenvolver meu aplicativo, lutei para manter o design consistente. Parecia apenas que meu agente de codificação, seja eu usando Claude Code ou Codex, estava constantemente tendendo a não seguir o design anterior que eu tinha usado ou apenas implementando novos padrões que eu não queria seguir.

Exemplos disso são: Diferentes tamanhos de fonte em todo o app. Botões com designs diferentes em lugares diferentes. Em geral, elementos de UI como menus suspensos, módulos que aparecem ao passar o mouse, etc., eram inconsistentes e nunca seguiam o mesmo padrão no que diz respeito a cor, tamanho ou estilo. Isso é, claro, super crítico porque designs inconsistentes fazem seu app parecer muito menos profissional e polido. Quando as coisas no app parecem diferentes, como a UI parece diferente em todo o app, dá uma primeira impressão muito não profissional e não polida do seu aplicativo, e é por isso que você quer evitá-lo.

O problema vem principalmente de como você estruturou a UI em todo o seu aplicativo. Se você usa agentes de codificação para implementar tudo sem dizer manualmente aos agentes como centralizar o código e estruturar os elementos de UI em todo o código, eles começarão automaticamente a usar diferentes padrões em todo o app. A razão para isso é que, uma vez que um agente de codificação é solicitado a implementar algo novo, por exemplo, implementar um novo recurso, eles verão que não há um padrão estabelecido em outro lugar no app, e assim simplesmente criarão seus próprios padrões de design. Em geral, agentes de codificação são reconhecedores de padrões. Eles seguem os padrões já fornecidos na base de código e apenas os seguem. E se o padrão na base de código de antes é que não há estrutura de UI e padrão de design geral a seguir, então os agentes de codificação continuarão esse padrão e implementarão seu próprio sistema de design para cada novo recurso que implementarem ou construírem.

Dado o que estou falando aqui, você provavelmente pode começar a entender qual é a solução para este problema, que é, claro, centralizar todos os seus elementos de UI em um local. No entanto, isso não é uma coisa trivial, e não apenas não é trivial corrigi-lo; eu também acho que isso é algo em que você precisa continuar trabalhando porque os agentes de codificação ainda têm fraquezas e podem ignorar padrões existentes ou introduzir novos.