Paper:一个为 AI Agent 时代重新设计的设计工具

paper.designpaper.design

如果你最近在关注设计工具,会发现一个很明显的变化:设计不再只是画几个漂亮页面,然后交给开发复刻。越来越多团队开始让 AI Agent 参与写代码、同步内容、生成响应式布局,甚至直接根据设计稿搭建网站。

但问题也随之出现:设计工具、代码仓库、内容系统、AI Agent 往往各在各的地方。设计师在 Figma 或画布里改样式,开发在 VS Code 或 Cursor 里写代码,内容在 Notion、CMS 或数据库里,AI Agent 又需要从这些地方来回读取上下文。中间只要断一次,信息就容易丢。

Paper 想解决的正是这个问题。它把自己定位成一个 connected canvas,也就是一个能连接团队、Agent、代码和数据的设计画布。它不是单纯做一个更漂亮的设计软件,而是试图把设计和代码之间那段最容易出错的流程缩短。

Paper 是什么?

Paper 是一款基于 Web 标准的设计工具,核心理念是:设计画布本身就应该更接近代码。

传统设计工具里,设计稿通常需要经过一层翻译才能变成前端代码。设计师画的是图层、Frame、组件,开发者看到的却是 DOM、CSS、React 组件、Tailwind class。这个转换过程很容易出现偏差,比如间距不准、响应式断点没考虑、文字内容还是 Lorem Ipsum、组件状态不完整。

Paper 的做法不太一样。它的画布建立在 HTML/CSS 之上,因此设计内容天然更容易被 AI Agent 和前端工具理解。Paper 官网给出的核心卖点也很直接:design to code and back。也就是从 Paper 到代码,再从代码回到 Paper,形成一个持续更新的闭环。

这点很关键。因为在 AI 编程工具普及之后,设计工具不再只是给人看的,也需要能被 Agent 读取和操作。

Paper Desktop:让设计画布接入本地工作流

Paper 目前主推 Paper Desktop。它的作用不是简单地把网页版本打包成桌面应用,而是让 Paper 能更自然地接入你电脑上的开发环境、AI 工具和本地项目。

Paper Desktop 会在本地启动 MCP Server。只要你在桌面端打开设计文件,MCP Server 就会在后台运行。这样一来,Cursor、Claude Code、Codex、GitHub Copilot、OpenCode 等 Agent 工具就可以通过 MCP 读取 Paper 文件里的设计结构,也可以在获得授权后写入内容。

这意味着你可以在 AI 编程工具里直接提类似这样的问题:

“读取我在 Paper 中选中的 hero section,并用 React + Tailwind 在当前项目里实现它。”

或者:

“根据我选中的几个移动端和桌面端画板,为这个页面补充响应式断点。”

这类操作以前不是不能做,但通常需要导图、截图、复制 CSS、手动描述设计稿。Paper 试图把这些手动步骤变成 Agent 可以直接读取的上下文。

MCP 是 Paper 的关键能力

Paper 最值得关注的功能是 Paper MCP Server。

MCP,全称 Model Context Protocol,可以理解成一种让 AI Agent 访问外部应用数据的协议。Paper 的 MCP Server 允许 Agent 读取设计文件,也允许 Agent 在用户授权后修改设计文件。

根据 Paper 文档,Paper MCP 提供的能力包括读取文件信息、获取当前选区、读取节点结构、生成截图、导出 JSX、读取计算后的 CSS 样式、导出图片或视频、创建画板、写入 HTML、修改文字、重命名图层、更新样式、删除节点等。

这让 Paper 不只是一个“给 AI 看截图”的工具,而是一个可以被 Agent 结构化理解的设计环境。Agent 不需要猜这个按钮多宽、这个标题是什么字号、这个容器是什么层级,它可以直接读取节点、样式和画板信息。

当然,这也意味着权限管理很重要。Paper 文档里也提醒,Paper MCP 既能读也能写,所以在授权 Agent 操作设计文件时,用户应该确认当前文件和操作范围没问题。

从 Figma、Notion 到代码:Paper 想打通整条链路

Paper 的另一个特点是它不只关心“画设计稿”,还关心设计稿里的内容从哪里来,以及最后会去哪里。

比如设计系统迁移。Paper 文档提到,可以把 Figma MCP 和 Paper MCP 放在同一个 Agent 工具里,让 Agent 从 Figma 读取颜色、文字样式、变量等信息,再在 Paper 里生成对应的设计系统 sticker sheet。这个流程对团队迁移设计资产会有帮助,尤其是已经有 Figma 设计系统、但想尝试 Paper 工作流的团队。

再比如真实内容。很多设计稿里的内容长期停留在 Lorem Ipsum 阶段,等到真实文案、真实用户评价、真实商品信息放进去,布局才发现撑爆了。Paper 可以通过 Agent 接入 Notion 等内容源,把数据库里的真实内容同步进画布。你甚至可以让 Agent 把同一批内容翻译成德语、西班牙语之类的语言,用来测试设计在不同语言长度下是否还能保持稳定。

还有从设计到网站的流程。Paper 的文档示例中,用户可以选中 Paper 里的 landing page hero section,然后让 Agent 在本地文件夹里用 React 和 Tailwind 生成网站。Agent 会先通过 Paper MCP 检查设计,再创建项目文件、运行本地开发服务器,最后你可以在 localhost 里预览页面。

