衡量和改進AI生成的UI設計

我的女朋友從未寫過一行程式碼，但有一天早上醒來，她構建了一個機器人來獲取難訂的Resy餐廳預訂。機器人執行得很好，但她的第一個抱怨是：使用者介面看起來很糟糕，感覺就是AI生成的。

她並不孤單。有人稱之為“AI垃圾”，也有人說模型“缺乏品味”。軟體開發已經民主化，但到目前為止，好的UI設計似乎尚未普及。

我一直在思考同一個問題：能否讓我的代理（agent）完成更好的UI設計工作，這樣我就不必親自操刀了？

這是一個難題，我不敢說已經解決了，但我取得了一些進展。以下是我在這個過程中學到的東西。

衡量AI設計的質量

大多數人將設計視為主觀的，但我認為它更可衡量。好的設計能幫助使用者和企業實現目標。如果你理解某個功能旨在完成什麼，就有可能評判其設計。

以我在Uber工作時的一個例子為例。當時，Uber試圖向乘客交叉銷售其他服務：Uber Eats、雜貨、預約乘車等。因此，公司對首頁進行了設計更改，以突出這些服務：

這是一個“好”的設計更改嗎？這取決於：更多使用者嘗試Uber Eats了嗎？是否因為地圖上的汽車資訊喪失確定性而減少了叫車請求？在使用者和業務目標的約束下，有可能猜測設計是否“更好”。

這是第一個大挑戰——如何建立大量AI生成的設計變更，同時理解使用者和業務背景，以便正確評判設計輸出？

為此，我採用了開源應用，並建立了我想新增的新功能。

我手動生成並審查了數百個新功能。我標註了發現的設計問題，並讓LLM總結問題。絕大多數問題歸結為以下幾類：

• 優先順序：優秀的設計師在使用者體驗中無情地排序。只顯示核心資訊，核心路徑非常明顯，其他一切都不妨礙使用者。模型似乎認為所有使用者操作都同等重要，結果導致使用者面對雜亂。

• 排版、間距和顏色：模型過度使用顏色，且沒有一致的間距，使UI雜亂。這都與第1點相關——優秀設計師使用顏色、字型和間距來吸引使用者注意特定操作。模型沒有優先考慮哪些操作重要。

• UI“漏洞”：人類設計師永遠不會搞錯的小事（元件對齊不準、文本換行造成奇怪外觀等）。

• 設計系統遵循：引入不同的元件、按鈕半徑、字型等，導致體驗不統一。

測試改進以生成更好的設計

我嘗試了20多種不同的代理設定，以改善編碼代理的設計輸出。然後用相同的開源功能建立測試對這些代理設定進行測試，並手動評估設計是否改進。這導致需要審查超過500個螢幕，於是我建立了一個評估工具，用於快速比較和評分不同代理對同一設計變更的輸出。

我發現最有效的方法包括：

• 自我改進迴圈：如果模型“看到”自己的設計，它可以改進。我發現讓模型檢視它生成的UI，並要求它修復問題，帶來了有意義的提升。這並不令人驚訝，但卻是最大的槓桿。

• 基於常見問題的評估標準：在自我改進迴圈中，使用我基於AI設計常見問題標記的評估標準改進了輸出。分享我在最初生成功能時識別的常見缺陷，在審查標準中最有幫助。

• 注入優秀設計案例：我以前從設計精良的應用（如Stripe、Airbnb）中構建了50萬+螢幕的語料庫。在評估標準中向模型展示這些案例，進一步改善了輸出。

一些出乎意料無效的方法：

• 基於“常見設計最佳實踐”的評估標準：這並沒有真正幫助。我猜模型已經在訓練資料中包含了這些。真正的收益來自於我發現AI設計中的常見缺陷，並在評估標準中強調它們。

• 經典AI設計“垃圾”的負面示例（例如紫色漸變、過大的圓角卡片、表情符號專案列表）：向模型展示AI設計的常見模式幫助不大。展示“優秀設計”的圖片比展示“AI設計”的不良傳統訊號更有效。

一些注意事項

需要注意的是，所有工作的一個潛在缺陷是“改進的輸出”基於我的人類評估。我只能說上述槓桿使設計看起來更好。

我最近打包了代理並與一些公司分享。根據公司的不同，團隊在大約70%的UI PR中接受了代理的建議。這給了我一些信心，說明我的評估是有效的。但這仍然可能是一個有缺陷的訊號：工程師可能更容易接受“簡單”的建議而非重要的建議。我仍在摸索這部分測量方法。

下一步：延遲和成本

測量的改進來自花費更多時間和令牌。代理先做出設計變更，檢視設計變更，評判它，然後改進。這很好，但需要更長時間來做出變更，且消耗更多令牌。

下一個挑戰是加快這個過程並使其更節省令牌。代理最初每個設計功能平均需要約30分鐘和約50美元。我們已經將兩者減少了約50%。仍在努力，我會再寫一篇文章介紹實驗方法和結果。