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

I'll give my honest take, I think what you've done is taken dev-tools and given it a wrapper that most designers (including myself would love) I find myself in dev tools alot during QA refining the design, since rendering is never exact. And you've added MCP server integration which is great. But....
First 99$? that's steep my full seat of Figma is 160.0$, so I don't see the value. I do see the value in convienience so you may want to rethink the pricing structure. Second. It's a design tool, not SASS software, the website should speak to designers like me, not look like supabase. Great job, I wish you luck...ken. Kylex.io

I'm confused about what the AI is doing, since it seems like a WSYWIG site editor. The AI is just to apply the changes? Why not have the WSYWIG just apply it directly if that is how you build the site?

A bunch of comments are complaining about how it's crazy that this is $99 or that they'll vibe code a free version this weekened. I've tried to make a similar tool for myself that let's me change CSS values live without talking to the agent and it made me appreciate the hundreds of invisible details that figma, framer, paper, etc. get right when building a visual canvas editor. I spent 6 hours going back and forth with claude just to get the editor to feel somewhat usable for editing existing front end work.

I like this concept and it definitely fits current AI era. There’s still a lot of room for humans to clean up the kind of sloppy, AI-ish design that tools tend to spit out today. I’m sure that will keep improving, but for now you still need a human hand on it.I get that this tool is aimed at designers, but depending on how the features evolve I think it could pull in a lot more indie devs and similar folks too.

you should definitely highlight the edit button on the right corner. until I've noticed it, I was quite skeptical. after playing around - I'm immediately sold (i'm on desktop btw)congrats on launch, nice product. Hope this would be a thing.

The video was really good, and the UI looks fun too.If I understand correctly, is this not as useful for frameworkless html/css/js development? Since when you make edits using browser-built-in-devtools it can and does modify the actual css files (in-memory, of course) which you can use to copy-replace with entirely (assuming no build/bundling step aswell).If so and this allows you to use any framework and still have that kind of workflow, that's fantastic. Half the reason I don't like using frameworks is because I lose the built-in WYSIWYG editor functionality. Guess I'd still lose the usefulness of the built-in js debugger, tho :(

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.

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 classesI 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

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.

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.