CSS Studio

Design by hand. Code by agent. Edit styles, layout and content in the browser. Your AI agent writes every change into source code.

How it works:

1. Design: Change colors, layout, styles, transforms, animations and edit text inline with a full suite of design tools.
2. Sync: Send your changes to a local AI agent that finds the right files and applies your edits, no matter how your site was built.
3. Ship: Your agent writes the code. Review the diff, commit, and deploy. No copy-pasting, no context switching.

Features:

• On-page editing: The design tool you always wanted, right on your webpage. Use visual controls to edit layout, styles and more, then send your updates directly to you local AI agent for implementation.
• Animations timeline: Scrub through CSS @keyframes animations on a visual timeline. Add, move, edit and delete keyframes. Change duration, delay, direction and easing - including CSS springs.
• CSS variables: CSS Studio detects the CSS variables available on an element. Edit a variable and watch it propagate across the site. Apply variables to styles with a single click.
• DOM editing: Add elements, rename tags, reorder with drag-and-drop, duplicate and delete. Double-click text to edit inline - try it on this element!
• Spring easings: Design springs with a visual curve editor. CSS Studio uses Motion to generate real CSS springs with the perfect feel.
• Gradient editor: Build linear, radial and conic gradients with a visual tool you're already familiar with. Add, move and delete color stops.
• Color picker: Pick colors with a visual HSL/RGB picker, hex input, eyedropper and alpha channel control.

Start editing CSS visually. One-time purchase. All future updates included.