如何讓AI成為設計師最強的工作夥伴 - 拓展輔助 AI 工具箱
❖ 前言
上一篇專門介紹 Figma 生態圈的 AI 工具 - Figma Make以及其他小 AI 工具，這一篇要為大家介紹在設計工作流程作業中，除了UI/UX之外，設計師涵蓋的範圍會從需求階段一直到切版階段，這時候如果能有其他領域的 AI 工具來輔助我們，就能加速我們設計的工作流程。
❖ 其他 AI 工具(輔助使用)
接下來要介紹的是其他工作流程上可能可以用到的工具們，但因為現在AI工具真的非常多，先選擇能與我們平常熟悉的工具(Figma, Adobe, Google, VS code)一起協作的工具，稍後要介紹的是我玩到覺得很不錯的工具們。
✦ 其他 AI 工具地圖
*因為 AI 工具非常多，所以沒有全列出，這邊僅列出能與Figma, Adobe, Google, VS code協作的工具。
其實很多AI工具可以做很廣的事情，像是我們可以叫claude, GPT, gemini做很多事情，但我把它放在這個工作階段，代表他在這個領域上相對較強。每個工具上方的小字就代表它的強項。
✦ 其他 AI 工具 - 各工具概述與比較
現在 AI 工具出的速度非常快也非常多，這篇文章介紹的是目前接觸到最容易上手，以及能與設計工作流程相輔相成的工具，這邊依照各領域放上對應的 AI 工具。
- 需求理解、規格書分析
| 工具名稱 | 應用領域 | 能做什麼 | 優點 | 限制 |
 |
長文文本分析 ✔︎ Wireframe繪製 通用 |
分析複雜需求文件。 提取關鍵功能清單。 找出設計問題點。 |
免費版可用，支援中/英文。 支援檔案格式：pdf, word, excel, 圖片檔, 網站連結。 支援15萬字長文文本。 結構化輸出(表格、列點)。 分析深度強。 能理解複雜邏輯。 |
免費版有次數限制，但發送的訊息數量會依據需求而有所不同，但超過額度每五個小時會重置一次。 付費版 $20 USD/月。 |
 |
搜尋 ✔︎ 文本分析 通用 |
分析簡短需求文件。 快速理解概念。 腦力激盪。 |
免費版可用，支援中/英文。 支援檔案格式：pdf, word, excel, 圖片檔, 網站連結。 大家都熟悉上手快。 對話流暢。 |
免費版，使用最佳模型次數約每3小時16次，但實際數字也會根據需求而有不同，超過限制會降版，效能降低。圖片生成張數5張/日。 長文分析能力較弱。 付費版 $20 USD/月。 |
 |
搜尋 ✔︎ Wireframe繪製 ✔︎ 通用 |
文字分析。 概念發想。 多模態處理(文/圖/影片)。 |
免費版可用，支援中/英文。 支援檔案格式：pdf, word, excel, 圖片檔, 網站連結。 整合Google生態系(Drive/Docs/...)。 對話流暢。 |
免費版，每日只能使用最佳模型5次，超過限制降版。 一般模型長文分析能力較弱，最佳模型可支援1,500頁檔案，頁檔案，圖片及Flow1,000點數/月。 付費版 $20 USD/月。 |
- UX 使用者體驗
| 工具名稱 | 應用領域 | 能做什麼 | 優點 | 限制 |
 |
UX 設計與使用者流程規劃 ✔︎ prototype 快速生成 UI 快速生成 |
Wireframe生成。 快速產出prototype。 |
免費版可以使用部分功能。 支援中/英文。 操作簡單，適合設計師快速產圖。 可視化流程，幫助團隊溝通與協作。 支援Figma, Figjam的工具整合。 |
免費版，90點數額度用完要儲值。 缺乏深度用戶研究和數據分析功能。 付費版 $15~35 USD/月。 |
 |
競品分析 ✔︎ 搜尋 ✔︎ |
競品研究。 市場趨勢分析。 |
免費版可用且功能相對完整。 支援中/英文。 自動引用資料來源，且來源更為準確。 即時資料。 |
定位偏向搜尋，非深度分析工具。 免費版，Pro 3~5次/日，超過限制會降版。 長文分析能力較弱。 付費版 $20 USD/月。 |
 |
UX 視覺化(心智圖) ✔︎ |
文字轉視覺化圖表。 使用者旅程圖自動生成。 流程圖生成。 心智圖生成。 |
免費版可用，支援中/英文。 獨特功能(其他工具做不到)。 專業美觀。 節省畫圖時間。 |
複雜流程需要手動調整。 免費版有輸出次數限制， 付費版 $12 USD/月。 |
- UI 介面設計
| 工具名稱 | 應用領域 | 能做什麼 | 優點 | 限制 |
 |
