随着 AI 对工作方式的重塑,原本稳固的工具链也经历着完整更迭。
上个月,Vercel 的产品设计团队发文介绍了他们在实际工作中使用的工具和工作流。
这是一篇很棒且干货满满的文章。
与其空谈方法论,我们不如直接看看高手们的工具箱。下面是正文内容:
这篇文章可能几周后就过时了,但没关系,它本来就是一篇记录当下状态的文章。
在一个从未像今天这样容易被颠覆的世界里,设计工具的变化非常快。
在最近一次团队会议上,我主持了一场设计工具的展示分享会,让产品设计师们分享他们在设计工作中真正使用的工具。
我观察到的结果是:
第一,即便在我们这个小团队里,现在每个人使用的工具也完全不同。
第二,大家对 AI 的使用程度差异很大。有些很早就开始 AI 的设计师,在过去 6 个月几乎没有一天不用 AI,也有一些持怀疑态度的人,仍然觉得 AI 在自己的创意工作中基本没什么用。
第三,相比开发工作流里的 AI 工具,面向设计工作流的 AI 工具仍然笨拙且落后。
下面展开聊几个具体例子。
01让 Claude 和 Codex 结对编程

Timo 一直把 Codex 作为主要的编程工具,但他同时也为 Claude 创建了一个 skill,用来 review Codex 的工作。
这个 skill 文件会要求 Codex 把自己的计划分享给 Claude,并向 Claude 征求意见反馈,例如:这个方案是不是没必要这么复杂?有没有重复?API 设计真的合理吗?
这个 skill 还会要求 Codex 不要盲目听从建议,而是要捍卫自己的方案,只有当两个模型达成一致时才更新计划。
不需要自定义任何工具,你也可以试试这种方式。只要让你的 agent 把计划分享给第二个模型,先讨论清楚,再回来告诉你结果。
如果你想使用 Timo 的 skill,可以通过文末链接查看,或者用 npx skills add timolins/claude-review 安装。
02要进入心流状态,你需要多个并行任务

在传统设计工具里,进入心流状态很容易。
我们会花好几个小时专注地发散和深入,让创意自然流动。
但现在,我们发出一个 prompt,然后坐在那里等 agent 完成一系列任务。等回过神来,自己已经在社交媒体上刷了半天。
团队里有几个人已经找到了一些使用并行任务进入心流状态的方法。
Tom 会在 Conductor 里启动一个项目,然后在这个项目里打开几个不同的 tab,分别处理不同主题:一个可能负责 UX 流程,一个负责状态和数据,另一个负责各种零散的小问题修复。
这样不仅能让 agent 在同样时间里产出更多,也能让事情保持有序,不至于在管理 100 支小型机器人团队时把自己搞崩溃。
03基于生产环境进行设计

在过去,设计稿通常走在生产环境前面,即使团队会很努力地让二者保持同步。
现在,因为实现成本和时间都大幅下降,设计稿陈旧得可笑,而生产环境里有大量功能甚至从来没有出现在设计稿上。这没关系,因为我们的设计师也在写代码。
但这也带来了一些问题。毕竟有时候,在写代码之前,你还是需要一个画布去验证想法。
我们发现有几个工具很适合把生产环境里的样式带回画布:
我个人用浏览器扩展程序 Paper 的效果不错,它几乎可以完美复制页面的结构和样式,并导入到 Paper 的设计画布里。
不过我还不算 Paper 设计方面的专家,拥有更多原生设计系统的权限似乎是它理所应当支持的下一步功能。
以生产环境为核心,Sam 做了一个自定义 Chrome 扩展,作为 React Dev Tools 的替代方案,用于快速跳转到文件位置。
这两者从技术上来说都能实现相同的效果,但这个自定义扩展对他的工作流来说更快一些,所以他更喜欢——键盘快捷键确实好用。
我们也会在 Slack 里使用 agent 来修改代码并创建 PR。
从 v0 到 Cursor 再到 Claude,各种 agent 经常会在 Slack 频道里被 @,用来更新仓库里那些不需要大量新组件的内容。对于这些清晰明确的小问题,直接在队友提出 Slack 帖子里 @ agent 修复,往往更容易。
04无画布迭代

使用 AI 编程工具做设计时,一个主要挑战是:没有画布,你往往会沿着某个很窄的方向一路钻下去,而不能同时发散出很多想法。
但浏览器也可以在某种意义上成为画布。
Sam 做了一个自定义开发工具,叫 UI Fork。它允许你创建多个组件版本,并让这些版本在本地开发环境里运行。
你或着 review 的人,可以通过浏览器里切换控件或快捷键,在不同 variants 之间切换。
当你选定了喜欢的版本,就可以提交这个 variant,UI Fork 只会把这个版本的 diff 合并回原始文件。
05Figma 对很多人来说依然好用

并不是所有人都相信 AI 在日常设计工作里有用。
有些设计师说,他们尝试过 AI-first 的设计工作流,然后又回到了 Figma,因为 Figma 在广度探索方面就是更好。
还有一些人虽然怀念画布式的工作,但也觉得和 AI 编程工具相比,在 Figma 中进行设计明显慢很多。
我们成功使用 Figma MCP 为设计稿注入了真实的设计模型。
这周,我开始给一堆列表视图填入数据和 logo,然后意识到:现在是 2026 年了…… 这种琐碎又耗时的任务完全可以交给 AI。
只需要在 Cursor 里简单提示一下,让它把相关数据和图片填进某个具体的 Figma 文件,就省下了不少时间。
我们仍然很惊讶,Figma 原生居然还没有支持这种功能。
至于 MCP 的其他使用场景,效果就比较参差不齐了。
06非 AI 工具同样有效
并不是每个新工具都必须使用 AI。
Skilli 分享了一个内部工具,叫 Timeless。它会持续录制你的屏幕,并允许你在任何时候保存过去五分钟的内容。
如果你发现一个一闪而过的布局偏移,或者一个无法复现的 bug,就可以捕捉下来,剪辑需要的瞬间,然后分享出去。
William 分享了他如何使用 Cleanshot 里的 Pin 工具,把一张截图叠加在新的设计上,以便快速切换做前后对比。
这些就是我们现在真正使用的工具。如果你在这些问题上有更好的解决方案,我很乐意听听你的意见。
07参考链接
Claude Review:
https://github.com/timolins/claude-review
Chrome 扩展:
https://github.com/sambernhardt/click-to-component-chrome-extension
UI Fork:
https://github.com/sambernhardt/uifork
Timeless:
https://github.com/vercel-labs/timeless-releases
原文地址:
https://www.hannahhearth.com/posts/tools-the-vercel-product-design-team-actually-uses
夜雨聆风