Claude Design — Product Team Workflow
来源：Pawel Huryn (@PawelHuryn)，2026-05-05
Claude Design 是 Anthropic 于 2026 年推出的 AI 原生设计工具，核心定位不是替代 Figma 的画布速度，而是压缩产品团队的 Time to Learn——从"我们应该尝试 X"到"我们有证据证明它工作或失败"的时间。
工作流压缩
Claude Design 压缩两个关键环节：
想法 → 原型
- 旧流程：数天（有专职设计师）或数周（无设计资源）
- 新流程：当天下午，通过聊天、评论或草图在数小时内迭代
已批准设计 → 生产代码
- 旧流程：数周。工程师在 Figma 中重建，实现漂移，反复确认设计"真正"的含义
- 新流程：数天。工程师通过 Claude Code 从原型和设计系统继续，无需重建
设计系统生成
Claude Design 从多种来源提取设计系统：
| 来源优先级 | 说明 |
|---|---|
| 代码库 | 优先。当代码和 Figma 同时存在时，代码胜出 |
| Figma 文件 | 次优。可直接导入 |
| DESIGN.md | 最低保真度。纯规则，无资产、组件或动效。适合从零开始时快速播种 |
生成三个产物：
- Design System：UI kit、排版、颜色、间距、组件、品牌
- Design Files：资产、HTML、图片、样式表
- Skill.md：Claude Design 生成的设计系统 skill，供 agent 保持品牌一致性
原型迭代
四种精炼工具：
- Chat：自然语言调整（"让空状态更友好"）
- Comments：Figma 风格的线程批注
- Sketch：直接在原型上绘制
- Edit：在系统中直接应用更改
Tweaks：同一画布上的多个变体。例如，可要求生成 Anthropic 风格变体并并排比较。
导出与交接
六种导出选项：PDF、PPTX、ZIP、Standalone HTML、Canva、Claude Code handoff。
Claude Code handoff 改变工作流：原型不是工程师需要重新实现的交付物，而是他们继续工作的起点。
当前五大缺口（Research Preview）
- 无 MCP 支持。Claude Design 尚未连接 MCP 服务器，也不暴露 MCP server。这是最大缺口
- 无 backlog/issue tracker 同步。建议手动链接 Jira/Linear 状态
- 无状态、预览或筛选器。工程团队无法判断哪些项目已准备好拉取
- 无内置实验运行器。无法像 Figma→Maze 那样大规模运行可用性测试
- 无配套笔记的明确归属。测试用例、客户访谈笔记等缺乏与设计的长期绑定位置
每个缺口的临时解决方案相同：用 Jira/Linear 管理 ticket，Claude Design 负责设计，在现有 stack 中运行实验或更早 ship 并从真实使用中学习。
关键指标
Pawel Huryn 提出 Time to Learn 作为衡量标准：
"What matters for a product team is Time to Learn — the time from 'we should try X' to 'we have evidence it works or fails.' Claude Design can radically reduce it."
这与传统"设计速度"的衡量单位（画布操作效率）根本不同。
实战技巧
导入 Design System 提升一致性
来源：AI 简报 2026-06-01 Evening — 宝玉 (@dotey)
Claude Design 共享额度后可用次数增加，但 Token 消耗仍然较大。一个提升产出质量的关键技巧是先导入成熟的 Design System，再让 AI 设计。
推荐 Design System：
- Adobe Spectrum 2 — 通过 URL 即可导入
- 导入后风格一致性显著提升，成品更高端大气
操作方式：在 Claude Design 中提供 Design System 的 URL，系统会自动提取颜色、排版、组件规范并应用于后续设计。
建议：整理常用的 Design System 链接清单，方便快速导入。