HeadlinesBriefing favicon HeadlinesBriefing.com

Guía para diseños consistentes con Claude Code

Towards Data Science •
×

Crear diseños consistentes en toda tu aplicación parece una tarea muy trivial que puedes lograr con agentes de codificación. Sin embargo, si la mayor parte de tu código está escrito por agentes de codificación, creo que esto puede convertirse rápidamente en una aplicación con muchos elementos de diseño diferentes si no prestas mucha atención a exactamente cómo el agente de codificación está implementando cosas, y estás refactorizando y centralizando consistentemente el código para adherirte al principio DRY (no te repitas). Durante bastante tiempo, al desarrollar mi aplicación, luché por mantener el diseño consistente. Simplemente sentía que mi agente de codificación, ya fuera que usara Claude Code o Codex, estaba constantemente impulsado a no seguir el diseño previo que había usado o simplemente implementando nuevos estándares que no quería seguir.

Ejemplos de esto son: Diferentes tamaños de fuente en toda la app. Botones con diferentes diseños en diferentes lugares. En general, elementos UI como menús desplegables, módulos que aparecen al pasar el ratón, etc., eran inconsistentes y nunca seguían el mismo patrón con respecto a color, tamaño o estilo. Esto es, por supuesto, súper crítico porque los diseños inconsistentes hacen que tu app se vea mucho menos profesional y pulida. Cuando las cosas en la app se ven diferentes, como la UI se ve diferente en toda la app, da una primera impresión muy poco profesional y sin pulir de tu aplicación, por eso quieres evitarlo.

El problema proviene principalmente de cómo has estructurado la UI en toda tu aplicación. Si usas agentes de codificación para implementar todo sin decirles manualmente cómo centralizar el código y estructurar los elementos UI en todo el código, automáticamente comenzarán a usar diferentes estándares en toda la app. La razón es que una vez que se le pide a un agente de codificación implementar algo nuevo, por ejemplo, implementar una nueva característica, verán que no hay un estándar establecido en otra parte de la app, y así simplemente crearán sus propios patrones de diseño. En general, los agentes de codificación son reconocedores de patrones. Siguen los patrones ya proporcionados en la base de código y simplemente los siguen. Y si el patrón en la base de código desde antes es que no hay estructura UI y estándar de diseño general a seguir, entonces los agentes de codificación continuarán ese patrón e implementarán su propio sistema de diseño para cada nueva característica que implementen o construyan.

Dado de lo que hablo aquí, probablemente puedas empezar a entender cuál es la solución a este problema, que es por supuesto centralizar todos tus elementos UI en una ubicación. Sin embargo, esto no es algo trivial, y no solo no es trivial arreglarlo; también creo que esto es algo en lo que necesitas seguir trabajando porque los agentes de codificación aún tienen debilidades y pueden ignorar estándares existentes o introducir nuevos.