CSS Studio. Design by hand, code by agent
Get picks like this daily. Today's launch numbers, the top launches, AI and tech news, and a daily opportunity pick, straight to your inbox.
Want to reach these readers? Sponsor an issue.
Hi HN! I've just released CSS Studio, a design tool that lives on your site, runs on your browser, sends updates to your existing AI agent, which edits any codebase. You can actually play around with the latest version directly on the site.Technically, the way this works is you view your site in dev mode and start editing it. In your agent, you can run /studio which then polls (or uses Claude Channels) an MCP server. Changes are streamed as JSON via the MCP, along with some viewport and URL information, and the skill has some instructions on how best to implement them.It contains a lot of the tools you'd expect from a visual editing tool, like text editing, styles and an animation timeline editor.
HN · launched Apr 9, 2026 · 175 upvotes (top 5%) · 0 views
Niche: ai ui and graphic design tools · 130 launches, 15 in the last 7 days ▲ +36% · Explore this niche →
Category and tags
- Horizontal
- Dev tools
- Developer
- AI feature
- Commercial product
Visit website ↗ Source listing ↗
More like this: all 130 launches in ai ui and graphic design tools →
Could you build this?
Partial A visual CSS tweaking overlay is easy, but reliably mapping in-browser DOM element manipulations back to arbitrary local source code (JSX, CSS modules, Tailwind) via an agent daemon requires intricate AST and dev-server integration.
What it would actually take: The architecture pairs an in-browser devtool runtime with a local Node.js daemon and LLM/agent runner. The hard part is the bidirectional source-mapping: detecting whether a styled component originates from Tailwind classes, inline CSS, or external stylesheets, converting visual slider deltas into exact AST modifications (e.g. via Babel or PostCSS), and instructing the AI agent to edit specific source files without breaking layouts.
Discussion
20 comments analyzed.
Competitors mentioned: Cursor and Windsurf (required dependencies), Figma, Haiku (Claude model), GPT, Gemini, Claude (AI models)
Concerns raised: Pricing ($99) too steep compared to Figma full seat ($160), Requires Cursor or Windsurf to work, Website design doesn't appeal to designers, looks like generic SaaS template, Video marketing ineffective - poor music, doesn't show product clearly, No noscript support making product unclear without JavaScript
Feature requests: Allow resizing/moving elements with agent-generated CSS (margin, padding, positioning), Improve visual communication on landing page for designer audience, Rethink pricing structure to be more competitive
Competitors
Other products that read as similar to this one : 479 launches clear the similarity bar, closest 8 shown.
Attention rank: #79 of 480 (itself plus its competitors, highest first, normalized so YC and Product Hunt are compared fairly).
Launched 154 days after the earliest competitor.
- WeWeb MCP · ph · 2026-09-22 · 107 upvotes · similarity 0.50
- Get your coding agent off ~2019 JavaScript, onto modern web primitives · hn · 2026-11-10 · 443 upvotes · similarity 0.48
- Huddlekit · ph · 2026-10-13 · 8 upvotes · similarity 0.46
- Inspo by Context.dev · ph · 2026-11-10 · 73 upvotes · similarity 0.46
- Awesome MCP Servers · ph · 2026-10-17 · 1 upvotes · similarity 0.45
- onsystem · ph · 2026-10-23 · 3 upvotes · similarity 0.45
- Usable Browser Agent · ph · 2026-09-08 · 2 upvotes · similarity 0.45
- AgenticWebTeam · ph · 2026-10-29 · 2 upvotes · similarity 0.45
The niche, labels, vibe code rating and competitor comparison on this page are analysis by Nicheloom. If you use them, please credit nicheloom.com. How you may use our data.