A fintech design team’s journey from manual Material Design customisation to AI design system automation. AI design tokens, bulk component editing, daily sync routines, and the 10% of work that still requires a human designer.
| Before | After |
|---|---|
| ~50% of designer time | ~10% of designer time |
| Manual token management | AI-automated token sync |
| One-by-one component edits | Bulk edits via single prompt |
| Spreadsheets for documentation | Self-updating documentation |
Ask our design lead, Olha Sliusar, how much of her week the design system takes and her answer is about half, on any project that maintains it properly. That isn’t designing. It’s renaming tokens, editing component variants, keeping the documentation current, and checking that the three people adding variables follow the same naming rules. On the project behind this article, she now hands most of that to Claude.
This article is a practitioner’s account of how our design team on an energy-sector client project brought that 50% down to 10% using AI for design systems: AI-native workflows that handle token management, bulk component editing, and automated documentation. Not as a concept or a prototype — as a production design system automation workflow that’s been running for months.
Our design system was never finished. We had to name every variable or variant by our rules, check it against the accessibility standard we agreed with the client, and write it into the documentation. Done by hand, that list never got shorter.
On our energy-sector client project, we started with the Material Design 3 community library as our foundation. The standard approach: download the library, customise variables to match the client’s brand, build out component variants for the product’s needs.
The brand began as a handful of new colours and variables. In Material 3, that reaches into hundreds of component variants, each with its own states to fix and test one at a time.
“Design system maintenance used to take about 50% of your time on projects that properly maintain it. I can’t imagine going back to doing it manually.”
Olha Sliusar, UI/UX Designer at Kindgeek
That 50% figure isn’t hyperbole. Here’s what it looked like on our project. Three of us kept adding variables to the same file: our design lead, a colleague and a developer. Every new token needed a name that followed our rules and a line in the documentation table, and somebody had to spot the ones that slipped through. That checking fell to our design lead, on top of the component work. AI design system automation took it off her plate.
The shift didn’t happen all at once. It started with a specific, painful task: customising the Material Design 3 library’s button component.
Material Design 3 ships with 666 button variants, because types, states, sizes and icon positions multiply. Restyling them for the client’s brand by hand means opening every one.
So we restyled a single variant to match the brand and told Claude: apply the same treatment to the other 665.
“You make a change to one button variant, and then say: do the same for the other 665. You can edit massive volumes and make massive changes to the design system with a single prompt.”
Olha Sliusar, UI/UX Designer at Kindgeek
The entire button library (all 666 variants) was re-branded in a single prompt cycle. What would have been days of careful, repetitive component editing became a matter of minutes. This is what AI for Figma design systems looks like in practice: not a plugin that suggests colours, but a workflow that edits the system itself. And the pattern extended to every component category in the library: inputs, cards, dialogues, navigation elements, chips, badges.
That’s the whole recipe for AI design system automation, and you can repeat it. Design one variant by hand, the way the brand should look. Then ask Claude to apply the same changes to the rest, in stages: a full design system is too big to load at once, so we wrote a temporary skill for each task and ran it across every component. Finally, check how it landed and fix what’s off yourself. That’s the 10% that stays manual. Claude does the other 90%.
Components took one example. Tokens needed rules.
One of the subtler problems in design system work is token naming. The names you give your design tokens determine how well the system scales and how easily developers can implement it. Bad naming means constant confusion. Good naming means designers and developers speak the same language.
Our approach to AI design tokens was unconventional. Instead of writing naming rules from scratch and then trying to enforce them, we did it in reverse:
Design Token Naming Workflow
The rules Claude pulled out were semantic: a token’s name says what the token does, not what it looks like. Material 3 follows the same principle, with names like primary and on-primary instead of a colour name or a hex value, so a developer can find the right token by its purpose. We turned the rules into a skill with two jobs. It audits existing tokens against the convention, and when someone describes what a new token should do, it proposes the name.
The skill needs upkeep too: new cases keep turning up, so we update it as the system grows. That’s where AI design tokens earn their place in production. They hold a convention we had agreed on out loud and never written down.
On a normal day, someone adds a variable in Figma and gets back to work. The table that lists every token and what it’s for stays exactly as it was. Then 6 PM comes, and the Design System Variable Sync runs on its own. It’s the part of our design system automation nobody has to remember to do.
“Claude maintains the documentation table. We have all our tokens with descriptions, and a routine runs in Claude Code. Once a day at 6 PM, it checks the variables against the table, and if there’s anything new, it adds it with a date and highlights it in orange.”
Olha Sliusar, UI/UX Designer at Kindgeek
This replaced a manual process that nobody ever did consistently. In theory, whoever added a new design token was supposed to update the documentation. In practice, the documentation was always weeks behind the actual system. New team members had no way to discover recently added tokens, developers didn’t know which tokens were stable and which were experimental, and nobody could answer the question “when was this token added and why?”
The automated sync solves all three problems. Documentation is always current — within 24 hours of any change. New tokens are visually flagged. Every token has a timestamp. And the designer’s involvement is zero: they just add variables to Figma as part of their normal work, and the system documents itself.
The daily sync routine had an unintended consequence: it made our dedicated design documentation tool unnecessary.
Previously, the team had used ZeroHeight for design system documentation — a common choice for design teams that want a polished, always-current reference for developers. But ZeroHeight requires manual content creation and maintenance. Someone has to write the usage guidelines, update the token tables, add new component documentation, and keep everything consistent with the actual Figma library.
With the AI-generated documentation table, which is automatically updated, dated, and described, we found that the documentation table itself was the documentation. It had everything a developer needed: token names, semantic descriptions, dates added, and visual highlights for recent changes. All generated and maintained without a single minute of designer time.
None of this makes documentation tools like ZeroHeight useless. But any tool that waits for a person to write things down will fall behind the system, because writing it down is the step people skip. In our AI design system, the routine that notices a new token also documents it. For tokens, that does the job we once tried to do in ZeroHeight.
| Metric | Value |
|---|---|
| Design system work · automated | 90% |
| Button variants · rebranded at once | 666 |
| Automated · token sync | 1/day |
| Manual documentation · time | 0 hrs |
AI automation in design removes the mechanical work that was preventing the designer from doing the creative work they were hired for. What stays manual is mostly checking: Claude drafts the tokens and components from existing screens, they go onto a clean Material 3 file, and our design lead looks at how everything mapped and fixes what’s off by hand.
The rest of it is looking after the automation itself. The token naming skill needs an update whenever a new case turns up. The accessibility audit agent still checks very little, because nobody has had time to sit down and decide what it should cover. She wrote our usability testing instructions over several evenings. New tools and commands appear every week, and someone has to try them.
That’s what AI design system automation costs, and she says it plainly: the people who go first spend the most time. With a lighter load, she would experiment more. The 90% now runs itself. Building the next piece still takes someone’s evenings.
This guide compares nine fintech MVP development companies in the UK. Each one has a…
For four years, the mobile E2E tests at Jaja Finance looked the way most fintech…
AI payment reconciliation matches payment records across PSPs, acquirers, banks, billing platforms and the general…
Adyen processed €803.8 billion in H1 2026, with Platforms as its fastest-growing segment and volume…
The top fintech MVP development companies build products that move real money under real regulatory…
A sub-merchant portal is a self-service interface that lets sellers, service providers, and other businesses…