SirHound

It works with Cursor and Windsurf not without them

Thanks! Redesign incoming based on the comments here so hopefully everything is clearer soon

It’s a one off fee for lifetime updates

Haiku is fastest and also quite good at this! Because the edits are quite accurate in terms of its this element with this value

Works on any stack

Is it? I started my career as a magazine designer, then web designer, then web developer. Seems natural from my perspective that my design skills have atrophied but im still visually inclined.

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.

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

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.

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.

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.

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.

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

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.

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.

What blog posts?

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

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)

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.

Just put out a fix for this, thanks

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.

Was displaying without tax - fixed now

Video added

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

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

It's up!

It's a fair point - deployed

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!

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!

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.