HeadlinesBriefing favicon HeadlinesBriefing.com

Building Consistent Designs with Claude Code

Towards Data Science •
×

Creating consistent designs throughout your application seems like a very trivial task that you can achieve with coding agents. However, if most of your code is written by coding agents, I believe this can quickly turn into an application with a lot of different design elements if you don't pay close attention to exactly how the coding agent is implementing stuff, and you're consistently refactoring and centralizing code to adhere to the DRY (don't repeat yourself) principle. For quite a while, when developing my application, I was struggling with keeping the design consistent. It just felt like my coding agent, whether I used Claude Code or Codex, was constantly driving towards not following the previous design that I had used or just implementing new standards that I didn't want to follow.

Examples of this are: Different font sizes throughout the app. Buttons having different designs in different places. In general, UI elements such as drop-downs, modules that pop up on hover, etc., were inconsistent and never followed the same pattern with regard to color, size, or styling. This is, of course, super critical because inconsistent designs make your app look a lot less professional and clean. When things in the app look different, like the UI looks different throughout the app, it gives a very unprofessional and unpolished first impression of your application, which is why you want to avoid it.

The problem mostly comes from how you've structured the UI throughout your application. If you use coding agents to implement everything without manually telling the coding agents how to centralize the code and structure the UI elements throughout the code, they'll automatically start using different standards throughout the app. The reason for this is that once a coding agent is asked to implement something new, for example, implement a new feature, they'll see that there's no set standard elsewhere in the app, and thus just create their own design patterns. In general, coding agents are pattern recognizers. They follow the patterns already provided in the codebase and just follow them. And if the pattern in the codebase from before is that there is no UI structure and overall design standard to follow, then the coding agents will continue that pattern and implement their own design system for each new feature they implement or build.

Given what I'm talking about here, you can probably start understanding what the solution to this problem is, which is of course centralizing all your UI elements into one location. However, this is not a trivial thing, and not only is it not trivial to fix it; I also think that this is something you need to keep working on because the coding agents still have weaknesses and may ignore existing standards or introduce new ones.