Introducing CSS Studio. A design tool that lives in your site. Runs in your browser. Writes code with your existing AI agent. All completely local - so no subscription. One price, lifetime updates.

With CSS Studio, you simply make changes to your site, right there on your page. Run /studio in your agent, and it'll start implementing your changes as they're made. Content, styles, layout, DOM, CSS variables, animations and more. Learn more:

Of course, we had to add a full animation editor in here. Add CSS transitions, animations and scroll animations with a single click. Add, edit and remove keyframes in a timeline editor. Generate CSS springs (using Motion under the hood!) and visualise scroll triggers.

Edit the CSS variables for any element and see those variables updated exactly where they were originally defined in code.

Add, duplicate and delete elements. Edit content inline. Your agent will figure out where in the source code is best to make these changes, even with data-driven sites.

Want to learn more? Check our docs, play around with CSS Studio live on the site, and install the editor on your own site completely for free. Connect to AI for just $99.

Thanks for a super positive response! We just pushed an update containing a few minor fixes, as well as the ability to collapse the toolbar, and to hold space while drawing a new element - handy for choosing a different parent.

Cool product! I was able to improve your landing page for large screens using it ;)

Copy us the prompt 😅

Lotta good ideas here 👏

Thanks Josh!

are you still a one man army? How do you ship this fast?

Yes we say "we" for the aesthetics of the account but we really is just me still. In terms of shipping we (I) wrote about it here but honestly since Jan everything's been on another level. Closed 160 Motion issues, launched two products

Amazing. 🚀

congrats on the launch! looks great ✨

Thanks lochie!

Welcome back Adobe Dreamweaver

We were FrontPage for the Zelda fansite

@benjitaylor look what you’ve done

Can you share a bit more about what the agent actually gets please also is there any tooling to make it work with our codebase or anything like that?

Yes - when /skill is invoked the agent polls the MCP (or uses Claude Code Channels). It receives a list of changes and messages in JSON format. Each change receives identifying information about the viewport, URL, element, path and change.

no i mean like how does the agent know where an element i clicked on the page is in the codebase? a video or smth showing the workflow implementing a change would be really really cool before I buy it

Also is there a way to hook into that json before it reaches my agent?

Not yet, it's an interesting idea though. What kind of workflow/capability do you envision for that?

well I have no idea yet as I don't even know what the json has but idk I want to do framework integrations and do prompt customisation or whatever Idk I'll buy it once I get home then see

Fk I'm waay too excited for this and don't have a laptop to try lmao

Okay this is cool!! So this is exactly what my model gets? does it dedupe changes or anything like that

local first, no subscription, works with whatever AI agent you already use. this is the right architecture. the best dev tools are going to be thin layers that let the AI do the heavy lifting

This is the idea. Considering a cloud layer using Haiku - I assume some people might find that more accessible? Not everyone has a local agent I guess.

Does it work with Svelte? Because the landing only shows React & Vue. Just want to make sure. Looks amazing tbf

If your agent works with Svelte, this works with Svelte

That's neat

woah

🎯

checking this out!

Congrats on the launch. This looks awesome

Thanks Victor!

Cool this looks like a great idea. I mean people are pretty bad with CSS 😜 Love that you built in animations too.

Suspect we couldn't have launched this without animation support, being Motion.

does it support electron?

Like an electron app? We haven’t tested but there’s no technical reason why not.

Incredible. Looking forward to giving it a whirl.

Let us know what you think. It's free to spin up the editor in a project too. There's even a demo version on

no wayy, too good to be true. 🔥🔥

Don't wake up

Crazy!

Love this! Seems super useful. Can’t afford it right now but if there is a promo code one day I might buy it 🙌

DMd

WHAT IN DA WEB SORCERY!!!!!

We did call it Magic Motion once upon a time

that's a fair price. congrats on the launch!

yeah saw similar tools but local execution is tricky. tested 3 design ai tools last year and browser performance killed the experience. what's your approach to handling heavy design computations without lagging? curious how you solved that

What tools did you use? There's no heavy computations here - it's just a site, not a canvas experience.

big fan of the animation editor, super handy

soo goood 💪 working on something similar

Can’t wait to see it!

here is the alpha :

So rad! Definitely checking this out

Let us know how you get on!

Saw you don't have parity pricing, do you plan on adding it at some point? Looking forward to buying the studio soon.

No plans for just yet. We do it for Motion+ because it’s so comparably expensive

Any student discount by chance?

Not as yet, perhaps in the future

add some templated motions there. im a buyer!

We’ve got scroll enter and exit set up as presets so you don’t need to mess around with setting viewtimeline up correctly. We can definitely go further!

Any discount for motion++ user?

Yes DM’d

In short, it’s an advanced inspector with a local memory?

Is this CSS visualization?

What do you mean by visualisation?

Would love better integration with tailwind classes. Even just the class field under the HTML tab to be more prominent and easier to edit. I don't want to set exact px values for padding. I want to set it in scale with my tailwind setup - for example, I want to bump a section block padding from my py-section-md to py-section-lg clamp values. Making the class field in the HTML tab easier to work with would be awesome for quick changes.

Ah that’s interesting. It does instruct the agent to make underlying changes this way. But when editing it would be more helpful to have to work with those constraints.

Are all the classes available to you also inserted in the stylesheet? Or is it only if you use them?

Could you clarify what you mean here?

So if you have the classes py-section-md and lg defined in your codebase, are these present in the CSS in development mode even if actually unused on an element

Oh gotcha - I don't believe so, based on how Tailwind works with JIT. Curious if there's a workaround for that.

Need a way to reset inputs back to default, individually, independantly

Going on the list

any specific advice for using to design responsively? rn it seems impossible to use because it 'lives in browser window' with everything else, and the panels themselves aren't responsive so they cover everything when you aren't working at larger widths, or am I missing something?

You can resize the panels but yeah we need to take a look at a better mobile UI. Because when you shrink the window down this information is sent and is used to adjust mobile-specific styles already.

Next step: