Show HN: CSS Studio. Design by hand, code by agent

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

Related Papers

• Show HN: ctx – Search the coding agent history already on your machine

  Claude Code, Cursor, Codex 등 코딩 에이전트가 이전 세션의 논의·결정·실패 시도를 잊지 않도록 SQLite로 인덱싱해 재사용할 수 있게 해주는 오픈소스 CLI 도구다.

• Micro-Agent: Beat Frontier Models with Collaboration Inside Model API

  vLLM 팀이 단일 모델 API 호출 뒤에서 여러 모델이 협업하는 'Micro-Agent' 개념을 공개했습니다. 별도의 에이전트 코드 없이 라우터 레이어에서 모델 조합을 실행해 GPT-4급 결과를 더 저렴하게 낼 수 있다는 아이디어입니다.

• Ornith-1.0: self-improving open-source models for agentic coding

  Gemma 4와 Qwen 3.5를 기반으로 파인튜닝한 코딩 특화 오픈소스 모델로, RL(강화학습)을 통해 스캐폴드(에이전트 실행 구조)까지 함께 최적화하는 방식을 주장하지만, 커뮤니티에서는 벤치마크 과최적화에 불과하다는 의심을 받고 있다.

• Entity Binding Failures in Tool-Augmented Agents

  AI 에이전트가 올바른 도구를 선택해도 잘못된 대상에 실행하는 'Entity Binding 실패' 문제를 정의하고, 이를 막는 실행 정책을 평가한 논문.

• Herdr: Agent multiplexer that lives in your terminal

  여러 AI 코딩 에이전트(Claude, Codex 등)를 하나의 터미널에서 동시에 실행·관리할 수 있는 Rust 기반 오픈소스 툴로, tmux처럼 세션이 유지되고 SSH로 원격 접속도 가능해 멀티 에이전트 워크플로우를 크게 단순화해준다.

• Ornith-1.0: Self-scaffolding LLMs for agentic coding

  모델이 문제 풀이 전략(scaffold)을 직접 생성하고 개선하는 자기강화 학습 프레임워크를 적용한 오픈소스 코딩 특화 LLM으로, 9B 소형 모델부터 397B 대형 모델까지 라인업을 갖추고 SWE-Bench 등 주요 벤치마크에서 Claude Opus 4.7을 능가하는 성능을 보여줬다.

Related Resources

• CSS Studio Official Website