Anthropic 做的不是图片生成器,是设计工作流
2026 年 4 月 17 日,Anthropic 发布了 Claude Design。当天 Figma 股价下跌 4.26%。市场反应比产品本身更能说明定位:投资者意识到 Anthropic 不再只卖模型访问权限,而是在构建从概念到代码的垂直产品栈。
Claude Design 不是 Midjourney,不是 DALL-E。它不接收一段文字提示就返回一张图片。它接收一段对话——关于你想构建什么的来回讨论——并产出设计产物:原型、演示文稿、单页文档、落地页概念和营销素材。它运行在 Claude Opus 4.7 上,这个模型 Anthropic 就在前一天刚发布。Opus 4.7 的视觉感知能力是关键支撑:XBOW 视觉准确率从上一代的 54.5% 跃升至 98.5%,接近翻倍的提升使 Claude Design 所需的精细布局理解成为可能。在 SWE-bench Verified 上,Opus 4.7 得分 87.6%(比 4.6 高 6.8 个百分点),SWE-bench Pro 得分 64.3%,均为当前行业最高,这也构成了设计到代码移交的底层能力。
最重要的功能不是任何一个设计能力,而是与 Claude Code 的集成。当设计完成后,Claude Design 将其打包成一个 handoff bundle,Claude Code 可以用一条命令开始实现。从对话到设计产物再到可工作代码——这个管线是 Claude Design 存在的理由,也是评估每个设计功能的透镜。
Claude Design 到底能做什么
Claude Design 是一个对话式设计环境。你描述你想要的,Claude 生成初始产物,你通过提示词、内联评论、直接文本编辑和调节滑块的组合进行迭代。
| 功能 | 具体能力 |
|---|---|
| 设计系统摄入 | 首次使用时读取代码库和设计文件,构建品牌系统——颜色、字体、间距、组件。后续所有项目自动应用这些约束。 |
| 多源输入 | 接受 DOCX、PPTX、XLSX、图片、代码仓库、网页抓取(内置工具)。 |
| 内联评论 | 选中任何元素并留下评论,Claude 将修改应用到该特定元素。 |
| 直接文本编辑 | 点击任意文本块直接编辑,像文档编辑器一样。 |
| 调节滑块 | 实时滑块调整间距、颜色、布局,无需 prompt engineering。 |
| 全局应用 | 告诉 Claude 将修改应用到整个设计——不只是选中元素。 |
| 交互原型 | 将静态 mockup 转为可点击原型,支持语音、视频和 3D 着色器元素。 |
| 导出格式 | 内部 URL(组织分享)、本地文件夹、Canva、PDF、PPTX、独立 HTML、Claude Code handoff bundle。 |
设计系统摄入是差异化所在。如果你把 Claude Design 指向一个有现有 Tailwind 配置、组件库和品牌规范的代码库,它会学习这些约束并自动应用。后续设计不是通用 AI 输出——它们被你现有的视觉语言约束。Google Stitch 采用不同方式:生成一个描述设计系统的 DESIGN.md 文档,而不是摄入一个。权衡在于可移植性与准确性。
可用性:Research Preview(研究预览)。适用于 Claude Pro($20/月)、Max($100-200/月)和 Team 计划($25/席位/月)。Enterprise 需管理员手动启用。免费用户无法使用。设计使用消耗 Claude 订阅额度。
竞品对比
AI 设计工具市场已经拥挤。Claude Design 进入的市场中,Google Stitch、Figma Make、Vercel v0 和 Lovable 都在争夺类似的工作流。有意义的比较不是功能对功能——每个工具都能从提示词生成 UI。比较的是每个工具优化的是哪个工作流。
| 维度 | Claude Design | Google Stitch | Figma Make | Vercel v0 | Lovable |
|---|---|---|---|---|---|
| 核心工作流 | 对话→设计→代码移交 | 设计探索→设计系统文档 | Figma 原生 AI 生成→生产 Figma 文件 | React 组件生成 | 全栈应用构建 |
| 免费额度 | 无(需 Pro+) | 有(50 Pro + 350 Flash/月) | 需 Figma 付费计划 | 有限免费额度 | 有限免费额度 |
| 设计系统 | 从代码库自动摄入 | 生成 DESIGN.md | 使用现有 Figma 组件库 | 无(生成独立组件) | 无 |
| 导出 | Canva、PDF、PPTX、HTML、Claude Code | 代码导出为主 | 原生 Figma 文件 | React 代码 | 已部署应用 |
| 代码管线 | 原生 Claude Code 集成 | 手动 | 需 MCP 连接 | 原生(Vercel 部署) | 原生(自托管) |
| 目标用户 | 有现有代码库的团队 | 设计探索阶段 | 已投资 Figma 生态的设计师 | 前端开发者 | 非技术创始人 |
| 品牌一致性 | 高(自动学习) | 中(生成文档) | 高(现有 Figma 库) | 低(按组件) | 低 |
Claude Design 占据特定生态位:已经有代码库和设计系统的团队,希望 AI 生成的设计产物与品牌一致,并能通过 Claude Code 移交给开发。如果你的团队不用 Claude Code,移交优势就不存在。如果你的团队没有代码库中的成熟设计模式,设计系统摄入就无从学习。
Stitch 更适合早期设计探索,免费额度也更慷慨。Figma Make 更适合已投资 Figma 生态的团队。v0 更适合 React 重度前端团队。Lovable 更适合非技术创始人。
设计到代码管线
这是 Claude Design 作为 Anthropic 产品(而非独立工具)存在的理由。
工作流如下:在 Claude Design 中创建设计——落地页、仪表盘概念、演示文稿。满意后,导出为 Claude Code handoff bundle。这个 bundle 包含设计意图、组件规格和结构信息。打开 Claude Code,指向 bundle,agent 开始针对你的现有代码库进行实现。
对比传统的 Figma→开发者工作流:设计师在 Figma 中创建 mockup,开发者检查设计,手动将像素值和间距翻译成代码,逐个组件实现 UI。翻译步骤是信息丢失发生的地方——间距被近似、响应式行为被即兴处理、开发者做大量偏离原始设计意图的小判断。
Claude Design 的管线将此压缩为一步:设计产物到代码实现,由创建设计的同一个模型中介。这是否真的比熟练开发者手动实现 Figma 设计产生更好结果,还有待大规模验证。但结构论证是成立的:减少设计意图和部署代码之间的翻译步骤,就减少了信息丢失的表面积。
谁该用,谁该等
| 用户类型 | 使用场景 | 建议 |
|---|---|---|
| 设计师 | 快速设计探索、静态 mockup 转交互原型 | 如果团队用 Claude Code 值得尝试,否则继续用 Figma。 |
| 产品经理 | 画功能流程、创建概念文档、汇报演示 | 强匹配。对话界面适合从描述而非视觉布局开始的工作流。 |
| 创始人 | 投资人演示文稿、产品概念页、快速原型 | 如果已付 Claude Pro 值得。仅演示文稿场景就可能回本。 |
| 市场营销 | 落地页概念、活动素材、品牌素材变体 | 有用,但 Canva 的现有模板生态对大多数营销任务可能更快。Canva 导出集成使它成为可行的桥接工具。 |
| 工程师 | 写代码前的快速视觉原型、创业式 mockup | Claude Code 集成使其与工程师的匹配度最强。先设计,再移交给写代码的同一个 agent。 |
共同点:Claude Design 在与 Claude Code 配合使用时价值最大。作为独立设计工具,它与有数年生态投资的成熟产品竞争。作为 Claude Code 开发管线的设计前端,它提供了目前其他工具都没有的工作流。
局限:Research Preview 的现实
Anthropic 将此标记为"Research Preview",这个标签有具体的含义。
设计系统摄入质量未经大规模验证。 在 Anthropic 的演示中有效。当指向大型、杂乱、多团队代码库且样式不一致时,是否产出有用结果未知。真实组织中的设计系统很少像演示环境暗示的那样干净。
原型健壮性不确定。 Claude Design 可以将静态 mockup 转为交互原型。问题是这些原型是否能从演示友好场景存活到有真实数据、真实边缘情况和真实用户流的生产代表性场景。
必然需要人工修复。 没有 AI 设计工具产出零人工修改的生产就绪输出。问题是需要多少修改。如果 Claude Design 完成 80%,设计师花 20 分钟打磨,那是强工作流。如果完成 50%,设计师花一小时重建布局和间距,时间节省就消失了。
这是设计工作流工具,不是产品基础设施工具。 Claude Design 可以创建落地页概念。它不能构建带认证、表单处理、支付、分析和 A/B 测试的落地页。Claude Code 移交有助于弥合差距,但期望管理很重要。
竞争格局在快速移动。 Google Stitch 以更慷慨的免费层级和可移植的设计系统格式发布。Figma 持续深化其 AI 能力。Claude Design 作为 Claude Code 用户默认 AI 设计工具的窗口现在打开着,但不会无限期保持。
常见问题
Claude Design 是什么?
Claude Design 是 Anthropic 于 2026 年 4 月 17 日发布的 AI 视觉协作工具。它允许用户通过与 Claude 的对话创建设计产物——原型、演示文稿、落地页、营销素材。运行在 Claude Opus 4.7 上,与 Claude Code 集成进行设计到代码移交。
Claude Design 多少钱?
Claude Design 包含在 Claude Pro($20/月)、Max($100-200/月)和 Team 计划($25/席位/月)中,使用现有订阅额度。Enterprise 用户需管理员手动启用。免费用户不可用。
和 Google Stitch 比怎么样?
Google Stitch 免费额度更慷慨(50 Pro + 350 Flash/月),产出可移植的 DESIGN.md。Claude Design 从代码库自动摄入设计系统,与 Claude Code 直接集成进行代码移交。Stitch 更适合自由探索设计。Claude Design 更适合有代码库的团队想要设计到代码管线。
没有 Claude Code 能用吗?
可以。Claude Design 可以独立作为设计工具使用——创建设计、迭代、导出到 Canva/PDF/PPTX/HTML。但 Anthropic 定位为核心价值主张的 Claude Code 移交需要 Claude Code。
生产环境能用吗?
不能。Anthropic 标记为"Research Preview"。核心工作流可用,但未发布大规模的设计系统摄入可靠性指标、原型健壮性或生产级输出质量指标。适合原型制作、概念工作和内部演示,不建议替代专业设计工具用于生产关键工作流。
Claude Code 移交是什么?
设计完成后可导出为"handoff bundle"——打包的设计规格、组件结构和视觉意图。在 Claude Code 中加载,编码 agent 基于你的现有代码库实现设计。目标是消除传统上存在于设计工具和代码实现之间的手动翻译步骤。