大家好，我是歸藏（guizang），測(cè)試了一下 GPT-5 的前端能力。

昨晚大家都很期待的 GPT-5 終于發(fā)布了，我因?yàn)榕聵巧系碾娿@所以睡得早沒(méi)看直播。

相較于國(guó)內(nèi)的熱度我感覺(jué)，推特上的討論不多，早上起來(lái)看了一下大家的評(píng)論，都覺(jué)得中規(guī)中矩，有些能力甚至還有退化。

現(xiàn)在模型測(cè)試很難做，因?yàn)楹芏嗳瞬焕斫饧兇饽Ｐ湍芰?Agent 能力，另外對(duì)于 EQ、寫作這種都有自己的傾向和喜好，所以還是來(lái)看看進(jìn)步最明顯的代碼吧。

這里也有視頻版本：

因?yàn)橹?o3 的前端能力太差了，所以這次沒(méi)敢上來(lái)就整難的，先搞個(gè) Bento Grid 宣傳長(zhǎng)圖網(wǎng)頁(yè)試試。

基于下面產(chǎn)品介紹文章關(guān)鍵信息，幫我用類似蘋果發(fā)布會(huì)PPT的Bento Grid風(fēng)格的視覺(jué)設(shè)計(jì)生成一個(gè)中文動(dòng)態(tài)網(wǎng)頁(yè)展示，具體要求為：

1. 盡量在一頁(yè)展示全部信息，背景為#F8F6F5、卡片背景為白色，文字顏色為#010101，高亮按鈕和文字背景色為#F69AAC-DF95E3-7DBDE9 的漸變 ，卡片內(nèi)的布局為主標(biāo)題簡(jiǎn)短表述加大圖標(biāo)

2. 將 Markdown 格式的圖片鏈接的圖標(biāo)放到合適的卡片中，防止圖標(biāo)跟文字重疊      

3. 強(qiáng)調(diào)超大字體或數(shù)字突出核心要點(diǎn)，畫面中有超大視覺(jué)元素強(qiáng)調(diào)重點(diǎn)，與小元素的比例形成反差    

4. 網(wǎng)頁(yè)需要以響應(yīng)式兼容更大的顯示器寬度比如1920px及以上     

5. 中英文混用，中文大字體粗體，英文小字作為點(diǎn)綴      

6. 簡(jiǎn)潔的勾線圖形化作為數(shù)據(jù)可視化或者配圖元素    

7. 運(yùn)用高亮色自身透明度漸變制造科技感，但是不同高亮色不要互相漸變    

8. 數(shù)據(jù)可以引用在線的圖表組件，樣式需要跟主題一致   

9. 使用HTML5、TailwindCSS 3.0+（通過(guò)CDN引入）和必要的JavaScript     

10. 避免使用emoji作為主要圖標(biāo)

11. 不要省略內(nèi)容要點(diǎn)

相信你看完也有判斷了，GPT-5 和 Claude 4.1 的結(jié)果差不多，硬要說(shuō)的話 Claude 效果好點(diǎn)，但是這次 4.1 的提示詞遵循有問(wèn)題，說(shuō)了不要用 Emoji 又開始用了。

Gemini 2.5 Pro 的結(jié)果最好，間距顏色都用的很好，而且?guī)讉€(gè)卡片還有淺色的圖標(biāo)點(diǎn)綴。

然后想試試我之前的微信公眾號(hào)封面提示詞，這個(gè)以前除了 Claude 基本都沒(méi)辦法正常生成。

你是一位優(yōu)秀的網(wǎng)頁(yè)和營(yíng)銷視覺(jué)設(shè)計(jì)師，具有豐富的UI/UX設(shè)計(jì)經(jīng)驗(yàn)，曾為眾多知名品牌打造過(guò)引人注目的營(yíng)銷視覺(jué)，擅長(zhǎng)將現(xiàn)代設(shè)計(jì)趨勢(shì)與實(shí)用營(yíng)銷策略完美融合。  

請(qǐng)使用HTML和CSS代碼按照設(shè)計(jì)風(fēng)格要求部分創(chuàng)建一個(gè)的微信公眾號(hào)封面圖片組合布局。我需要的設(shè)計(jì)應(yīng)具有強(qiáng)烈的視覺(jué)沖擊力和現(xiàn)代感。    

