Software & DevOpsDone with Claude Code Apr 9, 2026
Edit site design visually and have an agent write the code
CSS Studio lets designers tweak a site visually in the browser and streams the changes via MCP to an existing coding agent that implements them in the codebase.
- What They Did
- You run CSS Studio on your local site and connect your existing coding agent, for example by running /studio in the project. You select an element and either describe a change in chat or adjust styles, layout, text and animations with visual controls. The agent watches for those changes and writes them into the source files. Variants and mobile adaptations run as separate background tasks.
- How It Went
- The page shows an example where padding and border radius edits were saved to a Hero.css file as 2 edits. It gives no measured results or user outcomes.
- Worth Knowing
- It is a one-time purchase with future updates included. It works with HTML, CSS, Tailwind or React, but you need your own coding agent.
Try it yourself with Claude Code
Set up CSS Studio's MCP connection so I can edit the look of my site at [local URL] visually in the browser. When I make a design change, apply it in the codebase at [path] using the existing styles or components, then show me the diff. Stop after each change so I can approve it before you move to the next.