Mastodawn

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

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.

https://cssstudio.ai

CSS Studio. Design by hand. Code by agent.

A visual CSS editor in your browser. Adjust styles with sliders and pickers, and your AI agent writes the changes to source.

CSS Studio

Show thread

mpeg 3d 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

Show thread

SirHound

Thanks for your feedback!

I just pushed a video to the homepage, there was already a live demo though, it was actually quite simple to implement (mostly gate a few things). There was a bit of a fear that agent somewhere out there would still be listening though...

I think a diff is an excellent idea. Perhaps with the ability to remove specific changes and switch before/after.

In terms of Tailwind, I'm thinking about a token/strict mode which would detect Tailwind classes and CSS variables. It wouldn't expose these in the sense you had to apply each one manually, but if you were for instance changing padding, it would snap between all your pre-defined tokens.

For the draw feature I think I'm just heavily Framer-pilled and it lets you pre-determine a rough width and height within a stack. But perhaps there's space for a click-to-add also with minimum dimensions.

Show thread

mpeg 3d ago

Sorry I'm blind! I completely missed the live demo. I think because it's on the top right corner I instinctively ignored it.

Maybe could have a "Try live" button that sort of nudges you to it (could open the sidebar with the page structure or something to make it obvious you're in "edit mode") if other people struggle to find it

Re. diff view, yes, I think it's the kind of thing that would give reassurance to users that they can play around with it without breaking anything, otherwise I feel I'd be a bit scared of accidentally touching something that shouldn't be changed (especially as you might experiment a bit before you land on the right style to change)