HeadlinesBriefing favicon HeadlinesBriefing.com

Guide designs cohérents avec Claude Code

Towards Data Science •
×

Créer des designs cohérents dans toute votre application semble être une tâche très triviale que vous pouvez réaliser avec des agents de codage. Cependant, si la majeure partie de votre code est écrite par des agents de codage, je pense que cela peut rapidement se transformer en une application avec beaucoup d'éléments de design différents si vous ne faites pas très attention à la façon exacte dont l'agent de codage implémente les choses, et que vous refactorisez et centralisez constamment le code pour adhérer au principe DRY (ne vous répétez pas). Pendant un bon moment, en développant mon application, j'ai eu du mal à garder le design cohérent. J'avais juste l'impression que mon agent de codage, que j'utilise Claude Code ou Codex, était constamment poussé à ne pas suivre le design précédent que j'avais utilisé ou simplement à implémenter de nouveaux standards que je ne voulais pas suivre.

Exemples de ceci : Différentes tailles de police dans toute l'app. Boutons ayant des designs différents à différents endroits. En général, les éléments UI tels que les menus déroulants, les modules qui apparaissent au survol, etc., étaient incohérents et ne suivaient jamais le même motif en ce qui concerne la couleur, la taille ou le style. C'est, bien sûr, super critique car des designs incohérents font paraître votre app beaucoup moins professionnelle et soignée. Quand les choses dans l'app ont l'air différentes, comme l'UI qui a l'air différente dans toute l'app, cela donne une première impression très peu professionnelle et non polie de votre application, c'est pourquoi vous voulez l'éviter.

Le problème vient principalement de la façon dont vous avez structuré l'UI dans toute votre application. Si vous utilisez des agents de codage pour tout implémenter sans dire manuellement aux agents comment centraliser le code et structurer les éléments UI dans tout le code, ils commenceront automatiquement à utiliser différents standards dans toute l'app. La raison en est qu'une fois qu'un agent de codage est invité à implémenter quelque chose de nouveau, par exemple, implémenter une nouvelle fonctionnalité, ils verront qu'il n'y a pas de standard établi ailleurs dans l'app, et ainsi créeront simplement leurs propres motifs de design. En général, les agents de codage sont des reconnaisseurs de motifs. Ils suivent les motifs déjà fournis dans la base de code et les suivent simplement. Et si le motif dans la base de code d'avant est qu'il n'y a pas de structure UI et de standard de design global à suivre, alors les agents de codage continueront ce motif et implémenteront leur propre système de design pour chaque nouvelle fonctionnalité qu'ils implémentent ou construisent.

Compte tenu de ce dont je parle ici, vous pouvez probablement commencer à comprendre quelle est la solution à ce problème, qui est bien sûr de centraliser tous vos éléments UI en un seul endroit. Cependant, ce n'est pas une chose triviale, et non seulement ce n'est pas trivial à corriger ; je pense aussi que c'est quelque chose sur lequel vous devez continuer à travailler car les agents de codage ont encore des faiblesses et peuvent ignorer les standards existants ou en introduire de nouveaux.