Maintaining consistency in content and styling

I'm currently working on a mature web app, over 11 years old. It's kept growing over the years and has around 100 pages now. When I started work on it we didn't have any official design system or style guide, it was just a vague "try to keep it consistent where we can" approach. Over the years it has been through a few redesigns, rebrands and overhauls. It has also been touched by a lot of developers, each with their own ideas and sense of what feels right.

Consistency

Today I'm doing some front end work, which is part of a wider rebrand. We now have a design system, style guide and branding guidelines so there's no debate about how things should be going forward. But what about all the existing content?

As a prime example, one of our rules is that headings should be in sentence case, so we'd have "Add a new user" rather than, say, "Add a New User" (title case). How do you go about updating that? It's a painful job to do it manually - finding and checking every H1, H2, H3, etc. Find and Replace can't help as the content is unknown. Hmm...

Eureka!

Today I had a bit of a Eureka moment when I realised that AI could really help me with this.

So, using GitHub Copilot in VS Code (Claude Sonnet 4.5, Agent mode, for those interested), I asked it to find all headings, HTML tags h1-h6, that did not have content in sentence case and list them for me so that I could review them manually. It not only gave me a list but also grouped them into those that were in title case, those in all uppercase and those that probably contained acronyms.

Furthermore, the items listed were all hyperlinked to the correct positions in the files, so that if I wanted to make the updates manually it would be very easy. There's also the option to have it update them all to sentence case for me in one go.

Going deeper

Following this success, I realised that I can do the same for button text, form label text and, actually, almost any rule in our style guide.

Maintaining consistency

Consolidating these prompts into one large checklist and running it from time to time on my local machine is a good way to keep everything in check. However, I wondered if there was a better way, a way to prevent anything which goes against the style guide from entering the codebase. There is.

Copilot code review

We use GitHub and have activated Copilot to review code as part of our pull request process. We can give Copilot this checklist and it will post a comment whenever anything breaks the rules.

This is a nice safe and reliable use of AI as part of the development process as we're just asking it to flag potential problems, not change anything.

Playwright

We also use Playwright for writing automated test scripts. If not using GitHub Copilot on the server an alternative approach might be to write a test that, for example, locates any headings on the page and then checks their text content to see if they're using sentence case. For AI enthusiasts, this test script could easily be written by AI rather than manually coded. So, we could have a suite of tests to check the whole style guide.