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?
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.
I think it would be preferable if the agent figured out the right place to do this.
When I debug CSS or toy with styling, I will often edit the element styles directly but naturally I would like them to be applied within classes the element has, or maybe add a new utility. Never would I put styles on the element.
I suppose that in the same fashion, if your project uses tailwind or something, you will edit styles manually but when you get it right you want them to be added as “whatever the code uses”
Sorry, I mean to say the agent does figure out the right place, based on your technical decisions. So if you want to use classes it isn't going to start adding style attributes. The skill contains instructions about following the existing setup within the codebase.
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.
bro listen to the guy above you. You need the lowest friction way to help users visualize what this is. By low friction I mean the exact way tik tok gets people to watch thousands of videos for hours. Only one click and zero brain power.
I wanted to buy this. I tried the demo, but then I hit a wall of no agent connected and gave up and came here looking for reviews on whether this is good or shit.
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.
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 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
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)
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?
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.
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.
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?
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)
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 ?
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.
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.
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.
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!
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?
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.
I think it would be preferable if the agent figured out the right place to do this.
When I debug CSS or toy with styling, I will often edit the element styles directly but naturally I would like them to be applied within classes the element has, or maybe add a new utility. Never would I put styles on the element.
I suppose that in the same fashion, if your project uses tailwind or something, you will edit styles manually but when you get it right you want them to be added as “whatever the code uses”
Sorry, I mean to say the agent does figure out the right place, based on your technical decisions. So if you want to use classes it isn't going to start adding style attributes. The skill contains instructions about following the existing setup within the codebase.
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.
It's a great point, I added the video back
The video better be visible on mobile. I read HN on phone.
It's a fair point - deployed
You need a video. Time is money
It's up!
bro listen to the guy above you. You need the lowest friction way to help users visualize what this is. By low friction I mean the exact way tik tok gets people to watch thousands of videos for hours. Only one click and zero brain power.
I wanted to buy this. I tried the demo, but then I hit a wall of no agent connected and gave up and came here looking for reviews on whether this is good or shit.
This launch feels weird. Every blog post is dated Nov 25, 2025 (~6 months ago), and no events since. What's up?
What blog posts?
There's a 'Blog' link in the footer.
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.
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 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
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)
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?
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.
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.
That's a great idea, I'll look into doing a more long form demonstration
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?
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)
I find AI unable to do CSS. Perhaps because it's cascading.
Sure AI can do styling though.
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.
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.
Was displaying without tax - fixed now
The team pricing still calculates wrongly (63*5 is 315, not 316).
Just put out a fix for this, thanks
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 ?
Yes - if your agent can edit your codebase it will put the changes in the right place.
I'm definitely the audience for this - and +1 to the "show video of it in action" comments...
Video added
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.
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.
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.
awesome, can imagine it's a game-changer in frontend dev agentic development