这不是一键魔法,Paper 自己也承认,设计结构越清晰,生成结果越好。比如使用 flex layouts 和 containers,会比一堆没有结构的图层更适合转成代码。这个判断很现实,也比“上传设计稿,自动生成完美网站”的营销说法可信得多。

Paper 适合谁?

Paper 最适合三类人。

第一类是已经在用 AI Agent 写代码的前端团队。如果你的团队平时用 Cursor、Claude Code、Codex、Copilot 或 OpenCode,Paper 的 MCP 集成会很有吸引力。它可以把设计文件变成 Agent 的上下文,而不是让你手动把设计翻译成 prompt。

第二类是设计和开发协作很密的产品团队。Paper 的价值不是替代设计师,而是减少“设计稿到代码”之间的重复沟通。设计师可以继续在画布里工作,开发者和 Agent 可以读取更接近前端结构的设计信息。

第三类是内容驱动的网站团队。比如营销页、SaaS 官网、产品介绍页、案例页、博客封面、组件库页面等,这些设计经常依赖真实内容。Paper 能从 Notion、CMS 或数据库拉取内容,对这类场景会比较实用。

如果你只是偶尔做海报、社媒图,或者完全不涉及前端和 Agent 工作流,Paper 的优势可能没那么明显。它的重点不是传统平面设计,而是设计、代码和 AI 自动化之间的连接。

Paper 和 Figma 有什么不同?

很多人看到 Paper 的第一反应会是:这是不是另一个 Figma?

从定位上看,Paper 确实会和 Figma 有重叠,尤其是在 UI 设计、画板、组件、设计系统这些场景里。但 Paper 目前更强调 AI Agent 工作流和 Web 标准画布。

Figma 是成熟的协作设计平台,生态、插件、团队管理、组件系统都非常强。Paper 的切入点则更偏未来工作流:让 Agent 能看懂设计,让设计能接入代码仓库和内容系统,让设计与实现之间形成循环。

换句话说,Figma 更像是设计团队的中心;Paper 想成为设计、代码、数据和 Agent 之间的连接层。

这并不意味着 Paper 一定会取代 Figma。更现实的情况是,一些团队会先把 Paper 用在 AI 原型、landing page、设计到代码实验、Agent 辅助实现等场景里。等工作流跑顺之后,再决定是否把更多设计资产迁过去。

价格和可用性

Paper 官网显示,目前有免费版和 Pro 版。

免费版价格为 $0,包含每周 100 次 MCP tool calls、有限的图片生成、25MB 最大图片大小,以及有限的协作文件。

Pro 版官网显示月付价格为 $20/用户/月,年付折后为 $16/用户/月。Paper 也提供联系销售的入口,应该是面向团队或更高需求用户。

官网首页显示 Paper 仍处于 open alpha 阶段。也就是说,它的方向很新,但产品可能还在快速变化。对个人开发者、AI 工具爱好者和小团队来说,这正是适合试用的阶段;但如果是大型团队要替换现有设计系统,最好先从小项目验证。

Paper 的亮点

Paper 最吸引人的地方,是它没有把 AI 当成一个外接聊天框,而是把 Agent 当成设计工作流的一部分。它的画布基于 HTML/CSS,Agent 更容易理解。它通过 MCP 连接 Cursor、Claude Code、Codex、Copilot、OpenCode 等工具。它能读取和写入设计文件,也能从 Figma、Notion、代码仓库等地方同步上下文。它还承认 AI 生成代码并不完美,所以鼓励用户从小范围设计开始,配合 Git checkpoint 和人工审查逐步推进。

这是一种更务实的 AI 设计工具思路。不是说“AI 会替你完成全部设计”,而是把那些重复、机械、容易出错的工作交给 Agent,把设计判断留给人。

Paper 的限制

Paper 仍然是一个相对新的工具。它的生态、团队协作能力、复杂设计系统支持、企业级管理能力,是否能达到 Figma 这类成熟工具的水平,还需要时间观察。

另外,MCP 工作流对用户也有一定门槛。你需要理解 Cursor、Claude Code、Codex 或 Copilot 这类工具,也需要知道本地开发服务器、React、Tailwind、Git checkpoint 这些概念。对完全不碰代码的设计师来说,Paper 的学习曲线可能会比传统设计工具更陡。

还有一个实际问题:AI Agent 不是确定性的。即使它能读取设计结构,也可能写出不准确的样式、误解布局、调用工具参数出错。Paper 文档里也提到,遇到连接问题或 Agent 工具调用错误时,重启 Agent session 往往是最直接的解决方式。

所以 Paper 更适合“人和 Agent 一起工作”,而不是完全放手让 Agent 自己做。

总结

Paper 是一个很有代表性的 AI 时代设计工具。它抓住了一个真实痛点:设计、代码、内容和 Agent 之间需要一个更顺畅的连接方式。

它的核心不是“做一个 Figma 替代品”,而是把设计画布变成 AI Agent 可以读取、理解和操作的工作空间。通过 Paper Desktop 和 MCP Server,设计文件可以进入 Cursor、Claude Code、Codex、Copilot、OpenCode 等开发环境;通过 HTML/CSS 画布,设计结果也更容易转成前端代码。

如果你正在探索 AI 辅助前端开发、设计到代码、真实内容驱动设计,Paper 值得试用。它不一定适合所有设计团队,但它指向了一个很可能会变成主流的方向:未来的设计工具,不只是给人看的画布,也会成为 Agent 可以协作的界面。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注