CSS Studio
Matt Perry spent six years at Framer building Framer Motion, then left to run it as an independent open-source project. Motion now has 30 million monthly npm downloads. CSS Studio is what comes next: a visual editor that writes its changes directly into your codebase, operated by an AI agent while you point and click.
The workflow is straightforward. Open CSS Studio alongside your project, select an element, adjust colours, layout, typography, transforms, or animations in the panel — and the corresponding CSS lands in your files. No export step, no copy-pasting values, no Figma file acting as a proxy for the real thing.
The animation controls are the most developed part, which tracks for a team whose reputation is built on motion. There's a keyframe timeline with scrubbing and easing, a spring easing editor, and gradient tooling for linear, radial, and conic. Not features added as an afterthought — the actual point of the tool.
Runs entirely locally. Works with React, Vue, HTML, and Tailwind. $99 one-time, no subscription. Early access.
The audience is specific: design engineers, or frontend developers with enough taste to make visual decisions without a designer in the room. If you don't have a codebase to point it at, it has nothing to offer. If you do, it removes a translation layer most teams have quietly accepted as just how things work.
Matt Perry spent six years at Framer building Framer Motion, then left to run it as an independent open-source project. Motion now has 30 million monthly npm downloads. CSS Studio is what comes next: a visual editor that writes its changes directly into your codebase, operated by an AI agent while you point and click.
The workflow is straightforward. Open CSS Studio alongside your project, select an element, adjust colours, layout, typography, transforms, or animations in the panel — and the corresponding CSS lands in your files. No export step, no copy-pasting values, no Figma file acting as a proxy for the real thing.
The animation controls are the most developed part, which tracks for a team whose reputation is built on motion. There's a keyframe timeline with scrubbing and easing, a spring easing editor, and gradient tooling for linear, radial, and conic. Not features added as an afterthought — the actual point of the tool.
Runs entirely locally. Works with React, Vue, HTML, and Tailwind. $99 one-time, no subscription. Early access.
The audience is specific: design engineers, or frontend developers with enough taste to make visual decisions without a designer in the room. If you don't have a codebase to point it at, it has nothing to offer. If you do, it removes a translation layer most teams have quietly accepted as just how things work.
Similar tools
Agentation
Agentation is a floating toolbar you add to your React app that lets you click on UI elements and generate structured markdown feedback for AI coding agents. Instead of describing "the blue button in the sidebar," it captures CSS selectors, component names from the React fiber tree, and positional data so agents like Claude Code or Cursor can locate and fix the exact element. Free and open source, works with any AI agent that accepts text input.
Onlook
Open-source visual code editor for React — edit Next.js + Tailwind applications with a Figma-like interface that writes changes directly to your codebase in real time. Visual edits map to actual JSX via unique element identifiers; Figma imports convert to working components. Positions itself as 'Cursor for designers' with changes becoming PRs, not handoff specs. Apache 2.0, self-hostable.
Tempo Labs
Tempo is a YC-backed AI platform that combines a visual React editor, AI code generation, and GitHub integration into one environment for building production React apps. Designers, PMs, and developers all work in the same canvas — you can prompt, drag-and-drop, import from Storybook, or edit locally in VSCode and push to GitHub. Primarily for teams building React apps who want to cut front-end time without leaving their existing workflow.
Claude Code
Anthropic's official agentic coding CLI — lives in your terminal, reads entire codebases, and executes multi-step tasks autonomously. Surpassed $1B ARR within months of general availability. Multi-agent Code Review ships as a cloud feature that catches bugs before human reviewers see them. The tool Anthropic itself uses for ~60% of internal development work.