Top
Best
New

Posted by SirHound 11 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.

126 points | 88 commentspage 3
rafaelmn 10 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 10 hours ago|
Yes - if your agent can edit your codebase it will put the changes in the right place.
my_throwaway23 4 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...

ramon156 10 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.
SirHound 10 hours ago||
With Figma Make, that's essentially doing the same thing as your agent, just with a visual sandbox. i.e building something from scratch.

CSS Studio leverages your existing agent - so it assumes you've already done this part. Where this comes in is when you want to design not just using chat (although it does also support chat). Drawing new elements, visual style controls, inline content editing, animation timeline editor and preview. Then once you're done you can send those changes to your agent with a click (or turn on auto-apply)

It does have some similarities with Figma's Code Layers in that you can draw a new element on the page, click chat, and tell the agent to generate x inside.

steve-atx-7600 10 hours ago||
I get a lot out of giving Claude screenshots of a baseline of what I want and describing how my goal design differs from it. Output is a single page apps where that I can use for high fidelity prototypes. Then, I have Claude implement the final version of this iteration into our product single page app repo (following existing patterns we’ve established for long term maintenance). For more throwaway code (maintenance not important, mostly static content), our marketing team is able to do this to create content that they put into webflow.
tipiirai 9 hours ago||
This launch feels weird. Every blog post is dated Nov 25, 2025 (~6 months ago), and no events since. What's up?
SirHound 9 hours ago|
What blog posts?
TehCorwiz 9 hours ago|||
There's a 'Blog' link in the footer.
SirHound 8 hours ago||
Oh. Hmm. I suppose I shouldn't deeplink into the Motion website. I can see why this is confusing. Also, re the dates. Looks to be a Framer bug that I will contact them about. Thanks.
tipiirai 9 hours ago|||
The ones linked on the front page footer
SirHound 8 hours ago||
Fixed the dates, and actually removed the Motion deeplink as I can see it was confusing. Thanks
butterlettuce 6 hours ago||
I see a website in purple colors selling something, I buy
dmje 10 hours ago||
I'm definitely the audience for this - and +1 to the "show video of it in action" comments...
SirHound 10 hours ago|
Video added
dmje 6 hours ago||
Ta! Makes more sense now :-)
zghst 7 hours ago||
$99 dollars vs using Cursor/Windsurf?!
nc1zdev 9 hours ago||
awesome, can imagine it's a game-changer in frontend dev agentic development
65 6 hours ago||
Any website that isn't some landing page or basic blog is going to need human intervention in the code (craftsmanship, essentially). And any website that's a landing page or basic blog already has a million tools for GUI design.

I would be surprised if this takes off as site builders are already an incredibly crowded space.

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

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.

ape4 6 hours ago|
The music was trying too hard ;)
Yabood 3 hours ago||
I don’t know, I like it.
More comments...