Anthropic Labs 的 Claude Design 让您可以通过与 Claude 对话来创建设计、交互式原型、演示文稿等。本指南将引导您创建第一个项目、迭代设计以及充分利用该工具。
Anthropic Labs 的 Claude Design 现已作为研究预览版提供给 Pro、Max、Team 和 Enterprise 计划。此功能在 Enterprise 计划中默认关闭。
本指南假设您的组织的设计系统已经设置完毕，因此您创建的所有内容都将自动使用您品牌的颜色、排版和组件模式。如果您是需要设置或修改设计系统本身的设计负责人，请参阅 在 Claude Design 中设置您的设计系统。
Claude Design 的工作原理
Claude Design 有两个主要区域：左侧是聊天界面，右侧是画布。您在聊天中描述您想要的内容，Claude 在画布上生成一个可工作的设计。从那里，您可以迭代——通过对话和内联注释进行细化，直到满意为止。
典型的流程是：
创建一个项目并添加任何相关的上下文（屏幕截图、代码库）。
描述您想要构建的内容。
查看 Claude 在画布上生成的内容。
使用聊天消息和内联注释进行迭代。
当您对结果满意时，导出或分享。
创建新项目
创建项目时，它会自动继承您组织的设计系统。您无需上传品牌资产或配置任何内容——您的品牌颜色、字体和组件已经就位。
为您的项目添加上下文
您提供给 Claude 的上下文越多，您的输出就会越好。您可以在项目的任何阶段附加参考资料。
屏幕截图、图像或现有资产：上传现有设计、竞争对手产品、线框图或视觉灵感的屏幕截图。您也可以附加现有幻灯片或包含您想要复制的设计风格的文档。适用于"让它看起来像这样"的请求。
代码库和现有设计文件：链接代码存储库，以便 Claude 了解您现有的组件、架构和样式模式。这使原型从一开始就更接近生产就绪。导入还支持多种方式来上传现有产品设计工作。
编写有效的提示
您不需要是设计师就能获得出色的结果。具体说明您正在构建什么、为谁构建以及最重要的是什么。
一个好的提示包括目标（您正在构建什么）、布局（事物应该如何排列）、内容（要显示什么信息）和受众（谁将使用它）。如果需要更多信息，Claude 也会提出澄清问题。
以下是一些效果很好的提示示例：
创建一个显示月度收入的仪表板，并具有按地区和产品线筛选的功能。
设计一个包含 4 个屏幕的移动应用程序入门流程，引导用户了解我们的核心功能。
为我们的新 API 产品构建一个登陆页面，包括英雄部分、代码示例和定价。
创建一个用于收集客户反馈的表单，其中包含基于类别的条件问题。
为我们的运营团队设计一个内部工具，用于审查和批准内容提交。
迭代您的设计
第一代是一个起点。真正的价值来自迭代。
使用聊天
聊天最适合影响整体设计的广泛更改：
使配色方案更深、更简洁。
重新排列仪表板，使指标在顶行，图表在下方。
在右侧添加一个设置面板。
为我展示 2-3 个此页面的替代布局。
您也可以要求 Claude 解释其设计决策、建议改进或审查设计的可访问性。
使用内联注释
内联注释让您可以直接点击画布的特定部分并请求有针对性的更改。这比在聊天中描述位置要快得多。
好的内联注释示例：
使此按钮的填充更大。
将其更改为下拉菜单而不是单选按钮。
在此处使用主品牌颜色。
使此部分可折叠。
注意：如果您的注释没有被识别，请将反馈直接粘贴到聊天中。这是一个已知的解决方法，用于解决注释在 Claude 读取之前可能消失的间歇性问题。
何时使用聊天与注释
对于有针对性的、组件级别的更改（"修复此按钮"、"调整此间距"），使用注释。对于结构更改、新部分、美学转变或任何需要解释或上下文的内容，使用聊天。
管理版本和修订
如果您想探索不同的方向而不丢失当前工作，请告诉 Claude："保存我们所拥有的并尝试完全不同的方法。"Claude 将保存您当前的项目并确认其保存位置，以便您可以在对话中轻松参考早期迭代。
导出和分享
设计完成后，您可以与同事分享或将其导出以供其他地方使用。正确的格式取决于您的用例——无论您是获取利益相关者反馈、交接给工程部门还是向一个小组展示。
查看项目时，使用右上角的"导出"按钮从以下导出格式中选择。
下载为 .zip
导出为 PDF
导出为 PPTX
发送到 Canva
导出为独立 HTML
交接给 Claude Code
发送到本地编码代理
发送到 Claude Code Web
您也可以使用可共享链接在您的组织内分享项目。分享选项包括仅查看、评论和编辑访问权限。
订阅使用情况和定价
有关更多详情，请参阅：Claude Design 订阅使用情况和定价。
获得最佳结果的提示
从简单开始，然后逐层增加复杂性。从核心布局和内容开始，然后添加交互、边界情况和打磨。Claude 对增量请求反应良好。
在您的反馈中要具体。"这看起来不对"很难采取行动。"将表单字段之间的间距紧缩至 8px"给 Claude 提供了它需要的确切内容。
参考您的设计系统。如果您知道您品牌系统中存在某个组件，请按名称提及它："使用主按钮组件"或"应用卡片布局模式。"
尽早考虑响应式设计。提及您的设计是否需要在移动设备、平板电脑和桌面上工作，或仅在其中之一上工作。
要求变体。如果您对某个方向不确定，要求 Claude 向您展示 2-3 个选项。比较替代方案比猜测要快得多。
向 Claude 寻求反馈。Claude 可以审查您的设计的可访问性、对比度比率、信息层次结构和一般可用性。将其视为设计协作者，而不仅仅是生成器。
已知限制
Claude Design 作为 Anthropic Labs 的实验预览版提供。需要注意以下几点：
注释持久性：内联注释偶尔会在 Claude 读取之前消失。要解决此问题，请将注释文本粘贴到聊天中。
紧凑视图中的保存错误：紧凑布局模式可能会触发保存错误。如果发生这种情况，请切换到完整视图并重试。
大型代码库：链接非常大的存储库可能会导致延迟或浏览器问题。链接特定的子目录而不是整个 monorepo。
聊天错误：如果您遇到"聊天上游错误"，请尝试在同一项目中启动新的聊天选项卡。