CSS Studio. Design by hand, code by agent
Details
- External ID
- 47702196
- Source
- HN
- Company
- —
- Product
- CSS Studio. Design by hand, code by agent
- Website domain
- cssstudio.ai
- Launched
- April 9, 2026
- Cohort
- —
- Upvotes
- 175
- Upvotes percentile
- 0.9485861182519281
- Tags
- —
- Fetched at
- Sept. 7, 2026, 9:26 p.m.
- Updated at
- Sept. 7, 2026, 9:26 p.m.
Description
Hi HN! I've just released CSS Studio, a design tool that lives on your site, runs on your browser, sends updates to your existing AI agent, which edits any codebase. You can actually play around with the latest version directly on the site.Technically, the way this works is you view your site in dev mode and start editing it. In your agent, you can run /studio which then polls (or uses Claude Channels) an MCP server. Changes are streamed as JSON via the MCP, along with some viewport and URL information, and the skill has some instructions on how best to implement them.It contains a lot of the tools you'd expect from a visual editing tool, like text editing, styles and an animation timeline editor.
Enrichment
- Theme
- Claude integrations and coding agents
- Vertical
- Horizontal
- Function
- Agent / copilot
- Audience
- Developer
- AI stance
- AI-native
- Project type
- Commercial product
- Normalized one-liner
- design by hand, generate css code with ai
- Manually corrected
- False
Could you build this?
Partial A visual CSS tweaking overlay is easy, but reliably mapping in-browser DOM element manipulations back to arbitrary local source code (JSX, CSS modules, Tailwind) via an agent daemon requires intricate AST and dev-server integration.
What it would actually take: The architecture pairs an in-browser devtool runtime with a local Node.js daemon and LLM/agent runner. The hard part is the bidirectional source-mapping: detecting whether a styled component originates from Tailwind classes, inline CSS, or external stylesheets, converting visual slider deltas into exact AST modifications (e.g. via Babel or PostCSS), and instructing the AI agent to edit specific source files without breaking layouts.
Discussion
20 comments analyzed.
Competitors mentioned: Cursor and Windsurf (required dependencies), Figma, Haiku (Claude model), GPT, Gemini, Claude (AI models)
Concerns raised: Pricing ($99) too steep compared to Figma full seat ($160), Requires Cursor or Windsurf to work, Website design doesn't appeal to designers, looks like generic SaaS template, Video marketing ineffective - poor music, doesn't show product clearly, No noscript support making product unclear without JavaScript
Feature requests: Allow resizing/moving elements with agent-generated CSS (margin, padding, positioning), Improve visual communication on landing page for designer audience, Rethink pricing structure to be more competitive
Competitors
Other products that read as similar to this one — 179 launches clear the similarity bar, closest 8 shown.
Attention rank: #17 of 180 (itself plus its competitors, highest first — normalized so YC and Product Hunt are compared fairly).
Launched 154 days after the earliest competitor.
- WeWeb MCP · ph · 2026-09-22 · 107 upvotes · similarity 0.50
- Usable Browser Agent · ph · 2026-09-08 · 2 upvotes · similarity 0.45
- Agent MCP Studio · hn · 2026-04-25 · 11 upvotes · similarity 0.43
- Dynamic code and feedback walkthroughs with your coding Agent in VSCode · hn · 2025-11-06 · 48 upvotes · similarity 0.42
- Editmamei · ph · 2026-09-26 · 3 upvotes · similarity 0.41
- A Claude Code skill that renders decisions as interactive HTML pages · hn · 2026-03-05 · 5 upvotes · similarity 0.40
- VideoFlow Studio · ph · 2026-09-22 · 71 upvotes · similarity 0.40
- MifBridge · ph · 2026-09-30 · 1 upvotes · similarity 0.40
Other launches for this product
- No other launches for this product.
Same idea, different domain
Nobody's really built a agent / copilot tool for Agriculture yet.