Show HN: CSS Studio. Design by hand, code by agent

cssstudio.ai

66 points by SirHound 4 hours ago


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.

evancaine - 3 hours ago

Congrats on the launch.

Now put a giant, 30 second video of the product being used, directly below "Design by hand.Code by agent."

No one is clicking Get Started or Buy Now until they know what the product is, and a 30 second video is 100x better than any amount of text.

tyleo - 3 hours ago

The landing page feels tacky to me. It has a similar style to what I’ve seen LLMs churn out across the internet. Unclear if it’s actually generated or not but it’s at least in that style.

For a design product, I’d expect it to have more personality.

I’d recommend reving the landing by hand. The sense I get is that this tool can make a site that looks like everyone else’s. It would be neat to see something unique.

mpeg - 2 hours ago

Motion is an excellent library so I gave this a go on a prod site. Some feedback

- I LOVE the concept, no clunky SaaS, you add the package and start it on your dev server and it just works. It seamlessly did with my vite based build.

- Needs a diff view which tells me what the agent is going to change when I publish my changes, right now it's a bit scary to use without it (not sure if it does once you try to publish changes, I didn't get that far in the process)

- I don't see the point of the "draw" feature. Maybe it's because I envision this kind of tool being used so that non-technical members of the team can make small design changes without dev support, and not as a way to design from scratch, but maybe you have a use-case for it.

- Integration with tailwindcss would be a killer feature, this particular project uses tailwind so all the styles in the style view show as the default ones but of course they're being applied via classes. You could detect tailwind classes and either show them separately or resolve them and show what they do in the styles view, then on publish you'd tell the agent to edit using tailwind classes

I agree with what others have said, a video or even better a live demo would be great. A demo would be extra work but would be super cool, as a stopgap you could have a stackblitz demo maybe.

The client-side injected js -> mcp flow is brilliant though. I might have to steal that idea for some projects I'm working in, I can imagine a lot of scenarios where it would make a great interface

Vachyas - an hour ago

The video was really good, and the UI looks fun too.

If I understand correctly, is this not as useful for frameworkless html/css/js development? Since when you make edits using browser-built-in-devtools it can and does modify the actual css files (in-memory, of course) which you can use to copy-replace with entirely (assuming no build/bundling step aswell).

If so and this allows you to use any framework and still have that kind of workflow, that's fantastic. Half the reason I don't like using frameworks is because I lose the built-in WYSIWYG editor functionality. Guess I'd still lose the usefulness of the built-in js debugger, tho :(

codetiger - 2 hours ago

Unlike other comments, for me the experience on the product marketing worked well and straight forward. After reading the title and landing on your homepage, I had the feeling that this is yet another product claiming WYSIWYG like editor for the web claims on making CSS editing easier. And yes the product achieves same as I thought. Video confirmed it, and homepage live demo confirmed it again. Surprisingly the claim feels true, this time. It feels natural and UX feels great.

dgb23 - an hour ago

When I apply display:none, how would I get back the element without using the browser console? If I change things from the console, does your tool watch the changes via mutation observer or does it only know about the changes from the visual tool itself?

bigblind - 2 hours ago

This looks interesting! I understand not wanting to put out a narrated tour as the video, but being visually impaired, i find video demos without narration, that constantly move around/focus on different things hard to follow. It still might be worth putting a short screencast with you actually walkign through usijng the product and narrating it.

megaman821 - 2 hours ago

I was looking at this yesterday and wondering if it would play nice with design systems. AI loves making localized changes and when playing around with spacing I tend to just bump up and down values until they look close, so when this sends over the changeset, what are the chances the spacing token is going to be used rather than some exact pixel value?

hirako2000 - 2 hours ago

I find AI unable to do CSS. Perhaps because it's cascading.

Sure AI can do styling though.

crepuscularJ - an hour ago

I work in an agency that makes flashy marketing sites. My biggest concern with tools like this is always how it works responsively across viewports. I can make a change in dev tools and it can translate to my code, but it might not work at all when I drag the viewport up and down. Can you comment on how this product works on that problem?

tipiirai - an hour ago

This launch feels weird. Every blog post is dated Nov 25, 2025 (~6 months ago), and no events since. What's up?

latexr - 2 hours ago

64.23€ and 256.92€ are strange numbers. The latter looks like bad math, since the text suggests it’s 51*5, which would be 255.

Of course you can charge whatever you like, but I’m curious as to the reasoning behind those specific numbers.

rafaelmn - 2 hours ago

Does this work with CSS in JS stuff and CSS frameworks - like if I was using Chakra would this be able to edit the site elements and have the agent reverse map to where the style attributes need to go ?

ramon156 - 3 hours ago

I'll be the boogeyman, how does this compare to Figma's AI Design tool? I've had an easy experience with it, although it's just a GPT wrapper.

dmje - 2 hours ago

I'm definitely the audience for this - and +1 to the "show video of it in action" comments...

nc1zdev - 2 hours ago

awesome, can imagine it's a game-changer in frontend dev agentic development

thrownaway561 - an hour ago

"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."

I didn't see anything like that in the video you posted on the homepage. Personally I found the video VERY confusing on what exactly the benefit of the product is and actually how to use it. The music also was annoying and made it hard to focus on the actual video.

You might want to redo it and concentrate on explaining exactly what the benefits of your product are over the 50+ other products just like this one.

Manchitsanan - 2 hours ago

[dead]

volume_tech - 2 hours ago

[dead]