Show HN: CSS Studio. Design by hand, code by agent | AI Paper Digest

TL;DR Highlight

A design tool where visually editing CSS directly in the browser allows an AI Agent via MCP to modify the actual codebase, enabling a WYSIWYG workflow regardless of the framework.

Who Should Read

Frontend developers who collaborate with designers in framework-based projects or want to reduce CSS modification work. Also, UI/UX designers who want to directly apply design changes without code.

Core Mechanics

CSS Studio operates as a design tool inserted as a JS package into the browser. It can be used immediately by adding the package to the development server without a separate SaaS dashboard, and it was confirmed to work smoothly with Vite-based builds.
When a user visually adjusts the style by clicking on elements in the browser, the changes are transmitted to the AI Agent via the MCP (Model Context Protocol, a protocol for connecting AI with external tools). The AI Agent directly modifies the CSS files in the actual codebase based on this information.
The core architecture is 'Client-side Injection JS → MCP flow'. Some developers evaluated that the idea of passing visual editing events from the browser to the AI via MCP could be applied to other projects.
The price is $99, which sparked controversy in the community. Questions were raised about whether this price was appropriate given that the entire Figma suite costs $160, and opinions were raised that a review of the pricing structure was necessary.
The lack of Tailwind CSS integration was cited as a drawback. In projects using Tailwind, styles are applied as classes, causing only default values to be displayed in the style view. Feedback was received that integrating Tailwind class detection and enabling the Agent to edit based on classes would be a killer feature.
It was pointed out that there is no diff view showing which code changes before publishing changes. Opinions were expressed that deploying without knowing what code will be modified is unstable in actual production use.
Concerns were also raised about responsive support. A developer creating a marketing site for an agency asked 'how changes are reflected when dragging and resizing the viewport', but there was no clear answer.
Several comments criticized the landing page itself as having a generic style that seemed to be generated by an LLM. The opinion was that the team creating the design tool should demonstrate originality directly on the landing page, and there were also bug reports that the layout was broken on mobile.

Evidence

A developer who actually applied it to a production site using the Motion library said, 'I really like the concept that you can just add a package without a clunky SaaS'. However, they specifically requested improvements such as the absence of a diff view, the unclear purpose of the draw function, and the lack of Tailwind support.
There was a question, 'If the AI is just applying changes, why use AI instead of directly modifying with a WYSIWYG editor?' This can be understood in the context that using AI as an intermediary is a core value because browser devtools cannot modify the actual source file in framework-based projects.
Although there were several comments that the $99 price was too expensive, there were also rebuttals. A developer who struggled with Claude for 6 hours and barely managed to create a 'passable' level of similar tool shared their experience, saying that they had newly realized how much invisible detail tools like Figma and Framer handle, and that the price was understandable.
In the case of using pure HTML/CSS/JS without a framework, the browser's built-in devtools already perform a WYSIWYG role, so the need for this tool is low. On the other hand, if this tool solves the problem of losing the WYSIWYG function of the built-in devtools when using a framework, it would be attractive.
A developer who operates GPT, Gemini, and Claude models in production asked, 'Which model is best for handling the studio skills of CSS Studio?' This suggests that this tool is not dependent on a specific AI model and can be linked with multiple Agents.

How to Apply

In framework-based projects such as React, Vue, and Svelte, when a designer wants to directly adjust CSS, adding the CSS Studio package to the development server allows the AI Agent to reflect visually modified content in the actual source file without a developer.
If you are not using Tailwind, you can consider introducing it now. However, Tailwind projects currently have problems with properly recognizing class-based styles, so it is best to wait for official Tailwind support to be added or submit an issue requesting the feature.
You can refer to the client-side JS insertion → MCP server connection architecture itself and apply it to create a custom tool that transmits browser UI interactions as context to the AI Agent. There were also developers in the community who said they would apply this pattern to their own projects.
Considering the lack of a diff view before applying changes to a production site, test it first in a staging environment and use a workflow that compares the code before and after changes with Git to prevent unexpected code changes.

Terminology

MCPAbbreviation for Model Context Protocol, a connection protocol that allows AI models to communicate with external tools or file systems. Think of it as a USB hub that connects AI with various tools in a standard way.

WYSIWYGAbbreviation for What You See Is What You Get, a method in which the output is displayed as it appears on the editing screen. It refers to editing without code, like Notion or Google Docs.

AgentHere, it refers to an AI coding agent, meaning that LLMs such as Claude, GPT, and Gemini autonomously modify code by using tools (file reading/writing, etc.).

diff viewA screen that shows the changes before and after the code side by side, like the screen in Git that shows added/deleted lines in red/green when checking changes.

ViteA frontend build tool that provides a fast development server and bundling, a modern alternative to Create React App. It was confirmed that CSS Studio also works well with Vite-based projects.

Related Papers

Related Resources

CSS Studio Official Website