Ask an AI coding assistant for a business app screen and you’ll get one. Fast.
Ask again tomorrow and you’ll get a different one.
Different header. Different colours. A different idea of what a red number means. 😅
Speed was never the hard part. Consistency is.
In an AI-DLC, AI assistants and agents write more of the code. That’s great for the first screen. By the twentieth, you can end up with twenty small design systems, each one invented on the spot.
People notice. They learn where the filter is on one screen and can’t find it on the next. A colour means “late” here and “selected” there. A figure appears with no way to tell where it came from.
So in September I wrote the rules down and released them as an open-source project: Accents for UI5.
It’s a design framework for business apps built on OpenUI5, the open-source version of SAP’s user interface framework. The first release, version 0.1.0, has:
- one shell: the top bar, the left panel, the user menu, settings, and a theme applied before the page first appears
- sixteen page patterns, from a scoreboard landing page to an approval inbox
- seventy building blocks for planning, forecasting, review, forms, reporting and workflow
- rules for colour, charts, words and motion
- a page-aware assistant and AI buttons on objects, switched off until someone chooses a model and brings their own key
It’s free to use under the Apache 2.0 licence.
And the rules aren’t written only for people.
The standard ships as a plugin, so the AI reads the rules before it builds.
Accents comes as a Claude Code plugin with a skill and an MCP server. MCP is a common way for an AI assistant to call outside tools. Here, the tools let the assistant find the right pattern, read its options and examples, start a new app from it, and check the result against the rules.
So instead of asking the AI to “make it look professional”, you can ask it to build an approval inbox. It can find the approval inbox pattern, build from it, and then run the checker. 🙌
A few of the rules I care about most:
- 1Every figure has a source. If a number is on the screen, you can find where it came from.
- 2Every colour means something. Colour marks the fact, not the box around it.
- 3Model output is labelled as model output. Always. No AI text dressed up as a system fact.
- 4Every screen is rendered and checked before release. A blank page isn’t a pass.
None of these are new ideas. Good designers have said them for years.
What’s new is that an AI assistant can read them and follow them on every screen, not just the ones a senior designer had time to review.
That’s the part of the AI-DLC I find most interesting. The architect’s job moves upstream. You spend less time fixing screens and more time writing the rules every screen follows.
Accents is a first release, and it will change. If you build business apps on OpenUI5, I’d like to hear what breaks.
Try this week
Pick two screens your AI assistant built and list every difference: header, colours, filters, labels.
Each difference is a rule you haven’t written down yet.