ChatGPT 是否有可能生成 UI？

我之前測試過幾次，但結(jié)果卻令人失望。

下面是我兩個月前在一份時事通訊中分享的一個例子。

它看上去太卡通了，不太實用。

然而，上周，OpenAI 推出了一個重大更新，所以我決定再次嘗試。

根據(jù)我的提示，我能夠生成更好的UI模型。我甚至可以根據(jù)自己的需求創(chuàng)建多個設(shè)計選項：

今天，我將向你們展示我進行的實驗、我使用的提示以及過程中的一些驚喜和收獲。

讓我們開始吧。

背景

OpenAI 宣布，現(xiàn)在可以使用 GPT-4o 在 ChatGPT 中生成高質(zhì)量圖像，而不是使用較舊的 DALL·E 模型。

它更擅長遵循指令，并且可以更好地呈現(xiàn)圖像中的文本。

上周，許多人嘗試將照片轉(zhuǎn)換成人工智能藝術(shù)作品——這就是吉卜力風(fēng)格藝術(shù)潮流流行的原因。

我也嘗試過：

但在網(wǎng)上看到很多有趣的藝術(shù)作品后，我想：

如果我可以使用 ChatGPT 生成對產(chǎn)品設(shè)計師真正有用的 UI 會怎么樣？

實驗就是從這里開始的。

實驗

1. 創(chuàng)建詳細的提示

我使用 ChatGPT 來幫助我生成我想要的 UI 的詳細提示。

# 為名為“SkillVerse - 熱門微課程”的應(yīng)用設(shè)計一個簡潔、現(xiàn)代的移動 UI 界面（iOS 風(fēng)格）。布局應(yīng)遵循以下結(jié)構(gòu)化部分。## 1. 狀態(tài)欄（頂部）- **樣式**：標(biāo)準(zhǔn) iOS 布局（頂部安全區(qū)域）---## 2. 標(biāo)題部分- **居中標(biāo)志**：“SkillVerse”  - **字體**：中等粗細，小尺寸  - **顏色**：藍色文本  ---## 3. 特色課程輪播（水平滾動）- **風(fēng)格**：具有圓角和柔和陰影的可滑動卡片  - **卡片**:    -**卡 1**      - 標(biāo)題：**動態(tài)設(shè)計簡介**      - 字幕：*4 月 2 日開始*      - 視覺：動畫縮略圖    -**卡 2**      - 標(biāo)題：《自由職業(yè)者精通 Excel》      - 字幕：*3 月 31 日開始*      - 視覺：生產(chǎn)力圖標(biāo)  ---## 4. 導(dǎo)航標(biāo)簽-**標(biāo)簽**：    - **趨勢**（活躍，**粗體標(biāo)簽**帶有**藍色下劃線**）    - 受到推崇的    - 已注冊    - 已保存  ---## 5. 過濾行- **過濾器（下拉菜單）**：    - **過去 7 天**（基于時間）    - **所有主題**（類別）    - **所有級別**（難度）  ---## 6. 熱門課程列表- **布局**：可重復(fù)課程項目的垂直堆疊：  - **左**：圓形縮略圖    - **中心**：      - 課程名稱      - 級別（例如，初學(xué)者、中級等）    - **右**：保存圖標(biāo)  - **底部**：入學(xué)人數(shù) + 趨勢（例如，入學(xué)人數(shù) 2.4k，+12%）   ---## 7. 底部導(dǎo)航欄-**標(biāo)簽**：  - **主頁**（活動，突出顯示顏色）    - 搜索    - 活動    - 輪廓  - **風(fēng)格**：    - 下方有標(biāo)簽

然后我將其粘貼到 ChatGPT 中的新聊天窗口中，然后單擊“生成”圖標(biāo)。

2. 生成代碼支持的 UI

令人驚訝的是，ChatGPT 在右側(cè)打開了一個額外的面板，觸發(fā)了它的 Canvas 功能。然后它開始生成代碼。

