Claude Design 大战 GPT Image-2：谁代表着下个时代的设计范式？

十字路口Crossing十字路口Crossing··0·0

多模态和 Coding Agent，谁才是通往 AI 设计的最优解？

多模态和 Coding Agent，谁才是通往 AI 设计的最优解？

👦🏻 作者: 泛函

🥷 编辑: Koji

🧑‍🎨 排版: Zeooo

2026 年 4 月，两场产品发布几乎同时刷屏。

Anthropic 推出了 Claude Design, OpenAI 发布了 GPT Image-2。一个用代码生成网页，一个用多模态直接出图。

两家顶级 AI 公司，押注了两条完全不同的路。

这个分歧不是偶然，让 AI 做设计，从一开始就有两个方向。

一派认为应该做更强、更有审美的 Coding Agent——让 AI 通过生成前端代码的方式，灵活地做出各种惊艳的设计。

X 上网友分享用 Claude Design 做的网页设计

YouTube 上网友分享的用 Claude Design 做的 PPT

另一派认为应该做更强的图像生成模型——把图片质量、指令遵循、文字稳定性一点点打磨到极致。

图片来自 AI 领域知名公众号@歸藏的AI工具箱

从 GPT Image-2 提示词导航站中搜集的咖啡机电商详情页

X 的创作者@Austin 分享的案例

Anthropic 选了前者，OpenAI 选了后者。

现在，两种范式都出现了各自的王者产品。

一个问题自然浮现：谁更强？或者说，它们各自适合什么场景？

更进一步，在复杂的设计任务里，这两种工具能不能配合使用？该怎么配合？

从这两个产品的对决里，或许能看到设计类 Agent 接下来的发展方向。

我们设计了一个有意思的测试场景。

这是笔者自己的一个黑客松 idea，来自我自己真实的一个工作习惯。

我很享受给 Agent 下完一个长程任务后，起身去办公室外转一圈，晒晒太阳，呼吸新鲜空气。

五六分钟回来，Agent 刚好把活干完，接着下新指令。

这样既避免久坐，又能完成工作中的间歇休息，恢复精力。

所以，这次我们这么来做这个测试：假设我们要做一款名为「Agent Watch」的 Apple Watch 应用以及和它联动的 iOS APP。

你在电脑上给 Agent 下达一个长程任务需求后，这个任务的进程会自动同步到你的 Apple Watch 的「Agent Watch」应用上。

当你在 Watch 上没收到 Agent 完成任务的提醒时，可以闲散地去办公室外散步、拿个咖啡、买点喝的，干点别的事情。

当 Apple Watch 震动并显示 Agent 完成任务后，你可以再回到工位前，接着 Agent 的工作继续接力。

下面，就让我们基于这个产品 Idea，用 Claude Design 和 GPT Image-2 来完成从原型 --> 广告素材 --> 品牌手册 --> Pitch Deck 的全套设计。

产品创业第一步，先做个原型出来

首先，我们把初始的点子同时发给了 Claude Design 和 ChatGPT 上的 GPT Image-2，分别得到了以下结果。

我们做了一款 Agent Native 的 Apple watch 应用，名为"Agent Watch"，产品价值是能够通过手表语音输入和查看消息来监督你的 OpenClaw、Claude Code、Manus 等多种 Agent 的任务完成情况，请你帮我设计一下这款 Apple watch 应用的 watch 应用界面和附带的 APP 的 UI 界面，颜色以富有轻盈、有呼吸感的白色和淡绿色为主。

输入给 Claude Design 后，Claude Design 的输出效果非常不错，还贴心地把它放在了一个 UI 设计的交付画板上，完全达到了交付标准。

同样的提示词给到 GPT Image-2，它的输出对于启发设计思路还是会有帮助，亮点是在给出的 UI 示意图上做了不少贴心的文字标注，不过相比于 Claude Design 给出的结果要差了些。

接着我们让 Claude Design 和 GPT Image-2 给「Agent Watch」设计一款和它功能互补的 iOS APP。

请你用同样的设计系统，给这款 Apple Watch 应用设计一个联动的 iOS APP。

Claude Design 依旧给出了令人满意的结果，它给出的是一个可交互的 HTML 原型，你可以通过页面中不同按钮的方式，查看产品的整体交互，且整个页面是可以直接交付生产的程度。

在 Claude Design 完成设计后，点击右上角的【share】，可以看到一个名为【Handoff to Claude Code】的按钮，可以直接一键在 Claude Code 中完成完整的产品开发，很是方便。

GPT Image-2 的产出