## 基本要求：    - **尺寸與比例**：  - 整體比例嚴(yán)格保持為3.35:1  - 容器高度應(yīng)隨寬度變化自動(dòng)調(diào)整，始終保持比例  - 左邊區(qū)域放置2.35:1比例的主封面圖  - 右邊區(qū)域放置1:1比例的朋友圈分享封面  - **布局結(jié)構(gòu)**：  - 朋友圈封面只需四個(gè)大字鋪滿整個(gè)區(qū)域（上面兩個(gè)下面兩個(gè)）  - 文字必須成為主封面圖的視覺(jué)主體，占據(jù)頁(yè)面至少70%的空間  - 兩個(gè)封面共享相同的背景色和點(diǎn)綴裝飾元素  - 最外層卡片需要是直角  - **技術(shù)實(shí)現(xiàn)**：  - 使用純HTML和CSS編寫  - 如果用戶給了背景圖片的鏈接需要結(jié)合背景圖片排版  - 嚴(yán)格實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，確保在任何瀏覽器寬度下都保持16:10的整體比例  - 在線 CDN 引用 Tailwind CSS 來(lái)優(yōu)化比例和樣式控制  - 內(nèi)部元素應(yīng)相對(duì)于容器進(jìn)行縮放，確保整體設(shè)計(jì)和文字排版比例一致  - 使用Google Fonts或其他CDN加載適合的現(xiàn)代字體  - 可引用在線圖標(biāo)資源（如Font Awesome）  - 代碼應(yīng)可在現(xiàn)代瀏覽器中直接運(yùn)行  - 提供完整HTML文檔與所有必要的樣式  - 最下方增加圖片下載按鈕，點(diǎn)擊后下載整張圖片    

## 設(shè)計(jì)風(fēng)格：極簡(jiǎn)格柵主義封面風(fēng)格- 黑白極簡(jiǎn)風(fēng)格：以純黑背景和純白內(nèi)容區(qū)形成鮮明對(duì)比- 強(qiáng)烈的幾何感：使用簡(jiǎn)潔的線條、方框和圓形等基礎(chǔ)幾何元素- 網(wǎng)格系統(tǒng)布局：遵循嚴(yán)格的網(wǎng)格排版規(guī)則，結(jié)構(gòu)清晰有序- 留白有度：大量留白創(chuàng)造呼吸感，同時(shí)保持視覺(jué)重心- 攝影與排版結(jié)合：真實(shí)場(chǎng)景照片與極簡(jiǎn)排版形成互補(bǔ)- 工業(yè)風(fēng)格裝飾：細(xì)線箭頭、指示線條等元素增添設(shè)計(jì)感- 微妙的色彩點(diǎn)綴：小面積綠色等強(qiáng)調(diào)色打破黑白單調(diào)文字排版風(fēng)格- 大膽字號(hào)對(duì)比：核心標(biāo)題極大化處理，形成主視覺(jué)- 幾何式分割標(biāo)題：將主標(biāo)題分解成獨(dú)立區(qū)塊，增強(qiáng)辨識(shí)度- 縱橫組合排版：文字既有橫排也有豎排，創(chuàng)造韻律感- 字體粗細(xì)對(duì)比強(qiáng)烈：主標(biāo)題采用超黑體，副文本則較為輕盈- 多層級(jí)信息排列：活動(dòng)名稱、日期、宣傳語(yǔ)清晰分級(jí)- 嚴(yán)格的文字對(duì)齊：所有文字元素依循嚴(yán)格的網(wǎng)格對(duì)齊原則- 中英文混排：英文作為裝飾性元素增添國(guó)際設(shè)計(jì)感視覺(jué)元素風(fēng)格- 裁切的攝影圖像：圖片經(jīng)過(guò)精心裁切，凸顯主題- 指示性線條：箭頭、曲線和直線作為引導(dǎo)性視覺(jué)元素- 框架式強(qiáng)調(diào)：使用方框、底色塊等元素強(qiáng)調(diào)關(guān)鍵信息- 簡(jiǎn)潔圖形符號(hào)：最小化的視覺(jué)符號(hào)傳達(dá)核心信息- 構(gòu)圖對(duì)稱與不對(duì)稱并存：整體結(jié)構(gòu)有序但細(xì)節(jié)處理不拘一格- 空間層次感：通過(guò)元素大小、位置創(chuàng)造前后層次關(guān)系- 數(shù)字圖形化處理：日期數(shù)字被賦予視覺(jué)設(shè)計(jì)感

