我用ChatGPT Images 2.0重新设计了应用界面，效果令人惊叹

过去一周多时间里，我一直在深入探索OpenAI新发布的ChatGPT Images 2.0。这次更新的重要程度远超其最初给人的印象。

AI图像生成器令我们印象深刻已是不争的事实。这类工具能生成精美图片，也能实现一些有趣的效果，但同时也会产出大量低质内容。更重要的是，此前这些工具对自己所生成内容的理解能力相当有限。

Images 2.0为图像生成引入了主题智能理解能力，这意味着ChatGPT现在能够接受具体任务并产出高价值成果。

本文将聚焦一类具体任务——用户界面的更新迭代。在此之前，编程智能体只能对个别UI元素进行局部优化，聊天机器人也仅能以文字形式提出修改建议，却无法完成完整的界面设计。而现在，这一切成为了可能。

我将两个正在开发中的UI设计上传至ChatGPT Images 2.0，使用的是每月20美元的ChatGPT Plus订阅方案。短短几分钟内，ChatGPT就返回了两套重新设计的用户界面，其中包含大量我计划融入产品的设计改进。

我通常会将自己在ZDNET之外的项目作为发现类文章的素材。为了避免利益冲突，我一般不会透露产品名称和链接。但在本文中，产品名称是既有UI设计的组成部分，如果刻意隐去，内容的完整性就会受到影响，因此这里会展示产品名称，但不会附上产品链接。

现在，让我们正式开始。

第一个项目：Mac应用界面

第一个界面来自一款Mac应用，我从今年一月起就在使用Claude Code进行"氛围编程"。由于每周只有一两个小时用于这个项目，进展较为缓慢。这款应用还调用了macOS内置AI进行图像处理与分析。

下图是该应用目前的界面状态。界面元素相当丰富，尤其是左侧的大号按钮，因为它们沿用了我妻子电商品牌的主色调，同时在iPhone版应用中也有很好的呈现效果。

我将该截图上传至ChatGPT，并输入提示词："重新设计这个用户界面，使其更具吸引力且更易于使用。"以下是ChatGPT Images 2.0生成的结果：

最初，我并不喜欢这些改动。最显眼的变化是彩色按钮消失了，而且AI也没有完全理解网格视图底部的查看选项。

不过，图中红色方框标注的区域，是我真正欣赏并计划纳入我的UI设计的部分。

这次练习最大的收获，是那五条我计划融入产品的全新设计思路。我并不打算将整个应用完全按照建议的UI进行重构，但这套方案确实提供了不少好点子。此外，有了这样一份视觉原型，向Claude Code传达我的设计意图也会更加直观高效。这次实践很好地诠释了如何将每月20美元的ChatGPT Plus方案与每月100美元的Claude Code Max 5x方案结合使用，从而开发出更优质的软件。

第二个项目：安全产品起始页界面

接下来是我一款安全产品起始页的UI设计。目前的界面简洁但相当基础，主要原因是我不太擅长编写CSS代码。

去年秋天，在我第一次基于智能体的氛围编程项目中，我使用了ChatGPT Plus方案中的OpenAI Codex（AI配额很快用完）对界面进行了重新设计，从之前较为粗糙的风格改进为相对可观的呈现效果，并由我亲自指定了CSS的布局方式。

本周的测试结果颇为有趣。我将截图粘贴至ChatGPT，但在输入提示词之前不小心按下了回车键。ChatGPT于是自主对页面进行了分析，并得出结论："最主要的问题在于视觉层次薄弱、灰色过多、引导介绍过长，以及三个下方卡片在视觉权重上平分秋色，而实际上它们的重要程度并不相同。"

ChatGPT还建议采用"更具现代感的管理后台风格"，具体建议包括若干项设计改进。

随后，我决定调用Images 2.0，并输入指令："为我提供一张优化后的界面效果图。"以下是AI生成的结果：

这份输出同样提供了一些可以带回给Codex使用的设计参考。我在网页产品中使用OpenAI Codex，在Mac产品中使用Claude Code，主要是为了积累两种智能体编程工具的使用经验，以便在这里撰写相关文章。如果写作不是我的首要目标，我会选择其中一款工具专注使用。我发现两者的帮助效果不相上下。

ChatGPT Images 2.0自行生成了一个Logo（主要是因为我的原始图片中没有提供Logo）。AI还新增了几个我颇为欣赏的功能设计。

首先，我非常喜欢它推荐的整体设计风格。将这种风格贯穿整个产品可能工作量不小，但设计本身确实令人满意。

其次，AI将三个独立的用户帮助区域进行了突出展示：快速设置区、帮助中心区，以及顶部的隐私配置和文档查阅区。原有界面虽然为用户提供了信息入口，但并不能清晰地引导用户从何处开始。

我也很喜欢底部的网站状态板块。我曾多次考虑添加类似功能，但由于状态元素需要根据用户安装的免费插件动态变化，编码难度让我望而却步。不过，看到这个功能的可视化呈现，让我重新燃起了实现它的想法。

总结

我认为这项能力与ChatGPT当初首次发布时、以及去年夏天智能体结对编程功能上线时一样，具有颠覆性的意义。

我将两款产品的用户界面提交给AI，得到了类似同行评审的反馈意见，以及一套原型设计方案。作为一名独立开发者，这份输出的价值无可估量。

即便我拥有一支完整的内部团队，配备程序员和设计师，完成同等水平的分析并构建可供评审的原型，大概也需要一周左右的时间，仅人力成本就相当可观。而仅凭20美元，我就获得了两套极具参考价值、构思严谨、绝非"AI糊弄"的重新设计方案，其中包含切实可行的改进思路，将帮助我的产品变得更好。

这实在令人叹为观止。

如果你打算将ChatGPT Images 2.0与Claude Code或Codex配合使用，会考虑将图像原型作为编程智能体的设计说明文档吗？欢迎在评论区分享你的想法。

Q&A

Q1：ChatGPT Images 2.0与普通AI图像生成器有什么区别？

A：普通AI图像生成器主要负责生成美观图片，但对内容的理解能力有限。ChatGPT Images 2.0引入了主题智能理解能力，能够接受具体任务并产出高价值成果，例如理解UI设计的功能逻辑、提出有针对性的改进建议，并直接生成可用的界面原型，而不仅仅是生成一张漂亮的图片。

Q2：用ChatGPT Images 2.0重新设计UI界面需要多少费用？

A：作者使用的是每月20美元的ChatGPT Plus订阅方案，在此方案下即可使用ChatGPT Images 2.0功能。相比雇用设计师和程序员完成同等工作可能需要数天时间及高额人力成本，20美元就能在几分钟内获得两套完整的UI重新设计方案，性价比极高。

Q3：ChatGPT Images 2.0生成的UI设计方案可以直接用于开发吗？

A：生成的方案不能直接用于开发，但可以作为重要的设计参考和开发指引。作者的做法是从生成的原型中提取自己满意的设计细节，再结合Claude Code或OpenAI Codex等智能体编程工具，将这些设计思路转化为实际代码，从而提升最终产品的UI质量。