Getting our design system ready for AI
CDK Global builds software for auto dealerships. Its design org spans 6 product suites, and most of them are built on Radial. As LLMs got good enough to read and write Figma, generate components from code, and turn designs into near-production-ready output, Radial was in the right place to become the backbone of a new way of working.
The question was whether I could architect the system so all of that worked reliably across a large, multi-team organization.
- LLMs can build in Figma. If the Figma library is tightly coupled to the React codebase, an LLM can generate accurate, production-backed files and prototypes on demand.
- LLMs can translate Figma to code. Components map 1:1 to the library, so a Figma design hands off as real React code.
- Patterns break down silos. Documenting shared patterns gives 6 product suites one vocabulary and one place to look.
- Designers focus on UX, not UI. When tooling handles assembly and handoff, people spend their time on decisions that need design thinking.
Designing the system and making the case for it
This was as much a people problem as a technical one. New tooling only works if designers trust it and have a reason to change. I identified the opportunity, designed the architecture, and pitched it at every level of the org.
I was deliberate that this was never about replacing designers. It was about removing the work that eats time without needing creative or strategic thinking: maintaining Figma libraries, rebuilding components, decoding vague handoff specs.
Saw that LLMs with Figma access could take over the parts of design work that don't need creative thinking.
Designed the prop mapping system, token pipeline, Storybook bridge, and AI governance model.
Defined two designer workflow modes and mapped how each product team would adopt them.
Built and presented the approval deck to leadership. It secured buy-in and resourcing.
A hub, not a pipeline
The key call was treating the React library as a hub. Every workflow is a spoke off the same source of truth, so LLMs, designers and developers each use it in the direction they need.
Three calls that made it reliable
Read Storybook, not the React source
An LLM reads the component stories, pulls every prop and variant, and generates matching Figma components. On every PR, a CI step diffs stories against the Figma library and flags drift before it merges.
Why: stories encode intent, not just implementation, so they make a more reliable source for design-accurate components than the raw code.
Three prop tiers, not two
A Button has 14 props. A designer needs to see 5. I first tested two tiers, and the handoff output came back incomplete: it blurred props that always take a sensible default with props a developer has to decide before shipping. Splitting them fixed it.
Governance before generation
AI-generated components go through the same review as any release. Prompts are versioned in git next to the React source, and a UX architect checks each component for fidelity, accessibility and correctness. The LLM generates. It doesn't decide.
Why first: the risk of moving fast without a gate was trust, not just quality. One inaccessible component shipping early would have made the whole initiative harder to sustain.
What changed for the design org
The workflow is in daily use on real product work, starting with a first group of designers. Exploration stays freeform: sketching, whiteboarding, early concepts. Production is where things change. Designers assemble from the pattern library, handoff produces near-production-ready code, and time that went to UI upkeep goes to research and design thinking.
| Before | After |
|---|---|
| Figma libraries updated by hand after each release | Figma generated from React source, always current |
| Developers re-interpreted specs at handoff | Handoff outputs near-production-ready code |
| Patterns lived in people's heads | A growing library of documented, code-backed patterns |
| 6 product suites, 6 slightly different approaches | One pattern language across all suites |
| Prototypes limited to basic click-throughs | Prototypes backed by real production components |
What works, and what's still hard
Figma read and write
The LLM creates, edits and manages Figma files with correct component usage.
Complex prototyping
Prototypes go well past what native Figma can do once connected to the React library.
Organism rendering
Multi-component compositions like navigation still break at the composition level. It's the real stress test of the system.