UI 設計 ✔︎ | 文字生成設計。 手繪草圖轉設計。 Material Design整合。 產出html結構切版檔案。 |
目前為完全免費，支援中/英文。 整合Google生態系。 技術強大。 可生成多種版本。 |
還在Beta測試不穩定。 標準模式無法上傳草圖，僅支援文字生成設計。 僅標準模式(輸入指令)，才可以將產出的畫面匯出至Figma，且為可編輯畫面。上傳草圖的產出無法匯出至Figma。 有額度限制，標準畫面 350 tokens，Pro畫面 200 tokens，但刪除額度會恢復。 |
 |
UI 設計 ✔︎ 全端開發(React) ✔︎ |
完整應用開發。 快速產出Prototype。 Demo展示。 |
免費版可用，支援中/英文。 可直接部署。 含前後端+資料庫。 適合MVP架構。 可以將產出的圖放至Figma編輯。 |
只產出React，對設計師門檻高。 免費版額度限制 5次/天。 付費版 $20 USD/月。 |
 |
UI 設計 ✔︎ Wireframe繪製 ✔︎ |
截圖轉設計。 手繪草圖轉設計。 Wireframe快速產出。 |
快速產出概念。 獨特功能(類似另一個Figma)。 腦力激盪好用。 |
無法匯入Figma。 只能在Uizard編輯。 免費版功能限制多也有額度限制，400 components，但刪除額度會恢復。 免費版 AI 功能 3 次/月。 付費版 $12-39 USD/月。 |
- UI 視覺、平面設計
| 工具名稱 | 應用領域 | 能做什麼 | 優點 | 限制 |
 |
圖片素材生成 ✔︎ 影片素材生成 配樂素材生成 圖片處理 ✔︎ |
AI生成設計。 文字生成圖片、影片、配樂。 生成式填充。 |
商用授權清楚。 Adobe 生態整合。 Illustrator、Photoshop內建。 |
免費版只能產圖，但不能下載也不能編輯，僅供靈感提供。 一般付費版 $4.99-54.99 USD/月。 圖片生成品質不穩定。 *圖片處理(去背、剪裁圖片等效果)會用寄信的方式寄處理好的檔案，看當時使用的帳號，會寄到該帳號。去背效果很高，但處理一張圖片、產出一個格式(PNG,JPG)各消耗20點數。 |
 |
圖片處理 ✔︎ | 線上去背。 圖片修復。 壓縮優化。 |
免費版可用，支援中/英文。 圖片處理速度快，處理人像能力強。 介面簡單。 |
免費版，免費下載 10 張/天，AI對話次數 2 次/天。 Figma內建也有類似功能(Remove background)，若Figma處理不佳可以試著用PicWish處理。 高解析度需付費。 |
- 切版 輔助撰寫程式碼
| 工具名稱 | 應用領域 | 能做什麼 | 優點 | 限制 |
 |
