HomeAboutComponentsFoundations

About robr0 DS

Figma

Design system infrastructure powered by AI tooling

I built a design-to-code pipeline that keeps design and development perfectly in sync. Everything starts in Figma where I define design tokens as variables and build components. Claude Code connects to Figma via MCP, reads the design data directly, and generates production-ready React components with token-based CSS and Storybook documentation. When I push changes to GitHub, Vercel automatically deploys both the component library (Storybook) and this website within 60 seconds. Design changes flow straight to production with zero manual translation or deployment steps. It's infrastructure that lets one person maintain design system quality that normally requires a full team.

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