不吹不黑，GPT-5代碼能力究竟怎么樣？跟 Gemini 和 Claude 的對比測試給你答案

大家好，我是歸藏（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 掰一下手腕的，這下也不行了。

這次的簡單測試到這里就結束了，如果覺得有幫助的話可以給我點個贊，謝謝了。