alt.hn

4/9/2026 at 11:23:31 AM

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

 https://cssstudio.ai

by SirHound

4/9/2026 at 12:02:07 PM

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.

by evancaine

4/9/2026 at 12:07:13 PM

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!

by SirHound

4/9/2026 at 12:25:31 PM

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?

by sassymuffinz

4/9/2026 at 5:52:50 PM

I agree, I almost missed it and left the website.

Too bad because once I saw it and tried it out, that's when I thought the experience feels slick and polished.

I think you shoud consider either having an onboarding that highlights it or put a giant arrow on your landing page background, between the video and the bar, with a "Try it on this page"

by K3UL

4/9/2026 at 12:46:19 PM

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.

by SirHound

4/9/2026 at 1:10:12 PM

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”

by yoz-y

4/9/2026 at 1:38:40 PM

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.

by SirHound

4/9/2026 at 3:44:27 PM

So if I’m using Tailwibd let’s say, and then I adjust the padding on an element does it update the HTML (or does the agent update my html) with an alternative padding class like p-4 or p-[11px] or something if nothing matches?

by sassymuffinz

4/9/2026 at 12:17:14 PM

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.

by serial_dev

4/9/2026 at 12:39:13 PM

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

by SirHound

4/9/2026 at 1:44:17 PM

“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.

by BloondAndDoom

4/9/2026 at 12:34:06 PM

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

by gianthard

4/9/2026 at 12:38:52 PM

It's a fair point - deployed

by SirHound

4/9/2026 at 12:09:34 PM

You need a video. Time is money

by bossyTeacher

4/9/2026 at 12:39:00 PM

It's up!

by SirHound

4/9/2026 at 1:23:05 PM

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.

by threethirtytwo

4/9/2026 at 1:41:33 PM

Yeah about an hour before you sent this I updated the homepage with a video.

by SirHound

4/9/2026 at 7:29:23 PM

Unfortunately, that video does not explain anything at all. I now know that the product can be used with a mouse, that I can select things and set some properties. Who is it for? What does it do? Why should I use it?

by andreasley

4/9/2026 at 5:00:51 PM

This comment was surprising to me.

I never considered that people want to watch a video in this day and age when they can try the real thing.

Perhaps I've fallen into that trap with the product [1] I'm building. I have a "Live Demo" button on the landing page and thought that would be enough? I'm going to reconsider...

1. https://dbpro.app

by upmostly

4/9/2026 at 7:19:26 PM

Perhaps it depends on the product, but interacting with demo almost certainly requires more effort than to watch someone else do a demo.

As for me, I’d like to watch a short clip (or at least see screenshots) before I try to demo anything.

by jaredklewis

4/10/2026 at 6:47:30 AM

I added an interactive demo to my product's landing page [1], thinking people would prefer that over yet another product video.

However, your comment hit me... :-) I'm going to record a video!

[1] https://seaquel.app

by mikenikles

4/9/2026 at 8:37:14 PM

TBH that part of your landing page exhibits some confusing UX. Perhaps it's just me but when I see a UI image with a play button I assume that clicking it is going to play a video, not redirect me to a login page.

by avtar

4/9/2026 at 9:14:40 PM

Trying > video > torture >> having to sign up to try.

by TeMPOraL

4/9/2026 at 6:54:45 PM

I think there’s a big difference in commitment between the level of friction in signing up for a service and spending a couple of min on orienting myself and clicking play and watching the happy path go for 30s.

by noodlesUK

4/9/2026 at 7:14:50 PM

Very cool app. How do you feel it compares to something like TablePlus?

by sebmellen

4/9/2026 at 11:51:12 PM

It’s a design tool. Why communicate it with text?

by cush

4/9/2026 at 11:50:23 PM

Seriously though. And this is a design company?

by cush

4/9/2026 at 12:02:09 PM

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.

by tyleo

4/9/2026 at 1:48:02 PM

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 :)

by BloondAndDoom

4/9/2026 at 2:31:39 PM

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.

by SirHound

4/9/2026 at 3:52:58 PM

The irony.

by Citizen_Lame

4/9/2026 at 5:28:54 PM

What irony? This is a design tool, it does not make you good at design.

by Dansvidania

4/9/2026 at 8:18:46 PM

Design is one one those word with hundreds meanings. It seems there’s a confusion here between "art director" and "UI crafter".

by aziaziazi

4/9/2026 at 12:09:47 PM

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!

by SirHound

4/9/2026 at 1:52:59 PM

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.

by duskdozer

4/9/2026 at 1:50:09 PM

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

by BloondAndDoom

4/9/2026 at 12:50:24 PM

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

by mpeg

4/9/2026 at 12:54:07 PM

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.

by SirHound

4/9/2026 at 12:56:03 PM

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)

by mpeg

4/9/2026 at 8:54:21 PM

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?

by naet

4/9/2026 at 5:56:55 PM

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.

by itsevrgrn

4/10/2026 at 12:49:33 AM

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

by kylex-ken

4/9/2026 at 1:51:16 PM

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 :(

by Vachyas

4/9/2026 at 1:56:31 PM

Yeah I mean you can basically achieve this set up even with frameworks, if you're using stylesheets, but it's the copy/pasting and finding source code that is usually the pain. With this you just press apply (or enable auto-apply) and your agent gets to work. You can also edit the content, add/remove/reorder elements etc, I don't know how good the browser dev tools are at writing all that back though.

by SirHound

4/9/2026 at 4:12:16 PM

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.

by lapinovski

4/9/2026 at 5:38:43 PM

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.

by unvalley

4/9/2026 at 1:11:29 PM

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.

by codetiger

4/9/2026 at 1:42:52 PM

Glad you enjoyed it! Thanks for the feedback. In fairness some of the the things like a video on the homepage are there as a response from initial comments in this thread.

by SirHound

4/9/2026 at 1:00:06 PM

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.

by bigblind

4/9/2026 at 1:05:43 PM

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

by SirHound

4/9/2026 at 1:33:19 PM

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?

by crepuscularJ

4/9/2026 at 1:40:36 PM

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.

by SirHound

4/9/2026 at 12:51:53 PM

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?

by megaman821

4/9/2026 at 12:57:18 PM

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)

