CSS Studio：手绘设计自动转化为可运行代码

来自 Motion 的创作者 █

一款融入 AI 巧思的设计工具。用滑块编辑，用多个变体迭代，一键适配移动端。所有代码都由你现有的 AI Agent 编写，并直接写入你的代码库。

选中一个元素，描述你想要的改动。

使用自然语言和图片附件重新设计并重构。一键快捷操作可生成多个变体，并让指定区域适配移动端显示。

精准控制每一处视觉样式。

经典的设计工具界面，让你能够精确调整样式、文本、布局和动画。你的 Agent 会将这些改动应用到代码中。

适用于任何 Agent、任何技术栈。

你的 Agent 已经知道该如何处理你的网站。无论是 HTML、CSS、Tailwind、Markdown、React，还是完全不同的技术，都能在正确的位置做出正确的修改。

描述一项改动，你的 Agent 负责写代码。

通过可视化工具编辑样式、布局和内容。

所有修改都会通过你的 Agent 直接写入源代码。

关键帧。弹簧动画。滚动联动。

真正的时间轴编辑器、由物理模型驱动的弹簧动画，以及与滚动联动的动画。最终以硬件加速的 CSS 动画形式应用。

一键操作，多种方向。

选中一个元素，点击即可生成多个变体。每个方案都会以不同的方向探索设计或文案，同时以你现有的设计系统为基础。

生成：通过一个 prompt 创建多个备选方案。

迭代：添加修改意见，或基于你最喜欢的方案再次生成。

接受：提交胜出的方案，丢弃其余方案。

适配每一种屏幕、每一个断点。

在预设尺寸之间快速切换，或精确设定任意宽度 × 高度。每项修改都会写入正确的断点；你也可以一键让 Agent 将布局适配到移动端。

每次对话、每组编辑、每次变体生成或移动端适配，都会成为一个独立任务，由各自的后台 subagent 处理。每个任务都可以单独撤销，任何长时间运行的任务都不会阻塞你的工作流。

我们懂界面设计。

Motion 深受 Framer 和 Figma 信赖，为数十万个网站提供动画能力。

每周 npm 下载量超过 4000 万次

精准编辑。智能应用。更快发布。

一次购买，包含未来所有更新。