ChatGPT 图像 2.0 能够精准重设计应用界面
ZDNET AI··作者 David Gewirtz
关键信息
AI 通过添加更清晰的视觉层次结构、重新组织操作按钮以及修复颜色对比度问题提升了可用性——尽管它最初忽略了底部导航栏等上下文信息。
资讯摘要
作者使用 ChatGPT 图像 2.0 重设计了他正在开发的两个应用界面。上传截图并提示 AI 提升吸引力和易用性后，AI 返回了改进后的版本，包括更合理的布局、更清晰的标题区和优化的图标位置。
虽然 AI 删除了作者原本喜欢的品牌色按钮（起初让作者不满意），但它引入了关键改进，如结构更清晰的网格视图和优化的操作区域。作者计划将其中多项建议整合到实际产品中，证明了该工具在真实开发流程中的实用价值。
资讯正文
我让ChatGPT Images 2.0重新设计了我的应用界面——效果惊人
我最近一周一直在深入探索OpenAI新发布的ChatGPT Images 2.0。这个版本比初看时更加重要。
我们所有人都对AI图像生成器印象深刻。这些工具能制作漂亮的图片，还能玩一些有趣的小把戏。但它们也常常产生大量低质量内容。到目前为止，它们在理解自己生成的内容方面仍有局限。不过，Images 2.0为图像生成加入了领域专业知识。这意味着ChatGPT可以接收任务并产出高价值的结果。
本文将聚焦于一种具体的任务类型：更新用户界面。此前，编码代理只能偶尔尝试修复一两个UI元素，聊天机器人也只能提供基于文本的改进建议。但现在，它们可以完成完整的界面设计了。
我将两个正在开发中的UI设计上传到了我的每月20美元订阅的ChatGPT Plus账户中。几分钟后，ChatGPT返回了两个全新的界面设计方案，都带来了许多我可以直接融入产品中的改进。
以下是我近期使用该工具发现的一些成果：
- 我提前体验了ChatGPT Images 2.0，非常惊艳——只有一个例外
- 我试用了ChatGPT Images 2.0：这是一次令人惊喜的巨大飞跃，而且对实际工作很有帮助
- 我对比测试了ChatGPT Images 2.0和Gemini Nano Banana，结果这个模型胜出
- 我用GPT-5.5进行了10轮测试，得分93/100，仅因过于热情丢分
我经常把非ZDNET的工作项目作为ZDNET文章的素材。为了避免利益冲突，我通常不会分享具体的产品名称和链接。但在本文中，为了展示AI处理的对象，必须保留产品名称。因为这些名字本身就是现有UI设计的一部分，如果去掉它们，上下文就不清晰了。我会继续避免链接到具体产品。
现在开始介绍Mac界面设计。这次挑战中，我有两个界面想交给AI评估。
第一个是自今年一月以来我一直用Claude Code进行“氛围编程”的Mac应用。这个项目进展缓慢，因为我每周只能抽出一两个小时来工作，并且它利用macOS内置的人工智能进行图像处理和分析。
这是当前我在应用中的设计状态。这里有很多内容。我对左侧的大按钮特别关注，因为它们体现了我妻子电商品牌的主色调。
我还让ChatGPT Images 2.0重新设计了我的应用界面——效果令人惊叹。
它们也很好地适配了iPhone应用：我上传了那张截图到ChatGPT，并输入提示语：“重新设计这个用户界面，让它更吸引人且更易用。”以下是ChatGPT Images 2.0生成的结果：
起初，我对这些改动并不满意。最明显的变化是彩色按钮的消失。此外，AI也没完全理解在网格视图底部其实有查看选项。不过，值得注意的是，AI如今对开源开发者变得更有用了。
另一方面，请看那些红色方框区域。这些正是我特别喜欢的新原型部分，计划纳入我的UI中：
左下角的一组操作按钮原本在iPhone应用里是图标形式，但AI给出的新设计看起来更加清晰美观。
同样，AI还在网格视图顶部添加了一个更明确的标题区域，如中间上方的红色方框所示。
AI还拉开了缩略图的间距，让每个预览都有更多呼吸空间，使选中区域更清晰、更具吸引力，如中部下方的红色方框所示。
AI还增加了一个“收藏”选项，虽然我还没实现这个功能，但我非常喜欢这个点子。
最后，我喜欢在详情页底部保留一个持续显示的“新增/更新”字段的想法。
这次实验让我收获颇丰：我打算把这五个新设计思路融入我的产品中。我不会为了迎合建议的UI而彻底重做整个应用。但这次生成的图像确实提供了很多好点子。而且，有了这样的原型图，我就能更容易地告诉Claude Code我希望它做什么了。
这是一次绝佳的例子，说明如何利用每月20美元的ChatGPT Plus计划和每月100美元的Claude Code Max 5x计划来打造更好的软件。
接下来是安全产品的起始页面UI设计。我的原设计简洁但相当基础，主要因为我不太擅长CSS编码。
上个月，在我第一次尝试基于代理的编程项目时，我使用了ChatGPT Plus计划中的OpenAI Codex（该计划很快耗尽了AI额度），将界面从相当难看改成了勉强可用的样子。当时的结果如下：
我当时负责设计，告诉Codex具体在哪里以及如何布局CSS代码。
本周测试结果很有意思。我把截图粘贴进ChatGPT，但不小心在输入提示前按下了回车键。
我让ChatGPT Images 2.0重新设计我的应用界面——结果令人惊叹
ChatGPT自行分析了页面，得出结论：“最大的问题在于视觉层次不清晰、灰色过多、介绍区块过长，以及下方三个卡片平分注意力，尽管它们的重要性并不相等。”它还推荐了一种“更现代的管理界面风格”，包括：使用白色卡片背景而非大面积灰色面板；更柔和的边框；各区块之间增加间距；用一种强调色统一用于按钮、链接和激活状态；正文行长缩短；标题、副标题与正文之间的对比度提升。
此外：Claude Code在6个月内创造了10亿美元收入——而我自己用AI编写的iPhone应用正说明了原因。
此时我决定启用Images 2.0，并指示道：“给我一个重新定义后的界面图像。” AI生成的结果如下：这个输出还附带了一些设计说明，我可以带着这些回到Codex中继续完善。我在网页产品上使用OpenAI的Codex，在Mac产品上使用Claude Code，主要是为了体验这两种代理式编程工具，以便写相关文章。如果我没有写作作为首要目标，我会选择其中一种工具。我发现两者同样有用。
此外：Claude Code的新自动模式如何在不拖慢速度的前提下避免AI编程灾难。
ChatGPT Images 2.0甚至自己发明了一个Logo（主要是因为我第一次提供的图片中没有Logo）。AI加入了一些我很喜欢的功能。首先，我非常喜欢它推荐的整体设计风格。虽然要把这种风格推广到整个庞大产品中可能需要大量工作，但我确实很喜欢这个设计。
另外，我喜欢AI将三个独立的帮助区域突出显示：快速设置区、需要帮助区，以及顶部的配置隐私/查看文档部分。原界面虽然提供了信息，但并未明确告诉用户从哪里开始。我还喜欢底部的站点状态模块。我一直考虑添加类似功能，但因为状态元素需根据用户安装的免费增值插件动态变化，实现起来有些棘手。不过看到这个功能的实际呈现后，我更想把它加进来了。
这真是颠覆性的改变——我觉得这项能力跟当初ChatGPT刚推出时一样具有颠覆性，也像去年夏天代理编程落地时那样重要。
此外：我仅靠语音和鼠标就做出了两个应用——IDE是否已经过时？
我把两个产品的用户界面提交给AI，得到了近乎同行评审的反馈，以及一套原型设计方案。作为一名独立开发者，这样的输出极为宝贵。即使我有一个完整的内部团队，有程序员和设计师，完成这样的分析并制作原型可能也需要一周左右时间，光是人力成本就会相当可观。但花20美元，我就获得了两个非常有帮助、极具建设性且完全不像AI那样愚蠢的设计方案，里面包含可直接执行的改进点，能让我的产品变得更好。真的太棒了。
如果你将ChatGPT Images 2.0与Claude Code或Codex结合使用，你会不会把生成的图像原型当作给编码助手的设计说明？欢迎在评论区告诉我们。你可以在社交媒体上关注我日常项目的更新。别忘了订阅我的每周简报邮件，并在Twitter/X上关注我 @DavidGewirtz，在Facebook上关注 Facebook.com/DavidGewirtz，在Instagram上关注 Instagram.com/DavidGewirtz，在Bluesky上关注 @DavidGewirtz.com，以及在YouTube上关注 YouTube.com/DavidGewirtzTV。
来源与参考
收录于 2026-05-01