Show HN: Overlay – Design with your React components and CSS tokens in your IDE

Hey HN, I'm Francesco. I've spent the last year building Overlay, a UI editor that runs inside your IDE and renders your actual React components (not a redraw of them), using your real CSS tokens.

I'm a design engineer and, especially with AI, I found myself spending more and more time in the codebase rather than in Figma. Trying out ideas in code with AI is a lot of fun, but there are specific moments where I need to sketch things out on a classical visual canvas. The problem is, when you work mostly with code and your codebase moves faster than your Figma library, stopping to import your latest components into Figma is an energy-killer.

So I built Overlay to get quick access to my React components on a canvas. It's a VS Code extension, so opening the canvas takes seconds. Your components are already there, and you're designing with the real thing: the editor is a normal DOM document, not a WebGL canvas. From there, working with AI (via MCP) is also a breeze. The agent already has access to your codebase, so it knows how everything works and can match existing visuals when creating new ones. And because the canvas is already rendering real React components, going from an idea back into the codebase takes seconds.

If you're on a large team where design already happens in Figma and gets handed off, Overlay probably isn't going to displace that. It's aimed at the exploration part (I'd rather have a rough prototype than a polished mockup) and at people who ship their own stuff, where the round trip to Figma is pure overhead.

I'm solo and bootstrapped, building this around a day job and a small kid, so it's rough in places. If you try it and hit any issue at all, tell me here or at francesco@overlay.studio. I ship most days of the week.

Thanks!

Website: https://overlay.studio

Quickstart guide: https://docs.overlay.studio/quickstart