Vercel 产品设计团队实际在用的工具分享（2026）

Vercel 产品设计团队的 Hannah Hearth 分享了一期内部设计工具 Show and Tell 的内容，展示了设计师们实际在使用的工具和 workflow。

核心发现

即使在一个小团队内，每个人使用的工具也完全不同
AI 使用程度差异很大，从重度使用者到认为 AI 在设计创意工作中没什么用的怀疑者
AI 设计工具的体验落后于 AI 工程工具

Claude 和 Codex 结对编程

设计师 Timo 用 Codex 作为主要编程 agent，同时创建了一个 skill 让 Claude 审查 Codex 的输出。流程是：Codex 把方案发给 Claude 征求意见（是否过于复杂？是否重复？API 设计是否合理？），同时 Claude 不会盲目服从，只有当两个模型达成一致时才更新方案。

用起来很简单：直接让你的 agent 把方案发给第二个模型讨论，达成一致后再返回给你。

并行线程进入心流

传统设计工具中很容易进入心流状态，但现在发送 prompt 后只能干等 agent 完成任务。

Tom 用 Conductor 同时开多个标签页，一个处理 UX 流程，一个处理状态和数据，一个处理小修小补。并行执行不仅提高了产出，还让一切井井有条。

从生产环境做设计

过去设计文件领先于生产，团队需要努力保持同步。现在因为实现成本大幅下降，生产环境反而跑在前面，设计文件已经过时了。

用 Paper 浏览器扩展完美复制页面结构和样式到设计画布。Sam 还做了一个自定义 Chrome 扩展用来替代 React Dev Tools 快速跳转到文件位置。

团队还在 Slack 里用 Agent 修改代码和开 PR，v0、Cursor、Claude 经常在 Slack 频道被 @ 提及直接修改仓库，不需要把问题加入 backlog。

UI Fork：没有画布的迭代

Sam 创建了一个叫 UI Fork 的自定义开发工具，可以在本地开发环境中运行多个组件版本，审阅者用叠加的 UI 开关或快捷键在不同版本之间切换。定稿后将那个版本的 diff 合并回原文件。

Figma 仍然适用

不是所有人都觉得 AI 在设计工作中好用。一些设计师尝试了 AI-first 设计流程后又回到了 Figma。

用 Figma MCP 来填充设计 mock 的真实内容效果不错，用 Cursor 的一个简单 prompt 就能把指定 Figma 文件填充上相关数据和图片。

非 AI 工具也很重要

Timeless - 持续录屏工具，可以随时保存过去五分钟的屏幕内容，用于捕获难以复现的布局偏移或 bug
Cleanshot 的 Pin 工具 - 把截图叠加到新设计上做前后对比

原文：Hannah Hearth - Tools the Vercel Product Design Team Actually Uses

在 AI 技术快速迭代的今天，保持持续学习的能力比掌握任何特定的技术都更重要。理解底层原理可以帮助你在遇到新技术时更快地上手，可以在不同的技术方案之间做出更明智的选择。建议开发者建立自己的技术框架，而不是追逐每一个新的工具和框架。实践是最好的学习方式，在真实项目中应用新学到的技术，遇到问题并解决，这种经历比任何教程都更有价值。定期整理和复盘也是很好的习惯。将学到的知识归档整理，形成自己的知识库。当需要用到某个技术时，可以直接从自己的知识库中找到相关的参考，而不是从零开始搜索。