Home

Yet another design system

Role

Solo designer & builder

Scope

Design and build a personal design system end-to-end: Figma library, tokens, and a coded React implementation, with AI as a core part of the workflow.

Impact

A working proof of AI-fluent systems thinking: a token pipeline from Figma straight to shipped CSS, built with Claude Code as a genuine collaborator.

Source

View Figma file

Github repo

Storybook

Overview

Most of my design systems work has happened inside a company, shaped by an existing codebase, an existing brand, and years of accumulated decisions. I wanted a space to answer a different question: if I were starting a design system from zero today, with modern Figma variables and AI coding tools both fully available, what would I actually build, and how would I build it?


So I built one. Not a component showcase, but a real system: a Figma file with proper variable architecture, and a coded implementation that consumes the same tokens the design file defines. The goal wasn't just to produce components. It was to prove out a Figma-to-code pipeline and a way of working with AI that a design systems team could actually adopt.

Token architecture

Rather than starting from scratch, I built the semantic layer on top of Tailwind's existing primitive color scales, giving the system a familiar, well-tested foundation while still defining my own meaning on top of it (surface, border, content, interactive, etc.). Figma variables are the source of truth; everything downstream reads from them.

Figma to code pipeline

The token pipeline runs from Figma, through exported tokens/*.json, through a generate.py script, into a generated theme.css. That means a token change made in Figma has a clear, traceable path all the way to what ships in the browser, with no manual re-typing of values and no drift between what the file says and what the code renders.

Building with Claude Code

The coded implementation was built in close collaboration with Claude Code rather than by hand-writing every component from scratch. I treated it less like autocomplete and more like a pairing partner: I set the architecture and design intent (the token structure, the component API, the interaction patterns) and used Claude Code to accelerate implementation, wire up Storybook (with accessibility and MCP addons, plus Chromatic and Vitest for testing), and keep the codebase consistent as it grew. It's the clearest evidence I have of how I actually work with AI day to day, not just how I talk about it.

Figma Library

Github Repo

Storybook

Release 08 · Theming polish

Tightened the theming model so the system flexes cleanly.

  • Made the neutral swappable across all nine color ramps

  • Pointed ContentBlock's accent emphasis at the surface tokens

  • Painted the Tabs indicator over the group's bottom rule

  • Retired the Decorative/Stone rename and repaired the two components it affected

Release 07 · Advanced patterns and public Storybook

The most productive day — searchable and composite components, plus layout primitives.

  • Ghost appearance for Input and InputGroup

  • Token and the tokenizer input pattern

  • Combobox — a trigger with a searchable popup

  • Accordion — a stack of sections that open one at a time

  • ContentBlock and BentoGrid layout components

  • Published Storybook to GitHub Pages

  • Token-level fixes: portalled popups get a z-index, nested tokens take the next radius down

Release 06 · Composite controls and CI on every PR

  • Select, Checkbox.Group, Radio.Group

  • Split CLAUDE.md into per-component files for maintainability

  • Lint, types, and stories now checked on every pull request

Release 05 · Inputs and field-driven validation

Moved from standalone controls toward composable form architecture.

  • Switch, Slider (with sub-label), Link (focus radius scales with the type)

  • Input and InputGroup

  • Introduced Field as the owner of the label and of validity — Checkbox, Radio, and Switch now defer to it, matching how the Figma is structured

Release 04 · Form controls begin

  • Checkbox, Radio, Menu

  • Gave the whole library one focus ring that costs no layout

  • Matched Figma's text weight using grayscale font smoothing

Release 03 · Feedback and navigation

  • Tabs

  • Banner (with an icon slot mirrored into Figma)

  • Toast

Release 02 · Core primitives and a testing safety net

Added the low-level building blocks and, crucially, made accessibility a build gate rather than an afterthought.

  • Divider, Breadcrumbs, Avatar + AvatarGroup, Tooltip, SegmentedControl

  • Introduced motion tokens

  • Made the build fail on any accessibility violation — every story runs in real Chromium and is checked with axe

  • Fixed and hardened the story test suite and test config

Release 01 · Token foundation and the reference component

Established the pipeline that everything else depends on: Figma variables in, tokenized CSS out.

  • Scaffolded Vite + React 19 + TypeScript on top of the existing token foundation

  • Wired Tailwind v4 and moved theme.css into src/styles; built a token playground to browse every token with a dark-mode toggle

  • Emitted colors as OKLCH sourced from Tailwind's canonical palette, and added a check that reports any primitive whose Figma hex disagrees with Tailwind

  • Stood up Storybook with Button as the reference component and an Icon component backed by Lucide

  • Added Badge (extended to the full decorative ramp) and icon-only Buttons

  • MIT license; README and CLAUDE.md brought in line with what was built

Next project

Navigation redesign

View Project

Next project

Seeds foundations

View Project