Creating constant designs all through your utility looks like a really trivial job that you would be able to obtain with coding brokers. Nonetheless, if most of your code is written by coding brokers, I imagine this will rapidly flip into an utility with loads of totally different design parts should you do not pay shut consideration to precisely how the coding agent is implementing stuff, and also you’re constantly refactoring and centralizing code to stick to the DRY (do not repeat your self) precept.
For fairly some time, when creating my utility, I used to be combating maintaining the design constant. It simply felt like my coding agent, whether or not I used Claude Code or Codex, was always driving in direction of not following the earlier design that I had used or simply implementing new requirements that I did not need to comply with. Examples of this are:
-
Totally different font sizes all through the app.
-
Buttons having totally different designs somewhere else.
-
On the whole, UI parts similar to drop-downs, modules that pop up on hover, and many others., had been inconsistent and by no means adopted the identical sample with regard to paint, dimension, or styling.
That is, after all, tremendous crucial as a result of inconsistent designs make your app look loads much less skilled and clear. When issues within the app look totally different, just like the UI appears to be like totally different all through the app, it offers a really unprofessional and unpolished first impression of your utility, which is why you need to keep away from it. I do know loads of engineers do not care that a lot about design, or they do not take pleasure in spending loads of time on design. So that you may suppose this isn’t that essential a subject, however I’d argue fairly the other. In case you comply with the ideas supplied all through this text, you may need to spend much less time on design as a result of your coding brokers will mechanically grow to be extra constant, so you’ll have to spend much less time following up on all of your coding brokers and the designs they create. Mainly, the strategies applied all through this text will allow you to spend much less time on UI as a result of the coding agent shall be extra more likely to get it proper on the primary try.
This infographic highlights the principle contents of this text. I will talk about easy methods to make the coding agent construct constant designs. Picture by ChatGPT.
Why do coding brokers create inconsistent designs?
First, let’s cowl the why of this text. Why do coding brokers are inclined to create totally different designs and never comply with the requirements all through your app? I feel the issue largely comes from how you’ve got structured the UI all through your utility. In case you use coding brokers to implement all the pieces with out manually telling the coding brokers easy methods to centralize the code and construction the code and the UI parts all through the code, they will mechanically begin utilizing totally different requirements all through the app. The rationale for that is that after a coding agent is requested to implement one thing new, for instance, implement a brand new characteristic, they will see that there is no set commonplace elsewhere within the app, and thus simply create their very own design patterns. For instance, they could use their very own font dimension that they suppose works effectively on the precise web page they’re implementing, buttons that match the opposite designs on the web page, and so forth.
On the whole, coding brokers are sample recognizers. They comply with the patterns already supplied within the codebase and simply comply with them. And if the sample within the codebase from earlier than is that there isn’t any UI construction and general design commonplace to comply with, then the coding brokers will proceed that sample and implement their very own design system for every new characteristic they implement or construct.
Given what I am speaking about right here, you’ll be able to in all probability begin understanding what the answer to this drawback is, which is after all centralizing all of your UI parts into one location. Nonetheless, this isn’t a trivial factor, and never solely is it not trivial to repair it; I additionally suppose that that is one thing it’s good to preserve engaged on as a result of the coding brokers nonetheless have weaknesses and will ignore current requirements or introduce new ones. For instance, should you’re simply implementing code in a brand new web page or one thing, you all the time need to attempt to preserve them in line in order that your design all through your utility stays constant.
Learn how to preserve the design constant
Now let’s begin speaking about easy methods to preserve the design in your utility constant. First, I will discuss easy methods to repair your codebase if the design requirements will not be already constant and unified. After which I will begin speaking about easy methods to preserve the design requirements unified.
Learn to guarantee your coding brokers builds constant designs. Picture by ChatGPT.
Fixing inconsistent design
Okay, let’s begin discussing what to do when you have a codebase you’ve got labored on fairly a bit already, and the design in your app shouldn’t be constant. The very first thing I’d do is to begin refactoring. You might want to refactor so that each one your UI parts are saved in a single folder. And at any time when the AI or coding agent needs to implement one thing new or use a brand new UI aspect, it has to choose an current aspect from the UI folder as a substitute of simply writing a brand new UI aspect itself. Mainly, it’s a must to block coding brokers from creating their very own UI parts, and so they all the time want to choose from one of many already authorized parts that you’ve got within the folder. After all, generally you need to implement new UI parts, and in that case, you’ll be able to implement them into the shared unified folder and have the agent use that; nonetheless, it’s a must to make it tremendous clear to your coding agent that they don’t seem to be allowed to implement their very own UI parts within the code anyplace aside from the unified folder for UI parts.
So begin with a immediate similar to this:
Now, what is going on to occur is that the coding agent you run, whether or not it’s Claude Code or Codex, goes to begin trying by your codebase, and you may see loads of points it has to repair up. Thus, I like to recommend you simply begin with particular parts similar to buttons or fonts, that are additionally famous within the immediate above. I then suggest that you simply inform the coding agent to make a report in HTML with before-and-after photos displaying how the pages look earlier than making the modifications and the way they appear after making the modifications, with screenshots within the HTML report. This makes it tremendous simple so that you can simply undergo the report, scroll by it, see if the UI appears to be like acceptable, and provides suggestions to the coding agent if there’s one thing to repair. After which, as soon as the code and UI are authorized, the coding agent can autonomously merge it into your improvement setting, and you may proceed on to the following aspect.
After fixing every aspect, I additionally suggest that you simply spin up a totally separate coding agent. And simply do a assessment to see if there are any parts nonetheless lacking. For instance, should you’re fixing up all of the buttons, after fixing all of it and merging it in, it is best to spin up a separate agent to only undergo and verify if there are any buttons now which are lacking and never within the unified UI folder and repair these. That is as a result of generally, the coding agent can miss these parts on the primary run, and it’s good to simply do a secondary clear assessment to be sure to included all the pieces.
You then simply proceed doing this, refactoring your complete codebase, which can take a while, although. With coding brokers, you are able to do this comparatively successfully. And relying in your codebase, I feel you are able to do this nice inside a day or two. In case you work successfully on this and simply let the coding brokers do their job.
Preserving the design unified
Okay, after you’ve fastened all of the design and centralized all the pieces into one unified folder, it is now time to maintain the design unified. So it’s good to make it extraordinarily clear within the markdown information that the brokers use all through the app, for instance, brokers.md, CLAUDE.md, and so forth, that it is by no means allowed to invent new design implementations; it all the time has to choose from the centralized UI folder. And to be truthful, you generally must confirm this your self as a result of the coding brokers will are inclined to attempt to implement one thing new and never comply with the prevailing commonplace, despite the fact that you’ve an especially clear file saying that the brokers all the time need to comply with that commonplace, and you’ve got the centralized UI folder. I do see tendencies for the coding brokers to nonetheless need to implement their very own designs generally, which is, after all, very annoying.
One factor you are able to do, nonetheless, is that this. I assume you’ve a coding assessment agent you all the time run. If you do not have this already, I strongly suggest you implement it. And I have already got totally different articles discussing how one can make AI assessment your code successfully to find any bugs earlier than they go right into a improvement or manufacturing setting.
What you are able to do is replace the immediate that you’ve got for the coding assessment agent and inform it to additionally verify for any UI parts that don’t come from the centralized UI folder and to flag that as a comparatively extreme difficulty. Evaluation brokers will are inclined to name this a P2 difficulty, i.e., not a crucial difficulty. However I’d say that it is best to inform the assessment agent to spotlight that it is a larger difficulty as a result of should you proceed to let this occur, it’ll grow to be an enormous difficulty in your utility. So inform the assessment agent to flag it instantly so that you could repair it on the spot earlier than you merge code into your improvement or manufacturing environments. This may guarantee that you would be able to preserve the design unified, preserve your app trying clear {and professional}, and keep away from coding brokers not following the design patterns they’re alleged to comply with.
Conclusion
On this article, I’ve mentioned easy methods to preserve your design in keeping with Claude Code or whichever coding agent you’re utilizing. This is a matter I’ve felt myself, the place the coding agent constantly tries to invent their very own designs at any time when they implement new options. That is, after all, very annoying as a result of it makes you spend loads of time making certain the UI appears to be like because it ought to, and generally it might probably even be arduous to identify after they make errors; for instance, if they’ve one font dimension too low or one font dimension too excessive, this creates a much less skilled impression of your utility, which is why you need to keep away from it. I mentioned how one can refactor your code in line with the Do not Repeat Your self (DRY) precept to make it so you retain all UI parts in a centralized folder so you’ll be able to preserve the design as constant as potential. Moreover, I mentioned how one can not solely repair this by refactoring it but additionally preserve the design constant by including strict guidelines and opinions everytime you push new UI code. I additionally suggest that you simply constantly do refactoring and a few checks to make sure that all of the centralized UI parts are adopted, and clear them up instantly should you uncover any points. Constant refactoring is a requirement now within the age of agentic coding.
👉 My free eBook and Webinar:
🚀 10x Your Engineering with LLMs (Free 3-Day Electronic mail Course)
📚 Get my free Imaginative and prescient Language Fashions e-book
💻 My webinar on Imaginative and prescient Language Fashions
👉 Discover me on socials:
💌 Substack
