Vael_
Built with AI as my pair. Shelved. Carried forward on my own.
It began as a design system for a bioscience startup — production standards, a six-week cycle. When it was shelved, I rebuilt it clean, in the open, and took it further.
One designer, a system-sized problem.
Most design systems die in the space between “we should have one” and “someone has to actually build it.”
The product had grown the way real products do — fast, and a little inconsistent. Three blues that didn’t quite agree. Buttons with opinions about their own padding. Tables built four ways.
The fix was obvious: tokens, a component library, real documentation, a way to keep it all honest. The catch was just as obvious — that’s a team’s worth of work, and there was no team. There was me, and a six-week cycle.
A pair, not an autopilot.
I stopped treating AI like a fancier autocomplete and started treating it like a pair. I set a standard once, and it held that standard across a hundred things.
The judgment
- Taste — what’s correct, what ships
- Clarity — direction from my expertise when Claude was vague or unsure
- The standards every token and component answers to
- Accessibility & governance calls
- The “why” behind every decision
The throughput
- Speed — a system’s worth of output
- Consistency across hundreds of decisions
- Perfect recall of the conventions I set
- A partner that never lost the thread
But the surprise wasn’t how much it could make. It was where the leverage actually lived.
Not in making a button.
Anyone can get an AI to make a button. The real leverage was in the infrastructure that keeps a system honest — three rungs, each pulling me further out of production.
It started with tokens.
A system is only as trustworthy as its tokens. The decision I cared about most wasn’t which blue — it was the format: an open W3C standard, not a proprietary blob. One traceable source for color, type, spacing, elevation, motion.
Eight spacing steps, not forty. Restraint on purpose.
Then the theme generated itself.
A value changed in Figma, flowed through Supernova into the token source, and regenerated the theme the product used. Nobody ever retyped a hex code.
primary: {
main: "#1976d2", // token: primary/main
dark: "#1565c0", // token: primary/dark
}
Then the docs wrote themselves.
Instead of writing pages, Claude and I built the machine that generated them — a build script (build.py, ~485 lines) that turned source files into every page and kept them in lockstep with the code. Then I went through and refined Claude’s output for consistency and clarity, based on the intended final use case and audience.
The decisions were the whole job.
All that throughput only mattered because the decisions stayed mine — and the less time I spent typing, the more visible they got.
Taste
Which three blues became one — and why the spacing scale stops at eight steps, not forty, and a chart never shows more than four series. Restraint is the system, not a limit on it.
Accessibility
I hand-audited each component against WCAG, then ran the Storybook a11y addon as a second pass. AA by choice, not AAA— 7:1 contrast would break the semantic palette — and I named what’s still unaudited instead of hiding it.
Governance
Two reviewers on every change — one design, one engineering— and nothing enters the system just because it’s a variation of something already in it. A system without governance rots.
The “why”
Every call has a written decision record— why AA over AAA, why a metric’s color is permanent once assigned (change one and you break recognition across every historical chart). The reasons are what the next person actually needs.
Claude was only ever as good as the standards I set — the bottleneck was never its speed. It was my judgment. Which is exactly where a designer’s time should go.
None of this was improvised — every rule, and the reasoning behind it, lives on one page. Read the rulebook →
I took it all the way to a handoff.
The system built, plus a rollout scoped for the engineering team — everything ready for the cycle that would put it into the product.
Then priorities shifted, and it was shelved before that cycle ever ran.
This is where most of these stories quietly end. I couldn’t accept that.
I wasn’t going to let it die in a backlog.
So I carried it forward on my own — off the clock, with no one to hand it to — and rebuilt it clean, this time to be shown. I re-authored a fresh theme and deliberately traded the internal generator for Storybook, so every component is live, interactive, and documented in one place.
The system isn’t a screenshot in a case study. It’s a live library you can open right now.
The surface most systems give up on.
Data visualization is where design systems quietly break. Components are easy to keep coherent; charts are where a team reaches for whatever library is handy and inherits its palette, its type, its conventions — a second design language bolted onto the first. I wasn’t going to let the charts be the exception.
So I didn’t fork a charting engine to match the system, and I didn’t hand-roll SVG. I took Highchartsin styled mode and themed it completely — every chart reads the live theme as it renders, so it pulls its color, type, and ink from the same tokens as everything else and flips light and dark with the rest of the library. Same gallery, same tokens; a different kind of component.
Real Highcharts, themed to the system — not screenshots. A chart can’t drift out of the system, because it was never outside it. See how it works →
A production design system, built with AI in a six-week cycle — then carried forward solo, expanded to 44 components, and rebuilt in the open.
This isn’t a story about AI replacing design work. It’s the opposite. AI took everything that wasn’t design off my plate — and left me with the part I was responsible for.
Claude generated tokens, components, and tooling under standards I set and edited — first for the production system, then again as I rebuilt it into Vael. The design decisions — what’s correct, what ships, what’s accessible — were mine.