Tracks
AI 基础知识
10小时
How Does Claude Design Work?
双栏布局：左侧为聊天，右侧为实时画布。您输入提示，Claude 在画布上生成设计，然后持续打磨。Anthropic 将该循环描述为五步：
- 基于相关上下文创建项目
- 描述您的诉求
- 审阅输出
- 通过聊天与评论迭代
- 导出或分享
让我注意到的一点是澄清问题的行为。当提示含糊不清时，Claude 可能会先暂停询问所需信息，而不是直接根据推断绘制第一个版本。
左侧聊天面板，右侧生成画布。作者供图。
现在我们来看下该循环的各环节在实践中的体验。
设置项目与添加上下文
新项目会继承已发布的组织设计系统，因此一旦完成该设置，品牌资产无需重复上传。
设置指南建议在一开始就向 Claude 提供真实上下文：截图、模型稿、您喜欢风格的幻灯片，以及（若存在）代码仓库。如果需要更多信息，Claude 可能会在绘制前提出澄清问题，从而暴露您遗漏的细节。
好的提示涵盖四个方面：目标、布局、内容与受众。示例提示包括“创建一个展示月度收入的仪表盘，带有地区与产品线筛选”以及“设计一个包含 4 个屏幕的移动端应用新手引导流程”。
在画布上迭代
初稿之后有多种路径推动设计前进。
- 聊天用于处理整体变更（更深的主题色、提供两到三种布局备选）
- 行内评论可针对特定元素，无需说明其位置
- 直接文本编辑可无需提示就修改文案
- 自定义调节滑块可实时微调间距、颜色与布局
首日一个小问题：评论偶尔会在 Claude 读取前消失。将文本粘贴到聊天中是文档给出的替代方案。虽恼人，但在依赖评论进行评审前知道这一点更好。
版本、分享与导出
若要保留当前草稿并尝试不同方向，Anthropic 建议对 Claude 说类似“保存当前成果，并尝试完全不同的方案”。
分享遵循组织范围，包含私有、仅查看、可评论与可编辑权限；可编辑权限允许队友在同一会话中修改设计并与 Claude 对话。
导出菜单位于右上角，涵盖常见文件格式、到 Canva 的移交，以及打包移交至 Claude Code。
What Can You Build with Claude Design?
发布公告基于预发布客户的使用情况，点名了六种输出类型。以下逐一简述：
- 逼真的原型：将静态模型稿转为可分享、可做用户测试的交互式原型，无需代码评审或拉取请求。
- 产品线框与模型稿：功能流程，可移交至 Claude Code，或交给设计师进行润色。
- 设计探索：快速尝试多种方向，适合平时必须“节省”探索时间的设计师。
- 路演与演示文稿：从粗略大纲到符合品牌的整套幻灯片，支持导出
PPTX或发送至 Canva。 - 营销物料：落地页、社媒素材与活动视觉。
- 前沿设计：由代码驱动的原型，包括语音、视频、着色器、3D 或内置 AI。这是六类中最具实验性的，我将在“限制”部分回到其未解之处。
画布上的移动端新手引导原型。作者供图。
管理员指南还将微型站点与落地页列为单独类别。Anthropic 的发布见证侧重速度，以及在一次会议内从想法到原型；将这些视为参考而非普遍结论，因为同一文档也指出更具实验性的输出仍有粗糙之处。
How Claude Design Uses Brand and Design Systems
这一部分很重要，因为它会改变默认输出。Anthropic 警示称，缺少设计系统时，团队得到的是“可用但通用”的输出。一旦发布了系统，新项目会继承您的颜色、字体与组件。关键在于：提取出的系统质量取决于您上传的源资产质量，输入杂乱则初始系统也会杂乱。
下面来看系统是如何构建的。
How the system is created
设置在组织层面进行一次即可。设计系统文章介绍了四步：创建组织、上传品牌与产品资产、审阅 Claude 生成的内容，并为团队发布。源素材可以是代码仓库、现有设计文件、体现视觉识别的幻灯片，或徽标与调色板等单个资产。任一来源即可起步。
Anthropic 表示，生成的系统通常涵盖调色板、字体系、组件（按钮、卡片、导航）与布局模式。可使用诸如“为[您的产品]创建一个落地页”的提示进行测试，看看品牌在实践中的呈现。
带有提取令牌的设计系统审阅。作者视频。
发布、多套系统与更新
当您满意后，打开“Published（已发布）”开关，这样该组织中的新项目会默认继承它。团队可为子品牌或不同产品线维护多套系统。要更新某套系统，设计系统文章引导用户点击“Remix”按钮，随后会打开一个聊天会话，Claude 可在其中修改其组成部分。
管理员指南明确了先后顺序：在没有已发布系统的情况下开启 Claude Design，会得到“可用但通用”的输出，这也是为何推荐的上线顺序是先设置设计系统，再扩大访问范围。
What Kind of Input Does Claude Design Accept?
您并不限于一行提示。Claude Design 接受多种可相互配合的输入类型，越真实的上下文往往能带来越好的初稿。
当前文档列出的输入包括：
- 聊天面板中的纯文本提示。
- 截图、图像或现有资产，包括您想要复刻风格的幻灯片与文档。
DOCX、PPTX与XLSX格式的文档，在发布帖中点名支持。- 代码库，可通过链接代码仓库或在导入流程中附加本地文件夹。
- 网页捕获：您可以捕获现有网站中的元素，使 Claude 更贴近真实界面模式。
有两点常被误传。Anthropic 提到“现有设计文件”，但并未列出原生设计工具格式，目前也未宣称支持原生 Figma 导入或导出；导出菜单不包含 .fig 文件。若您的流程依赖与 Figma 的往返协作，建议在投入使用前与在线产品进行核对。
若首版未达预期，可回到前文的四要素清单：目标、布局、内容与受众。
Claude Design vs. Claude Code
它们共享 Claude 这一名称、底层模型与移交流程，但并非同一工具。自发布以来，我见过的常见混淆之一就是把两者混为一谈。名称相似，产品分工不同。
让我们看下实际差异。
各自的用途是什么？
Claude Design 是一个用于在画布上创建与打磨视觉输出的 Web 产品：原型、演示文稿、微型站点与营销页面。它可以读取代码仓库以理解您的品牌，但不会编辑代码库或执行命令。
Claude Code 是具代理能力的编码工具。官方概览将其描述为可读取代码库、编辑文件，并在您现有开发流程中运行命令的工具。它可在终端、IDE、桌面应用或浏览器中运行，其职责是处理代码。分工不同，流程一致。
Claude Design 与 Claude Code 如何衔接？
当项目准备就绪进入构建阶段，导出菜单提供移交至 Claude Code 的选项，可移交给本地编码代理或 Claude Code Web。Anthropic 表示，Claude 会将设计意图打包为一个捆绑，接收方代理可通过单条指令获取。具体点击路径见下方演示。
正确的心智模型是一个序列：构思、原型、代码。这两个产品还有独立的使用限额，我会在“访问方式”中说明。
Who Is Claude Design For?
Anthropic 将受众分为两类：需要通常“节省”探索时间的资深设计师，以及“其他所有需要在无设计背景下产出视觉工作”的人。其上线指引还点名了 UX 研究员、产品经理、市场人员和相关职能。
从材料与客户引述来看，该产品适合设计师在早期测试方向、产品经理勾勒功能流程，以及需要在不熬周末的情况下做出一套演示的创始人或客户经理。
它同样适合市场人员作为起点制作落地页、社媒素材与活动视觉，以及需要用可视化方式传达想法、但不打算上手 Figma 的非设计人士。
覆盖面广，但并非“人人适用”。需要严格遵循组件库与精确规范的设计师，在后期工作中仍需使用真正的设计工具。对于已经建立品牌系统、重视首版质量的团队，契合度更高。
Where Does Claude Design Fit?
该产品位于设计流程的早中期阶段，在这一阶段，首版效果往往比最终打磨更重要。以下用例来自 Anthropic 的定位、官方教程和发布见证。
最常见的模式是早期原型探索、需要看起来“像真的”但不必落地成代码的内部演示，以及为创始人、销售团队或客户经理准备的演示文稿。
同样的逻辑也适用于活动创意、落地页首版、品牌化模型稿与移交准备。Anthropic 表示，完成的原型可打包移交至 Claude Code 或 Claude Code Web 进行实现。
这些用例的共同点是：从想法到可展示的首版。该产品并不试图覆盖整个设计流程。清单上的每个场景也未必一次到位，这也是为何多数早期成功案例通常经过两到三轮迭代，而非一轮。
Testing Claude Design In Practice
只阅读流程介绍终究有限。这里通过一个您的账号若有权限即可复现实操的简要全流程演示。如果您已理解流程，可直接跳到导出步骤——这是最多人将其与 Claude Code 混淆的部分。
打开 claude.ai/design，点击 New project，将其命名为 Workspace tour，并选择 High fidelity。将以下提示粘贴到聊天面板：
Create a dashboard for a small fintech app.
It should show monthly revenue at the top, a chart of revenue over the last six months in the middle, and a list of recent transactions below.
Keep it clean and readable. Single page, no sidebar.Claude 可能会先问几个澄清问题：受众、美学风格、货币与导航模式。给出简单回答即可（内部团队、简洁极简、USD、仅顶部导航）。稍作等待后，画布应会填充内容。
然后开始迭代。将画布切换至 Comment 模式，点击主要号召性按钮，输入一句话请求，如“增加该按钮的水平内边距”。这就是前文所述的行内评论行为。
固定到画布元素的行内评论。作者供图。
当设计达到预期时，点击 Export 并选择 Hand off to Claude Code。这就是前文提到的移交路径。