大家好，我是歸藏（guizang），测试了一下 GPT-5 的前端能力。
昨晚大家都很期待的 GPT-5 终于发布了，我因为怕楼上的电钻所以睡得早没看直播。
相较于国内的热度我感觉，推特上的讨论不多，早上起来看了一下大家的评论，都觉得中规中矩，有些能力甚至还有退化。
现在模型测试很难做，因为很多人不理解纯粹模型能力和 Agent 能力，另外对于 EQ、写作这种都有自己的倾向和喜好，所以还是来看看进步最明显的代码吧。
这里也有视频版本：
因为之前 o3 的前端能力太差了，所以这次没敢上来就整难的，先搞个 Bento Grid 宣传长图网页试试。
基于下面产品介绍文章关键信息，帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个中文动态网页展示，具体要求为：
1. 尽量在一页展示全部信息，背景为#F8F6F5、卡片背景为白色，文字颜色为#010101，高亮按钮和文字背景色为#F69AAC-DF95E3-7DBDE9 的渐变 ，卡片内的布局为主标题简短表述加大图标
2. 将 Markdown 格式的图片链接的图标放到合适的卡片中，防止图标跟文字重叠
3. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
4. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
5. 中英文混用，中文大字体粗体，英文小字作为点缀
6. 简洁的勾线图形化作为数据可视化或者配图元素
7. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
8. 数据可以引用在线的图表组件，样式需要跟主题一致
9. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
10. 避免使用emoji作为主要图标
11. 不要省略内容要点
相信你看完也有判断了，GPT-5 和 Claude 4.1 的结果差不多，硬要说的话 Claude 效果好点，但是这次 4.1 的提示词遵循有问题，说了不要用 Emoji 又开始用了。
Gemini 2.5 Pro 的结果最好，间距颜色都用的很好，而且几个卡片还有浅色的图标点缀。
然后想试试我之前的微信公众号封面提示词，这个以前除了 Claude 基本都没办法正常生成。
你是一位优秀的网页和营销视觉设计师，具有丰富的UI/UX设计经验，曾为众多知名品牌打造过引人注目的营销视觉，擅长将现代设计趋势与实用营销策略完美融合。 请使用HTML和CSS代码按照设计风格要求部分创建一个的微信公众号封面图片组合布局。我需要的设计应具有强烈的视觉冲击力和现代感。
## 基本要求： - **尺寸与比例**： - 整体比例严格保持为3.35:1 - 容器高度应随宽度变化自动调整，始终保持比例 - 左边区域放置2.35:1比例的主封面图 - 右边区域放置1:1比例的朋友圈分享封面 - **布局结构**： - 朋友圈封面只需四个大字铺满整个区域（上面两个下面两个） - 文字必须成为主封面图的视觉主体，占据页面至少70%的空间 - 两个封面共享相同的背景色和点缀装饰元素 - 最外层卡片需要是直角 - **技术实现**： - 使用纯HTML和CSS编写 - 如果用户给了背景图片的链接需要结合背景图片排版 - 严格实现响应式设计，确保在任何浏览器宽度下都保持16:10的整体比例 - 在线 CDN 引用 Tailwind CSS 来优化比例和样式控制 - 内部元素应相对于容器进行缩放，确保整体设计和文字排版比例一致 - 使用Google Fonts或其他CDN加载适合的现代字体 - 可引用在线图标资源（如Font Awesome） - 代码应可在现代浏览器中直接运行 - 提供完整HTML文档与所有必要的样式 - 最下方增加图片下载按钮，点击后下载整张图片
## 设计风格：极简格栅主义封面风格- 黑白极简风格：以纯黑背景和纯白内容区形成鲜明对比- 强烈的几何感：使用简洁的线条、方框和圆形等基础几何元素- 网格系统布局：遵循严格的网格排版规则，结构清晰有序- 留白有度：大量留白创造呼吸感，同时保持视觉重心- 摄影与排版结合：真实场景照片与极简排版形成互补- 工业风格装饰：细线箭头、指示线条等元素增添设计感- 微妙的色彩点缀：小面积绿色等强调色打破黑白单调文字排版风格- 大胆字号对比：核心标题极大化处理，形成主视觉- 几何式分割标题：将主标题分解成独立区块，增强辨识度- 纵横组合排版：文字既有横排也有竖排，创造韵律感- 字体粗细对比强烈：主标题采用超黑体，副文本则较为轻盈- 多层级信息排列：活动名称、日期、宣传语清晰分级- 严格的文字对齐：所有文字元素依循严格的网格对齐原则- 中英文混排：英文作为装饰性元素增添国际设计感视觉元素风格- 裁切的摄影图像：图片经过精心裁切，凸显主题- 指示性线条：箭头、曲线和直线作为引导性视觉元素- 框架式强调：使用方框、底色块等元素强调关键信息- 简洁图形符号：最小化的视觉符号传达核心信息- 构图对称与不对称并存：整体结构有序但细节处理不拘一格- 空间层次感：通过元素大小、位置创造前后层次关系- 数字图形化处理：日期数字被赋予视觉设计感
## 用户输入内容- 公众号标题为：[藏师傅暴论：AI工具尽头是生态｜即梦AI创作者成长计划介绍]右侧文字为：”创作者生态”分为两行，居中对齐
从结果来看 GPT-5 比其他模型好了不少，之前除了 Claude 之外的其他模型，用这个提示词就是 Gemini 那样，在固定画布下没办法判断合适的文字大小是多大，导致所有内容都是重叠的。
GPT-5 虽然没有 Claude 好看，但起码内容没有超出画布，该有的点缀元素也都加上了。
然后是带商品管理、出入库、数据看板的库存管理工具。
请帮我创建一个完整的网页版商品管理工具，具体要求如下： 功能需求 1. 商品管理 - 商品信息录入：商品名称、种类/分类、SKU编号、价格、库存数量 - 商品图片管理：支持图片上传预览（可用文件选择器模拟） - 商品列表展示：表格形式展示所有商品，支持搜索和筛选 - 商品编辑：支持修改商品信息 - 商品删除：支持删除商品（需确认提示） 2. 库存管理 - 入库操作：增加商品库存数量，记录入库时间和数量 - 出库操作：减少商品库存数量，记录出库时间和数量 - 库存记录：显示每个商品的库存变动历史 3. 界面功能 - 仪表板：显示商品总数、库存总值、低库存预警等统计信息 - 响应式设计：适配桌面和移动设备 - 数据持久化：使用localStorage保存数据 技术要求 样式和图标 - CSS框架：使用 TailwindCSS 3.0+ CDN引入 - 图标库：使用 Heroicons 或 Feather Icons CDN引入 - 字体：使用 Google Fonts 代码结构 - 单页面应用：HTML + CSS + JavaScript - 模块化设计：将功能分解为不同的JavaScript模块 - 数据格式：使用JSON格式存储商品数据 界面设计要求 - 现代化UI：简洁美观的界面设计 - 颜色方案：使用专业的商务色彩搭配 - 交互反馈：按钮点击、表单验证等交互效果 - 表单验证：必填字段验证、数据格式验证 数据结构示例 请生成完整的HTML文件，包含所有必要的CSS和JavaScript代码，确保功能完整且可以直接在浏览器中运行。
这里三个模型倒是都完成了主要的功能，没有 bug。
GPT-5 发挥了 o3 的优良传统，也可能是上下文太短导致的，把所有的功能塞到了一个页面里，“用户体验是啥，我不知道”。
Gemini 在没有约束样式的时候生成的页面是真的丑，而且交互也不太符合直觉，虽然分了三个页面。
这个属于回到 Claude 4.1的舒适区了，完成的非常好，一个功能一个页面，而且样式也比较规整。
然后是一个支持自定义组件位置和大小的 BI 画布，几个国产模型都能一次搞定。
创建一个可定制的仪表盘组件，允许用户通过拖放来添加、移除和重新排列不同的小部件（Widgets）。每个小部件都可以展示不同类型的数据或功能。核心功能：网格布局系统： 支持响应式网格，小部件可以自动对齐和调整大小。小部件库： 提供一个可供选择的小部件列表，例如图表（折线图、饼图）、数据卡片、任务列表、时钟等。拖放功能： 用户可以直观地拖动小部件来改变其在仪表盘上的位置。调整大小： 用户可以拖动小部件的边缘来调整其尺寸。状态保存： 仪表盘的布局和小部件配置（例如，图表的数据源）可以被保存（例如在 LocalStorage 或后端服务器中），以便用户下次访问时恢复。添加/删除小部件： 用户可以从库中添加新的小部件，或关闭不再需要的小部件。专业的用户界面： 简洁、现代的设计，清晰的网格线和占位符提示，流畅的拖放动画。
没想到这个国产代码模型都能搞定的 Claude 4.1 和 Gemini 2.5 Pro 都没搞定，我记得以前 4.0 没问题的啊。
Claude 4.1 拖动有 Bug ，然后无法调整大小，Gemini 2.5 Pro 可以拖动，但是无法调整大小。
GPT-5 居然搞定了，没啥问题，默认样式也挺好看。
最后整一个复杂的，奢侈品消费网页的结算流程，我详细要求了所有的样式和颜色，还有具体功能。
角色与目标——担任高级 UX/UI 设计师。为 “VELLORA” 在线商店（奢华而平易近人的时尚与配饰）创建高保真的桌面网页。包含：精致的购物车页面，以及独立的结账流程（3 步：送货 • 付款 • 审核/确认）。【Quiet Luxury · 石墨中性】——色板（Hex）- 页面背景：#F7F7F7（浅灰）；内容卡片：#FFFFFF- 主文本：#222426；次文本：#6B6E73；强调近黑：#0E0E0F- 品牌点缀（选其一并全站统一使用）：#9AA18E（Sage 鼠尾草）或 #8E7C6D（Mocha 摩卡）- 分隔/描边：#E7E7E7（1px 细线）；发丝线可用 rgba(0,0,0,.06)字体- H1/H2：优雅衬线 **Newsreader**（备选：Cormorant Garamond）- UI 文本：几何无衬线 **Manrope**（备选：Inter）- 数字/价格允许使用等宽样式（Manrope Tabular）圆角与阴影- 圆角：按钮与输入 12px；卡片/模态 16px- 阴影：s-sm：0 1px 2px rgba(17,17,19,.06)；s-md：0 8px 24px rgba(17,17,19,.08)（浮层/模态使用）- 分隔以 1px 线为主，阴影少量点缀，整体克制屏幕与关键布局（保持原功能/流程，按下述结构出高保真）——1) 购物车界面（桌面 & 移动）- 桌面布局： · 左栏：购物车商品列表（此处省略长表格）。每张商品卡片包含：缩略图、商品名称、颜色/尺码、单价、数量步进 (+/–)、“稍后保存”、移除 (×) · 右栏（置顶）：订单摘要卡片（小计、预计运费、税费/关税、优惠码输入与验证、总计），主要 CTA「去结账」，支持“继续购物”次级链接- 移动布局： · 列表纵向滚动；摘要卡片固定底部（安全区内），显示总计与主要 CTA · 数量步进与移除操作就地完成，避免跳层 · 优惠码折叠，点击展开输入2) 结账流程（3 步）——送货 • 付款 • 审核/确认- 通用 · 顶部步骤条（当前高亮，已完成打勾，可点击返回修改） · 表单分组拥有清晰分隔标题与说明文本；错误就地提示 · 支持“返回购物车”与“继续下一步”双按钮（主要/次要层级明确）- 步骤一：送货（Shipping） · 字段：收件人、电话、邮箱、国家/地区（联动省市区）、地址1/2、邮编；发票与备注（可选） · 运送方式卡片：标准/加急/当日（价格与预计到达时间），选择后实时更新摘要- 步骤二：付款（Payment） · 方式：信用卡、支付宝/微信；卡片信息实时掩码；账单地址同收货地址的复选 · 安全与合规说明（小字）- 步骤三：审核/确认（Review & Confirm） · 汇总：收货信息、配送方式、付款方式尾号、商品清单与金额；可就地编辑返回相应步骤 · 同意条款复选；下单 CTA；下单后显示订单号与下一步指
没想到这个 GPT-5 给了我一个惊喜，所有的地方完成的都不错，内容层级安排，不同页面的一致性还有响应式设计都没啥可挑剔的地方。
Claude 4.1 也还行，就是在支付流程突然页面变窄了，没有充分利用横向空间，很多组件的宽度明显是不够应该输入的内容的，另外输入框没做任何验证。
Gemini 就别说了，纯纯毛坯房，好像丢 CSS 了，但是仔细看了一下又没丢，就是样式没写好，看那个输入框，太难了。
从整体来看 GPT-5 的代码能力确实比之前 Open AI 的所有模型都要好的多，而且在约束样式后的执行比较到位，提示词遵循比较好。
但是硬实力还是不如 Cluade，另外由于 Plus 就给可怜的 32K 上下文，导致长文本内容处理不如 Gemini。
刚才还说呢 OpenAI 眼看成了 AI 界的苹果了，苹果卡内存，Open AI 卡上下文，32K 上下文基本只能支持一次生成，你但凡想修改，他立刻把前面的忘得一干二净，本来还能跟 Gemini 掰一下手腕的，这下也不行了。
这次的简单测试到这里就结束了，如果觉得有帮助的话可以给我点个赞，谢谢了🙏。
（文：归藏的AI工具箱）