使用 Claude 进行原型设计和用户体验

当人们可以点击体验时，功能创意会更容易评估。借助 Claude Design，您在对话中描述功能，Claude 会构建一个团队可以打开并试用的原型。如果 Claude 拥有您的设计系统，它会使用您自己的组件（例如产品中真实的按钮和表单）来构建原型。

1. 开始一个设计

您可以在使用 Claude 的任何地方开始设计。

• 在任意对话中： 在网页版或桌面应用中，要求生成原型、模型图或一组界面。
• 从侧边栏： 打开 Artifacts，在 Make something new 下选择 Design，然后在打开的对话中描述您想要的内容。
• 在 Claude Code 中，在您的代码仓库内： 以同样的方式提出请求。在这里，Claude 还可以读取您产品的代码，正如第 3 节所述。

设计会在对话旁边的画布上打开，您可以平移和缩放该画布。每个界面都位于自己的画板上。设计会保存在 Artifacts 下，在您分享之前，其他人无法打开它。

2. 为功能制作原型

以下是您可以要求生成的几种原型类型，并附有可供尝试的提示。

一个新功能

描述界面、其各个部分以及它们的行为方式。

• "为我们的 SaaS 应用设计一个新的设置页面，包含账户、账单、通知和集成等部分。加入侧边栏导航，并使每个部分都可展开。"
• "为搜索体验制作原型，包含筛选器、分面结果，以及点击结果时从右侧滑入的详情面板。使其可点击。"
• "构建一个审批工作流界面，让管理者可以在队列中查看、评论并批准或拒绝提交的请求。"

设计评审的多种方案

要求将每种方案放在各自独立的画板上。这样您和审阅者就可以并排比较它们。

• "给我展示用户个人资料页面的三种不同布局：一种基于卡片，一种带左侧边栏，一种带顶部标签导航。将每种都放在各自的画板上。"
• "在不同的画板上创建此结账流程的两个版本，一个单页式，一个多步骤式，以便我在设计评审中进行比较。"

完整流程

逐步描述整个流程。

"规划用户从免费方案升级到付费方案的流程。从用户看到升级提示的仪表盘开始，经过方案对比页面、付款表单、确认页面，最后到解锁高级功能后更新的仪表盘。"

内部工具和管理面板

Claude Design 非常适合内部工具，例如管理面板和审核队列。在界面被打磨完善之前，人们就可以点击体验原型，查看各个步骤是否可行。

"设计一个用于管理用户账户的管理面板：一个可搜索的表格，带有方案类型和状态的筛选器，以及一个显示账户历史记录并允许修改权限的详情抽屉。"

Claude 可能并不掌握所有事实，例如您的真实定价。它可能会询问您，或者做出假设。在分享设计之前，请务必审查 Claude 的工作并核对细节。要了解更多关于评估 Claude 输出的内容，请阅读我们的教育报告人们如何检查 Claude 的工作。

3. 使用您自己的组件进行构建

Claude 可以使用您真实的组件来构建原型，即您产品已经在使用的相同按钮和表单。这样原型就会与工程师最终构建的内容相匹配。如果没有您的组件，Claude 会绘制自己的版本，只是看起来相似而已。

您可以通过以下两种方式之一获得与您产品相匹配的原型：

• 设置设计系统（推荐）： 设计系统会将您的颜色、字体和组件集中保存在 Claude 中的一个位置。一旦您的组织设置了默认设计系统，Claude 就会将其用于团队开始的任何设计。请参阅在 Claude 中设置设计系统。
• 在代码仓库中通过 Claude Code 进行操作： 在项目内的 Claude Code 会话中请求设计。Claude 可以读取代码，并获取您产品已经使用的颜色、字体和间距。这无需任何设置。

无论您选择哪种方式，以下习惯都会有所帮助：

