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