實在是繃不住了，GPT的前端怎麼可以這麼醜
整理版優先睇
GPT前端設計醜陋？用Gemini設計樣式再交GPT實現，效果最好。
作者係一個成日用AI寫前端嘅開發者，佢發現GPT生成嘅前端頁面經常出現橘黃色背景同信息堆砌嘅問題，睇起嚟好醜樣，令人忍唔住想吐槽。佢諗到一個解決方法：先用Gemini呢類擅長設計嘅模型生成多版UI樣式嚟參考，揀啱之後再交俾GPT去實現完整前端代碼。
作者分享咗踩過嘅坑：有一次佢直接叫Gemini改前端，點知Gemini冇留意到前後端業務邏輯嘅關聯，差啲搞壞成個系統。而GPT雖然前端樣式唔掂，但寫後端邏輯就穩陣好多，識得自動調整關聯嘅部分。所以佢認為最穩妥嘅做法係分工合作——Gemini負責設計，GPT負責實現。
最後作者感慨，每個AI模型都有自己擅長同侷限嘅地方，用得多就會識得點樣組合發揮最大效果。可能將來會有一個全能模型出現，但現階段「各擅勝場」先係現實。
- GPT生成嘅前端經常有橘黃色背景同信息堆砌嘅問題，設計感好差。
- 解決方法係先用Gemini呢類設計強嘅模型生成UI樣式，再交俾GPT實現。
- GPT後端邏輯關聯做得好，但前端設計差；Gemini剛好相反。
- 直接叫Gemini改前端可能會忽略後端邏輯關聯，差啲搞壞系統。
- 實戰建議：組合使用唔同AI工具，發揮各自特長，做到「各擅勝場」。
GPT前端嘅困境
作者話，GPT嘅前端能力真係好拉胯，最典型就係成日出橘黃色背景，一睇就知係GPT作品。
另一個大問題係信息堆砌，太多嘢擺埋一齊，好似一個賬號管理頁面竟然塞埋工單、健康度呢啲無謂資訊，令到用戶無從入手。
解決思路：Gemini出設計，GPT實現
作者諗到一個好辦法：用Gemini呢類模型先出前端設計示例，揀啱樣式之後再叫GPT照住實現。
作者舉例話，有一次佢想優化排版工具編輯區嘅UI，對導航卡片嘅樣式冇乜概念，就叫Gemini生成幾版樣式俾佢睇，有圖有真相，好易對比揀出最好嗰個。
踩過嘅坑：後端邏輯關聯
作者話佢試過直接叫Gemini改前端，結果Gemini冇發現前後端業務邏輯有關聯，差啲搞壞成個系統。
相反，GPT喺寫前端嘅時候會穩陣地接住你，自動跟住更改關聯嘅後端邏輯，呢個係佢嘅強項。
最後感悟：各擅勝場
用多咗AI就會發現，每個模型都有自己擅長同侷限嘅地方，要了解佢哋嘅特性先可以用得好。
當然，如果將來有模型可以吊打一切，一開波就用佢就最正，即係「出道即巔峯」。
第一部分
GPT前端嘅困境
橙黃色配搭 · 資訊堆砌
第二部分
我嘅解決思路
Gemini出設計 · GPT實現
第三部分
踩過嘅坑
後端邏輯關聯 · 差啲搞冧
最後
一啲感悟
各擅勝場 · 一出道就巔峯
明嘅自然明，GPT嘅前端能力大家都見到有幾差，我真係冇曬符，點解可以整到咁樣衰嘅前端頁面。
最典型係下面呢張圖嘅背景色，你叫佢寫個頁面，好大機會會係呢種橙黃色，搞到我而家睇人哋vibe coding嘅作品，一眼就睇得出係咪GPT整嘅……
GPT做前端頁面嘅另一個大問題就係各種資訊堆疊埋一齊，佢信奉多就係好嘅原則，如果冇必要，就絕對唔會刪減資訊。
例如，我叫佢整一個帳號管理後台嘅頁面，結果出嚟嘅嘢激死我，大家嚟欣賞下。
呢個頁面將各種資訊全部堆埋一齊，帳號總覽頁面本來應該睇下帳號資訊就得㗎喇，點知佢將工單、帳號健康度呢啲亂七八糟嘅嘢都放埋一齊，乜都放就等於乜都冇放，我哋根本唔知點樣用，如果GPT作為前端開發喺公司返工，估計一早俾人炒咗……
我真係冇曬符，最近諗到個好方法，我改用kimi、Gemini嚟寫設計前端頁面，然後叫GPT參考。
你可能會問，點解唔直接喺項目入面叫Gemini去改前端代碼，而係先寫參考代碼，叫GPT睇呢？
其一係有時我都唔知啲交互同設計邊個好睇啲，所以需要先對比下，例如前排我想優化一下墨成公眾號排版工具編輯區嘅UI，對入面嘅導航卡片用咩樣式，我冇諗清楚，呢個時候我就叫Gemini幫我整咗幾個版本嘅樣式，俾我參考。
 |  |
