Case 01 · AI · 2026
Prerender AI-Powered Design System
I built Prerender’s design system first, then prototypes on top. Developers now build from the prototype, and the round trip to development has roughly halved.
- Role
- Lead Product Designer, AI Builder & Product Manager at Prerender.io (saas.group), running the design system as a product
- Team
- Prerender.io front-end developers · Claude Code with the Figma MCP plugin
- faster designer-to-front-end round trip
- ~50%
- Ant Design components in the system
- 40+
- build waves, tokens first
- 8
01
Where the tools fell short
I wanted one front-end source of truth, so I tried AI tools. UXPilot makes great mockups, but ask it to respect a real design system and it doesn’t get there. Figma Make keeps you in Figma, Lovable looks the same from outside, and Builder.io saves design system integration for Enterprise. What I needed was infrastructure.
02
The design system came first
I built the system in Claude Code with the Figma MCP plugin, starting from Ant Design v5. Tokens went in before components, so Claude reached for the primary token instead of a hex code. Eight waves, tracked in one wave plan, because Claude forgets between sessions.
Same Button on both sides: the Figma UI kit and Claude Code reading it through the Figma MCP plugin.
03
What the build missed
Early on I forgot to mention responsiveness. Components looked great at 1440px, and Claude didn’t raise a flag. Accessibility got its own WCAG 2.2 AA wave after the main build. It caught secondary text failing contrast, missing focus rings, chart canvases with no accessible description and touch targets under 24px.
04
Then prototypes on top
Once the system was in place, I started generating prototypes against it from the PRD. Now developers build from the PRD and the running prototype instead of interpreting design files, and a custom Claude Code skill translates the prototype code into production’s conventions. “Which component is this?” stopped coming up.
05
Four things were already true
Our PRDs were already good enough to build from, and a developer was up for experimenting. Both sides used the same component library, so porting became mapping, and the prototype was worth copying. Two of those four things have nothing to do with AI.
Looking back
Claude built what I described, and I hadn’t described responsiveness. Next time the obvious things go into the wave plan before wave one starts, and the WCAG audit runs at least twice, not once at the end.