Moon：黛西，我之前花了時間和 UI 夥伴溝通把幾個頁面的 UI 草圖畫好了。結果老闆開會時說要大改，所有心血都要重來，我快崩潰了啦！（哭倒）

和黛西一起回到現場~

還記得我們談到產品發想時，那些讓人腦袋打結的痛點嗎？好不容易產出一個閃閃發光的點子，接下來就進入了產品經理與設計師的另一場「愛恨情仇」。

相信這也是許多設計師和產品經理的心聲。在產品開發的早期階段，UI 設計耗時又費力，但同時也伴隨著高頻率的修改，每一次的調整都意味著時間與人力的雙重成本。

AI — UI設計的神隊友

以往，我們需要透過 Axure、Figma 或 Sketch 等手繪工具，從零開始建構每一個介面。現在，AI 能夠成為我們的強力助手，將我們腦中的文字敘述，自動轉換為初步的 UI 草圖，這比 Wireframe更加具體，也更快速。這就像是擁有了一位專屬設計師，隨時待命提供即時的草稿。

這不僅僅是可以節省時間，更重要的是，它讓** 「快速試錯」 ** 的敏捷精神得以徹底實踐。當點子還不成熟時，你可以直接用文字描述讓 AI 生成多個版本，讓利害關係人做選擇、比較優劣並進行快速迭代，大幅降低試錯成本。

步驟拆解：如何讓文字秒變UI草圖？

1️⃣第一步：精準的文字指令（Prompt）
AI 的生成能力取決於你提供的指令是否清晰。請將你的構想具體化如下：

• 產品類型： 這是一個什麼樣的 App 或網站？
• 目標用戶： 誰會使用這個介面？
• 核心功能： 介面包含哪些主要功能或按鈕？
• 設計風格： 你希望介面看起來是什麼樣子？

指令範例：
「這是一款專為年輕人設計的社交 App。請為我生成一個『個人主頁』的 UI 草圖。頁面頂部有個人頭像與使用者名稱，下方有追蹤人數、貼文數，以及三個可切換的標籤頁：『貼文牆』、『相簿』、『收藏』。頁面風格簡潔、現代。」

圖一：Stitch 產出之 UI 圖示意

2️⃣第二步：一鍵生成與快速迭代
將指令輸入 AI 工具後，它會立即生成符合你描述的 UI 草圖。這時，可以像和設計師溝通一樣，提出修改意見。

指令範例：
「在剛剛生成的草圖上，在頭像旁邊增加一個『編輯個人資料』的按鈕。」

AI 會根據你的新指令，快速產生更新後的版本。這種快速來回的互動，能讓你專注於「想法」本身，而不是「繪圖」的繁瑣細節。

圖二：Stitch 修改之 UI 圖示意

AI 介面工具

🔨工具一：Stitch
Stitch 是 Google 在 2025 年開發者大會上推出的一款實驗性 AI 設計工具，主要功能是讓使用者透過簡單的文字描述或上傳草圖，快速生成網站或 App 的使用者介面 (UI) 設計。它能直接產出對應的 HTML/CSS 前端程式碼，並整合了 Google 的 Gemini AI 模型。

🎯 應用與使用情境

• UI 草圖製作： 讓沒有設計背景的新手能快速製作 UI 草圖。
• 前端開發輔助： 自動生成 HTML/CSS 程式碼，節省開發時間。
• 視覺提案與風格探索： 利用關鍵字生成不同 UI 畫面，用於尋找靈感。
• 多頁面網站設計： 與傳統一次只能生成單一頁面的工具不同，Stitch 能一次生成包含首頁、關於頁面等多個頁面的網站架構。
• 從草圖到設計： 使用者可以上傳手繪草圖，讓 AI 轉化為具體的 UI 設計（限於實驗模式）。
• 與專業工具協作： 在「標準模式」下，設計圖可直接匯出至 Figma，且為可編輯的向量圖層。

⭐ 模式差異
Stitch 提供兩種模式，以應對不同需求：

• 標準模式 (Standard Mode)： 使用 Gemini 2.5 Flash 模型 ，反應速度快，適合快速產出草圖與原型，每月生成次數上限為 350 次。
• 實驗模式 (Experimental Mode)： 使用 Gemini 2.5 Pro 模型 ，能生成更精緻、細節豐富的畫面，適合視覺提案，每月生成次數上限為 50 次。

