A design canvas for your code

AI coding tools have gotten remarkably good at generating UI. Tools like Cursor and Claude can produce a polished interface from a single prompt. You describe a component, hit enter, and seconds later you have JSX, Tailwind classes, even motion states (to some extent).

But there’s a subtle limitation.

They generate one version of your UI at a time.

And when you’re designing — especially as a designer who codes — one version is never enough. Which is what got me thinking about bringing the power of orchestration to the new "designing in code" process.

The single-output trap

When working inside code-first IDEs, you’re bound to the current UI state. You can rewrite it or improve it, but can't really explore variations. You can't compare. You can make the button "more playful" and the LLM will change the button but what if you just want to explore different levels of playfulness side by side?

Do you keep recreating it, linearly?

One way is to use the Figma MCP — recreate the coded component in Figma, edit it, try different layouts and push the final one back. But you lose out on the accuracy. What if, instead, you could bring the same Figma capabilities into your IDE?

A different approach

That's what we've done for our own projects. As a designer, I want to be close to code but not think about the code. It's essentially a new interface layer for designers. We've created a playground that lives on localhost as /playground.

Cursor built the design editor panel. We've built the playground which has only one purpose: to explore variations.

It's a design canvas that you can drop in any project.

You can add any component in the playground, ask your own LLM of choice for variations and they appear as separate instances on the canvas, side by side. Not in a chat thread. Right there, spatially.

Best of all you can create variations of variations. There's no end.

Closing thoughts

Agents are excellent at generation. What they've been missing is a surface for exploration. The playground gives them that surface, and variation prompting gives you the design workflow.

The result is something that feels like thinking out loud and exploring parallel directions, which is what design is.

⭐ We're now releasing the v1 publicly for you to give it a try. Just run:

npx design-playground@latest

And yes, it's open source. So you can just download and drag-drop it into your code (documentation).