A production-ready design system built in 38 hours.
Powered by AI, steered by engineering instinct.
GlassCard
Featured Project
Design
System v2
Zillennial Bridge
Heritage Cream × Cerulean Teal
Design Systems
Next.js
AI
2026 · Claude Code
View Project
HapticButton
Primary
View Work
Pill
Get in Touch
Secondary
Learn More
Ghost
See All Work
Disabled
Coming Soon
Tag / Badge
Tag — md · 28px
Design Systems
React
TypeScript
Figma
Framer
Next.js
Badge — sm · 22px
New
Phase 2
Locked
v2
Beginner
Beginner
Files Shipped
3 semantic commits to GitHub
Lines of Code Added
Across all commits
Design Tokens
Across All Versions
In 2024, building a design system took nine months across three organisations. In 2026, the same scope took 38 hours, solo.
Starting Point. Claude Chat
It started as a chat,
not a Figma file.
I started by brainstorming in Claude and asked it to help me surface what I actually feel as a designer. My 90s upbringing, my work in AI, the tension between analog warmth and digital precision that conversation became the design brief. Heritage Cream × Cerulean Teal. The Zillennial Bridge.
Claude Chat
Brainstorming
Identity Mapping
Design Tokens · Figma
Figma rejected my tokens 5 times.
So I fixed the code.
I exported the conversation into three files: tokens.json for Figma, tokens.css for the codebase, and design-system.md for Claude Code to reference. Importing the tokens into Figma via Tokens Studio failed four times. W3C format rejected. px suffixes stripped. Typography needed composite tokens. Each failure was data I debugged the JSON schema directly instead of waiting for a plugin fix.
Token Studio
JSON Debugging
5 iterations
v1
FAILED
W3C format rejected
v2
PARTIAL
Composite Tokens Failed
v3
SHIPPED
All 99 Tokens Parsed
Success Tokens
Build · Claude Code + Cursor
AI wrote the components.
I decided which ones shipped.
I placed design-system.md into /docs and switched to Claude Code in Cursor. It read the spec and started generating components simultaneously, GlassCard, HapticButton, Tag, GrainOverlay. But I didn't just accept the output. I brainstormed about stack, why Next.js 14, why Tailwind for token binding, why Framer Motion for the haptic spring physics. Three versions generated, compared, and refined.
Claude Code
Next.JS 14
Typescript
Framer Motion
Shipped · GitHub
27 files, 3 commits,
and a live repo.
Three semantic commits feat, docs, feat. Components, tokens, and documentation all generated programmatically from the design system itself. From the first Claude Chat conversation 3,710 lines added, 275 design tokens across all versions.
GitHub
3 Files
27 Files
GitHub Copilot
