2025-7-14 杰睿
ChatGPT 是否有可能生成 UI？
我之前測試過幾次，但結果卻令人失望。
下面是我兩個月前在一份時事通訊中分享的一個例子。
它看上去太卡通了，不太實用。
然而，上周，OpenAI 推出了一個重大更新，所以我決定再次嘗試。
根據我的提示，我能夠生成更好的UI模型。我甚至可以根據自己的需求創建多個設計選項：
今天，我將向你們展示我進行的實驗、我使用的提示以及過程中的一些驚喜和收獲。
讓我們開始吧。
OpenAI 宣布，現在可以使用 GPT-4o 在 ChatGPT 中生成高質量圖像，而不是使用較舊的 DALL·E 模型。
它更擅長遵循指令，并且可以更好地呈現圖像中的文本。
上周，許多人嘗試將照片轉換成人工智能藝術作品——這就是吉卜力風格藝術潮流流行的原因。
我也嘗試過：
但在網上看到很多有趣的藝術作品后，我想：
如果我可以使用 ChatGPT 生成對產品設計師真正有用的 UI 會怎么樣？
實驗就是從這里開始的。
我使用 ChatGPT 來幫助我生成我想要的 UI 的詳細提示。
# 為名為“SkillVerse - 熱門微課程”的應用設計一個簡潔、現代的移動 UI 界面（iOS 風格）。布局應遵循以下結構化部分。## 1. 狀態欄（頂部）- **樣式**：標準 iOS 布局（頂部安全區域）---## 2. 標題部分- **居中標志**：“SkillVerse” - **字體**：中等粗細，小尺寸 - **顏色**：藍色文本 ---## 3. 特色課程輪播（水平滾動）- **風格**：具有圓角和柔和陰影的可滑動卡片 - **卡片**: -**卡 1** - 標題：**動態設計簡介** - 字幕：*4 月 2 日開始* - 視覺：動畫縮略圖 -**卡 2** - 標題：《自由職業者精通 Excel》 - 字幕：*3 月 31 日開始* - 視覺：生產力圖標 ---## 4. 導航標簽-**標簽**： - **趨勢**（活躍，**粗體標簽**帶有**藍色下劃線**） - 受到推崇的 - 已注冊 - 已保存 ---## 5. 過濾行- **過濾器（下拉菜單）**： - **過去 7 天**（基于時間） - **所有主題**（類別） - **所有級別**（難度） ---## 6. 熱門課程列表- **布局**：可重復課程項目的垂直堆疊： - **左**：圓形縮略圖 - **中心**： - 課程名稱 - 級別（例如，初學者、中級等） - **右**：保存圖標 - **底部**：入學人數 + 趨勢（例如，入學人數 2.4k，+12%） ---## 7. 底部導航欄-**標簽**： - **主頁**（活動，突出顯示顏色） - 搜索 - 活動 - 輪廓 - **風格**： - 下方有標簽
然后我將其粘貼到 ChatGPT 中的新聊天窗口中，然后單擊“生成”圖標。
令人驚訝的是，ChatGPT 在右側打開了一個額外的面板，觸發了它的 Canvas 功能。然后它開始生成代碼。
這立刻讓我想起了克勞德的神器功能。
然后我點擊了右上角的“預覽”按鈕。
生成了響應式、代碼支持的 UI。
看起來很有趣，但似乎不如克勞德那么精確/精致。
由于我的目的只是生成一個圖像（一個可視化模型）而不是一個代碼支持的 UI，因此我請求后續提示來糾正它：
創建一個可視化模型。而是一個視覺模型。
結果如下：
結果出乎意料地好，尤其是與 ChatGPT (DALL·E) 之前生成的版本相比。這是一個巨大的提升。
測驗：你能在上述 AI 生成的 UI 中找到多少個拼寫錯誤？:)
盡管用戶界面看起來不錯，但我仍然對圖像截斷感到有點困擾，所以我問了：
頂部和底部看起來有點截斷。您能將 UI 縮小 20% 左右，讓它整體更小一些嗎？頂部和底部看起來有點截斷。您能將 UI 縮小20%左右， 讓它整體更小一些嗎？
結果如下：
看起來不錯！
然后我開始更有創意了……我想，如果我讓它生成多個設計方案供我參考會怎么樣？那會更有幫助！
所以我寫了這個：
創建三個設計選項。使用相同的核心內容，但根據以下描述改變布局、UI 元素和視覺重點：選項 1. 大膽且引人入勝- 優先考慮視覺沖擊力和品牌表達選項 2. 功能強大且快速- 優先考慮速度、清晰度和生產力- 緊湊的用戶界面，卡片更小，信息層次更密集選項3.個性化和溫暖- 優先考慮聯系、信任和個性化- “為你推薦”輪播，包含人工智能策劃的課程建議- 社會證明（頭像、徽章、朋友活動）- 添加“社區”選項卡，用于同行共享內容
結果如下：
再次，我對 GPT-4o 圖像生成能力的提升感到震驚。
雖然這三個選項看起來仍然非常相似，但如果仔細觀察，就會發現一些小細節 - 例如“搜索”圖標、社交證明和副本 - 試圖使每個版本都與其他版本區分開來。
不過，結果肯定還有改進的空間。例如，由于一張圖片中包含了大量信息，ChatGPT 的精度開始下降。你可能會注意到，部分文本變得無法識別/扭曲。
接下來，作為一個有趣的測試，我使用Codia AI 的插件根據 ChatGPT 生成的視覺模型生成 Figma 設計。
所有組件（包括文本）都可以在 Figma 中編輯。
它使用的字體系列是 Intel。
好得可怕。
如果我想進行更改，這使我能夠自定義 UI 模型。
ChatGPT 生成 UI 視覺模型的能力是一個巨大的提升。與之前版本相比，它提供了更高的精度和對提示的遵循性。
話雖如此，速度還是有點慢，準確率還有待提高。有時圖像生成到一半就停止了；有時結果很隨機，而且與指令不完全一致。
當我要求 ChatGPT 根據設計選項創建 3D 模型時，事情變得有點扭曲和奇怪——但還不算太糟。
不管怎樣，這已經是一次很棒的升級了。我現在能生成以前無法生成的東西了。
這一切都在 ChatGPT 聊天窗口內完成。多么方便啊？
我非常興奮并希望未來會有更好的升級。