OpenVPN
The design system started as a classic project and became something else: the proof that I could deliver frontend end-to-end. I rebuilt it AI-native — and features that used to take a team six to seven weeks now ship solo in days. The largest so far: a billing feature with 465 states, designed and shipped by one person.
About the project
THE CHALLENGE
I joined as a Principal Designer on CloudConnexa — enterprise network security serving 20,000+ organizations and 4M+ users. The team was strong in cybersecurity expertise but had no design process at all. The ad-hoc approach worked while the product was small; as the team and the codebase grew, every screen started drifting apart — in code and in visual style.
THE CLASSIC SYSTEM — AND ITS CEILING
I led the first version the classic way: comprehensive guidelines, clear patterns, every product in the ecosystem migrated onto one system — accordions to toasts — built on three principles: flexible enough to allow variation, code as the source of truth, contributions from the team that actually uses it.
It worked. Design and development time dropped by 30%, and a weekly review kept designers and developers aligned. But shipping a feature still took six to seven weeks — and watching the process closely showed why. The weeks didn't live in design or in code. They lived in handoff: specs, review rounds, and context dying between tools and people.
GOING AI-NATIVE
So I rebuilt the system AI-native. Three markdown files became its constitution: CLAUDE.md holds the non-negotiables, DESIGN.md grew into twenty-one pattern chapters — each one traced back to a mistake that kept recurring — and PRODUCT.md carries the product register: who the users are, how the product speaks, what it must never look like.
On top of that sit nine skills — packaged workflows for scaffolding a component, auditing tokens, migrating legacy code, generating stories, writing microcopy, checking accessibility, running the quality toolchain. The point wasn't automation for its own sake. It was moving every rule out of people's heads — and out of Figma libraries nobody opened — into a form an agent reads before it writes a line.
STORYBOOK AS THE CONTRACT
Rules need something to build with. Storybook stopped being documentation and became the interface between me and the agent: 71 components, every state visible, served straight into the working session over MCP. When I ask for a table with a loading state, it doesn't invent one — it reads the real component and its real props.
The setup isn't mine alone. The system ships its own Claude Code plugin, so any engineer on the team installs it and gets the same thing in their editor: component lookup, changelog, accessibility audits, guided upgrades between versions.
BUILDING BEFORE THE BACKEND
Waiting for an API is the other place weeks disappear. So every app is built against in-memory mocks first — a playground that runs the whole feature standalone, with a DevTool that flips portal, plan, state, modifier and the async cases: loading, error, empty, populated. Every state is demoable from day one, on a URL a stakeholder can open.
The mocks aren't throwaway — they are written as the API contract. The same source swaps to real endpoints with a build flag, and where the backend hasn't built a domain yet, my mocks and DTOs are what it gets implemented against. Design stops waiting on the backend and starts specifying it.
THE SYSTEM CHECKS ITSELF
The same DevTool carries one more switch. Rules only hold if something enforces them, so the design system ships an audit overlay: it walks the DOM, classifies every element as compliant or drifting, and outlines what it finds in the running app.
"Does this follow the system?" stops being an opinion in review and becomes a number anyone can check in a second, without asking me — which is what keeps a system honest once an agent writes most of the code.
AND THE GATES BEHIND IT
Code gets the same treatment. One skill runs every gate an app has — lint, types, tests, coverage, dead code, duplication, dependency audit, build, plus mutation testing, Lighthouse and Sonar on the heavy tier — and writes one dashboard with exact numbers and the delta since the last run. A gate the app lacks shows as N/A with a note on how to enable it, so the report doubles as a map of what's missing.
On CyberShield that loop took the codebase from 409 open issues and 39 hours of technical debt to zero, coverage from 45.6% to 82.4%, and surfaced twenty latent bugs before any user hit them.
DROPPING FIGMA
I tried half a dozen Figma-MCP setups and dropped them all. The design and code loop lives in one session now: the component's real specification is its code and its stories, not a frame that drifts the day after it's drawn.
Figma didn't disappear — it changed job. When designers need to review a flow, a skill captures every state of the feature and lays the screens out on a Figma page automatically, each frame named for the portal, plan, state and tab it shows. A reviewer searches for the case they care about instead of scrolling a board somebody assembled by hand.
DELIVERY, NOT HANDOFF
Put together, that is the loop: a written spec, an agent that reads the system's own rules before it writes, the gates above, and a final design pass by me. Not vibe coding — AI-assisted engineering on top of thirteen years of design judgment.
The team changed shape with it. A feature used to move through six or seven people; it now takes three — a backend engineer, me across design and frontend, and QA. And when the same mistake surfaces twice in review, it stops being a pull-request comment and becomes a chapter in DESIGN.md — that is the part the team keeps, whoever is at the keyboard.
Four features then tested the loop four different ways: complexity, inherited legacy, reach beyond my own team, and a product built from nothing.
BILLING — THE COMPLEXITY TEST
The complexity test was billing: 465 distinct UI states across two products — plans, trials, scheduled changes, payment failures, downgrades, resellers, every empty and loading case. I wrote the spec, had a working prototype within minutes, then iterated in the same session until every state held up. The old handoff process would have spread this across months of specs and review rounds.
CYBERSHIELD — LEGACY, RE-BASELINED
The legacy test was CyberShield, the content-filtering module: years of accumulated code, custom styles everywhere, built long before the system existed. I brought the whole codebase onto the published design system, re-baselined it, then ported new feature work on top of the migration.
What outlives the migration is the write-up — I documented the method so the next codebase follows a path instead of somebody's memory. Legacy is where AI-assisted delivery is easiest to oversell: the constraint was never typing speed, it was knowing which of a thousand custom styles is load-bearing.
SEARCH — BEYOND MY OWN TEAM
The reach test was site-wide search with AI answers. I designed the palette and the answer surface: it answers inline, cites the sources it used, states plainly that answers are experimental, and gives the reader a way to disagree with it.
It started as one team's feature and ended up embedded across surfaces, including the documentation — which meant designing for contexts I didn't control and for reviewers I would never meet.
MCP GATEWAY — ZERO TO ONE
The greenfield test was the MCP Gateway: a new admin surface for a problem the industry is still learning to name — letting AI agents use company tools without handing them the keys. I designed it from the empty file: register a server, onboard an agent, scope exactly which tools it may call, cap its spend, and watch every call it makes.
No prior art to copy, no existing screens to lean on. The hard part wasn't the layout — it was deciding how much an admin needs to see before they trust an agent with production tools.
WHAT THIS MEANS
This is the process I bring to a team: a design system an agent can build against, gates that keep it honest, rules that grow out of real mistakes instead of good intentions — and a designer who ships production frontend rather than handing off pictures of it.