呢個時候有圖有真相，我哋就好輕易對比到邊個好。
另一個更加重要嘅原因係Gemini後端能力比較差，同GPT剛好相反，呢件事我中過伏，我叫Gemini幫我改排版工具嘅前端，結果佢冇發現呢個前後端嘅業務邏輯係有關連嘅，差啲俾佢搞冧咗。
所以，我哋叫Gemini呢類模型先出前端頁面嘅範例，俾我哋揀，然後叫GPT實現，呢個係最穩陣嘅。GPT喺寫前端嘅時候，會穩穩陣陣咁接住你，將關聯嘅後端邏輯都一齊改埋。
當用多咗AI，你會發現無論係邊個模型，都有佢擅長嘅地方，亦有佢侷限嘅地方，所以想用好AI，都係需要多用，瞭解各個模型嘅特性，當然都可以唔用，因為後面有可能出現一個好勁嘅模型，吊打一切，你開始玩AI嘅時候就已經食到好嘢，一出道就巔峯……
同你一齊探索 AI 喺生活中嘅有趣用法 🌱
👍 點贊 | 👀 在看 | ➤ 轉發 |
Part 01
GPT前端的困境
橘黃配色 · 信息堆砌
Part 02
我的解決思路
Gemini出設計 · GPT實現
Part 03
踩過的坑
後端邏輯關聯 · 差點搞廢
Last
一點感悟
各擅勝場 · 出道即巔峯
懂得都懂，GPT的前端能力都是有目共睹的拉胯，我實在是沒招了，怎麼可以做出這麼醜的前端頁面。
最典型的下面這張圖的背景色，你讓它寫個頁面，大概率會是這種橘黃色的，以至於我現在看別人vibe coding的作品，一眼就能看出來是不是GPT做的……
GPT做前端頁面的另一個大問題就是各種信息堆疊在一起，它信奉多即是好的原則，如無必要，絕不刪減信息。
比如，我讓它做個賬號管理後台的頁面，結果出身的給人氣死，大家來欣賞一下。
這個頁面把各種信息全部堆在一塊，賬號總覽頁面本應該看看賬號信息就行了，結果它把工單、賬號健康度什麼亂七八糟的都放一起，什麼都放就相當於什麼都沒放，我們壓根不知道怎麼去用，要是GPT作為前端開發在公司上班，估計早被開了吧……
我實在是沒招了，最近想到了個好辦法，我換成kimi、Gemini來寫設計前端頁面，然後讓GPT參考。
你可能會問，為什麼不直接在項目裏面讓Gemini去改前端代碼，而是先寫參考代碼，讓GPT看呢？
其一是有時候我也不知道什麼交互和設計比較好看，所以需要先對比一下，比如前段時間我想優化一下墨成公眾號排版工具編輯區的UI，對其中的導航卡片用什麼樣式，我沒有想清楚，這時候我就讓Gemini幫我做出了幾版樣式，供我參考。
| |
這時候有圖有真相，我們就很輕易的能對比出來哪個好。
另一個更重要的原因是Gemini後端能力比較拉胯，和GPT剛好相反，這事我踩過坑，我讓Gemini給我改排版工具的前端，結果它沒有發現這個前後端的業務邏輯是有關聯的，給我差點搞廢了。
所以，我們讓Gemini這類模型先出前端頁面的示例，供我們挑選，然後讓GPT實現，這是最穩的。GPT在寫前端的時候，會穩穩的接住你，把關聯的後端邏輯也一起改掉。
當用多了AI，你會發現不管是哪個模型，都是它擅長的地方，也有它侷限的地方，所以想用好AI，還是需要多用，瞭解各個模型的特性，當然也可以不用，因為後面有可能出現一個很強的模型，吊打一切，你開始玩AI的時候就吃上細糠了，出道即巔峯……
和你一起探索 AI 在生活中的有趣用法 🌱
👍 點贊 | 👀 在看 | ➤ 轉發 |