CSS Studio

CSS Studio is a browser-based visual design tool that lets developers and designers edit styles, layout, animations, and content directly on any webpage. Every change made through the visual interface is sent to a local AI agent, which finds the right source files and writes the code — no copy-pasting or context switching required. Built by the creators of Motion, it works with any framework, plain CSS, and any MCP-compatible AI agent like Cursor or Claude Code.

• On-page editing — Use visual controls to edit layout, styles, transforms, and more directly on your live webpage, then sync changes to your AI agent for implementation.
• Animations timeline — Scrub through CSS @keyframes animations on a visual timeline; add, move, edit, and delete keyframes, and adjust duration, delay, direction, and easing including CSS springs.
• CSS variables support — CSS Studio detects CSS variables available on any element; edit a variable and watch it propagate across the entire site, or apply variables to styles with a single click.
• DOM editing — Add elements, rename tags, reorder with drag-and-drop, duplicate and delete nodes, and double-click text to edit inline.
• Spring easings — Design spring animations with a visual curve editor; CSS Studio uses Motion to generate real CSS springs.
• Gradient editor — Build linear, radial, and conic gradients with a familiar visual tool; add, move, and delete color stops.
• Color picker — Pick colors with a visual HSL/RGB picker, hex input, eyedropper, and alpha channel control.
• AI agent bridge via MCP — Sync visual edits to any MCP-compatible agent (Cursor, Claude Code, VS Code, and more); the agent writes the code, you review the diff, commit, and deploy.
• Lifetime updates — One-time purchase includes all future updates to CSS Studio's core features at no extra cost.
• Works offline — Use CSS Studio for visual inspection and CSS exploration without an internet connection; agent-based source file updates require online access.