The design system that replaced Figma.

DWI/MES was built on Material UI. CLEEN was built on Ant Design — two products from the same company that looked like they came from different companies. Every new component was built from scratch, twice; every design update was double the work. A customer using both CLEEN and MES experienced two different-looking products from one vendor.

Five designers, forty engineers. The bottleneck wasn't talent — it was the gap between Figma and code. Every design decision lost fidelity in translation.

The problem wasn't the libraries. It was that the design lived somewhere the code couldn't read.

The obvious read was a visual-consistency problem: two libraries, two look-and-feels, unify them. That's the symptom. The actual gap was structural — the design existed as Figma artifacts engineers had to interpret into code, and every interpretation leaked fidelity. Five designers spent most of their time on handoff, review, and rework instead of user problems. The brand inconsistency was unsolvable inside that architecture, because the architecture itself was the inefficiency: a translation layer between intent and implementation.

So the decision wasn't “pick a better library.” It was: remove the translation layer entirely. Ditch Figma, ditch both libraries, build one system in code that engineers — and an AI — can read and build from directly. I evaluated five libraries on three questions most design leaders weren't asking:

The third criterion — AI-readability — is what almost no design leader was asking for in 2025. shadcn's plain React + Tailwind structure meant the design system could become a Claude Code skill file: a set of instructions an AI could read and build from.

The calendar was realistic only because I knew exactly what to build. Six years inside the failure modes — handoff fidelity loss, double-build overhead, brand drift — meant I'd already designed the system mentally. The five days were execution, not discovery.

The decisions a Figma-first design leader wouldn't have made:

Engineers compose pages directly from the skill file.

Three frontend engineers worked alongside me on integration. Initial pushback — they liked Figma artifacts as visual specs. The breakthrough: composing a settings page from the skill file in 10 minutes, where the same page had taken three days through handoff. I now review at system level (token changes, new block patterns), not page level (button placement, copy). Course-corrections compound.

The new flow: PM writes a requirement → engineer opens Claude Code → Claude reads the skill file → page built with tokens and blocks → review and ship. The system runs across four products and 300+ pharma facilities, and the brand inconsistency that had persisted since 2020 is gone.

5 → 1, honestly.The design team went from five to one — me. Three found higher-leverage roles inside Leucine (one to product management, two to demand generation), one left for an unrelated opportunity, and one role — producing static mockups for engineers to interpret — was eliminated because that step no longer existed. The system didn't replace people; it replaced the translation step that was consuming their time. Most of the team moved up into higher-leverage work.