• 在提示中指明组件名称： "使用 ProductCard 组件"或"遵循与设置页面相同的布局"可以告诉 Claude 应该使用哪些组件。
• 为 Claude 指明界面代码的位置： 在大型代码仓库中，告诉 Claude 哪个包或文件夹包含这些组件。
• 要更改组件，请询问 Claude： 您真实的组件会按照代码中的样子精确地显示在画板上。
• 在组件库发生变化后刷新： 从代码同步而来的设计系统会保留上次同步时组件的副本。发布新版本后请重新同步。

4. 在画板上完善设计

您可以自己修改设计、给 Claude 留言，或在对话中提出要求。更改会随着您的操作自动保存，因此没有"保存"按钮。

• 手动操作： 点击元素以选中它，双击文本以重新输入，拖动以移动它。使用工具栏添加文本、注释、形状和新画板。Properties 会显示您所选元素的设置。
• 通过评论： 要更改某个元素，请打开评论功能，点击该元素，写下您想要的内容，并保持勾选 Send to Claude。Claude 会进行更改，并在评论串中回复。
• 通过提问： 对于较大的更改，例如新增一种状态或另一种方案，请在对话中提出要求。

例如："展示此页面如何处理空状态、错误状态和加载状态。将每种状态放在当前画板旁边各自独立的画板上。"

5. 与团队一起评审

通过 Share，您可以选择谁能打开设计，以及他们是否可以查看、评论或编辑。您邀请的人需要拥有 Claude 账户。有关各方案的选项，请参阅帮助中心中的分享 artifacts。

每个人能做什么取决于您授予他们的访问权限：

• 可查看： 他们可以打开设计，点击任意元素查看其尺寸、间距和颜色，并使用 Play 运行可点击的画板。他们无法更改任何内容。
• 可评论： 与上述相同，此外还可以对点击的元素发表评论。
• 可编辑： 他们可以自行更改设计，并在画布上添加注释。您组织中拥有编辑权限的人员还可以将评论作为请求发送给 Claude。

拥有编辑权限的人员可以同时在画布上工作，您可以实时看到彼此的更改。

在 Team 和 Enterprise 方案中，您组织的所有者决定您是否可以向组织外部分享。对于无法打开链接的人，请使用 Export。您可以导出：

• 将一个画板导出为 PNG、PDF 或 HTML（.zip）文件
• 通过 Share > Export，将整个原型导出为一个网页（HTML）
• 将所有画板导出为一个 PDF

6. 在 Claude Code 中继续

Claude Code 可以打开在 Claude Design 中制作的原型。这样工程师就可以基于实际的画板及其中的组件进行构建，而不是基于截图。

• 如果您是在 Claude Code 中设计的： 留在同一会话中，要求 Claude 进行构建。如果之后想回来继续，请从 Artifacts 中打开设计，并使用 Share 旁边的按钮重新打开创建该设计的会话。
• 如果您是在其他地方设计的： 给工程师授予设计的编辑权限。在 Claude Code 中，在代码仓库内，他们粘贴设计的链接并要求 Claude 实现它。

在开始构建之前

以下几个步骤可以让设计更容易被用于构建：

• 清晰地命名画板和组件： Claude Code 会读取设计中的这些名称。
• 在做出决定时记录下来： 如果您选择了标签页而不是侧边栏，请在画板上的注释中说明原因，以便 Claude Code 能够读取到。
• 先要求生成空状态、错误状态和加载状态： 同时询问当数据非常少或远超预期时，界面会如何表现。

7. 一个从创意到实现的示例

1. 产品经理在对话中描述功能。 这是一个带有筛选和批量操作功能的通知中心。
2. Claude 根据组织的设计系统构建出第一个原型，设计师随后在画板上对其进行完善。
3. 产品经理分享该设计以进行异步评审，团队运行原型并发表评论。
4. 工程师在 Claude Code 中打开该设计，并要求 Claude 实现它。

如果出现异常

更多资源

• 使用 Claude 制作幻灯片和演示文稿，用于制作演示文稿。
• 在 Claude 中设置设计系统，让设计使用您的组件和字体。
• 在 Claude artifacts 中与团队协作，了解如何与团队分享和编辑设计。
• 访问帮助中心获取更多支持和故障排除信息。