Building a Design System in Claude Design

The problem

The existing UI kit in Figma was ungoverned and inconsistent. Prototypes being generated didn't align with the NRMA brand, requiring constant re-prompting and rework. There was no clear connection between design outputs and what UI/UXers and developers were building.

My approach

Rather than waiting for a formal design system initiative, I built one myself. I pulled brand assets from Canva, the source of truth for marketing, which was two brand versions ahead of the live app. This included colours, fonts, buttons, and logo. I then obtained the CSS file developers use, extracting their design token naming conventions and file structure, and fed everything into Claude Design.
Total build time: two to three hours. I continue to tweak it as I apply it across projects.Tools used Claude Design, Figma Make, Canva

What I made

A working design system aligned to both current brand guidelines and developer token conventions, enabling high-fidelity mobile prototypes that look and feel like real NRMA product screens.

What it unlocked

The ability to show stakeholders and users what a real experience could look like, not a wireframe approximation. Screens are high fidelity, on brand, and grounded in desirability. It also surfaces the gap between the live app and where the brand is heading, making the case for moving toward the new brand direction.Version control remains a challenge as the live app and brand continue to evolve, but the system moves with it.

Next steps

To scale the impact of the design system I developed a full business case with real NPV figures demonstrating the time and cost savings of investing in a dedicated design system team. This included a one-page executive summary and a six-slide pack structured for CMO presentation. The case makes the financial argument for formalising what is currently being done informally into an organisational capability.

The vision is for this team to become the central governance body for design experiences across the organisation, ensuring consistency, quality, and adaptability as AI tools and design capabilities continue to grow and evolve.

Design system

Previous
Previous

Roadside Tracking Experience

Next
Next

GHD – CX Lead for Global Platform Transformation (Salesforce, Pardot & Sitecore)