About robr0 DS

A personal design system, built to make this site

robr0 DS is the system I built — by myself — to make every page you see here. Tokens live in Figma. Components live in React. Claude Code wires them together so a change in Figma reaches production in under a minute. None of it is theoretical: the buttons, the colours, the type, the layout — they're all running on the same system this page describes.

I'm putting all of it on display because I think the system is the work. The pipeline below shows how the pieces fit. The tools rail lists what makes it run. And if you want to lift any of it for your own project, everything is open — the artifacts at the bottom of this page are ready to drop in.

Pipeline

Figma

Design source of truth

All design decisions live in Figma. I design the robr0 DS system here — not mockups, but the actual source that generates code.

  • Build design tokens as variables: 7 color ramps + spatial tokens (gap, padding, radius, border)
  • Design components with variants and map semantics for light/dark modes
  • Export JSON and expose via MCP for direct code generation
Claude Code

AI component generator

Reads my Figma file via MCP and writes production React code directly from design data.

  • Converts token JSON to layered CSS variables (primitives → semantics → components)
  • Generates React components matching Figma variants with TypeScript and token-based CSS
  • Builds Storybook documentation automatically for every component
Storybook

Live documentation site

Interactive component library at design-system-iota-one.vercel.app showing every piece of robr0 DS.

  • Component playground with live controls for all props and states
  • Token docs (colors, spacing, typography), icon gallery, logo library
  • Auto-deploys on every code push
GitHub

Version control

Public repository storing the entire codebase with full commit history.

  • Tracks all changes to design system and website (monorepo)
  • Triggers Vercel deployment on every push to main
  • Portfolio visibility at github.com/robritacca-dotcom/design-system
Vercel

Auto-deployment

Watches GitHub and deploys both sites automatically on every push.

  • Builds and deploys Storybook → design-system-iota-one.vercel.app
  • Builds and deploys website → robr0-ds.vercel.app
  • Live in under 60 seconds with SSL and global CDN

Take it with you

The whole system is open. If you want to apply this approach to your own project, three artifacts make it easy — drop them into your codebase or AI tooling and you have a working starting point.

Claude MD

The codebase context file Claude Code reads on every session. Project structure, token architecture, component anatomy, and the conventions a builder needs to extend the system without exploring. Hand it to any AI agent and it knows the rules.

Read Claude MD

Design MD

The design language in a single markdown reference — tokens, typography, colours, and every component spec. The source of truth for how the system looks and behaves, written so a human or a model can pick it up cold.

Read Design MD

Skills

Reusable Claude Code skills — scaffold a new component, audit token usage, run a heuristic review, ship a pre-deploy check. Each one is a markdown file you can download and drop into .claude/skills/ on your own project.

Browse Skills