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

evancaine 3d 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.

SirHound 3d ago

I did have a video on for launch but removed it when I added CSS Studio itself to the page (check top right). Perhaps it can make a return though!

bossyTeacher 3d ago

You need a video. Time is money

SirHound 3d ago

It's up!

serial_dev 3d ago

I’m on mobile, I’d much rather see some visual demo, ideally video, explaining your product in 60 seconds or less than try to tap around in the live demo.

SirHound 3d ago

It's a great point, I added the video back

sassymuffinz 3d ago

I'll be honest I didn't notice it sitting up there in the top right until I saw this message, it's in that area I ignore where people usually put social logos etc.

Anyway - question on the software itself, how would CSS changes feed through to the code? Inline CSS, utility classes if you're using a framework? Does it support using something like Vite for compiling?

SirHound 3d ago

All the technical decisions are yours. If you defined a padding (for instance) in a stylesheet, this is where updates will be applied. Likewise if it was on a style attr or elsewhere.

gianthard 3d ago

The video better be visible on mobile. I read HN on phone.

SirHound 3d ago

It's a fair point - deployed

BloondAndDoom 3d ago

“Don’t show them the keys of the piano, play the moonlight sonata. “

The key to a good demo is not listing or even showing the features, it’s showing them what they can accomplish with it. You need to inspire your prospects.

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.

SirHound 3d ago

I suspect its the color scheme? I wanted something to contrast with but pair with https://motion.dev but I know AIs pump out a lot of purple. I'm mostly a developer though so my design skills are a little rusty still!

Motion — JavaScript & React animation library

Motion (prev Framer Motion) is a fast, production-grade web animation library for React, JavaScript and Vue. Build smooth UI animations with examples, tutorials, and a tiny footprint.

BloondAndDoom 3d ago

Motion page looks much better, but other than purple I’d focus on design more, even to suggest hire a designer on project basis, let them make a stunning landing page. If you are selling a design tool (arguably CSS is somewhere in between) then you have to show your mastery of the domain. —assuming you are serious and it’s not a weekend project

duskdozer 3d ago

A big smell and my biggest pet peeve with them is the excessive, custom javascript animations that don't respect my settings to disable animations and which break through my own extra defenses, all tucked away in some webpack chunk I'd have to debug to get rid of. As soon as I see above-the-fold text fade and slide in I close the tab to spare my head, stomach, and CPU.

BloondAndDoom 3d ago

This was my biggest take, when I see someone selling a design tool that’s looks very much like designed by LLM, that’s a red flag. I got the exact same vibe, no idea whether it was a prompt or a detailed design, but right now it looks like output of a prompt and not hand crafted.

Given the whole idea is selling a design tool that’s looks very gives user a sense of they can control details, this page doesn’t deliver that at all. I’d focus on the design, because that’s the biggest demo of your product maybe even bigger than the demo.

Imagine a unique website that users looks and feel like I wish this was my website. A rare instance visual design actually matters for a startup :)

SirHound 2d ago

I think it's a good point. I'm going to spend a bit more time on the design - and if sales continue well then I can look at getting a designer.

Citizen_Lame 2d ago

The irony.

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

SirHound 3d ago

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.

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)

anonymous344 2d ago

wysiwyg and wordpress gui editors: set width/height of an element by pixels.
Me: no thank you, i need col-sm-12 and col-md-6 like in bootstrap... actually i use bootstrap 90% of my projects

I imagine it would be harder to make a design product that doesn't use pixels but it needs to be done - because that's the right way to make CSS

lapinovski 2d ago

you should definitely highlight the edit button on the right corner. until I've noticed it I was quite skeptical. after playing around - immediately sold (using desktop btw)

congrats on launch, nice product. Hope this would be a thing.