相比之下，GPT Image-2 的设计和上面有同样的问题，虽然在设计上有启发意义，但是由于是直接生成的图片，会有一定的尺寸比例不协调和交互逻辑不符合正常习惯的问题，无法直接交付生产。

来上架 App Store 吧

假设这款产品已经被开发了出来，我们要将其上架到 App store，那么我们需要给它做一套应用商店的上架页面宣传图，我们试试分别用 Claude Design 和 GPT Image-2 来完成这个任务。

请你给「Agent Watch」的 Apple Watch 应用和 iOS App 设计一组 App Store 的应用商店上架页面宣传图。

在这个任务中，这两个产品可谓各有千秋。

GPT image-2 的交付结果

Claude Design 的交付结果

Claude Design 的优势是，交付效果非常稳定，文字、产品 mockup 和应用截图的排布都很简约清爽，让人一目了然其产品价值和卖点。

而 GPT image-2 的优势在于，直接生成图片的方式让它在排版上能更加灵活，做出更有意思的创意设计。

是时候发发小红书了

在应用上架了 App Store 之后，一般下一个流程是要去小红书上做宣传，为我们的产品带来更多的品牌声量和注册转化，接下来，我们试着用它来发几条小红书。

首先，我们让 Claude 给我们一些关于选题、封面设计和笔记内容的策划，并用这些策划来生成做小红书封面图和笔记主图的设计。

我们从中挑选出了一个比较有意思的选题来做测试：

基于这几个选题，Claude Design 和 GPT Image-2 分别完成了它们各自的输出。

Claude Design 的产出

Claude Design 的产出，感觉更像是信息图表，而不像是有意思的小红书笔记图，同时"AI 味"有点重，感觉像是不解风情的理科生做的设计。

GPT Image-2 的交付结果

相比之下，GPT Image-2 设计的笔记内页的生动有趣程度就要有意思很多。

投资人想找你聊聊，给 ta 看什么？

假设这个产品在取得了初步的成功，下一个阶段需要去融资、和别的科技品牌建立合作、进孵化器、申请各家 VC 、云厂商和政府给创业公司的福利的话，会需要一套产品介绍的 Pitch Deck（PPT）。

所以最后一个测试任务，我们就来测试一下在 PPT 场景下，两个模型产品表现效果如何。

这里有一个需要注意的是，由于两种技术范式的不同，Claude Design 的 上下文管理和长程任务能力优于 GPT Image-2，所以给两个模型产品的提示词我们也做了相对应的调整。

给 Claude Design 的提示词：

请为 Agent Watch 设计一套 Pitch Deck,用于向投资人展示这个产品。

背景信息: Agent Watch 是一款 Apple Watch 应用,配合 iOS APP 使用。核心价值是让用户在给 AI Agent(Claude Code、Manus、OpenClaw 等)下达长程任务后,可以离开工位去散步、休息,当 Agent 完成任务或需要确认时,Apple Watch 会震动提醒用户回来处理。

产品解决的问题:

  • 用户需要长时间盯着屏幕等 Agent 跑完任务
  • 久坐办公导致缺乏运动和休息
  • 错过 Agent 的关键确认请求,导致任务挂起

核心功能:

  • 手表实时显示 Agent 任务进度
  • 任务完成/需要确认时震动提醒
  • 手表快速确认,手机查看详细上下文
  • 支持多个 Agent 同时管理
  • 消息收件箱式管理

请设计 8-10 页 PPT,包含:

  1. 封面(产品名称、slogan)
  2. 问题(用户痛点场景)
  3. 解决方案(产品核心价值)
  4. 产品演示(关键界面和交互流程)
  5. 使用场景(真实工作流程)
  6. 竞品对比(与传统番茄钟、通知工具的差异)
  7. 商业模式(免费版 vs Pro 版)
  8. 团队与愿景

