UIUX 設計師會被 AI 生成式 UI (GenUI) 取代嗎？

解析六款生成式 UI 工具：UiZard、Galileo AI、Figma AI、Visily、Creatie、Motiff

前言

生成式 UI 是指 AI 根據指令自動生成的客製化 UI。隨著 AI 技術的爆發，各種生成式 UI 工具如雨後春筍般湧現，陸續使用過幾款後，累積了一些心得，想與大家分享！

究竟這些工具如何幫助設計師增加效率？ UIUX 設計師真的有可能被 AI 取代嗎？讓我們一起來探個究竟 ➡️ ➡️ ➡️

快速跳至
▶ GenUI功能對照表
▶ 1.UiZard
▶ 2.Galileo AI
▶ 3.Figma AI
▶ 4.Visily
▶ 5.Creatie
▶ 6.Motiff
▶ 結論

GenUI 功能對照表

本篇整理了六款生成式 UI 工具（GenUI），分別是：UiZard、Galileo AI、Figma AI、Visily、Creatie、Motiff。

每款工具各具特色，在開始介紹之前，可先對照以下表單，了解 GenUI 工具可能具備的功能：

• Text to Diagram AI：根據文字描述生成流程圖
• Screenshot to Design：將螢幕截圖轉換為可編輯的設計
• Sketch to Design：將手繪草圖轉換為線框圖
• Text to UI / Image to UI：根據文字或圖片提示（Prompt）生成 UI 設計
• Smart Table Data Fill：使用 AI 自動填充相同結構的表格內容
• Improve Writing：輸入提示詞，由 AI 潤飾或替換文案
• AI Generate Image：透過 AI 生成圖片
• AI Design System：透過 AI 生成基本的設計系統
• UI Editor：透過 AI 生成的介面可在工具內編輯（UI 編輯器）
• AI Prototype：生成介面時自動產生互動式原型（Prototype），並可自行調整互動
• Import file from Figma：支援將 Figma 檔案匯入
• Export to Figma：支援將可編輯檔案匯出至 Figma

在接下來的介紹中，我們會逐一探討這些工具的功能及優勢～

1. UiZard

UiZard

Uizard 是一款專為沒有設計背景的人打造的生成式 UI 工具，除了前述功能外，還具備一些獨特功能：

• 主題產生器（Theme Generator）：通過上傳截圖、文字提示詞或 URL，自動生成具有相似風格的 UI 主題。
• 一鍵將畫面切換成 Lo-fi 或 Hi-fi (Wireframe / Mockup)
• 最新發佈 Autodesigner 2.0，用戶能夠透過 AI 設計助手，以對話模式進行迭代畫面。

其他 AI 功能，登入後可以在畫面左下的 「Magic」 探索 👇

Uizard 價格/

提供免費版及付費版，免費版（Autodesigner 1.5）提供 10 個免費模版，2 個項目及每月 3 次使用生成式 AI 功能。

2. Galileo AI

Galileo AI 1.0

Galileo 提供的功能較為基礎，可說是這幾款工具中最為精簡的一款，它最大的差異在於 Galileo 不具備 UI 設計編輯器，生成的圖稿需匯出到 Figma 進一步編輯。儘管如此，Galileo 仍具備一些有趣的功能：

• 跟 ChatGPT 介面類似，透過對話進行操作。
• 生成的排版皆為 Auto Layout，且間距遵從 4px 的網格系統。
• 透過 AI 對話生成設計後，可進行主題樣式自訂，包括亮/暗模式、色彩調色板、圓角、字體等。

Galileo 價格/

註冊後，每個用戶免費得到 150 個積分（10 Credits/1張圖）和 3 次 Figma 匯出。免費版的用戶需公開生成的圖檔，可以在 Explore 中看見其他用戶生成的設計圖跟描述詞。

3. Figma AI Tool

作為 UI 設計領域的龍頭，Figma 在 2024 年 6 月正式推出 AI 工具。然而，由於 AI 模型訓練涉及抄襲的爭議，Figma 暫時停用了 Make Design 功能。

如今，它回來了！改名為 First Draft，主要定位為產生早期概念的設計頁面，提供 4 個設計庫，能以對話的方式持續調整頁面，逐步完善設計。未來 Figma 將允許使用自定義的元件庫，目前則使用 Google Material 3 等標準設計系統來驗證此概念。（期待它明年就能實踐這個功能！）

photo frome figma / Building a better First Draft for designers

除了 First Draft 外，Figma 還提供了其他實用的 AI 功能：

• 自動圖層命名（Rename layers）：使用圖層的內容、位置以及與其他選定圖層的關係來命名圖層。
• 尋找資產和設計（Find assets and designs）：使用描述性提示、圖像或畫布來尋找相關元件和設計，無需記住具體名稱，即可快速找到。

這些 AI 功能整合了設計師在設計過程中常遇到的痛點，過去需要借助插件或是其他工具才能解決這些問題，如今在 Figma 內即可一站式完成。目前體驗心得是：「更離不開 Figma 了呢 🫶」（更多 AI 功能介紹請看此）

Figma AI 價格/

免費！預計 2025 年推出新的付費方案。

4. Visily.ai

如果你是 Miro 的用戶，Visily 的設計模式可能會讓你感到熟悉。Visily 的產品定位在快速構思 UI 概念，再到 Figma 進行精修。值得一提的功能有：

• 一鍵將畫面切換成 Lo-fi 或 Hi-fi (Wireframe / Mockup)
• 色彩助手（Color Assistant）：提供色彩對比度建議
• 透過 Visily 的 AI 聊天助理 ，可用對話的方式產出介面。（右下角 Ask AI，詳細使用方式請看這邊）

