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

Francesco, a solo bootstrapped design engineer, launched Overlay, a VS Code extension UI editor that renders real React components and CSS tokens on a DOM canvas inside the IDE, enabling rapid design exploration and AI-assisted development via MCP. The tool targets developers who prefer prototyping in code over Figma, and is available at overlay.studio.

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 https://overlay.studio Quickstart guide: https://docs.overlay.studio/quickstart https://docs.overlay.studio/quickstart Comments URL: https://news.ycombinator.com/item?id=49256300 https://news.ycombinator.com/item?id=49256300 Points: 1 Comments: 0