## 用戶輸入內(nèi)容- 公眾號(hào)標(biāo)題為：[藏師傅暴論：AI工具盡頭是生態(tài)｜即夢(mèng)AI創(chuàng)作者成長(zhǎng)計(jì)劃介紹]右側(cè)文字為：”創(chuàng)作者生態(tài)”分為兩行，居中對(duì)齊

從結(jié)果來(lái)看 GPT-5 比其他模型好了不少，之前除了 Claude 之外的其他模型，用這個(gè)提示詞就是 Gemini 那樣，在固定畫布下沒(méi)辦法判斷合適的文字大小是多大，導(dǎo)致所有內(nèi)容都是重疊的。

GPT-5 雖然沒(méi)有 Claude 好看，但起碼內(nèi)容沒(méi)有超出畫布，該有的點(diǎn)綴元素也都加上了。

然后是帶商品管理、出入庫(kù)、數(shù)據(jù)看板的庫(kù)存管理工具。

請(qǐng)幫我創(chuàng)建一個(gè)完整的網(wǎng)頁(yè)版商品管理工具，具體要求如下： 功能需求 

1. 商品管理 - 商品信息錄入：商品名稱、種類/分類、SKU編號(hào)、價(jià)格、庫(kù)存數(shù)量 - 商品圖片管理：支持圖片上傳預(yù)覽（可用文件選擇器模擬） - 商品列表展示：表格形式展示所有商品，支持搜索和篩選 - 商品編輯：支持修改商品信息 - 商品刪除：支持刪除商品（需確認(rèn)提示） 

2. 庫(kù)存管理 - 入庫(kù)操作：增加商品庫(kù)存數(shù)量，記錄入庫(kù)時(shí)間和數(shù)量 - 出庫(kù)操作：減少商品庫(kù)存數(shù)量，記錄出庫(kù)時(shí)間和數(shù)量 - 庫(kù)存記錄：顯示每個(gè)商品的庫(kù)存變動(dòng)歷史 

3. 界面功能 - 儀表板：顯示商品總數(shù)、庫(kù)存總值、低庫(kù)存預(yù)警等統(tǒng)計(jì)信息 - 響應(yīng)式設(shè)計(jì)：適配桌面和移動(dòng)設(shè)備 - 數(shù)據(jù)持久化：使用localStorage保存數(shù)據(jù) 技術(shù)要求 樣式和圖標(biāo) - CSS框架：使用 TailwindCSS 3.0+ CDN引入 - 圖標(biāo)庫(kù)：使用 Heroicons 或 Feather Icons CDN引入 - 字體：使用 Google Fonts 代碼結(jié)構(gòu) - 單頁(yè)面應(yīng)用：HTML + CSS + JavaScript - 模塊化設(shè)計(jì)：將功能分解為不同的JavaScript模塊 - 數(shù)據(jù)格式：使用JSON格式存儲(chǔ)商品數(shù)據(jù) 界面設(shè)計(jì)要求 - 現(xiàn)代化UI：簡(jiǎn)潔美觀的界面設(shè)計(jì) - 顏色方案：使用專業(yè)的商務(wù)色彩搭配 - 交互反饋：按鈕點(diǎn)擊、表單驗(yàn)證等交互效果 - 表單驗(yàn)證：必填字段驗(yàn)證、數(shù)據(jù)格式驗(yàn)證 數(shù)據(jù)結(jié)構(gòu)示例 請(qǐng)生成完整的HTML文件，包含所有必要的CSS和JavaScript代碼，確保功能完整且可以直接在瀏覽器中運(yùn)行。

這里三個(gè)模型倒是都完成了主要的功能，沒(méi)有 bug。

GPT-5 發(fā)揮了 o3 的優(yōu)良傳統(tǒng)，也可能是上下文太短導(dǎo)致的，把所有的功能塞到了一個(gè)頁(yè)面里，“用戶體驗(yàn)是啥，我不知道”。

Gemini 在沒(méi)有約束樣式的時(shí)候生成的頁(yè)面是真的丑，而且交互也不太符合直覺(jué)，雖然分了三個(gè)頁(yè)面。

