The Design System
That Replaced Figma.

Chapter 1 — The dual-system problem

Two component libraries.

When I joined Leucine in July 2020, there were two products: DWI (Digital Work Instructions, which evolved into MES) and CLEEN. Each had been built by different engineering sub-teams using different frontend frameworks. DWI was on Material UI. CLEEN was on Ant Design. There was one designer before me — a pixel pusher with no system-level thinking.

What this meant in practice: two completely different visual languages across two products from the same company. Every new component built from scratch, twice. Every design update required double the work. Onboarding new designers meant teaching two separate component libraries, two sets of conventions, two design files. A customer using both CLEEN and MES experienced two different-looking products from one vendor.

I took ownership of design across both products. Brought consistency where possible within the constraints. Focused on user research, interaction patterns, and information architecture rather than fighting a losing war against mismatched component libraries.

Chapter 2 — Hitting the ceiling

Five designers. Same problem.

As Leucine expanded from 2 products to 4 (adding Leucine OS/QMS/LES and FDA Tracker), and as the company scaled from early customers to 300+ facilities, the design demands multiplied. I grew from solo designer to Design Lead managing a team of 5.

The team was deployed across the suite — some focused on MES, some on CLEEN, some on the newer products. All working in Figma, designing screens, handing off, reviewing, iterating. The dual-system problem didn’t go away — it got worse. More products meant more surfaces, more inconsistencies, more coordination overhead.

A significant portion of every designer’s time was spent on handoff, review, and rework — not on solving user problems. The fundamental brand inconsistency between the MUI products and the Ant Design products remained unsolvable within the existing architecture.

Chapter 3 — Why shadcn/ui

Three criteria. One library that passed all three.

I evaluated five options — MUI v5 (what we already had), Chakra UI, Mantine, Ant Design v5, shadcn/ui. The evaluation criteria were not the usual ones — not documentation quality or community size, but three specific questions.

First: full visual control. MUI and Ant Design both fight you when you try to deeply customise. Their theming systems have opinions. shadcn/ui has no opinions — it’s headless primitives with Tailwind styling.

Second: no dependency hell. MUI and Ant Design are npm packages — version conflicts across 4 products with different release cycles would be a nightmare. shadcn/ui is copy-paste — the components live in each product’s codebase. No shared dependency. No version conflicts.

Third: AI-readable. shadcn/ui components are plain React + Tailwind. Claude Code can read them, understand them, and compose new pages from them without any special knowledge of a proprietary theming API. MUI’s sx prop, Ant Design’s ConfigProvider — these are barriers to AI composition.

Chapter 4 — The 5-day build

Day-by-day: what shipped, what got pushed.

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

Chapter 5 — The skill file

The design system skills.

The design system is embedded as a Claude Code skill file — a set of structured instructions Claude reads before executing any frontend task. The skill file defines: colour tokens, typography scale, spacing system, component library, block compositions, layout patterns, accessibility requirements.

When an engineer needs to build a new page, they don’t open Figma. They don’t wait for a designer. They open Claude Code, describe the requirement (“build a settings page with a sidebar, form fields for profile information, and a data table for API keys”), and Claude Code reads the design system skill file and builds the page using the correct tokens, components, and blocks.

The result is a branded, consistent, accessible page that follows every design decision I made — without me being in the room. The 2-day MVP number comes from this: a new product’s entire frontend, built by an engineer with Claude Code, using the design system as the foundation. Previously that took weeks of designer-engineer back-and-forth.

# Leucine Design System Skill

## Tokens
  primary:    #0052FE
  surface:    14 palettes × 11 shades
  type:       Inter + IBM Plex Mono
  spacing:    4 / 8 / 12 / 16 / 24 / 32

## Components
  46 shadcn primitives
  16 custom (sidebar, topbar, ...)

## Blocks
  login · signup · dashboard
  data-table · form · settings

## Patterns
  sidebar-nav · top-nav · empty-state

## Accessibility
  WCAG AA contrast · focus rings
  semantic HTML · ARIA labels

→ reading skill file...
→ composing with shadcn primitives + Settings block
✓ Generated using Leucine DS tokens

Chapter 6 — Engineering workflow transformation

Engineers compose pages directly from the skill file.

Three frontend engineers worked alongside on integration. Initial pushback — they liked Figma artifacts as visual specs. The breakthrough moment: composing a settings page from the skill file in 10 minutes, having previously taken 3 days through handoff.

Current behavior: prompt Claude → review output → ship. I review at system level (token changes, new block patterns), not page level (button placement, copy adjustments). Course-corrections compound.

Page from blocks

Settings page composed from 7 existing blocks. 10 minutes. Previously 3 days through handoff.

New screen from prompt

PM described a new audit-trail screen. Engineer prompted Claude. Page rendered with the design system’s table block + filter pattern. Designer wasn’t in the loop.

// tailwind.config.ts darkMode: 'class', theme: { extend: { colors: { bg: 'var(--bg)', fg: 'var(--fg)', surface: 'var(--surface)', } } } // globals.css :root { --bg: #ffffff; --fg: #0a0a0a; } .dark { --bg: #0a0a0a; --fg: #fafafa; }

Dark theme adoption

Token-based dark theme via next-themes. Adopted across 4 products in one PR — token swap propagated everywhere.

Chapter 7 — Team transformation

5 → 1. Where each person went.

The design team went from 5 people to 1 — me. Honest accounting of where each person went.