Case Study 01

AI-Native Design System

Re-engineering the design-to-dev pipeline using AI agents to eliminate documentation bottlenecks and establish code as the single source of truth.

View design system (in progress)

Components / Button

Variants

PrimarySecondaryGhost

import { Button } from "@/ui/Button"

<Button variant="primary">Primary</Button>

<Button variant="secondary" size="sm">Secondary</Button>

<Button variant="ghost">Ghost</Button>

Overview

An AI-native design system workflow that speeds up UI development by removing the design-to-code handoff and treating live code as the source of truth. It streamlines component creation by using Claude to do the upfront research, including accessibility specs like WAI-ARIA, then builds the React component and its interactive docs directly in code at the same time.

The Problem

I could already generate fully styled, production-ready React components with AI and polish the design on the live component, yet I kept routing through the Figma MCP just to satisfy a 'design-first' rule. This constant back-and-forth was exhausting to keep up with every day, and ultimately led to an inevitable drift between the 'documented' Figma files and the actual live product.

The Approach

Skip the canvas. Build straight in the browser.

Three stages with a clear line between what gets automated and what I actually design. AI does the research and the first pass of code. I make the taste calls right in the browser instead of a static frame.

AI → Human

Research with AI, vet by hand

The AI researcher maps out the component's requirements into a single markdown file. Then I review it closely, fix what's off, and fill in the missing human context. Nothing moves to the code phase until that spec is rock-solid.

research/button.md

# Button

## Anatomy

— label · icon · container

— states: rest / hover / active / focus / disabled

## Accessibility

— role="button", focus-visible ring

— 44px min target · 4.5:1 contrast

## Tokens

— space.md · radius.sm · color.fg.onAccent

AI → Human

Direct to code, refined live

I feed the finalized spec and existing token system straight into Claude Code. In a single pass, it builds both the React component and its live documentation page. From there, I make the design calls, carefully refining the component against a running demo in the browser.

Button.tsx — live preview

Save changesCancel

// tweaking on the real thing
transition: all 160ms cubic-bezier(.2,0,0,1);
padding: tokens.space.md;

Human

Docs that stay in sync

The live dashboard is the documentation. Each variation, edge case, and do-and-don't is written as a code snippet shown right next to the real component it produces. Update the component and the example updates with it, so the docs and the actual UI can never fall out of sync.

docs / button — guidelines

SaveOne primary action per view

DON'T

SaveSubmitCompeting primaries

EDGE

Saving…Loading truncates long labels

The Results

Code as the source of truth, faster output

The source of truth is now the live product itself, so there's nothing separate to keep in sync and a much shorter path from idea to shipped component.

Truth that can't drift

The reference is the live product itself, so the team never works off a stale design file. UI discrepancies and sync overhead drop to zero.

Faster output

Without the design-to-code handoff, components go from idea to shipped much faster.

Takeaways

I expected building straight in code to hurt the design, but refining directly on the live component turned out to be more accurate, not less.

The expensive part of the old workflow was never building the component. It was constantly keeping the mockup and the code in sync.

Letting AI do everything wasn't the goal. The real work was deciding where AI drafts and where my judgment takes over.

Say hi

Open to thoughtful product conversations, collaborations, and new ideas.

hello@jinahlee.com LinkedIn