UI Playpen

A design system, by gut feeling

A or B?
That's the whole job.

UI Playpen shows you two versions of the same screen. You keep the one you like. A few picks later, you have a finished UI, with colors, type, shape and spacing already working on every page you need.

Make your first pickWatch a session

Free · No sign-up · No hex codes · Nothing to install

Which do you like better?Same screen. Two takes. Keep one, and a new take steps in.
Two options.Never a blank canvas. Never a settings panel.
One question.Which do you like better? That's all we ever ask.
A finished UI.Every pick lands on every page, ready to ship.

How it works

You don't need to speak design. You just need taste.

Aor B?

That's the whole job. Six picks, and you have a UI.

Yours to keep

Change your mind. Then take it to code.

  • Nothing is lockedJump back to any pick and see the other option again. Your other choices stay put.
  • Fine-tune if you feel like itWant a deeper shade or a different font? Change one value. You never have to.
  • Download and drop inExport your system as CSS variables or JSON, or as files your AI coding tools can follow.
  • Private by defaultEverything stays in your browser. No account, no upload, no waiting.
design-system.cssCSSJSON
:root {
  --ds-color-background: #ffffff;
  --ds-color-foreground: #222222;
  --ds-color-accent: #e31c5f;
  --ds-font-display-family: "Bricolage Grotesque";
  --ds-font-body-family: "Onest";
  --ds-button-fill: #e31c5f;
  /* …and 60 more, all from your picks */
}
your-project/6 files
  • DESIGN.mdAny agent
  • AGENTS.mdCodex, Windsurf, Jules & more
  • .claude/rules/design-system.mdClaude Code
  • .cursor/rules/design-system.mdcCursor
  • .github/instructions/design-system.instructions.mdGitHub Copilot
  • .claude/skills/design-system/SKILL.mdAgent skill

+ instructions to paste into ChatGPT, Claude, Lovable, Bolt, v0 and Replit

Built for building with AI

Your agents get the memo.

Along with the code, you get your whole design system written out for the AI tools that build your app. No more guessing at hex codes or a purple gradient nobody asked for.

  • A design system, written downEvery color, font, button, card and spacing step, with what each one is for. The doc a design team spends weeks on, made from your picks.
  • In the files your agent already readsAGENTS.md, DESIGN.md, Claude Code and Cursor rules, Copilot instructions and an Agent Skill. Drop them in and they load on their own.
  • On-brand from the first promptYour agent builds with your tokens instead of inventing colors and fonts, so the next screen it makes matches the last.

You already know what you like.

Let UI Playpen turn it into a UI. Your first pick is one click away, and your last one is only a few more.

Start picking, it's free

No sign-up · Saved in your browser · See your projects