CSS Studio is unclaimed —

CSS Studio

You and your agent. Designing together.·cssstudio.ai

CSS Studio is a visual CSS editor that runs as an overlay in the browser on top of a real website. Designers and developers adjust styles, layout, text, CSS variables, and animations with sliders, pickers, and a timeline editor, while an existing AI coding agent (such as Cursor or Claude Code) writes every change directly into the project's source files. It connects to agents via an MCP server and works with stacks including HTML, CSS, Tailwind, React, Vue, Svelte, and Angular.

What it's for

Visually editing CSS styles, layout, and text on a real websiteEditing CSS keyframe, spring, and scroll-linked animations with a timeline editorGenerating and comparing multiple design variants of an elementAdapting a design for mobile/responsive breakpoints with one clickChatting with an AI agent to describe design changes in natural languageWriting design changes directly into source code via an AI agent

Features 17

Agent notes via double-bracket syntax for AI-guided copy edits
Attach screenshots or reference images to guide AI changes
Auto-discovery and editing of CSS custom properties/variables
Changes stream to an AI agent that writes them into real source files
Draw new elements directly onto the page
Element picker and hierarchical Elements panel for DOM navigation
Inline text editing with Markdown shortcuts
Multi-select, duplicate, add, delete, and reorder elements
On-page drag handles for padding, gap, border radius, rotation, and resize
One-click 'Adapt for viewport' to rewrite a selection for mobile
One-click variant generation with iterate/accept workflow
Parallel background tasks/subagents that can be reverted independently
Responsive design view with per-breakpoint editing
Supports HTML, CSS, Tailwind, Markdown, React, Vue, Svelte, Angular codebases
Timeline editor for CSS keyframes, springs, and scroll-linked animations
Visual CSS editor with sliders, color pickers, and gradients
Works with any agent supporting MCP and Skills

At a glance

free tier

TypeWeb app

DeploymentInstalled (local)

PlatformsWeb

Fordesigners, developers

CompanyMotion

Integrations

MotionCursorVS CodeClaude Code

Resources

Changelog

Pricing

Personal plan is a one-time $99 purchase including all future updates; Team plan price not publicly listed and covers 5 seats at the same email domain. Full refund available within 14 days of purchase. The core editor can be installed and used for free without the AI integration.

PersonalQuote

One-time $99 purchase; full refund available within 14 days. The editor itself can also be installed for free and used without AI updates.

Single-user license

TeamQuote

One-time purchase covering 5 seats; exact price not shown. Additional team licenses can be purchased to add 5 more seats.

5 seats for members at the same email domain