Product design & AI leadership
Morpheus & the lab
How I built a tool that changed design’s role.
- 01 Product complexityFrom the outside, a checkout is a few fields and a pay button.
- 02 The Figma beastIn autumn 2024, I built the most complex Figma file I'd ever seen.
- 03 The labThree working apps became one lab, on one database.
- 04 Morpheus blueThree apps meant three copies of every component. So the lab got a design system of its own.
- 05 Guard railsWith agents writing much of the code, keeping it on the system became a design job.
- 06 The pitchNow a rep pastes a merchant's web address, and walks into the meeting with their checkout.
- 07 ConclusionDesign isn't a step before the build any more. It's part of it.
Case study
What happens when the design team owns a codebase?
Purchase complete
Product complexity
01
From the outside, a checkout is a few fields and a pay button.
Underneath, it's dozens of modules, each with its own states. Languages and currencies, shopper types that change the layout, delivery and payment options that switch off or reorder by country. A cart and upsells that look like the merchant's own shop. Then the whole thing restyled to their brand.
The Figma beast
02
In autumn 2024, I built the most complex Figma file I'd ever seen.
My job was to make all of that tangible: something product and tech teams could use as a north star, and the commercial team could use for powerful demos.
Hundreds of variables and if/else statements. Adding one product to the cart, then recalculating the total and shipping, ran through around 20 variable functions. It was far beyond what Figma was made for.
It was fragile too. It would stop working for no reason, usually in the middle of a pitch, then start again all by itself.
Getting it ready for a pitch took up to an hour and a half, and that was when everything went perfectly. The result was still a prototype, and it never felt real.
The Figma prototype.
The lab
03
Three working apps became one lab, on one database.
I'd tried rebuilding it in code with every new AI tool that came along. With Cursor and Claude, it finally held. By summer 2025 we had a checkout, in-person payments and a merchant portal, each its own app, and restyling one meant uploading a config file to it, every session.
I moved them into one codebase with a shared database, and called it Kustom Labs. A merchant's brand is saved once, and every app uses it. What took an hour and a half in Figma now loads in a click.
The checkout.
Morpheus blue
04
Three apps meant three copies of every component. So the lab got a design system of its own.
The three apps carried about 3,500 lines of copied components. Morpheus red, our production design system, had almost nothing in it yet. Tech was busy with the migration, and when everything works, nobody rushes to adopt a design system.
So I gave the playground a playground design system: Morpheus blue. The blue pill lets you stay in the dream. Red is for reality.
Components get proven in blue, across checkout, the merchant portal and in-person payments, before customers ever see them. Both are built on shadcn and Tailwind, the tools AI reaches for first, so components move into red as they are. All the colour tokens and most of the components already have. Blue is now also a package other Kustom teams install.
The Morpheus hub
The storybook for the design system we own.
Every component, token and rule in Morpheus blue, shown working, with when to use it, how it stays accessible and the code to build it.
Designers, engineers and AI agents all read from the same pages, so everything in the lab is built from one source.
Guard rails
05
With agents writing much of the code, keeping it on the system became a design job.
It started with written rules: design system first, every string translated, one type scale. When agents drifted, reusable recipes for common jobs followed, then a copy of the design system written for them to read.
Whatever still slips through now fails the build. Code that skips the design system can’t merge.
The pitch
06
Now a rep pastes a merchant's web address, and walks into the meeting with their checkout.
It takes about six minutes, start to finish.
From a web address
01
Look up
The company, its logo and the checkout it uses today.
02
Build
Their products, in a working Kustom checkout in their brand.
03
Price
What switching saves them, and what new rules cost.
04
Send
A report, a showcase deck and the contract.
A business case, and the deck it becomes.
Conclusion
07
Design isn't a step before the build any more. It's part of it.
The lab is where the sales team pitches, where product and tech decide what to build, and where new parts of the product prove themselves before customers ever meet them.