一個讓許多香港 UI/UX 設計師感到擔憂的話題:AI 自動化設計 。UI/UX Designer 在香港一直是一份高薪職業,初級(Junior)設計師薪水就有 $2 萬多港幣起跳,有經驗的團隊主管(Team Lead)或資深經理(Senior Manager)甚至能達到 $5 萬多 。然而,隨著 AI 技術的快速整合,這個職位正面臨巨大的衝擊 。本期影片將會深度介紹 Google 最近推出的 AI 工具 Stitch,它如何結合了 Figma 的強大功能,讓任何人只需輸入一個指令(Command),就能端到端(end-to-end)完成 UI/UX 的設計工作 。
1. 職位與危機背景
UI (User Interface) 代表用戶介面,負責設計如 APP 和網頁的介面,以確保客戶能輕鬆使用服務,從而提升營銷效果。UX (User Experience) 則與 UI 緊密相關,當介面設計得好,用戶體驗也隨之提升。
- 香港薪資現況: 過去,UI/UX 設計師的薪資相當不錯,初級 (Junior) 設計師起薪約 2 萬多元,資深人員或團隊領導 (Team Lead/Senior Manager) 薪資可達 5 5 萬多元。
- AI 整合: 由於 AI 已經大量整合到這些設計流程中,這種高薪情景可能很快不復存在。
- Google Stitch 的出現: Google 最近推出了名為 Stitch 的 UI 設計工具,它不僅整合了 AI 功能,最近更加入了 Figma 的整合。這意味著設計流程可以完全實現 端到端 (end to end) 自動化。
2. AI 可能取代設計師的角色
影片指出,透過這些工具,任何人都能完成 UI/UX 設計師的工作。未來,當 AI 能夠取代這項工作時,很可能將由 **產品經理(Product Manager)**來執行。以往,產品經理負責撰寫需求書,再找 UI/UX 設計師落地設計流程;但現在,產品經理可以直接使用工具完成 UI 設計。
3. 準備與工具要求
要使用這項技術,您需要準備兩個帳號:
- Stitch 帳號: 網址為
stitch.withgoogle.com。 - Figma 帳號: 這是設計協作工具。
這兩個帳號都可以直接使用 Gmail 綁定完成設定。不過,目前 Stitch 暫時未支持香港,因此需要使用 VPN 才能夠進入網站。
4. Stitch 的核心功能與限制
Stitch 的操作很簡單,用戶只需輸入一個 指令 (command) 或 需求 (requirement),就能生成一個網站設計。
- 技術整合: Stitch 整合了 Google 的 Gemini DeepMind 模組。
- 設計輸出: 它可以輕鬆編輯設計、輸出 HTML 代碼,並可將程式碼整合到 Figma 專案中。
- 免費使用與限制: Stitch 目前完全免費使用。但設有每月限制:
- 標準模式 (Standard Mode): 每月限用 350 次(速度較快,但效果可能較不理想)。
- 實驗模式 (Experimental Mode): 每月限用 200 次(回覆更專業,結果更好,但目前不能連接 Figma)。
5. 實際操作示範:旅行計畫 UI/UX 設計
影片示範了如何向 Stitch 丟出一個關於旅行計畫的需求。
- 設計生成: Stitch 大約在 一分鐘內 就完成了設計。
- AI 建議與功能: AI 分析需求後,設計中包含了多項功能,包括行程概覽、詳情、協同編輯(可邀請朋友一起編輯)、備註 (Notes)、費用分享 (Share Expense)、費用預算和消費摘要。它甚至主動增加了一個功能叫做「周邊探索」,整合地圖來幫助用戶發現附近的餐廳、景點和交通選擇。
- 設計細節: 生成的設計非常詳細,有圖標 (icon) 和時間安排,儘管示範中出現了英文和中文混雜的情況。
6. 與 Figma 的端到端整合
當設計完成後,用戶可以直接進行細部調整:
- 客製化: 可以一鍵切換到 深色模式 (dark version)、調整色盤、圓角或字型。
- 代碼可視: 用戶可以看到並修改整個頁面的代碼。
- 導入 Figma: 只需簡單按一下「放進 Figma」,系統就會複製設計到剪貼簿。用戶在 Figma 頁面按下貼上 (Control V / Command V),設計就會直接以可編輯的格式貼入。
- 簡單編輯: 在 Figma 中,用戶可以 雙擊 輕鬆編輯文字(例如將「行程」改為「Plan」或「Trip」),並在右側面板選擇不同的字型。
- 響應式設計 (Responsive Design): Stitch 還可以輕鬆預覽和調整設計的橫向或縱向比例(手機版或桌面版),極方便地實現 mobile responsive design。
總結
Google Stitch 搭配 AI (Gemini DeepMind) 和 Figma,為 UI/UX 設計帶來了革命性的效率提升。它能夠根據簡單的文字指令,在短時間內生成具備專業功能和響應式設計的 UI。對於香港的 UI/UX 設計師來說,這是必須掌握的自我增值工具,因為它能讓產品經理或任何使用者在不花一分一毫的情況下完成設計流程。強烈建議大家試用這些免費工具,以保持競爭力。
常見問題 (FAQ)
Q1:Google Stitch 是什麼? A:Stitch 是 Google 推出的一個 UI 設計工具,它深度整合了 AI 功能(如 Gemini DeepMind 模組),允許用戶透過輸入指令來生成和編輯網站或應用程式介面設計。
Q2:Stitch 如何影響 UI/UX 設計師的職位? A:由於 Stitch 和 AI 能自動化端到端的設計流程,過去需要設計師完成的工作現在可以由產品經理或一般使用者透過工具直接完成。這可能會使香港 UI/UX 設計師面臨潛在的薪資或職位風險。
Q3:Stitch 與 Figma 的整合有什麼優點? A:Stitch 可以將生成的設計和程式碼一鍵複製到 Figma。這讓設計師或用戶可以在 Figma 中進行更細節的調整和客製化(如字體、顏色、佈局),同時輕鬆實現移動響應式設計 (mobile responsive design)。
Q4:使用 Google Stitch 有限制嗎? A:Stitch 目前是免費的。但它對使用次數有限制:標準模式每月 350 次,實驗模式每月 200 次。另外,目前 Stitch 暫時未支持香港,需要透過 VPN 才能進入使用。