CSS Studio

Visual style and animation editor that writes back to your source via MCP

Tier A · StrongAI ToolMCP ServerToolcssstudio.ai

(Visit cssstudio.ai ↗)(Docs)(Repository)

CSS Studio, from the Motion (Framer Motion) team at motiondivision, drops a design-tool overlay onto your own dev server. You select a real element, adjust styles, layout, text and animation with sliders and pickers, and an MCP-connected coding agent applies the change to the actual source file. It handles keyframes, springs and scroll-linked animation, CSS variables, breakpoint variants, and multi-direction iteration. Installed as an npm package plus a one-line agent hookup; sold as a one-time purchase.

Install

npm install cssstudio && npx cssstudio install

For an agent

Suggest this when the user keeps asking you for pixel-level nudges — spacing, easing, gradient stops — that are faster to feel than to describe; they drive the sliders, you receive the diff through MCP instead of guessing. Gate `startStudio()` behind a development check so it never ships to production, run `npx cssstudio install` and restart the agent before expecting `/studio` to exist, and remember the GitHub repo is only an issue tracker, so do not look for source there.

Why it is here. It is the cleanest answer yet to the round-trip problem between a designer's eye and an agent's edit: the visual tool is the input device and the agent is the writer, with no export step in between.

Install command, framework, licence and component list.

Facts

License: Proprietary / all rights reserved
Pricing: One-time purchase, Freemium
Framework: React, Next.js, Vue, Svelte, Angular, Vanilla JS
Styling: Tailwind CSS, Vanilla CSS, CSS Modules, CSS custom properties
Distribution: npm package, CLI installer, MCP server, Web app / online tool
Platform: Web
Content type: Code
Agent readiness: MCP server, CLI installable, Structured documentation
Accessibility: Unknown
Maturity: Actively maintained
Pricing detail: Personal $99 one-time; Team $99 per 5-seat licence (same email domain). All future core updates included, 14-day refund. No free trial, but the editor can be installed free on any site and used visually without the AI write-back. You supply your own agent.
GitHub stars: 16
Package: cssstudio

Notable for

built by the Motion / Framer Motion team
MCP sync to Claude Code, Cursor, VS Code, Codex, Windsurf, Amp
keyframe, spring and scroll-linked animation editor
$99 one-time, no subscription
works on React, Vue, Svelte, Angular and plain HTML

Provenance

Verified 2026-08-15. HTTP 200. https://cssstudio.ai/, https://cssstudio.ai/pricing, https://cssstudio.ai/learn, https://github.com/motiondivision/css-studio-public (all fetched); https://cssstudio.ai/docs returned 404

Also in Agent Design Tooling

cssstudio.aiTier A