Galileo 在 2024/2/7 時終於在 Product Hunt 公開發布產品了，這是一款 AI 生成 UI 的產品，以結果來說不到驚艷，但我覺得是取得了很好的「平衡」。
創辦人 Arnaud Benard 之前是在 Google 做 AI 模型研究，還參與了 Google AI 產品設計手冊的撰寫。我因為之前在 Clubhouse 上跟他討論過 AI 產品設計的問題，從那之後就一直追蹤他，也因此關注了 Galileo 的發展。
在產品設計的流程中，我蠻擅長收集資料、發展各種設計方向、並收斂出 User flow 和 System framework，但從設計的角度出發去做 Storytelling、到製作精細的 UI，一直不是我很擅長的。
光是在組織 Component 就會遇到問題，更何況用各種細節堆疊出真正 Visually Appealing 的設計。
而如果有一款 AI 產品能解決這個問題呢？
既有 AI 介面設計工具有哪些？遇到什麼問題？
之前我嘗試過一些搶先公佈的 AI 生成 UI 設計工具，例如 Uizard、Framer，實際體驗時不止模板感強烈，有時還會生成一些非常見模式又不合邏輯的設計，讓人覺得沒有「編輯動力」。（PS. 這是2023 上半年時體驗的，不一定能反應現在的實際情況）
我覺得「編輯動力」應該是這塊工具需要能夠滿足的核心，也就是讓人覺得真的可以省下一點 UI 設計的時間。這涉及「設計完成度」與「微調/編輯方法」兩個層面：
- 設計完成度指的是排版模式、元件選用、視覺細節等，是否跟我能交付的程度至少齊平。
- 微調/編輯方法則是我是否能快速針對我想修改的部分用我習慣的方式完成。
Galileo 在這兩點做到了不錯的平衡。
Galileo 的 AI 怎麼生成介面設計圖？
目前 Galileo 提供兩種方式生成設計，整體還是透過下 Prompt 進行對話的互動方式為主。一種是直接透過文字下 Prompt（Text to UI），一種是可以上傳圖片加上文字 Prompt（Image to UI）。
如果你完全沒有設計素材而是只有想法，可以透過文字生成的方式進行設計。如果你像我一樣會自己畫介面草稿（Wireframe），那選擇 Image to UI 會更精準一點。
現在暫時還沒有人針對生成 UI 的 Prompt Engineering 做研究，以讓 AI 生成更符合期望的結果。例如如果我想要一個有 Discord 風格的 ChatGPT，但在這邊生成的設計結果有點差強人意，期待未來官方能發表相關的 Prompt Engineering Guidelines。
目前每個月免費版提供了 200 Credits 讓用戶使用，每生成一張設計圖會耗費 10 Credits。如果用文字生成 UI，無法控制 AI 生成幾張圖，但如果用圖片生成，就可以從 1~4 之間選擇。
Galileo 的 AI 生成設計完成度
首先我上傳的其實是 Mobile web 的 Wireframe，但選 Mobile 時生成的是 App，選 Website 時生成的是電腦尺寸的網頁。
在這部分可以看出他對於模型生成的結果有很大的限制，但這個限制卻能夠保證生成的結果有較為穩定的品質。
其次在排版部分，不僅遵守著 4px 的 Grid system，還全部都加上了 Auto layout，讓整體排版不至於差到哪去。
視覺設計在我這個例子可能還看不出來，但我覺得幫我調整日期的 font size、加入的 icon 可用性很高，都減少了一些設計成本
Galileo 的 AI 設計微調方法
而「微調/編輯方法」，在 Galileo 中提供了多次對話的能力來微調產出的設計圖
不過跟 Uizard 和 Framer 的核心差異還是在 Galileo 自己並沒有 UI 設計編輯畫布，而是提供了複製到 Figma 的功能，我對這點感到非常 Appreciate。
因為 Uizard 和 Framer 的編輯器都不是大家習慣的，要開發出一個能追上 Figma 功能的編輯器也絕對不是一朝一夕可以做到，所以從「減少 UI 設計成本」的這個角度出發，完全不需要開發一個畫布編輯器。
反而是 Galileo 把輸出到 Figma 編輯的體驗做得非常簡單：只要點擊複製，再去 Figma 裡貼上，就完成了。
雖然 Auto layout 的設定基本上需要全部手動調整過一次，但如果只是 Demo concept ，其實很夠用了，我可以基於這版設計更快速去產出我需要的設計。
結論
以上就是快速試用 Galileo 的心得。可以看到即使現在大部分 AI 生成 UI 都是在處理靜態頁面的設計，都還有很多的進步空間，所以我覺得短期內 AI 設計工具最能發揮的地方還是在快速完成 Visually Appealing 的 Hi-fi Concept，拿去做 Demo 或者簡易的 User testing。
然而真正要讓 UI 可以進入 Production-ready 的設計流程中，就需要能處理複雜業務邏輯，例如能找出不同頁面之間是透過什麼互動進行串聯的，期待未來能有解決這個問題的 AI 設計工具出現。
大家對於這種工具的想法是什麼呢？歡迎跟我分享！
本文發表時間：2024/02/10