這個(gè)屬于回到 Claude 4.1的舒適區(qū)了，完成的非常好，一個(gè)功能一個(gè)頁(yè)面，而且樣式也比較規(guī)整。

然后是一個(gè)支持自定義組件位置和大小的 BI 畫布，幾個(gè)國(guó)產(chǎn)模型都能一次搞定。

創(chuàng)建一個(gè)可定制的儀表盤組件，允許用戶通過(guò)拖放來(lái)添加、移除和重新排列不同的小部件（Widgets）。每個(gè)小部件都可以展示不同類型的數(shù)據(jù)或功能。核心功能：

網(wǎng)格布局系統(tǒng)： 支持響應(yīng)式網(wǎng)格，小部件可以自動(dòng)對(duì)齊和調(diào)整大小。

小部件庫(kù)： 提供一個(gè)可供選擇的小部件列表，例如圖表（折線圖、餅圖）、數(shù)據(jù)卡片、任務(wù)列表、時(shí)鐘等。

拖放功能： 用戶可以直觀地拖動(dòng)小部件來(lái)改變其在儀表盤上的位置。

調(diào)整大?。?用戶可以拖動(dòng)小部件的邊緣來(lái)調(diào)整其尺寸。

狀態(tài)保存： 儀表盤的布局和小部件配置（例如，圖表的數(shù)據(jù)源）可以被保存（例如在 LocalStorage 或后端服務(wù)器中），以便用戶下次訪問(wèn)時(shí)恢復(fù)。

添加/刪除小部件： 用戶可以從庫(kù)中添加新的小部件，或關(guān)閉不再需要的小部件。

專業(yè)的用戶界面： 簡(jiǎn)潔、現(xiàn)代的設(shè)計(jì)，清晰的網(wǎng)格線和占位符提示，流暢的拖放動(dòng)畫。

沒(méi)想到這個(gè)國(guó)產(chǎn)代碼模型都能搞定的 Claude 4.1 和 Gemini 2.5 Pro 都沒(méi)搞定，我記得以前 4.0 沒(méi)問(wèn)題的啊。

Claude 4.1 拖動(dòng)有 Bug ，然后無(wú)法調(diào)整大小，Gemini 2.5 Pro 可以拖動(dòng)，但是無(wú)法調(diào)整大小。

GPT-5 居然搞定了，沒(méi)啥問(wèn)題，默認(rèn)樣式也挺好看。

最后整一個(gè)復(fù)雜的，奢侈品消費(fèi)網(wǎng)頁(yè)的結(jié)算流程，我詳細(xì)要求了所有的樣式和顏色，還有具體功能。

角色與目標(biāo)——擔(dān)任高級(jí) UX/UI 設(shè)計(jì)師。為 “VELLORA” 在線商店（奢華而平易近人的時(shí)尚與配飾）創(chuàng)建高保真的桌面網(wǎng)頁(yè)。包含：精致的購(gòu)物車頁(yè)面，以及獨(dú)立的結(jié)賬流程（3 步：送貨 ? 付款 ? 審核/確認(rèn)）。

【Quiet Luxury · 石墨中性】——色板（Hex）- 頁(yè)面背景：#F7F7F7（淺灰）；內(nèi)容卡片：#FFFFFF- 主文本：#222426；次文本：#6B6E73；強(qiáng)調(diào)近黑：#0E0E0F- 品牌點(diǎn)綴（選其一并全站統(tǒng)一使用）：#9AA18E（Sage 鼠尾草）或 #8E7C6D（Mocha 摩卡）- 分隔/描邊：#E7E7E7（1px 細(xì)線）；發(fā)絲線可用 rgba(0,0,0,.06)字體- H1/H2：優(yōu)雅襯線 **Newsreader**（備選：Cormorant Garamond）- UI 文本：幾何無(wú)襯線 **Manrope**（備選：Inter）- 數(shù)字/價(jià)格允許使用等寬樣式（Manrope Tabular）圓角與陰影- 圓角：按鈕與輸入 12px；卡片/模態(tài) 16px- 陰影：s-sm：0 1px 2px rgba(17,17,19,.06)；s-md：0 8px 24px rgba(17,17,19,.08)（浮層/模態(tài)使用）- 分隔以 1px 線為主，陰影少量點(diǎn)綴，整體克制屏幕與關(guān)鍵布局（保持原功能/流程，按下述結(jié)構(gòu)出高保真）——

