Your codebase,
as a design canvas
Playground connects to your codebase so the whole product team can see every flow, iterate on real components, and hand off changes as a diff engineers already understand.
-
[ 01 ] See your
codebase -
[ 02 ] Iterate on
a canvas -
[ 03 ] Learns your
design decisions -
[ 04 ] No- ghost+ primary+ size lg
handoff
Every screen and state,
laid out for you
Playground reads your components and draws the map you never had time to make — each flow beside the next, each state where you can see it.
- Real components, not screenshots
- Every state — loading, empty, error
- Always in sync with your code
Explore ten versions
before lunch
Grab any component and drag to duplicate. Ask for a change in plain words. Keep what works — none of it touches production.
This is the real editor. Grab something and move it.
play with me
It already speaks
engineers' language
No redlines, no "final_v3." Every change comes out as a clean diff against real components — props, tokens, and file paths your engineers already recognise.
- Outputs a diff — variant changes, prop updates, token swaps
- File paths included — engineers know exactly what to touch
FAQs
Do I have to look at the code?
No. Playground renders your real components on a canvas, so you edit and iterate visually. The code stays under the hood until you hand off.
How does it read my codebase?
Run npx design-playground@latest in your project. Playground finds your components and lays out every flow and state automatically.
What does hand-off actually produce?
There's no separate hand-off step. Every change comes out as a clean diff against your real components — variant and prop changes, token updates, and file paths your engineers already recognise.
Does my code leave my machine?
Playground runs locally. Your codebase stays on your machine; nothing is uploaded to run the canvas.
Which frameworks are supported?
Next.js today. Vite coming soon. We can customize Playground for your codebase — email us at team@aiverse.design.