這立刻讓我想起了克勞德的神器功能。

然后我點擊了右上角的“預(yù)覽”按鈕。

生成了響應(yīng)式、代碼支持的 UI。

看起來很有趣，但似乎不如克勞德那么精確/精致。

3. 要求提供視覺模型

由于我的目的只是生成一個圖像（一個可視化模型）而不是一個代碼支持的 UI，因此我請求后續(xù)提示來糾正它：

創(chuàng)建一個可視化模型。而是一個視覺模型。

結(jié)果如下：

結(jié)果出乎意料地好，尤其是與 ChatGPT (DALL·E) 之前生成的版本相比。這是一個巨大的提升。

測驗：你能在上述 AI 生成的 UI 中找到多少個拼寫錯誤？:)

4. 要求縮小用戶界面

盡管用戶界面看起來不錯，但我仍然對圖像截斷感到有點困擾，所以我問了：

頂部和底部看起來有點截斷。您能將 UI 縮小 20% 左右，讓它整體更小一些嗎？頂部和底部看起來有點截斷。您能將 UI 縮小20%左右， 讓它整體更小一些嗎？

結(jié)果如下：

看起來不錯！

5. 要求生成設(shè)計選項

然后我開始更有創(chuàng)意了……我想，如果我讓它生成多個設(shè)計方案供我參考會怎么樣？那會更有幫助！

所以我寫了這個：

創(chuàng)建三個設(shè)計選項。使用相同的核心內(nèi)容，但根據(jù)以下描述改變布局、UI 元素和視覺重點：選項 1. 大膽且引人入勝- 優(yōu)先考慮視覺沖擊力和品牌表達選項 2. 功能強大且快速- 優(yōu)先考慮速度、清晰度和生產(chǎn)力- 緊湊的用戶界面，卡片更小，信息層次更密集選項3.個性化和溫暖- 優(yōu)先考慮聯(lián)系、信任和個性化- “為你推薦”輪播，包含人工智能策劃的課程建議- 社會證明（頭像、徽章、朋友活動）- 添加“社區(qū)”選項卡，用于同行共享內(nèi)容

結(jié)果如下：

再次，我對 GPT-4o 圖像生成能力的提升感到震驚。

雖然這三個選項看起來仍然非常相似，但如果仔細觀察，就會發(fā)現(xiàn)一些小細節(jié) - 例如“搜索”圖標(biāo)、社交證明和副本 - 試圖使每個版本都與其他版本區(qū)分開來。

不過，結(jié)果肯定還有改進的空間。例如，由于一張圖片中包含了大量信息，ChatGPT 的精度開始下降。你可能會注意到，部分文本變得無法識別/扭曲。

6. 將設(shè)計轉(zhuǎn)換為 Figma 文件

接下來，作為一個有趣的測試，我使用Codia AI 的插件根據(jù) ChatGPT 生成的視覺模型生成 Figma 設(shè)計。

所有組件（包括文本）都可以在 Figma 中編輯。

它使用的字體系列是 Intel。

好得可怕。

如果我想進行更改，這使我能夠自定義 UI 模型。

最后的想法

ChatGPT 生成 UI 視覺模型的能力是一個巨大的提升。與之前版本相比，它提供了更高的精度和對提示的遵循性。

話雖如此，速度還是有點慢，準(zhǔn)確率還有待提高。有時圖像生成到一半就停止了；有時結(jié)果很隨機，而且與指令不完全一致。

當(dāng)我要求 ChatGPT 根據(jù)設(shè)計選項創(chuàng)建 3D 模型時，事情變得有點扭曲和奇怪——但還不算太糟。

不管怎樣，這已經(jīng)是一次很棒的升級了。我現(xiàn)在能生成以前無法生成的東西了。

這一切都在 ChatGPT 聊天窗口內(nèi)完成。多么方便啊？

我非常興奮并希望未來會有更好的升級。