Claude Design 使用笔记
这篇文章解决什么问题
Claude Design 是 Anthropic Labs 在 2026-04-17 发布的研究预览产品，入口是：
它的定位不是普通聊天，也不是单纯图片生成。更准确地说，它是在 Claude 里放了一个视觉工作台：左侧对话，右侧画布。你用自然语言描述需求，Claude 在画布上生成设计、交互原型、演示文稿、one-pager、落地页或营销素材，然后继续通过对话和画布注释迭代。
采集时间：2026-05-26。
先说结论
Claude Design最适合把想法快速变成“能看的视觉草稿”或“能点的交互原型”。- 它现在是研究预览版，面向 Claude Pro、Max、Team、Enterprise 计划；Enterprise 默认关闭，需要管理员开启。
- 它可以吃上下文：截图、图片、文档、PPT、代码库、设计文件、网站采集内容。
- 真正好用的关键不是一句“帮我设计页面”，而是把目标、受众、内容、布局、品牌约束、交互和边界状态说清楚。
- 团队使用前最好先配置设计系统，否则容易得到能用但偏通用的 AI 模板。
我的判断：
Claude Design更像“产品想法到可讨论原型”的加速器，不是替代设计评审、品牌规范和工程落地的最终答案。
它适合做什么
官方给出的典型场景包括：
| 场景 | 适合程度 | 说明 |
|---|---|---|
| 产品原型 | 很适合 | 把功能想法变成可点击流程，适合产品、设计、研发一起讨论 |
| 页面探索 | 很适合 | 一次生成 2-3 个方向，比空口讨论更快 |
| 演示文稿 | 很适合 | 可导出 PPTX、PDF，也可保留 HTML 交互能力 |
| 落地页和 microsite | 适合 | 适合初稿、活动页、销售页，不建议不审稿直接上线 |
| 社媒图和营销素材 | 适合 | 适合快速出方向，后续仍要设计师把关 |
| 复杂生产 UI | 谨慎 | 可做参考和 handoff，但最终实现仍要回到代码和设计系统 |
如果你是产品经理，它最值钱的是“让需求更具体”。如果你是设计师，它最值钱的是“更快探索多个方向”。如果你是开发者，它最值钱的是“拿到更接近真实组件和状态的实现上下文”。
基本使用流程
最小流程是这样：
- 打开 Claude Design。
- 新建项目。
- 上传或连接上下文，比如截图、现有页面、产品文档、PPT、代码库。
- 用一段结构化 prompt 描述要做什么。
- 看右侧画布生成的结果。
- 用聊天做全局调整，用画布注释改局部细节。
- 满意后导出 HTML、PPTX、PDF，或 hand off 给 Claude Code。
这里最容易跳过的是第 3 步。不要跳。没有上下文时，Claude Design 只能靠通用审美猜；给了真实页面、组件、品牌资料之后，它才更可能贴近当前项目。
第一次 prompt 怎么写
一个稳定的 prompt 至少包含四件事：
| 部分 | 要写什么 |
|---|---|
| 目标 | 你要做 dashboard、landing page、onboarding、slide deck，还是 admin panel |
| 受众 | 给用户、老板、销售、投资人、运营、开发者，还是内部审核人员看 |
| 内容 | 页面上必须出现哪些信息、字段、数据、模块 |
| 布局 | 大概结构、屏幕数量、导航方式、信息优先级 |
更实用的写法是再补三类约束：
| 约束 | 示例 |
|---|---|
| 品牌约束 | 使用现有官网视觉，保持深色背景，不要做渐变球装饰 |
| 交互约束 | 列表可筛选，点击项目打开右侧详情抽屉 |
| 状态约束 | 补齐 loading、empty、error、大数据量、移动端状态 |
可直接套一个模板：
text
为 [产品/功能] 设计一个 [页面/流程/演示文稿]。
受众：[谁会使用或观看]
目标：[看完或用完后要完成什么]
内容：[必须出现的信息、字段、模块]
布局：[屏幕数量、导航、主要区域]
交互：[点击、筛选、编辑、提交、切换等行为]
状态：[loading、empty、error、权限不足、大数据量、移动端]
视觉：[品牌、颜色、字体、参考页面、禁止事项]
输出：[原型/页面/幻灯片/多个方案]示例：
text
设计一个 SaaS 通知中心原型，面向已经登录的企业用户。
目标：让用户查看通知、筛选未读、批量标记已读，并进入通知详情。
布局：桌面端两栏结构，左侧为筛选和分类，右侧为通知列表，点击后打开详情抽屉。
内容：通知标题、类型、时间、来源、状态、操作按钮。
交互：支持按类型筛选、按未读筛选、批量选择、详情抽屉关闭。
状态：补齐空状态、加载状态、接口失败状态、通知超过 100 条时的表现。
视觉：使用严肃的 B2B 工具风格，信息密度高，不要营销落地页风格。
输出：先给 2 个布局方向，再推荐一个。迭代时怎么说
第一次结果通常不要直接要“优化一下”。这句话太空。
更好的做法是分层改：
| 想改什么 | 用什么方式 |
|---|---|
| 整体结构 | 用聊天说明，比如“把指标挪到第一行，图表放下面” |
| 局部组件 | 用画布内联注释，比如“这个按钮弱化，不要成为主按钮” |
| 视觉方向 | 要 2-3 个备选方案，再选一个继续 |
| 文案 | 直接指定目标语气、长度、受众 |
| 可访问性 | 让 Claude 检查对比度、焦点状态、键盘路径 |
| 工程交接 | 让它解释组件选择、状态、边界和实现注意点 |
我更推荐这样的迭代顺序：
- 先定信息架构，不急着调颜色。
- 再定主流程和关键交互。
- 再补状态：空、错、加载、权限、长列表、小屏。
- 最后调视觉密度、间距、层级、动效。
如果先调颜色，后面结构一改，很多细节都会白调。
设计系统怎么用
团队场景下，Claude Design 的设计系统很关键。
官方文档建议先由设计负责人或品牌负责人设置设计系统。它可以从这些材料里提取颜色、字体、组件和布局模式：
- 代码库或组件库
- 现有产品截图和流程
- PPT、PDF、品牌手册
- Logo、色板、字体规范
- 已上线的网站或营销页面
配置完成后，团队里的新项目会自动套用这个设计系统。
这件事的价值很直接：减少“看起来能用，但不像我们产品”的输出。
如果只是个人试用，也可以用低配版做法：
- 上传一张现有页面截图。
- 上传一份产品说明或结构草稿。
- prompt 里明确说“沿用截图里的信息密度、颜色层级和按钮风格”。
- 如果有代码库，只连接相关组件目录，不要把整个大仓库都丢进去。
大仓库会拖慢浏览器和导入过程。官方也建议大型代码库只链接具体子目录，而不是整个 monorepo。
和 Claude Code 怎么配合
Claude Design 到 Claude Code 的关键不是“把图交给工程师”，而是把设计意图一起带过去。
handoff 前最好让 Claude Design 先补三件事：
命名清楚
组件、页面、状态、交互不要叫card1、button2这种临时名字。写明决策
比如为什么用 tabs 而不是 sidebar，为什么详情用抽屉而不是新页面。补齐边界
empty、loading、error、权限不足、超长文本、移动端、数据很多时怎么显示。
这样 Claude Code 接到的不是“照着图片做”，而是“按这套设计意图和状态合同实现”。
演示文稿怎么用
Claude Design 做 slide deck 很适合这几类场景：
- 客户会议准备
- 路线图说明
- 季度复盘
- 投资人或董事会材料初稿
- 联合品牌提案
- 内部 all-hands
prompt 里要比普通页面多写这些内容：
| 项 | 示例 |
|---|---|
| 页数 | 10 页、15 页、5 页 |
| 结构 | 背景、问题、方案、数据、路线图、下一步 |
| 受众 | 客户、管理层、投资人、内部团队 |
| 语气 | 高层摘要、销售说服、产品说明、技术汇报 |
| 输出 | PPTX、PDF、HTML 演示 |
示例：
text
做一个 10 页产品路线图汇报 deck，面向公司管理层。
结构：
1. 标题页
2. 当前业务背景
3. 用户问题
4. 本季度已完成
5. 下季度重点
6. 关键指标
7. 风险和依赖
8. 资源需求
9. 时间线
10. 决策项
风格：简洁、管理层可快速扫读，每页只保留一个主结论。
输出：先生成可演示版本，再给我一版适合导出 PPTX 的静态版本。这里有个小技巧：如果需要动画和交互，保留 HTML 更合适；如果要发给别人继续编辑，PPTX 或 Canva 更合适。
常见错误
1. 只说“做高级一点”
这会导致 Claude 自己猜风格。更好的说法：
text
做成 B2B 内部工具风格：信息密度高，浅色背景，表格清晰，弱化装饰，按钮只突出主操作。2. 不给真实内容
没有真实字段和数据时，画布容易漂亮但空。至少给它字段名、样例数据、页面模块和用户任务。
3. 一上来要完整产品
不要一次让它设计整个系统。先做一个核心流程，例如：
- 登录后首页
- 详情页
- 创建流程
- 审核队列
- 设置页
流程通了，再扩展。
4. 只看默认状态
默认状态最容易好看，真实产品最容易坏在边界状态。每次交付前都问：
text
请补齐这个页面的 loading、empty、error、权限不足、超长文本、大数据量和移动端状态。5. 把它当最终设计稿
Claude Design 的优势是速度和方向探索。最终仍要人检查：
- 信息层级是否正确
- 文案是否准确
- 品牌是否一致
- 交互是否合理
- 无障碍是否达标
- 工程实现是否过重
我的使用建议
如果只是个人使用，可以按这个节奏：
- 先上传参考图或现有页面。
- 用结构化 prompt 生成第一版。
- 要 2-3 个方向，不要急着选第一版。
- 选一个方向后，用聊天改结构，用内联注释改细节。
- 交付前强制补边界状态。
- 导出前让它写一段设计决策说明。
如果是团队使用，可以按这个节奏：
- 先让设计负责人配置设计系统。
- 小范围给设计、产品试用。
- 收集哪些输出不符合品牌。
- 迭代设计系统。
- 再开放给更大团队。
- 约定 handoff 前必须补齐状态和设计决策。
已知限制
截至当前官方文档，Claude Design 仍是 Anthropic Labs 的实验预览能力，需要注意：
- 内联评论有时可能在 Claude 读取前消失，必要时把评论文本再贴到聊天里。
- compact view 可能触发保存错误，遇到时切回 full view 重试。
- 连接大型代码库可能导致卡顿或浏览器问题，最好只导入相关子目录。
- 遇到
chat upstream error时，可以在同一项目里新开聊天 tab。 - Team / Enterprise 管理文档也写到，目前还没有 audit logs 或 usage tracking。
- 当前主要通过
claude.ai/designWeb 界面使用。
这些限制说明它还不适合直接作为强治理、强合规、强流程审计的唯一设计平台。