Visily.ai

• text to diagram：強調 AI 驅動的設計流程，根據文字描述產生流程圖

Visily 價格/

免費版用戶有 2 個可編輯的公開看板，每個看板的元素 2500 個數量限制，100 個 AI 積分，並有 3 次機會導出到 Figma（需使用插件）。

5. Creatie.ai

Creatie 的介面跟 Figma 極為相像，用戶可以上傳 Figma 檔案到 Creatie，但是無法從 Creatie 導出檔案到 Figma。

Creatie.ai

雖然介面相似度極高，不過 Creatie 還是有些蠻有趣的功能：

• 自動化設計系統：抓取設計稿生成對應的 Guideline (包含 Color / Text style / Radius / Effect styles)

• 設計審核器 (Audit)：檢查樣式問題，顏色或是排版 (Stroke、Padding、Corner radius、Effcts…)，提供一致性建議。

• Creatie Wizard：在畫板內框選一個範圍並輸入簡單的提示，自動推薦生成的介面（自動佈局 Auto Layout）

image from Creatie.ai

以上功能雖然聽起來很酷，但是實際測試後，AI 生成的內容還存在一些不足之處：

• Guideline 並非針對頁面客製化，且沒有抓取到正確的 Text Styles
• 設計審核器只針對 Library 提供的方向檢核，AI 還沒有能力審核整體設計的一致性。
• Creatie Wizard 框選後推薦的元件太粗糙、太模板，只是抓取 Creatie 通用的設計庫，並不是真正量身定制。

Creatie 價格/

免費版的用戶可嘗試所有 AI 功能，但是各功能有次數限制。 2024 年 10 月 31 日之前註冊的用戶，可在年底前免費使用付費權利（Pro Team）。

6. Motiff 妙多

Motiff 的產品定位是「打造專為UI 設計師使用的編輯器」，強調產品的每個功能都被 AI 漸進式改進，儘管如此，Motiff 的介面仍然仿照 Figma。使用者可以從 Figma 搬遷檔案過來，但無法搬遷回去 Figma，如果要用這個軟體做發想，再回到 Figma 設計，設計流程就會有斷點。

Motiff

有幾個特殊功能試用過後，還蠻有意思：

• AI Design System Creator：選取檔案後，自動生成完整 Design System 檔案。檔案內能夠知道元件/顏色被用過幾次，並檢視使用來源，確認是否正確使用元件。

跟 Creatie 相比，Motiff 產出的檔案是真正客製化，但在精准度上還無法取代設計師。
畢竟分類組建對 AI 來說還是太過困難，各種邊緣情況還是得靠設計師人工判斷。
（舉例畫面：AI 將 Tag 判斷成 Button）

AI Design System Creator: A new practice in the AI era with just one click

• AI Layout：當畫面還未定稿前，可以使用AI 佈局建立臨時結構，定稿後再退出 AI 佈局，使用 AI 添加自動佈局，無需經歷從內到外逐層添加自動佈局的繁瑣過程。

AI Layout: The dream of dynamic flexibility

Motiff 價格/

免費版本不限數量的文件，可協作文件 3 個，檔案保持歷史紀錄 30 天。Motiff AI Beta 階段限時免費，每月有固定次數限制（詳情請看此）

總結以上，可依照以下結論，快速選擇工具指南 ⬇️ ⬇️ ⬇️

• 最強大、實用、結合性最好的工具： Figma AI Tool（明年要收費了，請好好把握免費使用期間）
• 想在 5 分鐘之內了解描述詞產出介面的過程：可以試試功能最精簡的Galileo AI
• AI 功能豐富：Uizard、Visily、Creatie 這三款工具（要注意免費版提供的試用次數有限）
• 費用平價：如果團隊有費用考量，可以嘗試號稱是 Figma 平替版的 Motiff
• 自動化設計系統與 AI 設計審核功能： Creatie、Motiff

結論

最後，來回應一開始提出的疑問：「UIUX 設計師會被 AI 取代嗎？」我認為， AI 要完全取代 UIUX 設計師目前仍是不可能的事，儘管 AI 生成介面的速度很快，但它缺乏獨特性，無法專對性地解決客戶的需求，使用體驗常常存在斷點，簡單來說就是 — 低於標準的 UI 設計。

以下統整生成式 UI 可能的問題：

• 模板感強烈：為了穩定輸出品質，生成結果模板感強烈
• 使用體驗的斷點：偶爾會出現不合邏輯的設計，影響整體體驗
• 局限靜態頁面：僅能處理靜態頁面，無法涵蓋複雜的業務邏輯
• 語言限制：目前操作僅支持英文描述詞
• 過度標榜 AI 功能：部分產品過度強調 AI 功能，實際上僅是“漂 AI”（AI Washing）
• 資訊安全與隱私問題
• 原創性與抄襲倫理問題

提出這麼多問題，就我個人而言，還是蠻期待未來有合適的工具，可以真正解放設計師的雙手，讓設計師不再像個搬運工或拼圖員，重復性工作就交給 AI 處理，設計師則是專注在設計的策略和成果監督！

【延伸閱讀】

• AI生成UI設計平台試用心得-UIzard, Framer, Galileo
• UI/UX 必看！5 款强大又好用的 AI 原型设计神器
• UI 設計師這職位還能活幾集？
• Generative UI and Outcome-Oriented Design

（本文內容基於 2024 年 10 月的使用體驗 ✨）感謝你的耐心閱讀！如果這篇文章對你有任何的啟發，歡迎留言回饋～

如果想了解更多產品設計 / UIUX / 敏捷設計內容，歡迎訂閱 設計丸物製＆追蹤 設計丸 IG ，我們下次見 👋

[embed]