1) 購(gòu)物車界面（桌面 & 移動(dòng)）- 桌面布局：  · 左欄：購(gòu)物車商品列表（此處省略長(zhǎng)表格）。每張商品卡片包含：縮略圖、商品名稱、顏色/尺碼、單價(jià)、數(shù)量步進(jìn) (+/–)、“稍后保存”、移除 (×)  · 右欄（置頂）：訂單摘要卡片（小計(jì)、預(yù)計(jì)運(yùn)費(fèi)、稅費(fèi)/關(guān)稅、優(yōu)惠碼輸入與驗(yàn)證、總計(jì)），主要 CTA「去結(jié)賬」，支持“繼續(xù)購(gòu)物”次級(jí)鏈接- 移動(dòng)布局：  · 列表縱向滾動(dòng)；摘要卡片固定底部（安全區(qū)內(nèi)），顯示總計(jì)與主要 CTA  · 數(shù)量步進(jìn)與移除操作就地完成，避免跳層  · 優(yōu)惠碼折疊，點(diǎn)擊展開輸入

2) 結(jié)賬流程（3 步）——送貨 ? 付款 ? 審核/確認(rèn)- 通用  · 頂部步驟條（當(dāng)前高亮，已完成打勾，可點(diǎn)擊返回修改）  · 表單分組擁有清晰分隔標(biāo)題與說(shuō)明文本；錯(cuò)誤就地提示  · 支持“返回購(gòu)物車”與“繼續(xù)下一步”雙按鈕（主要/次要層級(jí)明確）- 步驟一：送貨（Shipping）  · 字段：收件人、電話、郵箱、國(guó)家/地區(qū)（聯(lián)動(dòng)省市區(qū)）、地址1/2、郵編；發(fā)票與備注（可選）  · 運(yùn)送方式卡片：標(biāo)準(zhǔn)/加急/當(dāng)日（價(jià)格與預(yù)計(jì)到達(dá)時(shí)間），選擇后實(shí)時(shí)更新摘要- 步驟二：付款（Payment）  · 方式：信用卡、支付寶/微信；卡片信息實(shí)時(shí)掩碼；賬單地址同收貨地址的復(fù)選  · 安全與合規(guī)說(shuō)明（小字）- 步驟三：審核/確認(rèn)（Review & Confirm）  · 匯總：收貨信息、配送方式、付款方式尾號(hào)、商品清單與金額；可就地編輯返回相應(yīng)步驟  · 同意條款復(fù)選；下單 CTA；下單后顯示訂單號(hào)與下一步指

沒(méi)想到這個(gè) GPT-5 給了我一個(gè)驚喜，所有的地方完成的都不錯(cuò)，內(nèi)容層級(jí)安排，不同頁(yè)面的一致性還有響應(yīng)式設(shè)計(jì)都沒(méi)啥可挑剔的地方。

Claude 4.1 也還行，就是在支付流程突然頁(yè)面變窄了，沒(méi)有充分利用橫向空間，很多組件的寬度明顯是不夠應(yīng)該輸入的內(nèi)容的，另外輸入框沒(méi)做任何驗(yàn)證。

Gemini 就別說(shuō)了，純純毛坯房，好像丟 CSS 了，但是仔細(xì)看了一下又沒(méi)丟，就是樣式?jīng)]寫好，看那個(gè)輸入框，太難了。

從整體來(lái)看 GPT-5 的代碼能力確實(shí)比之前 Open AI 的所有模型都要好的多，而且在約束樣式后的執(zhí)行比較到位，提示詞遵循比較好。

但是硬實(shí)力還是不如 Cluade，另外由于 Plus 就給可憐的 32K 上下文，導(dǎo)致長(zhǎng)文本內(nèi)容處理不如 Gemini。

剛才還說(shuō)呢 OpenAI 眼看成了 AI 界的蘋果了，蘋果卡內(nèi)存，Open AI 卡上下文，32K 上下文基本只能支持一次生成，你但凡想修改，他立刻把前面的忘得一干二凈，本來(lái)還能跟 Gemini 掰一下手腕的，這下也不行了。

這次的簡(jiǎn)單測(cè)試到這里就結(jié)束了，如果覺(jué)得有幫助的話可以給我點(diǎn)個(gè)贊，謝謝了。