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