# Morpheus & the lab > How I built a tool that changed design’s role. Case study by Ian Hazelton. Web version: https://www.ianhazelton.com/work/morpheus-and-the-lab - **Discipline:** Product design & AI leadership - **Scope:** Design system, prototypes, sales tools - **Role:** Head of Design, hands-on - **Team:** Designers, engineers, product and sales, with AI agents - **Timeline:** Feb 2026 – present - **Built with:** React, TypeScript, shadcn, Tailwind, Postgres, Claude Code ## Outcomes - **1** Click to rebrand the checkout. It used to take 1.5 hours. - **1,327** Changes I made to the codebase, more than anyone else - **6** Minutes from a web address to a branded checkout ## The short version 1. **Product complexity:** From the outside, a checkout is a few fields and a pay button. 2. **The Figma beast:** In autumn 2024, I built the most complex Figma file I'd ever seen. 3. **The lab:** Three working apps became one lab, on one database. 4. **Morpheus blue:** Three apps meant three copies of every component. So the lab got a design system of its own. 5. **Guard rails:** With agents writing much of the code, keeping it on the system became a design job. 6. **The pitch:** Now a rep pastes a merchant's web address, and walks into the meeting with their checkout. 7. **Conclusion:** Design 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? The checkout's pay button in six languages, growing into the checkout's pay button, then the checkout scrolling through payment and delivery, a pick-up point chosen on a map, the cart and a product page, and the purchase completing - #ffffff - **checkout**: zoom - finale ## 01 · Product complexity **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. ## 02 · The Figma beast **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: one tap on Add to order sets five variables](https://www.ianhazelton.com/work/morpheus-and-the-lab/figma-prototype-wide.webp) _The Figma prototype._ ## 03 · The lab **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._ ## 04 · Morpheus blue **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. ![The Morpheus hub: Home](https://www.ianhazelton.com/work/morpheus-and-the-lab/hub/home.jpg) ![The Morpheus hub: Components](https://www.ianhazelton.com/work/morpheus-and-the-lab/hub/components.jpg) ![The Morpheus hub: Button](https://www.ianhazelton.com/work/morpheus-and-the-lab/hub/button.jpg) ![The Morpheus hub: Typography](https://www.ianhazelton.com/work/morpheus-and-the-lab/hub/typography.jpg) ![The Morpheus hub: Colour](https://www.ianhazelton.com/work/morpheus-and-the-lab/hub/colours.jpg) ![The Morpheus hub: Merchant styling](https://www.ianhazelton.com/work/morpheus-and-the-lab/hub/theming.jpg) ![The Morpheus hub: Motion](https://www.ianhazelton.com/work/morpheus-and-the-lab/hub/motion.jpg) ![The Morpheus hub: Accessibility](https://www.ianhazelton.com/work/morpheus-and-the-lab/hub/accessibility.jpg) ## 05 · Guard rails **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. ## 06 · The pitch **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 - **Look up**: The company, its logo and the checkout it uses today. - **Build**: Their products, in a working Kustom checkout in their brand. - **Price**: What switching saves them, and what new rules cost. - **Send**: A report, a showcase deck and the contract. _A business case, and the deck it becomes._ ## 07 · Conclusion **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. --- Part of the portfolio of Ian Hazelton: https://www.ianhazelton.com/llms.txt