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

Posted by SirHound 10 hours ago

Show HN: CSS Studio. Design by hand, code by agent(cssstudio.ai)

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.

111 points | 82 commentspage 2

anonymous344 5 hours 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

ape4 5 hours ago|

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

crepuscularJ 7 hours 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?

SirHound 7 hours ago|

If you make the page small and then make some changes, it knows you're doing so in a small breakpoint. So if you have mobile-specific styles and you edit some - these are going to remain mobile specific. I am working (right this second) on a canvas mode where you can see breakpoints side by side which will make this a bit easier than physically making your screen small.

bigblind 8 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.

SirHound 8 hours ago|

That's a great idea, I'll look into doing a more long form demonstration

megaman821 8 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?

SirHound 8 hours ago|

You can apply the token directly but of course this isn't as nice as freeform editing. I suspect the pixel value would be used because the intention probably isn't to change the root variable (as there's an explicit option for that). I'm thinking of making a token mode where we limit you to the values of available CSS variables or Tailwind classes (perhaps unless you hold shift or something)

my_throwaway23 3 hours ago||

WYSIWYG, huh? I'm certainly not against the idea, and the editor seems to work well enough (given the 3 minutes I spent on the landing page).

I'm not so sure why it needs an LLM in-between the source files and the editor though...

dgb23 7 hours 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?

SirHound 7 hours ago|

It only knows about changes from the tool. I started this project by attempting to listen to changes from DevTools via a Mutation Observer but it was extremely noisy on many sites.

I haven't added display and visibility yet, it's on the list, but you would simply toggle them back. There is an element selector sidebar so they're not going anywhere.

ihycjnigghjljb 6 hours ago||

Look, if you’re making a design tool, the absolute very least that you can do to show that you know what makes a design tool good is design a good website for it.

LLMs already carry (rightfully, I might add) a “laziness” aspect to them. You’re doing yourself and your work a major disservice by making this website not only generic as hell, but inconsistent and downright broken on mobile as well.

hirako2000 8 hours ago||

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

Sure AI can do styling though.

latexr 8 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.

hapidjus 8 hours ago||

If you go to the order page its 79€ with VAT. Not sure why its shown sans VAT on the page. Also the price is 99$ on page load but updates fast.

SirHound 8 hours ago||

Was displaying without tax - fixed now

latexr 8 hours ago||

The team pricing still calculates wrongly (63*5 is 315, not 316).

SirHound 8 hours ago||

Just put out a fix for this, thanks

rafaelmn 8 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 ?

SirHound 8 hours ago|

Yes - if your agent can edit your codebase it will put the changes in the right place.

More comments...