Design System

Your tokens. Their hands.

One design language across every render — yours by hand, theirs by the dozen. Same tokens, same composition, same vocabulary.

Open the workspace Read the docs


  ┌─────────────────────────────────────────────┐
  │           prototyper-tokens.css              │
  │   --background  --surface  --primary        │
  │   --shadow-surface  --ease-v0  --radius     │
  └──────────────────┬──────────────────────────┘
                     │ @theme
                     ▼
  ┌──────────────────────────────────────────────┐
  │         Tailwind CSS v4 (JIT)                │
  │   bg-surface  text-foreground  shadow-raised │
  │   ring-foreground/10  ease-v0  duration-200  │
  └──────────┬───────────────┬──────────────────┘
             │               │
             ▼               ▼
  ┌────────────────┐  ┌────────────────┐
  │  prototyper-ui │  │  Your App      │
  │  Button, Card  │  │  Custom comps  │
  │  Menu, Dialog  │  │  Same tokens   │
  └────────────────┘  └────────────────┘

prototyper-tokens.css

/* Surface hierarchy */

--background: 96.5% 0.003 286;

--surface: 100% 0 0;

--surface-secondary: color-mix(in oklab, ...);

/* Usage in components */

className="bg-surface ring-1 ring-foreground/10"

className="shadow-raised hover-only:hover:shadow-overlay"

Tokens, not magic numbers.

Colors, shadows, radius, spacing — defined once in OKLCH, propagated everywhere, dark mode for free.

50+ accessible components.

Button to DataTable. All Base UI, all typed, all already in your library when the agent reaches for one.

Composable primitives.

Small, well-tested building blocks. The agent doesn't reinvent — it composes.

Agent-readable.

The agent sees the same tokens, the same components, the same naming. Output blends into the rest of your app.

Start building with Prototyper.

Open the workspace. Drop in an idea. Let an agent take the first shot. Ship the same artifact you sketched.

Start for free Open the workspace