Architecting a 0-1 design system
Gist Foundations is the design system behind ProRata’s Gist products. I started it and built it in Figma and code at the same time, then shipped it as a package engineers install.
- Company
ProRata.ai- Role
- Started and led the design system
- Timeline
- Aug to Oct 2026
- Tools
- Figma, Figma MCP, Claude Code, Storybook, Code Connect, GitHub
118
React components
9
releases in five weeks
8 days
lo-fi to production-ready
I inherited a half-built system, and fixed the wrong thing first.
ProRata had four products and one half-built design system. Engineers rebuilt components from Figma’s inspect panel, so what stakeholders approved wasn’t what shipped.
When the system’s designer left, I took it over and cleaned it up. My head of design liked the progress, but every scenario I added showed it had been built around one product.
So I pitched replacing it, with the new foundation already built so the team could see it working.
Half-built or not, people were using the old one, and replacing it scared them more than keeping it.
Real screens set the scale.
Two real screens kept using 20px and 24px, steps the old spacing scale didn’t have. I moved spacing to numbered steps, so adding one never forces a rename.
From there, tokens came first: raw values, then roles, then components that only use roles.
- 01
Raw values
Color ramps, type and sizes. Components never use them directly.
- 02
123 roles
A name with a job, and one value each for light and dark.
- Background34
- Border23
- Content18
- Spacing18
- Chart16
- Brand9
- Other5
- 03
118 components
Every value bound to a role. 63 are linked to their Figma component.
Components brought in from other systems got cut down. A tooltip arrived with 240 variants and left with 2, since where it sits is worked out in code.
Figma and code moved together from the first commit.
Each component started in Figma with every value bound to a role. Then an agent wrote its code, its docs and the link back to Figma.
The first release went out on September 22, with 39 components already linked to Figma.
The agent’s checks passed things that were broken.
It reported “0 mismatches” after zero comparisons, and passed a dropdown that did nothing when clicked. I caught both by using the components myself.
From then on, an audit ran on every edit, so no check depended on someone remembering it.
It reports and never edits, and a fix has to be invisible: 298 component states, light and dark, must render the same before and after. The first sweep fixed 72 findings without moving a pixel.
Getting it off my laptop.
Gist GEO, the first product to use it, builds in the cloud and deploys on Vercel, so a folder on my laptop wasn’t going to work. Its engineer asked me to publish on each release, support Next.js and test it automatically.
I said yes, then fixed what the package needed to hold up.
532 → 224 kB
The package’s size once two libraries it uses, Radix and Motion, stopped being copied into it.
Every pull request now builds the package inside a real Next.js app.
“The extras are welcome.”
Figma left the handoff.
Midway through, an engineer and I bet that with good enough docs, designers could skip Figma for screens.
Gist GEO V2 went from lo-fi to production-ready in 8 days, prototyped in Claude Code from these components.
Engineers wired the screens to the backend instead of building a front end from scratch. Gist Answers’ designer now brings components in through the same audit.
What I’d keep doing, and what I’d change.
Design for flows nobody has drawn yet
I came in trained to start from people and flows. Here every component needed answers first: how many slots, what it’s for, how it fails.
Build the audit in week one
I built it in week five. Every failure here, the team’s and the agent’s, came from a check someone had to remember to run.