程式碼助手 ✔︎ | 寫程式碼時自動補全。 解釋程式碼。 修復錯誤。 |
在vscode內完全免費。 支援中/英文。 提高切版效率。 程式輔助工具。 |
需要會切版的基礎。 付費版 $10 USD/月。 |
✦ 其他 AI 工具 - 實戰案例
STEP 1. 分析第一手需求(規格)文件
將檔案(pdf, docx, 圖檔,網站連結)上傳至 Claude(或chatGPT、Gemini)進行分析。
指令範本：請你分析需求文件，提取關鍵資訊、目標用戶、功能需求等，並且提供資料來源。
STEP 2. 產出分析資料
透過輸入指令給 AI 工具之後，它會根據你的需求幫你整理出目標及功能模組，快速了解整個專案的架構。
STEP 3. 進行競品分析
請AI工具協助列出競品分析的關鍵字，可以在Perplexity (Claude, ChatGPT, Gemini)進行分析。
處理速度：Perplexity > Gemini > ChatGPT > Claude。
找到突破點及痛點，成為我們產品的競爭力。
請 AI 工具將整理好的資料，依據我們的需求產出指令，讓我們應用在產出流程圖、wireframe、UI等 AI 工具上。
指令範本：請你依照關鍵字進行競品分析，請簡單扼要整理成表格讓我知道各自能做什麼？優點，缺點，找出痛點，並建議我們能從哪裡突破。
指令範本：請把每個競品的優點核心功能整合，並將突破點整理成一段能繪製wireframe的指令給我。
STEP 4-1. 將前面得到的分析結果放到 Google Stitch 進行 wireframe 繪製
將分析結果請 AI 工具繪製 wireframe，就能將產出結果拿去與客戶進行快速的需求訪談。
Google Stitch實驗功能模式產出的 wireframe 較為精準，標準模式較為粗糙，但僅標準模式可將產出的圖匯至 Figma 去做精修。
*目前介紹的 AI 工具僅 Google Stitch, UX Pilot 可支援 Figma。
*若在需求非常不明確情況下，但仍須先出畫面，請AI工具快速產圖在會議上迅速對焦需求，使用AI工具很方便且快速。但若經過多次需求訪談且需求逐漸明確，靠設計師本身的出圖速度可能會比想指令要AI工具產出還要快且精確。
指令範本：
1. 設計一個「多模組化資料平台首頁」，主畫面包含「資料提取管理」「轉置工作流建構」「批次排程控制」「資料庫結構管理面板」「資料目錄總覽」五大區域。
2. 「資料提取管理」需支援多來源連接器列表與同步狀態監控，具變更捕捉設定入口。
3. 「轉置工作流建構」呈現依賴關係圖與SQL轉換模型管理，具版本控制及測試按鈕。
4. 「批次排程控制」顯示排程任務表及執行情況，支持手動及異常提醒。
5. 「資料庫結構管理面板」列出資料表與Schema變動歷史，並支援DDL變更申請與審核機制。
6. 「資料目錄總覽」呈現資料資產分類、血緣關係圖，並可進行搜尋與權限設定。
7. 強調「可擴展性」與「多租戶隔離」，介面設計需有權限層級切換與集中監控報表區。
8. 使用簡潔且易懂的圖示與互動流程，降低用戶複雜度，兼顧企業治理及運維便利性。
STEP 4-2. 快速提案提設計概念
根據分析結果或是需求，請 Lovable 快速產出概念，給予越精細的指令，產出質感越好。
適合在初期提案與客戶快速對焦使用。
* 若是用Lovable產出並轉出設計稿，需要透過 Figma Plugin 「html.to.ddesign - by <div>RIOTS - Import websites to Figma designs(web, html, css)」轉出。 
STEP 5. 圖檔匯至FIgma做圖檔精修
AI 工具(Figma Make, UX pilot)產出的圖匯至 Figma ，將元件、色票等置換成已經設定好的設計規範元件。
因 AI 工具產出的排版較為制式，在 Figma 變更排版以及設計風格。
STEP 6. 若程式碼為React檔案
先至 VS code 的外掛模組下載的外掛模組下載 GitHub Copilot。
React 結構目前不是我們所熟悉的語言，到 VS Code 安裝 Github Copilot 外掛後，並打上指令。
指令範本：請將此專案直接轉成純HTML5, CSS, Javascript檔案。
* 有時候不是很穩定，VS Code 內建的 Github Copilot 主要是輔助我們快速寫程式，轉換程式碼並不是強項，所以不能太確信一定能轉換成功。
STEP 7. 程式碼調整
在工作區打上註解指令，它提供它建議的程式碼(有點半透明的程式碼)，若覺得它建議的結構符合，按下「Tab」鍵，就能把它建議的程式碼直接在工作區上使用。
指令範本：//製作banner區塊，slide效果，三張圖輪播。
也可在指令區域輸入要新增的動態效果。
指令範本：請為.banner 新增輪播的動態效果，可手動點擊置換圖片，也可以自動輪播圖片，每三秒換圖片。
* 有時候不是很穩定，不一定能產生html結構。
* 有時候「//的文字」會自動轉換成code不用刪除，但如果打完「//的文字」他還留著的話記得刪除，不然會被html讀成一般文字顯示在網頁上。
❖ 總結
透過這些 AI 輔助工具，我們可以在不同設計階段獲得支援，從靈感發想、圖像生成到文案優化都有對應工具。關鍵不是每個都用，而是根據你的工作流程，挑選 2-3 個最合適的工具深入使用。
不過，再強大的 AI 工具，也需要明確的指令才能發揮效果。你可能會發現：同樣的工具,有人做出精美成果，有人卻得到四不像的結果，差別就在於「怎麼下指令」。AI 不會讀心術，但只要掌握幾個關鍵原則，就能大幅提升輸出品質。
在下一篇文章「如何讓AI成為設計師最強的工作夥伴 - 掌握 AI 指令技巧」中，我會分享實際有效的 AI 指令框架與技巧，包括如何描述需求、調整細節、以及避開常見的指令陷阱。如果你已經試過這些工具但成果不如預期，那下篇文章會特別有幫助。
