CSS Studio is a visual CSS editor that runs in your browser, on your actual website. Edit styles, layout, animations and content — then send your changes to a local AI agent that writes them into source code.

Because your agent understands your codebase, it knows how best to update it. Tailwind classes, CSS modules, external stylesheets, React components, Markdown — it edits the right files automatically.

Get started · Documentation · Website

How it works

1. Design — Edit styles, layout, animations, and text with visual controls directly on your page.
2. Sync — Changes are sent to your local AI agent via MCP.
3. Ship — Your agent writes the code. Review the diff, commit, and deploy.

Features

• On-page editing — Visual controls for layout, styles, colors, typography, transforms, and more
• Animations timeline — Create and edit CSS @keyframes with a visual timeline, scrubber, and playback
• Design tokens — Auto-discovers CSS variables, edit tokens and watch changes propagate across the site
• DOM editing — Add, duplicate, delete, and reorder elements. Double-click text to edit inline.
• Spring easings — Design CSS spring easings with a visual curve editor
• Gradient editor — Build linear, radial, and conic gradients visually
• Color picker — HSL/RGB picker with hex input, eyedropper, and alpha control
• Chat — Talk to your agent about your design directly from the page

Compatibility

Browsers: Chrome, Safari, Firefox

Agents: Claude Code, Cursor, VS Code Copilot, Codex, Windsurf, Amp

Frameworks: React, Vue, HTML, Tailwind, CSS Modules, and any other web stack

Documentation

• Getting started
• Design guide
• AI editing
• Animations
• Keyboard shortcuts

License

Commercial software. See cssstudio.ai for pricing.