Apple 研究團隊發佈 UICoder,利用 AI 生成可運行的 UI 代碼

Apple 正在探索生成式人工智能如何改善應用程序開發流程。幾個月前,Apple 的一組研究人員發表了一項有趣的研究,專注於訓練人工智能生成功能性用戶界面代碼。這項研究的重點不在於設計質量,而是確保人工智能生成的代碼能夠正確編譯,並且在用戶的提示下,界面的功能與外觀能夠大致匹配。最終的成果是 UICoder,這是一系列開源模型,詳細內容可以參考相關資料。

最近,負責 UICoder 的團隊發佈了一篇新論文,題為《基於設計師反饋改進用戶界面生成模型》。在這篇論文中,研究人員指出,現有的基於人類反饋的強化學習(RLHF)方法並不適合用於訓練大型語言模型(LLMs),以可靠地生成設計良好的用戶界面,因為這些方法與設計師的工作流程不夠契合,且忽略了用於批評和改進 UI 設計的豐富理由。

為了解決這一問題,研究團隊提出了一個不同的方案。他們邀請專業設計師直接對模型生成的用戶界面進行批評和改進,通過評語、草圖甚至實際編輯,將這些變更轉換為數據,用於微調模型。這使得他們能夠基於具體的設計改進來訓練一個獎勵模型,有效地教導用戶界面生成器更喜好那些更符合現實設計判斷的佈局和組件。

參與這項研究的設計師共 21 位,這些參與者的專業設計經驗從 2 年到超過 30 年不等。他們在 UI/UX 設計、產品設計和服務設計等不同設計領域工作。參與的設計師還提到,他們在工作中進行設計審查的頻率,從幾個月一次到每週多次不等。研究人員收集了 1,460 條註釋,這些註釋被轉換為成對的用戶界面「偏好」示例,對比原始模型生成的界面與設計師改進的版本。

參與設計師數量設計經驗範圍設計領域設計審查頻率
212 年至 30 年以上UI/UX 設計、產品設計、服務設計幾個月一次至每週多次

這些數據被用來訓練一個獎勵模型,以微調用戶界面生成器。該獎勵模型接受 i) 渲染圖像(用戶界面截圖)和 ii) 自然語言描述(用戶界面的目標描述)。這兩個輸入被輸入到模型中,生成一個數值分數(獎勵),這個分數進行了調整,使得質量更高的視覺設計能夠獲得更大的分數。為了將獎勵分配給 HTML 代碼,研究團隊使用了自動化渲染管道,首先使用瀏覽器自動化軟件將代碼渲染為截圖。

在生成模型方面,Apple 使用 Qwen2.5-Coder 作為用戶界面生成的主要基礎模型,並隨後將相同的設計師訓練獎勵模型應用於較小和更新的 Qwen 變體,以測試這種方法在不同模型大小和版本中的泛化效果。值得注意的是,研究的作者指出,這一框架最終看起來與傳統的 RLHF 管道非常相似。他們主張,區別在於學習信號來自設計師的原生工作流程,而不是簡單的點讚/點踩或排名數據。

那麼效果怎樣呢?根據研究人員的說法,答案是肯定的,但有重要的前提。一般而言,基於設計師原生反饋訓練的模型(尤其是使用草圖和直接修改)產生的用戶界面設計質量顯著高於基礎模型和僅使用傳統排名或評分數據訓練的版本。實際上,研究人員指出,他們表現最佳的模型(使用草圖反饋微調的 Qwen3-Coder)表現超過了 GPT-5。這一成果最終源於僅 181 條設計師的草圖註釋。

研究結果顯示,基於草圖的獎勵模型微調能夠持續改善所有測試基線的用戶界面生成能力,顯示出其泛化性。我們還顯示,少量高質量的專家反饋能夠有效地使較小的模型在用戶界面生成方面超越更大的專有 LLM。

然而,研究人員指出,主觀性在界面設計中起著重要作用:我們工作的主要挑戰之一是處理設計問題的主觀性和多種解決方案。這些現象可能會導致反饋結果的高變異,這對廣泛使用的排名反饋機制提出了挑戰。在研究中,這種變異表現為對於哪些設計實際上更好的意見不合。當研究人員獨立評估設計師排名的相同用戶界面對時,他們與設計師的選擇一致的比例僅為 49.2%,幾乎相當於隨機猜測。

然而,當設計師通過草圖改善或直接編輯用戶界面提供反饋時,研究團隊對這些改進的同意率顯著提高:草圖為 63.6%,直接編輯為 76.1%。換句話說,當設計師能夠具體展示他們想要改變的內容,而不僅僅是在兩個選項之間做出選擇時,更容易對「更好」的定義達成共識。

對於這項研究的更深入了解,包括更多技術方面、訓練材料及接口示例,請參考相關鏈接。


Henderson
Henderson 主要擔任「炒稿記者」的職責,以翻譯最新科技,手機 電動車等消息為每天的工作。