CSS Studio — edit styles on your live site; your coding agent writes them back
在真网页上改样式文案，一点就交给编程助手写回。 Edit the live page; one click sends changes to your coding agent.
CSS Studio（Motion 团队出品）是装在你自己网站上的可视化设计层：在浏览器里改文案、样式、布局和动画时间轴，再通过 MCP / skill 把变更交给你本来就在用的编程助手（文档写支持 Cursor、Claude Code、VS Code、Codex、Windsurf 等），由助手改对源文件——HTML/CSS、Tailwind、React 等随你现有技术栈。站点强调「不是从零生成整站」，而是设计已经跑起来的页面；支持一键出多版变体、按断点改、后台并行子任务。定价页写编辑器可免费用，接 AI 助手要一次性买断（页面写 $99）。Show HN（2026-04-09）约 175 分。适合已经有站、想在真页面上精修视觉再让助手落盘的人。 CSS Studio (from the Motion team) is a visual design layer on your own site: edit copy, styles, layout, and animation timelines in the browser, then send changes over MCP / a skill to the coding agent you already use (docs list Cursor, Claude Code, VS Code, Codex, Windsurf, and more) so it patches the right source files—HTML/CSS, Tailwind, React, whatever your stack already is. The site stresses it is not a from-scratch site generator; you design the page that is already running. It supports one-click variants, breakpoint edits, and parallel background tasks. Pricing says the editor is free; AI agent connection is a one-time purchase (listed as $99). Show HN on 2026-04-09 landed around 175 points. Good if you already have a site and want to polish on the real page before an agent commits.
为什么推荐Why we recommend it 定价页写编辑器免费、接 AI 一次性 $99。收录理由：AI×设计，和 Flowstep「画布出屏」互补——这边是改已上线页面。本库没有安装 CSS Studio，没有连 MCP，没有在真实项目里点 Apply。 Pricing lists a free editor and a one-time $99 for AI connection. Why listed: AI×design complementary to Flowstep’s canvas generation—here you edit an already-running page. This library did not install CSS Studio, connect MCP, or click Apply on a real project.
主源是官网 https://cssstudio.ai/ ，早间 HTTP 200；「在真站上设计、助手写回代码」、MCP 对接名单和变体/断点能力照首页与学习中心。Show HN https://news.ycombinator.com/item?id=47702196 （2026-04-09，约 175 分）。预览为 Playwright 实拍官网首屏裁 3:2 WebP。Primary source is https://cssstudio.ai/, HTTP 200 this morning; design-on-the-live-site plus agent write-back, MCP agent list, and variants/breakpoints follow the homepage and learn center. Show HN https://news.ycombinator.com/item?id=47702196 (2026-04-09, ~175 points). Preview is a Playwright capture of the homepage above the fold, cropped to 3:2 WebP.
Apply 会改你的源码；接付费档前确认价格与权限。合并前自己看 diff。 Apply edits your source; confirm pricing and access before buying. Review the diff before merge.
先在可撤回、不外发的范围内试跑。本条未批准前：Apply 会改你的源码；接付费档前确认价格与权限。合并前自己看 diff。。 Try it first in a reversible, non-outbound scope. Until approved: Apply edits your source; confirm pricing and access before buying. Review the diff before merge..
这条用法已包含可复用 Skill。跑通安全范围后，立刻把步骤固化下来。 This use already includes a reusable Skill. After the safe pass, lock the steps in.
确认输出可靠后，再考虑定时或事件触发；例行默认仍应停在待审。 After output is reliable, consider a schedule or event trigger. Routines should still stop at review by default.
