Building robr0 DS — a one-person design system, end to end

The site you're on runs on a design system I built end to end. Tokens, components, theming, docs — all mine. This is the story of why I built it instead of grabbing an off-the-shelf system, and what fell out of doing it that way.

Why build a personal design system in 2026?

Plenty of great systems exist — shadcn, Mantine, Material, Radix. Any of them would've gotten me a portfolio site in a weekend. I picked the longer road on purpose:

• I wanted a system that matched my visual voice, not a popular one.
• I wanted a forcing function to build a real design-to-code pipeline, not just consume one.
• As a portfolio piece, the system itself is the proof — it demonstrates how I think better than any case study about how I think could.

The three-tier token architecture

The whole thing rests on a single architectural rule: primitives at the bottom, semantic tokens in the middle, components on top. No component CSS ever references a primitive directly.

Primitives are the raw values — every shade of teal I might ever use, every spacing step, every radius. They're defined as variables in Figma and exported into CSS:

Semantic tokens give those primitives meaning. --primitive-teal-07 becomes --color-action-primary-bg. --primitive-neutral-09 becomes --color-text-primary. The semantic layer is also where light and dark mode diverge — same component CSS, different mapping underneath:

The payoff is concrete:

• Light and dark mode are free. Swap the semantic mapping; everything reads correctly.
• Renaming a hex changes nothing. Components don't know primitives exist.
• Component CSS reads like intent, not like pixels. background: var(--color-action-primary-bg) tells you what it's doing.

The pipeline: Figma to React in under a minute

The tokens and components live in Figma. From there, they flow to production through a chain that runs without a handoff meeting:

Claude Code reads the Figma file directly through MCP. It generates token CSS, React components with the right TypeScript shape, and Storybook stories that match the Figma variants. I push to GitHub. Vercel deploys both this site and the Storybook in under a minute. The whole loop fits in a coffee break.

The handoff that usually sits between design and engineering is just gone. The spec is the work.

What it produces

Forty-two React components, full Storybook docs, light and dark themes, the entire site you're reading right now. Here's a live slice — every element below is a real component from the system, rendered inline from the same token layer:

What changed in my practice

The most interesting outcome wasn't the system itself — it was how building this way rewired how I work:

• The spec is the work. The time that used to go into pushing pixels now goes into writing clear specs that an AI agent can execute. The thinking is the deliverable.
• Speed compresses iteration. I can try three layout directions in an afternoon and keep the best one. Earlier in my career that was a week.
• Designer-to-dev sync is near zero. Tokens flow from Figma to production without a handoff meeting. When the design changes, the code changes — same gesture.

None of this replaces design judgment. It moves where judgment is applied — earlier, at the spec level, before code or visuals exist.

The artifacts I'm leaving open

The whole system is on GitHub. Three artifacts make the approach reusable on any project you start tomorrow:

• Claude MD — the codebase context any AI agent can read to understand the project.
• Design MD — the design language compressed into a single markdown reference.
• Skills — small Claude Code skill files for the repetitive work (scaffolding components, auditing tokens, running pre-deploy checks, accessibility reviews).

Each one is a markdown file. Download it, drop it into your project, point Claude at it. The pipeline isn't magic — it's a stack of small written agreements an AI can act on.

What's next

I'm continuing to harden the pipeline — better visual regression checks, agent-driven design reviews, more skills as patterns surface. The next case studies on this site (Meta, Augmenta, Intuit Agent Chat) will all be authored using this same infrastructure. The system makes the writing faster too.