通过Paper MCP让Claude直接修改线框图

把线框图交给 Claude 生成并不新鲜，作者想改变的是后续修改：在 Paper 里复制具体元素的链接，把问题告诉 Claude，让它直接改设计文件。他们正把线框图工作迁出 Figma，但还没有完全停用 Figma。

这套做法的吸引力在于缩短反馈路径。原文用一次阴影调整展示了效果，也比较了席位价格与 MCP 配额。不过，局部修改有多快、整套设计能省多少时间，是两件需要分开判断的事。

让 Claude 改图，关键是能指到具体元素

作者 Jono 经营 Roboto Studio，主要使用 Next.js、Sanity，项目几乎都部署在 Vercel。他们这次展示的是内部项目 Yak Farm，一个面向客户工作的内部软件工厂。

Paper 是与 Figma 类似的设计工具。作者最看重的能力是 MCP server：Claude 可以通过它读取和编辑设计文件。MCP 在这里可以理解为模型操作设计工具的接口，让修改发生在文件里。

演示视频长 2 分 57 秒。作者表示，里面出现的所有界面都由 Claude 通过 Paper MCP 创建，没有由他手动画出。

最有参考价值的是一次修正过程。文本输入区域叠了太多投影，看起来发灰、浑浊。作者先清空旧聊天，再在 Paper 中连续按两次 Cmd+L，复制目标元素的链接，贴进 Claude，并要求减少输入区域附近叠加的阴影。第一次快捷键复制链接，第二次进一步定位到具体元素。

从作者输入完要求，到屏幕出现更干净的版本，视频里过去了 18 秒。

这次演示真正说明的是：元素定位明确、问题描述具体时，AI 可以很快完成一次局部视觉修正。

作者清空聊天是为了给 Claude 一个干净的起点，但原文没有对照实验，不能据此认定每次修改都应该清空上下文。

三个断点，不能只做三种宽度

Claude 为 Yak Farm 生成了三套布局，分别对应桌面、平板和手机。主面板在不同设备上的交互也不同：

• 桌面空间充足，聊天与预览左右并排。
• 平板上的面板采用可滑走的窗口式交互。
• 手机空间有限，通过标签页切换聊天与预览。

这比把同一个界面等比例缩小更接近实际的响应式设计。需要决定的除了元素宽度，还有用户在当前设备上先看什么、怎样切换任务。

对前端开发者来说，这组设计可以提前暴露实现问题：哪些状态要跨标签页保留，面板关闭后怎样恢复，桌面的并排关系到了手机上如何转换。这些问题越早进入讨论，后续组件和状态设计越有依据。

不过，原文只展示了布局意图，没有给出可运行页面、手势实现或用户测试结果。平板面板看起来适合滑走，不等于已经证明这种交互最好。

作者把它与旧流程比较：按他的粗略估计，过去一轮高保真线框图约需 3 周；客户看过后否定方向，可能再花 3 周。这个痛点可信，但他尚未测量完整 Yak Farm 线框图的耗时。

因此，18 秒可以用来评价这次阴影修改，不能直接拿来推算整套项目的提速比例。推翻产品方向所涉及的信息架构和业务取舍，也远比改投影复杂。

同样每月 16 美元，差别藏在席位和调用额度里

原文价格信息读取于 2026 年 10 月 30 日，应当作为当时的快照理解。

按年付费时，Paper Pro 和 Figma Professional 的 Full 席位都是每位编辑者每月 16 美元；按月付费则都是 20 美元。两者的查看者均免费。

原文举了一个假设案例，并非他们团队的实际账单：5 名编辑者、10 名查看者，年付折算每月都是 5 × $16 = $80；月付都是 5 × $20 = $100。Figma Organization 按文中每席位 55 美元计算为 275 美元，Enterprise 按 90 美元计算为 450 美元。

更大的差异是 MCP 配额。Paper Pro 每名编辑者每周有 1M 次调用，Figma Professional 的 Full 席位每天有 200 次调用。Paper Pro 还将最大图片大小从 25 MB 提高到 100 MB，并增加视频导出。

Figma 的预算更难估算，原因是多个计费维度叠在一起。它的 3 个付费方案分别提供 Full、Dev、Collab 席位，席位决定产品权限及 MCP 额度。使用 Figma Make 或 Sites 需要 Full，开发者查看设计可以使用 Dev；Collab 和查看者每月只有 20 次 MCP 调用。按作者引用的帮助说明，代理要写入草稿之外的文件，也需要 Full 席位。

此外，Figma MCP server 在 beta 期间免费，未来将按使用量收费，原文没有给出价格。AI credits 按人分配、不结转；额外额度通过订阅池或按量购买，价格在管理后台显示。官方帮助页还表示，运行前无法准确预测一次 Make 或代理提示会消耗多少 credits。Professional 年付计划中途新增的席位，则先按单独的月付订阅计费，直到转入年付。

Paper 的编辑者计费规则更容易理解，但作者没有统计完整线框图会消耗多少工具调用，也无法判断免费计划是否够用。

我的判断

我认可这套流程对「找到问题后迅速改掉」的帮助。具体元素链接加明确要求，比让模型猜测修改位置更容易形成可检查的反馈。

但文章支持的是一次局部修改和一种工作方式，还不足以证明 Paper 全面优于 Figma。原文没有提供两者完成同一任务的成功率、耗时或调用量对照；旧流程每轮 3 周也是作者的粗略回忆。这部分应当视为经验之谈。

与熟练设计师直接操作相比，复制链接、写提示、检查结果同样有成本。复杂规范和连续细调是否适合交给代理，需要按任务验证。调用额度更高提供了操作空间，却不能代替质量评估。作者只先迁移线框图，这个范围是合理的。

能拿来做什么

• 用一个真实页面试做桌面、平板和手机三套线框图，分别说明信息优先级与交互方式，再让前端评估组件结构和状态切换。
• 给 Claude 提修改要求时，附上准确的元素链接，一次描述一个可观察的问题，并检查结果是否影响相邻元素。
• 记录一次完整线框图任务的总耗时、人工修改量和 MCP 调用量，再与现有流程比较，避免用一次快速修改代表全部收益。
• 评估团队费用时，把席位、MCP 配额和 AI credits 分开计算；让客户使用免费查看权限，并核对实际编辑者需要的权限。