Home

Building AI-native design system

Built a comprehensive Storybook design system for an AI SaaS product, defining components, tokens, and patterns to keep a fast-moving product visually and functionally consistent.

Two products with no foundation

The company had already launched two products : AI-augmented deliverable generation tool & project management tool. However the two products shared no coherent system, which resulted in fragmentation, slow feature delivery, and a lot of tech & UX debt.

GOAL

Establish a design system that supports fast, credible product growth.

At a startup, the design system should support product velocity, not control it. When I joined, the company was in a scale phase, which demanded fast, evolving product growth without sacrificing the trust and credibility users depend on.

APPROACH

AI-driven flow to design a scalable system in less than 2-months

Step. 1

Audit using AI tools

Used Devin to audit existing tokens and component pattern to map overlaps, conflicts, and usage frequency of each component.

Step. 2

Re-built foundation

Defined two-layer semantic tokens system (color, spacing, radius, typography) before building any new components. I used Figma to define this stage for better visibility.

Step. 3

Framework decision with engineers

Collaborated with engineers to decide on governance of the new design system given the limited resource. For devoper frinedliness, we decided to use headless UI and tailwind for FE.

Step. 4

Component buildingion the brief before you accept it.

Designed main components needed to maintain existing functions. To fasten process we used headless UI for dev, Figma <> Cursor for design.

Key decision 01

Utilize “slot” to allow flexibility in components

Figma

Figma’s new feature that allows consumers to swap content dynamically without creating many variants. Used for card elements.

Code

Used as <children> prop - pass React nodes and the component wraps them in its own markup.

Key decision 01

Utilize “slot” to allow flexibility in components

Figma

I used Figma to define foundation tokens such as colors and typography as well as default styling of components that are shared across many common components.

Cursor

Once I defined semantic tokens and overall styling, I used Cursor to centralize all components source in Storybook. Developers then reference this to clone the repo to build proper code.

OUTPUT

Building Storybook as a designer

Typography

Used “Gen Interface JP” for clean, and consitent look for Latin+JA character display,

Color

I used two layers (raw + semantic) to allow scalable and consistent token governance.

Spacing

Ruled by common numbers of 2 mixed with industry standard.

Radius

Ruled by common numbers of 2 mixed with industry standard.

Components

I used two layers (raw + semantic) to allow scalable and consistent token governance.

Use case example : chat interface

Use case example : draft screen

RESULTS

System where anyone can prototype with consistency

The business requires a fast-pace adaptation to stay in the competitive AI-augmented SaaS industry. This system I built in is now being used by non-designers to quickly build prototype, making alignments much faster and efficient.

Create a dashboard for our next product.

Thinking…

Design system

Generate

Home