AI editing

With CSS Studio, you are designing alongside your agent. Every change you make in the browser is implemented into your codebase by your agent: the right path, the right component, the right CSS module.

CSS Studio supports Cursor, Claude Code, VS Code, Codex, Windsurf, and Amp out of the box. Any agent that speaks MCP works.

Activate

By logging into Cursor via CSS Studio, edits are instantly applied.

Alternatively, run /studio into any agent to start listening for changes from CSS Studio. Your agent will connect to the CSS Studio MCP server and wait for edits.

Models

Most CSS Studio edits are straightforward commands (a property changed, a class added, a token assigned), so cheaper and faster models tend to give the best speed-to-accuracy balance. Reach for a frontier model when you ask for refactors, multi-file changes, or variants.

Edits

Edits are queued in the current chat and can be sent with the send button or Ctrl-Enter. Every change carries the context the agent needs to find the right place in your codebase: the viewport, page URL, element path and selectors, the property and its before and after value, and for React the component name and source file path.

You stay in the design surface while a stream of small, well-scoped edits accumulates on the agent side. The agent batches them into a single source-file write per logical change rather than rewriting the same line dozens of times as you drag a slider.

If your agent isn't connected, or doesn't support MCP, the Send button becomes a Copy prompt button. Click it to copy all pending changes to your clipboard, then paste them into any agent, including a remote one.

Chat

Type in the chat window to talk to your agent about your design: ask for feedback, explanations, or changes that go beyond the visual editor like responsive breakpoints, component refactors, or custom CSS. Use ⌥T to focus the input from anywhere on the page.

Element context

Any element you select on the canvas, or in the animation editor, is automatically attached to your next message as context. Your agent receives the full details of what you're looking at, so it can give targeted advice or make precise changes without you needing to describe the element.

Tasks panel

Every chat message, set of edits, variant generation, and viewport adaptation is a separate task handled by its own background subagent. Tasks appear in the left rail grouped by page, with running, done, and awaiting states. They run in parallel and can be reverted one at a time, so a long-running agent task never blocks the rest of your work.

Reverting

Tasks are revertable. Hover any task in the panel and click the revert button to roll back its changes: the visual edit is undone in the browser and the source-file write is reverted in your codebase. Reverting one task doesn't affect the others, even if they touched the same file.

If the agent edits the wrong file, or makes a change you didn't expect, revert the task and rephrase the instruction in chat. CSS Studio also keeps a per-element undo stack (⌘Z) for property-level rollback during a session.