by SirHound

4/9/2026 at 1:47:56 PM

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?

by dgb23

4/9/2026 at 1:59:47 PM

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.

by SirHound

4/9/2026 at 3:48:46 PM

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

by anonymous344

4/9/2026 at 4:19:44 PM

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

by ape4

4/9/2026 at 5:44:42 PM

good idea. will vibe code a free alternative this weekend.

by Polarity

4/9/2026 at 6:46:22 PM

Come back on Monday with a link.

by Yabood

4/9/2026 at 8:15:45 PM

Can't tell if this is a joke comment, or a "why does FB have thousands of engineers, I could code it in a weekend!"-style comment, modernized for the era of AI.

by seattle_spring

4/9/2026 at 12:32:21 PM

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.

by latexr

4/9/2026 at 12:35:33 PM

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.

by hapidjus

4/9/2026 at 12:42:35 PM

Was displaying without tax - fixed now

by SirHound

4/9/2026 at 12:45:24 PM

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

by latexr

4/9/2026 at 12:49:45 PM

Just put out a fix for this, thanks

by SirHound

4/9/2026 at 1:01:00 PM

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

Sure AI can do styling though.

by hirako2000

4/9/2026 at 12:34:34 PM

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 ?

by rafaelmn

4/9/2026 at 12:39:40 PM

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

by SirHound

4/9/2026 at 3:06:38 PM

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.

by ihycjnigghjljb

4/9/2026 at 11:59:47 AM

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.

by ramon156

4/9/2026 at 12:06:12 PM

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.

by SirHound

4/9/2026 at 12:51:34 PM

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.

by steve-atx-7600

4/9/2026 at 9:15:32 PM

There is no <noscript> so I can even look at what this is.

by toastal

4/9/2026 at 1:36:29 PM

This launch feels weird. Every blog post is dated Nov 25, 2025 (~6 months ago), and no events since. What's up?

by tipiirai

4/9/2026 at 1:37:32 PM

What blog posts?

by SirHound

4/9/2026 at 1:38:49 PM

There's a 'Blog' link in the footer.

by TehCorwiz

4/9/2026 at 2:01:45 PM

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.

by SirHound

4/9/2026 at 1:39:39 PM

The ones linked on the front page footer

by tipiirai

4/9/2026 at 2:12:57 PM

Fixed the dates, and actually removed the Motion deeplink as I can see it was confusing. Thanks

by SirHound

4/9/2026 at 12:36:07 PM

I'm definitely the audience for this - and +1 to the "show video of it in action" comments...

by dmje

4/9/2026 at 12:39:48 PM

Video added

by SirHound

4/9/2026 at 4:05:22 PM

Ta! Makes more sense now :-)

by dmje

4/9/2026 at 5:48:17 PM

Did HN not prohibit/restrict A.I.-driven Show HN entries?

by supliminal

4/9/2026 at 9:29:05 PM

Hey OP I had this same idea a few years ago, but my implementation was dogshit! Check out the browser extension I made [0] - note it doesn’t work anymore, it worked with the first released Google Gemini Flash model ;)

Check out my browser extension, it may give you some more ideas?? My extension is from 2024

But basically it would let you screenshot a portion of your dev site, and auto get feedback from an LLM to improve the visuals.

My original idea was to have it modify your source code, but I lost interest in the project lol

Good luck with launch

[0] - https://chromewebstore.google.com/detail/design-copilot/hgal...

by purple-leafy

4/9/2026 at 4:11:24 PM

I see a website in purple colors selling something, I buy

by butterlettuce

4/9/2026 at 10:38:02 PM

Congrats on the launch. The video helps and the demo is pretty dialed in. Nice job.

by japaco

4/9/2026 at 6:14:16 PM

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

by my_throwaway23

4/9/2026 at 3:18:41 PM

$99 dollars vs using Cursor/Windsurf?!

by zghst

4/9/2026 at 1:03:07 PM

awesome, can imagine it's a game-changer in frontend dev agentic development

by nc1zdev

4/9/2026 at 10:27:41 PM

Terrible music on the video that didn't even show me anything about the product they want $99 for. Instant bounce.

by thekevan

4/9/2026 at 3:53:58 PM

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.

by 65

4/9/2026 at 1:51:57 PM

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

by thrownaway561

4/9/2026 at 4:18:23 PM

The music was trying too hard ;)

by ape4

4/9/2026 at 6:51:47 PM

I don’t know, I like it.

by Yabood

4/10/2026 at 4:34:59 AM

[dead]

by Shinobis_dev

4/9/2026 at 4:11:34 PM

[flagged]

by agomezc01

4/9/2026 at 1:15:28 PM

[dead]

by Manchitsanan

4/9/2026 at 1:16:25 PM

[dead]

by volume_tech

4/9/2026 at 4:13:02 PM

[dead]

by zephyrwhimsy

4/9/2026 at 6:38:21 PM

[flagged]

by alexbuilder

4/9/2026 at 6:39:03 PM

[flagged]

by alexbuilder

4/9/2026 at 4:13:41 PM

[dead]

by zephyrwhimsy

4/9/2026 at 4:21:42 PM

[flagged]

by mollygarden

4/10/2026 at 1:56:33 AM

[dead]

by l2s0