You and your agent. Designing together.

CSS Studio is a visual design tool for your site, from the creators of Motion. It's built around a single idea: your design tool should fit your existing workflow. Your browser, your codebase, your existing AI agent.

How it works

Fire up /studio in your agent and start designing. Drag sliders, prompt suggestions, edit content, pick colours, generate variants. Every change streams to your existing AI agent, which writes these changes to the right source file.

React components, HTML files, CSS modules, Tailwind, Vue, Svelte, Angular... Your agent understands your codebase and writes to the right place, so you can stay in the design surface while your code stays in sync.

Install

Get CSS Studio running in your project in one step. The installer detects your AI agent (Claude Code, Cursor, VS Code, Codex, Windsurf, or Amp) and wires up the editor, the MCP server, and the /studio skill so everything talks to each other.

npm install cssstudio

import { startStudio } from "cssstudio"

// Only run in dev mode using process.env.NODE_ENV or the project-equivalent
if (process.env.NODE_ENV === "development") {
  startStudio()
}

<script>
  if (["localhost"].includes(location.hostname)) {
    const s = document.createElement("script");
    s.src = "https://unpkg.com/cssstudio";
    document.head.appendChild(s);
  }
</script>

npx cssstudio install

Design

Once installed, CSS Studio sits at the bottom of every page. From here, you can select and add elements as context, upload images, prompt changes and generate variants with a single click.

Selecting an element opens the Edit panel, which is where precise design work happens. Edit size, layout, styles, transforms, animations and CSS variables while your page is updated in real-time. Once you're happy, hit send and changes get sent to your agent for implementation.

Not happy with a section? Select it and click the Generate variants button to produce alternatives that you can cycle through to compare. Like one in particular? Press iterate to produce another round of variants based on that one. Variants reuse your existing CSS variables and tokens, so every option sits inside your design system rather than reinventing it.

CSS Studio auto-discovers the CSS custom properties available to a selected element. You can view them, create new ones, and assign them to any compatible property from the Variables tab. Update one variable and every property referencing it updates with it.

See the Design guide for the full visual editor, on-page controls, and variants reference.

Animation

CSS Studio includes a real timeline editor for CSS keyframes, transitions, and scroll-linked animations. You can scrub the timeline, drag keyframes to retime them, click any stop to edit a value, and play back animations on the actual element.

Springs are first-class: define duration and bounce, and CSS Studio use Motion to compile a spring curve to a linear() easing function. Scroll animations support entry, exit, and continuous scroll-linked timelines.

See the Animations guide for the full timeline reference.

Responsive design

Toggle responsive view (⌥B) to check the design in mobile, desktop, or custom screen size. Every change you make in a viewport writes to the correct breakpoint in your source.

When the layout needs more than a tweak, attach an element and click Adapt for viewport. CSS Studio will rewrite the selection for the active preset, adjusting layout, sizing and typography in one pass.

AI agent

Every visual edit streams in with full context: the viewport, page URL, element path, selectors, and for React the component name and source file.

You can also chat with the agent directly inside CSS Studio. Ask for explanations, refactors, or sweeping changes affecting many elements. Selected elements are automatically attached as context, so the agent always knows what you're looking at. Attach a screenshot to direct visual changes.

Every chat message, set of edits, variant generation, and viewport adaptation runs as its own background task. Tasks run in parallel, finish independently, and can be reverted one at a time, so a long agent run never blocks the rest of your work.

If your agent doesn't support MCP, the Send button becomes a Copy prompt button. Click it to copy all pending changes as a prompt and paste them into any agent, including remote ones.

See the AI editing guide for chat, tasks, and agent setup details.