The archive · Developer & Business Tools · Product decision · 2026
CSS Studio bets designers keep their GUI while an AI agent writes the code
Motion Division's paid design tool edits real code through an AI agent: sliders on the page, diffs in your repo — HN front page, one-time purchase.
CSS Studio (Motion Division)
What the business is
A visual design tool that edits your site's real code through an AI agent: drag sliders and the agent commits diffs to your repository.
How it started
Motion Division, the studio behind the Motion animation library (33.5k GitHub stars, MIT), watched AI agents generate slides and one-off pages that nobody could maintain. Their answer was to keep the agent as the hands and put a real design GUI between the human and the code.
What happened
Shipped 2026-04-09 with a Show HN thread: chat to describe a change, visual tools to refine it, and a ship step where the agent writes every edit into the codebase; works with Claude Code, Codex and any agent or stack; priced as a one-time purchase with all future updates included; an open issues repo (css-studio-public) collects feedback.
How it ended up
As of 2026-09-02 CSS Studio is still a paid, one-time-purchase product with four learn/docs modules live; no revenue or funding figures have been disclosed, and the studio funds the effort from its existing Motion library business.
Background
In early 2026, AI agents were generating endless landing pages and slide decks, none of which outlived the meeting they were made for. Motion Division — the studio behind the Motion animation library used by Framer, Figma and '100,000s of websites' — bet the opposite: instead of another AI that produces throwaway output, build a design tool whose entire point is that every edit becomes a real, committed change in your source code.
CSS Studio works in three steps. Chat: select an element and describe a change; the agent plans the edits. Design: sliders, variants and a timeline give precise visual control over styles, layout and animation. Ship: the agent writes the changes straight into the codebase — HTML, CSS, Tailwind or React — with each task running as a separate, revertible background process. It connects locally to your project, so you design against a running site.
Launched 2026-04-09 via Show HN (175 points, 107 comments), priced as a one-time purchase with all future updates included — a deliberate contrast to subscription AI IDEs. As of September 2026 the product is still on sale, backed by Motion Division's established library business; the studio has not disclosed revenue.
What has to be true
- Keeping the human in the loop wins the trust the pure-agent race lost: every change shows up as a visible diff the designer can revert, so the automation never feels like a black box.
- A one-time purchase matches a local-first product: nothing is rented, no cloud lock-in, and customers who hate subscription fatigue get a reason to try it.
- The Motion brand is the moat: developers already importing motion from npm know the GitHub org, the quality bar and the docs, so the new tool launches into an existing audience.
What can be applied
When AI output becomes disposable, sell the durable layer: the interface that turns design intent into code that stays in the repo is the part worth charging for.
Aftermath
CSS Studio launched in April 2026 to an HN front-page thread (175 points, 107 comments) and is still being sold as of 2026-09-02 — a one-time purchase that includes all future updates. The studio behind it, Motion Division, reports 33.5k GitHub stars and 40M+ weekly npm downloads for its Motion library, which it says powers animations on hundreds of thousands of sites. No revenue or funding for CSS Studio has been disclosed; the public GitHub repository is an issues board rather than a product showcase.
Sources
- Show HN: CSS Studio — Design by hand, code by agent
- motiondivision/css-studio-public — 'Visually edit styles, layout, animations, and content directly on your page. Your AI agent writes every change back to code.'
spotted an error? The archive wants to know.
Your turn
You just read one. Describe what you are building, and see who is betting on the same thing.
Free account · 3 free questions · no card