Claude Design 让您可以通过与 Claude 聊天来创建设计、交互式原型、单页文档和其他视觉作品。它是您可以从中启动工件的模板之一，因此您可以在任何聊天、Claude Code 中以及从 Artifacts 标签页中使用它，包括画布上编辑和您的设计系统。本指南将引导您创建第一个设计、对其进行迭代以及充分利用它。了解更多关于 什么是工件以及如何使用它们。
Claude Design 在 Free、Pro、Max、Team 和 Enterprise 计划中可用，默认启用。在 Enterprise 计划中，它将在 2026 年 10 月 15 日默认启用，所有者可以在此之前在 Organization settings > Artifacts 中启用它。claude.ai/design 上的独立版本将在 2026 年 12 月 14 日关闭。了解更多信息，请参阅 从独立 Claude Design 迁移到 Claude。
本指南假设您的组织的设计系统已经设置完毕，因此您创建的所有内容都将自动使用您品牌的颜色、排版和组件模式。如果您是需要设置或修改设计系统本身的设计负责人，请参阅 在 Claude Design 中设置您的设计系统。
您可以在哪里使用 Claude Design
在对话中：向 Claude 请求设计，例如"从这个提案中制作一个单页文档"或"模拟我们刚刚讨论的入职流程。"Claude 在您的对话旁边构建它，您可以在那里完善它。您也可以在消息框中选择 Output > Design。
在 Artifacts 标签页中：转到 Artifacts 标签页并选择一个 Design 模板。
在 Claude Code 中：要求 Claude 将您的想法变成设计，或使用 /design 在桌面或终端中创建、编辑和同步设计。
在 iOS 和 Android 的 Claude 应用中：在任何对话中请求设计，稍后返回查看结果，然后在 Artifacts 标签页中全屏查看。您也可以编辑设计。要更改共享设置，请在网络或桌面上使用 Claude。
在 claude.ai/design：独立版本将继续工作，直到 2026 年 12 月 14 日关闭，您现有的项目将保留在那里直到关闭。在独立版本关闭前将您的设计系统迁移到 Claude。了解更多信息，请参阅 从独立 Claude Design 迁移到 Claude。
Claude Design 的工作原理
Claude Design 将对话与画布配对。您描述您想要的内容，Claude 在对话旁边的画布上生成一个可工作的设计。从那里，您进行迭代——通过对话、内联注释和直接在画布上进行精细调整，直到完美为止。
典型的流程是：
从对话或"Artifacts"标签页启动设计。
附加或导入您希望 Claude 使用的设计系统。
添加任何相关上下文（屏幕截图、代码库）。
描述您想要构建的内容。
查看 Claude 在画布上生成的内容。
通过聊天进行精细调整、直接在画布上编辑或留下内联注释。
当您对结果满意时，导出或共享。
在 Claude Design 和 Claude Code 之间移动
您可以在 Claude Design 和 Claude Code 之间移动工作，同时保持工作同步。使用 /design-sync 来引入您的设计系统，这样您在 Claude Design 中构建的所有内容都从您现有的组件开始。当设计准备好成为软件时，您可以将其交接给 Claude Code，它从您现有的工作继续，而不是从屏幕截图重新开始。
从 Claude Code 中，使用 /design 将设计导入到您的代码库中、将您的代码导出为实时原型，或让 Claude 从头到尾构建整个项目。
创建新项目
创建项目时，它会自动继承您的组织的设计系统。您无需上传品牌资产或配置任何内容——您的品牌颜色、字体和组件已经就位。
附加或导入您的设计系统
使用 Claude Code 中的 /design-sync 命令从 GitHub 仓库、设计文件、原始上传或本地代码库中引入一个或多个设计系统。Claude 使用您真实的设计系统组件进行构建，根据您的设计系统检查自己的输出，并在您看到之前进行更正。
在 Enterprise 计划中，管理员可以为特定用户保留发布、设置默认值和删除设计系统。了解更多信息，请参阅 Team 和 Enterprise 计划的 Artifacts 管理员指南。
从 claude.ai/design 引入设计系统
您在 claude.ai/design 独立版本中创建的设计系统可以迁移过来，这样 Claude 可以在任何聊天中使用它们，包括在 Claude Code 中。在独立版本于 2026 年 12 月 14 日关闭前迁移它们。了解更多信息，请参阅 从独立 Claude Design 迁移到 Claude。
为您的项目添加上下文
您提供给 Claude 的上下文越多，您的输出就越好。您可以在项目的任何阶段附加参考资料。
屏幕截图、图像或现有资产：上传现有设计、竞争对手产品、线框图或视觉灵感的屏幕截图。您也可以附加现有幻灯片或包含您想要复制的设计风格的文档。适用于"让它看起来像这样"的请求。
代码库和现有设计文件：链接代码仓库，以便 Claude 了解您现有的组件、架构和样式模式。这使原型从一开始就更接近生产就绪。导入还支持多种方式来上传现有产品设计工作。
编写有效的提示
您不需要是设计师就能获得出色的结果。具体说明您正在构建什么、它是为谁构建的以及什么最重要。
一个好的提示包括目标（您正在构建什么）、布局（事物应该如何排列）、内容（要显示什么信息）和受众（谁将使用它）。如果需要更多信息，Claude 也会提出澄清问题。
以下是一些效果很好的提示示例：
创建一个显示月度收入的仪表板，并具有按地区和产品线筛选的功能。
设计一个移动应用入职流程，包含 4 个屏幕，引导用户了解我们的核心功能。
为我们的新 API 产品构建一个登陆页面，包含英雄部分、代码示例和定价。
创建一个用于收集客户反馈的表单，其中包含基于类别的条件问题。
为我们的运营团队设计一个内部工具，用于审查和批准内容提交。
精细调整您的设计
第一代是一个起点。真正的价值来自于迭代。
使用聊天
聊天最适合影响整体设计的广泛更改：
使配色方案更深、更简洁。
重新排列仪表板，使指标在顶行，图表在下方。
在右侧添加设置面板。
为此页面显示 2–3 个替代布局。
您也可以要求 Claude 解释其设计决策、建议改进或审查设计的可访问性。
使用内联注释
内联注释让您可以直接点击画布上的特定部分并请求有针对性的更改。这比在聊天中描述位置更快。
良好内联注释的示例：
使此按钮的内边距更大。
将其改为下拉菜单而不是单选按钮。
在此处使用主品牌颜色。
使此部分可折叠。
注意：如果您的注释未被识别，请将反馈直接粘贴到聊天中。这是一个已知的解决方法，用于解决注释在 Claude 读取之前可能消失的间歇性问题。
直接在画布上编辑
使用丰富的布局控件进行快速视觉和美学调整，特别是直接拖动、调整大小和对齐元素。
何时使用聊天、注释或直接编辑
使用注释进行有针对性的组件级更改（"修复此按钮"、"调整此间距"）。使用聊天进行结构更改、新部分或任何需要解释或上下文的内容。直接编辑进行快速视觉和美学更改。
使用键盘操作 Claude Design
要进入和退出工件面板，以及从面板标题进行注释，请参阅使用键盘或屏幕阅读器操作工件。该文章还解释了焦点的含义、在 Mac 笔记本电脑或 Safari 中的操作方法，以及表格如何显示按键。
设计是一个画板的画布。每个画板包含图层，例如文本、形状和图像，一个图层可以在其内部包含其他图层。
在编辑器的区域之间移动
按 F6 移动到下一个区域，按 Shift+F6 移动到上一个区域。Cmd+F6（Windows 上为 Ctrl+F6）可代替 F6 使用，无论是否带 Shift。这些区域是顶部栏、画布和属性面板。当选中某项且属性面板关闭时，F6 也会停在浮动在选择上方的工具栏。
注意：在按 F6 之前完成文本编辑。先按 Escape 或 Tab 结束编辑。F6 会将您移出文本编辑而不结束编辑。
在画板内工作
按 Tab 直到到达画板的标题。其名称包括其位置，例如第 1 个（共 7 个）画板。从标题开始，按 Space 选择画板，按 Return 进入其内部的图层。进入后：
Tab 和 Shift+Tab 在图层之间移动。Home 和 End 移动到第一个和最后一个图层。
在包含其他图层的图层上按 Return 会进入其内部。在文本图层上，Return 开始编辑。
Shift+Return 上升一个级别。
Escape 离开画板，画板保持选中状态。再按一次 Escape 清除选择。
当您编辑文本图层时，完成后按 Escape 或 Tab。当您移动时，编辑器会告诉屏幕阅读器选中的内容及其位置，例如第 1 个（共 5 个）。
移动、复制和删除
要移动画板，请选择它（在其标题上按 Space）并按箭头键。它每次移动一个像素，或使用 Shift 时移动 10 个像素。在画板内，箭头键的作用不同：无论是否使用 Shift，它们都会将您移动到下一个或上一个图层，永远不会移动图层本身。要移动您所在的图层，请按住 Option（Windows 上为 Alt）并按箭头键。自由放置的图层每次移动一个像素，或使用 Shift 时移动 10 个像素。属于行、列或网格的图层会与其邻近图层交换位置：向上或向左移动会使其更早，向下或向右移动会使其更晚。编辑器会向屏幕阅读器发送移动的简短确认。
选中画板或图层后，按 Cmd+D（Windows 上为 Ctrl+D）复制它，按 Delete 或 Backspace 删除它。按 Cmd+Z（Windows 上为 Ctrl+Z）撤销。编辑器会向屏幕阅读器发送每个操作的简短确认。
使用选择上方的工具栏
浮动在选择上方的工具栏仅在属性面板关闭时出现，F6 可以到达它。在其中，箭头键在其控件之间移动，Home 和 End 移动到第一个和最后一个，Escape 返回到画布并保持您的选择。您也可以使用 Tab 到达每个控件。
使用属性面板和图层列表
Cmd+\（Windows 上为 Ctrl+\）打开属性面板并将焦点移入其中。再按一次关闭面板，焦点返回到顶部栏中的"属性"按钮。面板中的颜色、字体和其他弹出窗口在打开时获得焦点，Escape 关闭它们。当您选择文本颜色时，颜色选择器会告诉您其与背景的对比度是好还是差。
在属性面板的图层列表中：向上箭头和向下箭头键在行之间移动，向右箭头键展开一行然后进入其内部，向左箭头键折叠它然后移出，Return 或 Space 在画布上选择该图层，在文本图层上再按一次 Return 进行编辑。
警告：在图层列表中，Delete、Backspace 和 Cmd+X（Windows 上为 Ctrl+X）作用于画布上选中的任何内容，这可能不是您移动到的行。先在该行上按 Return。
Claude Design 键盘快捷键
操作 | Mac | Windows |
下一个区域 | F6 或 Cmd+F6 | F6 或 Ctrl+F6 |
上一个区域 | Shift+F6 或 Cmd+Shift+F6 | Shift+F6 或 Ctrl+Shift+F6 |
移动到画板的标题 | Tab | Tab |
选择画板（在其标题上） | Space | Space |
进入画板、在图层内移动或编辑文本 | Return | Enter |
下一图层、上一图层（在画板内） | Tab、Shift+Tab 或箭头键 | Tab、Shift+Tab 或箭头键 |
第一个图层、最后一个图层 | Home、End | Home、End |
上升一级（在画板内） | Shift+Return | Shift+Enter |
离开画板 | Escape | Escape |
移动所选画板（在其标题上） | 箭头键（Shift 键移动 10 像素） | 箭头键（Shift 键移动 10 像素） |
移动或重新排序您所在的图层（在画板内） | Option+箭头键 | Alt+箭头键 |
复制 | Cmd+D | Ctrl+D |
删除 | Delete 或 Backspace | Delete 或 Backspace |
复制、粘贴 | Cmd+C、Cmd+V | Ctrl+C、Ctrl+V |
剪切（图层） | Cmd+X | Ctrl+X |
组合、取消组合（图层） | Cmd+G、Cmd+Shift+G | Ctrl+G、Ctrl+Shift+G |
水平翻转、垂直翻转 | Shift+H、Shift+V | Shift+H、Shift+V |
全选 | Cmd+A | Ctrl+A |
撤销、重做 | Cmd+Z、Cmd+Shift+Z | Ctrl+Z、Ctrl+Shift+Z |
打开或关闭属性面板 | Cmd+\ | Ctrl+\ |
放大、缩小、适应窗口 | Cmd+Plus、Cmd+Minus、Cmd+0 | Ctrl+Plus、Ctrl+Minus、Ctrl+0 |
显示或隐藏布局参考线 | Shift+G | Shift+G |
管理版本和修订
如果您想探索不同的方向而不丢失当前工作，请告诉 Claude："保存我们现有的内容，尝试一个完全不同的方法。"Claude 将保存您的当前项目并确认保存位置，这样您可以在对话中轻松参考早期的迭代。
导出和分享
设计完成后，您可以与同事分享或导出以供其他地方使用。合适的格式取决于您的用途——无论是获取利益相关者反馈、交接给工程团队还是向团队展示。
查看项目时，使用右上角的"导出"按钮从以下导出格式中选择。
下载为 .zip
导出为 PDF
导出为 PPTX
导出到 Google Slides
导出为独立 HTML
发送到您已使用的工具：Adobe Experience Manager、Adobe for Creativity、Adobe Journey Optimizer、Base44、Canva、Gamma、HubSpot、Hyperframes、Lovable、Miro、Netlify、Replit、v0、Vercel 和 Wix
交接给 Claude Code
发送到本地编码代理
发送到 Claude Code Web
设计默认为私密。要分享设计，请点击
使用情况和定价
Claude Design 计入与 Claude 其余部分相同的使用限制。设计活动从与您在 Claude 上的其他工作相同的池中提取，包括 Claude Code，因此没有单独的 Claude Design 额度需要跟踪。具有大型代码库或多次迭代的复杂项目会消耗更多使用量。
如果您达到使用限制，Claude Design 将不可用，直到您的限制重置。如果您已启用使用额度，在达到包含的限制后可以继续工作。了解更多关于使用和长度限制如何工作的信息。
注意：Claude Design 之前有自己的每周额度，与您的其他使用限制分开。所有 Claude Design 活动现在计入您计划的共享限制。
获得最佳效果的提示
导入完整的设计系统。导入包含您的样式、字体和组件的完整设计系统。
从简单开始，然后逐层增加复杂性。从核心布局和内容开始，然后添加交互、边界情况和打磨。Claude 对增量请求反应良好。
在反馈中要具体。"这看起来不对"很难执行。"将表单字段之间的间距紧缩到 8px"给 Claude 提供了它需要的确切内容。
参考您的设计系统。如果您知道组件存在于您的品牌系统中，请按名称提及："使用主按钮组件"或"应用卡片布局模式。"
尽早考虑响应式设计。提及您的设计是否需要在移动设备、平板电脑和桌面上工作，或仅在其中之一上工作。
要求变体。如果您不确定方向，请要求 Claude 向您展示 2-3 个选项。比较替代方案比猜测要快得多。
向 Claude 寻求反馈。Claude 可以审查您的设计的可访问性、对比度、信息层次结构和一般可用性。将其视为设计协作者，而不仅仅是生成器。
已知限制
需要注意的几点：
评论持久性：内联评论有时不会出现在页面上，但您仍然可以通过打开评论视图来查看它们。
大型代码库：考虑从 Claude Code 链接非常大的存储库以避免延迟或浏览器问题。要同步设计系统，请从 Claude Code 使用 /design-sync。
聊天错误：如果您遇到"聊天上游错误"，请尝试在同一项目中启动新的聊天标签页。
移动设备：无法在 iOS 和 Android 的 Claude 应用上更改分享设置，因此您需要使用 Claude 网页版或桌面版。
多人编辑：两个或更多人同时编辑设计项目仍然是基础功能，可能无法可靠地工作。
设计系统导入：设计系统导入的质量取决于其源。混乱的代码库或不完整的文件将显示在输出中。
版本历史：Claude Design 还没有版本历史。
从图层列表中删除：在属性面板的图层列表中，删除、退格和剪切作用于画布上选定的内容，而不是您移动到的行。首先在该行上按 Return。
使用键盘添加到设计：在画布上放置新的文本图层、画板、形状或注释需要鼠标或触控板。请要求 Claude 添加它。