EP27. "用 Claude Design 做原型和 UX 设计"

• Claude Design（Anthropic Labs 出品）让产品设计师和 PM 能从一个想法快速做到能互动的原型——不只是做简报，这篇专讲拿它做产品原型/UX 设计的完整工作流
• 涵盖四件事：快速做原型、接上代码库让设计贴近真实生产环境、拿真实组件反复迭代、最后交接给工程team用 Claude Code 落地
• 时长：15 分钟

重点内容

产品设计工作流

快速做功能原型：一次对话就能把一个功能想法变成能互动的原型。

Prompt 范例（类型）：

• 设计带账号、账单、通知、集成几个板块的设置页面
• 做一个 5 个画面的新手引导流程，从连数据源一路走到邀请队友
• 做带筛选和详情面板的搜索体验原型
• 做经理审核队列这类审批流程界面

设计评审与对齐利益相关人：可以一次生成 2-3 个不同做法方便并排比较，例如：三种不同的用户资料页布局（卡片式、左侧栏、还是顶部标签导航）；或两种结账流程（单页 vs 多步骤向导）。

用户流程地图：能把完整的用户旅程做成原型，例如从免费方案升级到付费方案的路径。

内部工具和后台面板：例如带可搜索表格的管理后台、带处理动作的内容审核队列。

接上你的代码库

为什么这对产品工作很重要：

• 原型用的是真实的组件库，不是通用的泛设计
• Claude 会分析你的样式模式（CSS modules、Tailwind、styled-components），保持架构一致
• 缩短原型跟能实际上线的代码之间的落差，交接更快

怎么接代码库： 从 GitHub 导入，或者点 Import 按钮挂一个本地目录。接好之后，就能在 prompt 里直接按名字引用某个组件。

Claude 会分析这些：

• 组件结构和组合方式
• 样式和主题系统
• 框架模式和数据流
• 文件组织的惯例

交接给 Claude Code

Export 功能里有个「Hand off to Claude Code」，会保留设计意图、组件选择、架构决策，具体做的事：

• 把设计文件、对话记录、README 打包在一起
• 生成一段给本地 Claude Code（或其他 coding agent）用的 prompt
• 也可以选择直接交给 Claude Code Web

一位设计主管的评价：「Including design intent in Claude Code handoffs has made the jump from prototype to production seamless.」（把设计意图带进 Claude Code 交接，让原型到生产环境这一跃变得很顺畅）

交接前要做的几件事：

• 原型里的组件命名要清楚
• 设计决策直接记录在聊天对话里
• 把边界情况标出来，包含空状态、报错状态、加载状态

完整示例流程（七步）

1. PM 写一个功能需求的 prompt（例如做通知中心）
2. Claude 用设计系统里的组件生成初版原型
3. 设计师用行内评论方式反复迭代
4. PM 把原型链接分享出去，让团队异步审阅
5. 团队讨论并迭代出几个备选方案
6. 设计主管确认组件用得对不对
7. 交接给 Claude Code，交给工程team实现

Sources

官方文档：

1. Using Claude Design for prototypes and UX — https://academy.claude.com/tutorials/using-claude-design-for-prototypes-and-ux