设计要求:

  • 配色:淡绿色(#A8D5BA)和白色为主,轻盈、有呼吸感
  • 风格:简洁、现代、Apple 风格
  • 每页有清晰的视觉主体,不要文字堆砌
  • 适合投资人路演使用,重点突出商业价值

请生成完整的网页版 Pitch Deck。

给 GPT Image-2 的提示词

请为 Agent Watch 产品设计一套 Pitch Deck 的视觉稿,共 8 页,用于向投资人展示。

产品背景: Agent Watch 是 Apple Watch + iPhone 应用,让用户给 AI Agent 下任务后可以离开工位休息,Agent 完成时手表震动提醒。核心价值是"Agent 在工作,你去散步"。

8 页 PPT 内容与设计要求:

（每当一页生成完后，发下一页的提示词）

第 1 页 - 封面:

  • 大标题:"Agent Watch"
  • 副标题:"Agent 在工作,你去散步"
  • 视觉:Apple Watch 实物图展示应用界面
  • 配色:白色背景,淡绿色点缀

第 2 页 - 问题:

  • 标题:"久坐盯屏,等 Agent 跑完"
  • 三个痛点场景插画:人盯着屏幕、久坐疲惫、错过确认
  • 简洁图标+一句话描述

第 3 页 - 解决方案:

  • 标题:"真正的间歇工作法"
  • 时间轴示意图:Agent 工作中 → 你去休息(交替出现)
  • 强调"任务周期 = 休息时间"

第 4 页 - 产品演示:

  • 标题:"双端协作,实时同步"
  • Apple Watch 和 iPhone 并排展示
  • 手表显示任务进度,手机显示消息详情
  • 连接线表示同步

第 5 页 - 使用场景:

  • 标题:"一个完整的工作循环"
  • 四步流程图:下任务 → 离开工位 → 手表震动 → 回来处理
  • 简笔画人物+场景插画

第 6 页 - 核心功能:

  • 标题:"不只是通知工具"
  • 四个功能卡片:收件箱式消息管理、快速确认、多 Agent 支持、上下文查看
  • 每个卡片配图标和说明

第 7 页 - 商业模式:

  • 标题:"免费版 vs Pro 版"
  • 左右对比表格
  • 免费版:1 个 Agent、7 天历史
  • Pro 版:无限 Agent、90 天历史、¥19/月

第 8 页 - 愿景:

  • 标题:"让工作有呼吸感"
  • 户外场景照片:人在自然环境中放松,手腕佩戴 Apple Watch
  • 底部文字:"这个节奏不是人为设计的,是工作本身的呼吸"

整体设计风格:

  • 配色:淡绿色(#A8D5BA)+ 白色 + 少量深灰色文字
  • 风格:简洁、现代、Apple 发布会风格
  • 每页一个视觉主体,大量留白
  • 文字精简,重视觉表达
  • 适合 16:9 投影展示

请为每一页生成独立的 PPT 视觉设计稿。

这是 Claude Design 生成的结果，画面和简约干净，有高级感。

同时因为共享了产品设计稿的上下文，所以产品界面的一致性和稳定性都相对较好，达到可以用标准。

但是排版相对单调了些，稍稍缺乏创意。

而下面这些，是 GPT Image-2 产出的结果：

这套图还是和之前有相似的问题，在排版上很美观，文字稳定性、信息传递准确性也达标，但是产品应用的截图有些误差，需要用 Figma 一类的设计工具进行二次处理。

不过如果团队有一个拥有基础设计软件技能的设计师的话，更换一下产品界面图的工作量不大，但是对于思考排版创意的时间的节省还是非常明显的。

测了这么久，来总结一下你该用谁

多模态模型目前在上下文理解和管理上不如 Coding Agent，所以以 GPT image-2 为代表的图像生成模型适合用来做单次的设计，而 Coding Agent 则因为生成的是代码（本质上也是文本），在上下文的连续性上保持得很好，生成的结果一致性很高。

同时，因为能将过程产物丝滑地交付给 Claude Code 等 Agent，进行下一步的工作，所以在产品原型、到上线、再到宣发这个流程中，以 Claude Design 为代表的 Coding Agent 范式的产品还是占优势。

不过论创意程度，以 GPT Image-2 为代表的图像生成模型在创意排版能力上表现还是很惊艳的，所以在灵感探索或者单次设计（不需要借助太多上下文）的场景中表现的很不错。

如果你是一个产品创业者，掌握一定的 Vibe Coding 基础技能和开发常识，那么以 Claude Design 代表的 Agent 类产品还是更适合你；

如果你是非技术背景出身，但有会 Figma 等设计工具的基本操作，且从事的工作偏电商、广告创意、媒体等内容，GPT image-2 和接了这个模型的相关设计类产品更适合你。

未来这两种范式一定会互相融合

未来，这两类范式一定会在不久之后完成交汇，比较理想的流程是，以后的设计 Agent 在创意探索阶段，会用多模态模型生成多个不同风格、创意十足的图像作为素材，并且将其整理成情绪板来与用户确认方向，激发用户的灵感。

在确认了设计方向后，Agent 将设计需求进行收敛，通过 Coding 的方式建立组件与设计系统，并且稳定地完成设计。

目前还没有已经在用这样的方式与用户协同的 Agent 产品，兴许是下一个独角兽的机会，让我们拭目以待哪个团队将会率先将其探索出来。