🔔 優勢與劣勢

• 優勢： 操作直觀、門檻極低；同時產出 UI 設計與程式碼，效率極高；支援多頁面生成；可與 Figma 無縫接軌。
• 劣勢： 仍在實驗階段，功能不夠完整；實驗模式無法匯出至 Figma；生成的程式碼內容為英文，需自行翻譯。

圖三：Stitch 標準版

圖四：Stitch 實驗版

表一：Stitch 模式差異比較

🔨工具二：Uizard
Uizard 是一款結合 AI 技術的設計平台，核心理念是讓任何人都能快速創建 App 或網站原型。使用者可透過文字描述、手繪草圖或螢幕截圖，自動生成可編輯的 UI 設計畫面。

🎯 應用與使用情境

• 多種生成方式：
  • AutoDesigner： 透過輸入文字提示 (Prompt)，AI 會生成包含多個頁面的網站或 App 介面 。
  • Generate Screen： 功能類似 AutoDesigner，主要用來產生單一頁面的 UI 。
  • Wireframe Scanner： 上傳自己手繪的線框圖，AI 讀取掃描後，產生 UI 。
  • Screenshot Scanner： 上傳軟體的螢幕截圖，AI 讀取後將其轉換為可編輯的 UI 。
  • Theme Generator： 參考特定網站的風格，並將該風格應用於現有的 UI 設計上 。
• 互動原型與協作： 設計完成後可模擬實際操作畫面，並支援多位團隊成員即時協作。

🔔優勢與劣勢

• 優勢： 效率極高，幾秒內可完成初步設計；操作直觀，門檻極低；功能整合度高，涵蓋 AI 生成、編輯與協作；支援多種靈活的生成方式。
• 劣勢： 生成品需大量手動後製；較難理解複雜的產品邏輯；無法建立完整的設計系統；免費版限制較多。

圖五：Uizard 介面

🔨工具三：Framer AI
Framer AI 是一款整合在 Framer 平台中的 AI 功能，可透過文字描述，在幾秒內自動生成一個完整的響應式網站。它不僅產出介面設計，還能生成文案、圖片與配色，一鍵發佈成可瀏覽的網頁。

🎯 應用與使用情境

• 一頁式網站製作： 特別適合快速建立活動、產品或服務的一頁式網站。
• 個人作品集網站： 不需要會寫程式就可完成個人或公司介紹頁面。
• 快速原型製作： 能生成包含真實文案的網頁原型，且能立即發布供人預覽。
• 一鍵發佈： 設計完成後，只需點擊「Publish」按鈕，即可將設計稿發佈為一個可公開瀏覽的網頁連結。
• 響應式設計： AI 會自動生成桌面、平板和手機三種尺寸的響應式網頁設計。
• **文案與內容生成：**整合 OpenAI 技術，能根據主題生成相關文案，並提供 CMS 內容管理功能。

🔔優勢與劣勢

• 優勢： 能在幾秒內生成完整網站，效率極高；入門門檻極低，無需程式設計能力；從設計到發佈無縫接軌。
• 劣勢： 生成的樣式較為普通，缺乏獨特性；需要大量手動修改來達到理想效果。

圖六：Framer AI 介面

表二：三工具比較表

就像敏捷開發讓我們能夠不斷回應變化，而不是遵循僵化的計畫一樣，AI 也為 UI/UX 設計帶來了全新的工作模式。它讓介面設計的初期階段，變得像一場有趣的「文字對話」，你只需要專注於「說」出你的想法，AI 就能幫你「畫」出來。

這不僅能大幅節省時間，不僅能減少討論期的人工損耗，更讓我們與重要的利害關係人溝通更順暢，提前在早期就取得利害關係想法，並發現潛在的設計問題，讓點子在實際開發前就得到最好的驗證。

Moon： 黛西，這太神奇了！以後我提案就不用一直麻煩 UI 夥伴了，這些 AI 工具根本是我的救星啊！

黛西： 沒錯，Moon！下次我們就可以用這些 AI 生成的草圖，直接來做使用者測試，看看用戶最真實的回饋是什麼，讓我們的點子更上一層樓！