前言
先前曾分享如何運用 AI 工具，從靜態設計稿出發，再逐步生成可互動介面（延伸閱讀：AI 如何改變 UI/UX 設計流程：用自然語言指令在 Stitch、Lovable、Figma Make 生成介面與程式碼）。近期關於「設計流程已死」的討論眾說紛紜，但可以確定的是，在 AI 時代，撰寫指令（Prompts）已成為設計師不可或缺的能力之一。
本篇將聚焦於指令撰寫的方法與技巧，透過結構清晰且精準的指令設計，讓 AI 一次生成具備完整互動邏輯的介面，不僅減少來回修改的成本，也讓產出更貼近設計者的想法與產品目標。
將想法轉化為可互動的原型（Prototype）
在高度講求效率與迭代速度的時代，過去冗長而完整的研究與設計週期，某種程度上可能成為產品推進的限制。市場變化快速、資源有限，團隊需要更即時地驗證想法與方向。
如今，流程正逐漸轉變為透過 AI 工具快速將設計概念具體化，在短時間內生成多組設計草稿與互動原型。這並不代表研究不再重要，而是讓探索與驗證的節奏更靈活，先快速生成、再評估優劣、接著聚焦深化，使設計從線性流程轉為高頻率的迭代循環。
這些原型不僅可作為驗證工具，協助設計師檢視元件狀態、互動邏輯與資訊架構是否合理，也有助於縮小團隊成員之間的理解落差，及協助利害關係人確認方向是否符合預期，讓討論建立在具體畫面與操作流程之上，而非僅憑文字描述或想像。
相較於靜態畫面
可互動原型能更有效地：
- 檢驗元件在不同狀態下的變化規則
- 驗證資訊架構與互動邏輯是否合理
- 測試操作流程是否順暢
過去多仰賴文字註解（Annotation）說明動態流程，但僅以文字描述複雜互動，往往難以完整傳達實際體驗，也容易在設計、產品與工程之間產生理解落差。互動原型則能將抽象邏輯轉化為可操作的體驗，讓討論建立在具體情境之上。
在 AI 工具的協助下，設計師可以更快速地生成多種設計方向，進行版本比較與討論，擴大探索範圍。設計師需從中篩選、整合與優化，確保最終方案符合品牌風格、產品定位與使用者需求，並回應前期研究所發現的核心問題。
實作練習：選定一個元件，輸入指令
為了更具體說明 AI 在設計流程中的應用，我選擇音訊轉文字摘要作為示範元件，接著使用三種不同工具，輸入相同指令，觀察各自生成結果的差異。
撰寫 Prompt：結構化而非隨意輸入
善用指令範本
使用既有範本改寫內容，比從零開始撰寫更有效率，也能學習良好的指令結構。
推薦範本：Audio Summarization、21st.dev
以音訊摘要功能為範例：
- 使用目的
- 使用者需要快速概覽，無需收聽完整錄音的長篇音訊內容，以節省時間，並使音訊內容更易於管理和搜尋。
- 使用情境
- 會議紀錄整理
- Podcast 重點回顧
- 線上課程內容摘要
- 功能說明
- 自動將長時間的音訊內容生成精簡摘要，擷取關鍵重點。
- 摘要內容包含時間戳記、核心主題與待辦事項。
- 可點擊特定段落，直接跳轉回原始音訊對應位置，提升瀏覽與回顧效率。
- 參考現有產品
- 參考 Otter.ai、Fireflies.ai、Descript等實際產品案例，重現其使用者流程與操作行為。
- 互動行為
- 確保所有互動狀態皆有正確的狀態變化（包含載入中、更新、錯誤、成功、閒置等狀態）。
- 涵蓋所有必要的使用者互動行為（如點擊、滑鼠懸停、鍵盤操作等）。
- 確保符合無障礙規範，包含正確使用 ARIA 屬性與完整的鍵盤操作支援。
- 設計風格
- 若已有設計系統，需在指令中說明元件規範，可參考下方的範本。
- 設計系統轉化為 AI 指令的流程整理：
- 整理設計系統摘要，包品牌色彩、字型設定、圓角比例、陰影層級與間距原則等。
- 轉化為可用指令，將摘要內容與介面截圖一併輸入 AI 工具（例如ChatGPT），整理出結構化的設計系統指令。
- 先測試單一元件，在互動原型生成工具（例如Lovable）中，優先測試單一元件（例如產品卡片或按鈕），檢視生成結果是否符合既有風格與設計語言。
- 再擴展至完整原型，確認元件風格一致後，再開始生成完整互動原型。實測顯示，Lovable 在導入設計系統指令後，能產出約 80% 視覺一致性的介面，其餘部分可透過局部微調補強。
展開設計系統測試指令 (其中一部份，完整請參考下方範本的架構)
Color Palette Primary:
– 900: #9F764A (Gold accent – CTA / Highlight)
– 800: #C49A6C (Secondary accent)
– 700: #F1DFCB (Soft highlight background)
Background:
– 900: #0C111B (Main dark background)
– 800: #1C2840 (Card / elevated surface)
Basic:
– 900: #E5E7EB (Primary text)
– 800: #FAFAFA (High contrast white)
Typography:
– Font: Montserrat
– Weight: Medium (default), Semibold for headings
– Base size: 12px
– Line height: 110%
– Section title: 16–18px
– Card title: 14px
– Supporting text: 12px
Spacing System:
– Screen padding: 24px top/bottom
– Screen padding: 16px left/right
– Component gap: 8px – Card internal spacing: 12px
– Section spacing: 24px Border Radius:
– Default: 8px – Pills (tabs/buttons): 999px
– Large floating control: 24px
Shadow/Elevation:
– No visible drop shadows
– Use contrast layering with Background 800 instead
– Floating glass effect uses 10–20% white opacity blur
推薦範本：Design System to AI Prompt Converter
對於設計師來說，無論使用何種工具，指令都必須與前期研究成果對齊，最終目標仍是解決使用者的實際需求，而非僅生成視覺畫面。
擷取現有元素再優化
若已有成熟產品的參考結構，可先擷取特定區塊轉為可編輯設計稿，再透過指令進行調整。這種做法的可以保留已驗證的設計模式，在既有基礎上優化，而非完全重來，降低生成結果過於發散的風險。
推薦工具：MagicPath
指令撰寫技巧
有效的指令通常包含三個元素：
- 明確的功能需求
- 使用情境說明
- 限制條件或不可更動項目
撰寫時建議採取一次修改一項的策略，逐步優化，而非每次重新生成完整介面，這樣能更有效控制設計方向。
範例：明確功能描述
Add a “Reset" button in the top-right corner to restore the page to its default state.
新增「重製」按鈕，將畫面回復至預設狀態
範例：告訴AI不可更動的項目
As a user, after viewing summary, I want to add notes (text + priority levels). No changes to current design or features.
在查看摘要後允許使用者新增備註與優先等級，不可更動既有設計結構。
結果比較與設計判斷
這次分別使用 Claude、Lovable、以及 MagicPath 三個工具，在相同指令條件下生成介面。即使已明確指定參照 Claude 的系統設計風格，最終呈現仍展現出不同的風格。
Claude並非專為介面設計打造，它的優勢在於邏輯推導與程式生成，因此產出的介面通常較為簡約、結構清晰。Lovable 允許使用者選取特定元素，針對指定區域下達修改指令，使調整更具局部精準性，適合在既有畫面上進行細部優化與快速迭代。MagicPath 則強調系統化建構流程，可先建立設計系統作為基礎，再生成畫面，生成後仍能透過下拉選單切換樣式或元件設定，並依照 Flow 流程逐步新增下一個畫面，較偏向從整體結構出發的產品設計方式。
| 比較面向 | Claude | Lovable | MagicPath |
|---|---|---|---|
| 指令輸入 | 文字 | 文字 + 語音 | 文字 |
| 畫面調整方式 | 繼續輸入指令產生新版本 | 指令繼續修改，也可選取區域進行局部修改 | 指令繼續修改，也可透過樣式選單與數值微調 |
| 多版本發想 | 以單頁優化為主，版本並存有限 | 以單頁優化為主，版本並存有限 | 可透過變數與 Flow 延伸多畫面 |
| 設計系統整合 | 無 | 顏色主題設定 | 可先建立設計系統再生成畫面 |
| 定位 | 指令驅動的生成型工具 | 生成後精修型工具 | 系統導向的產品建構工具 |
其中一個值得注意的觀察是，MagicPath 額外加入了「錄音」功能。雖然原始指令僅提到上傳音訊檔案進行摘要，並未要求即時錄音，但AI主動補充了此功能。這種延伸設計一方面提升了使用情境的完整性，使用者不僅能上傳檔案，也能直接使用同個工具錄音並生成摘要；另一方面，也提醒設計師在 AI 協作流程中，需要審慎評估自動補強是否符合產品策略與實際需求。
將不同版本帶入團隊討論，有助於更具體地比較優缺點，並在策略層面做出選擇。AI 在此扮演的是靈感發想與原型生成的工具，而非最終設計決策者。設計師仍要能判斷哪個版本更符合品牌調性，評估操作流程是否清晰，及是否跟其他相似頁面有一致的操作，避免使用者要多次學習操作，並檢視是否存在邏輯漏洞，可以整合不同版本的優點，重構為更完整的設計方案。
結論
過去，設計師會在設計稿詳細標註元件狀態變化、互動邏輯與使用情境，協助開發理解設計意圖。有了AI工具後，多了一種呈現方法，有助於降低不同角色之間的想像落差。透過精準的文字指令，快速生成可預覽的互動介面，讓想法即時視覺化，也讓團隊更早看見具體成果，加速討論與決策。
在 AI 協作時代，設計師的價值並沒有被取代，反而更加凸顯。以我實際測試的 Claude、Lovable和MagicPath為例，在極短時間內就能生成三組不同的互動介面，這就像同時與三個設計團隊合作，每個團隊都提出自己的提案，此時，設計師的角色不再只是產出畫面，而是評估哪一種設計更符合品牌定位，分析操作流程是否順暢，整合不同方案的優點，拼裝出最適合產品策略的版，這需要高度的判斷力與審美能力，AI 可以大量生成，但無法替你決定什麼是好設計，對細節的要求與品牌調性，依然是設計師不可取代的核心競爭力。
建議從市面上優秀的產品介面開始，透過 AI 工具擷取元素，再依照本文提到的步驟與技巧，逐步修改指令，將它調整成符合你腦中構想的畫面。與 AI 溝通，就像當年學習使用設計軟體一樣，需要反覆練習，當你越熟悉指令結構與回饋方式，就越能精準掌握生成結果。
電商讀書會 