AI 設計參考怎麼給？從靜態截圖、動態影片到互動狀態的驗收清單
AI 設計參考怎麼給？從靜態截圖、動態影片到互動狀態的驗收清單。給 AI 一張漂亮截圖，通常能讓需求變具體；但截圖只記錄一個時間點，看不到展開、載入、失敗與關閉。要讓畫面能用，還得把這些狀態補進去。
給 AI 一張漂亮截圖，通常能讓需求變具體，但截圖只記錄一個時間點，看不到展開、載入、失敗與關閉。要讓畫面能用，還得把這些狀態補進去。
Adrien Ninet 分享設計參考清單，Fayaz 展示介面成果，另有創作者分享 Figma 改造及動態示範。這些案例都讓人回到同一個實用問題：參考素材究竟提供了哪些資訊？
我會先用參考對齊視覺，再用狀態表與操作條件補齊功能。這適合正在用 AI 製作產品原型的人。
AI 設計參考要怎麼給才清楚？
先寫明你要借用哪一部分，例如字體層級、側邊欄密度或展開方式。若只說「做得像這張」，AI 很難判斷哪些是必要內容、哪些只是範例品牌的裝飾。
Adrien Ninet 的原始貼文 把設計參考當成改善生成結果的方法，這是一位創作者的建議。要用在自己的專案，最好保留同一份需求，做有參考與沒參考的比較。
參考也要留出處，尤其是展示影片。看到「某模型做的」時，先找原始作品與作者說明，再決定能否把它當成製作能力的證據。
從一張畫面補成狀態表
以側邊欄為例，展開時好看只是起點，收合、選中與內容過長也要交代。Fayaz 的展示貼文 可以拿來觀察視覺與狀態，不能取代自己專案的互動測試。
| 狀態 | 需求要補的內容 |
|---|---|
| 展開與收合 | 寬度、文字是否隱藏、焦點留在哪 |
| 選中項目 | 用什麼方式表示目前位置 |
| 長標題與很多項目 | 換行、省略或捲動規則 |
| 載入與失敗 | 等待提示、重試入口及保留的內容 |
表格讓不同狀態有共同依據，因此修改外觀時，也比較容易確認功能有沒有一起改掉。
動態影片還缺哪些規格？
影片能傳達方向、速度與先後順序，但不一定看得出觸發條件。相同的卡片放大，可能是點擊、滑過或捲動觸發，程式實作會完全不同。
請在影片旁補一句：「點卡片後，圖片在 600 毫秒內展開成詳情頁，按返回時反向收回原卡片，動畫途中仍能取消。」時間只是示範值，應依你的產品調整。
如果要比較提示方式，保持內容、尺寸及通過條件一致。看結果時先對照幾何位置與操作，再評美感，才不容易被單一漂亮畫面影響。
常見問題
一定要提供影片嗎？
只有外觀需求時，截圖加清楚描述就能開始。要模仿節奏與轉場時，影片才比較有幫助。
能把別人的介面整套照搬嗎？
借用設計方法時仍要尊重素材與品牌權利，並替換成自己的內容。文章中的來源連結也能幫讀者找到原作者。
AI 說完成了，先測什麼？
先測最主要的操作，再測空資料、長文字和取消流程。這些狀態最容易在單張展示圖中被漏掉。
把參考轉成一張可操作的工作單
選一張截圖或一段影片，圈出想保留的視覺，旁邊列出觸發、狀態與通過條件。完成後照同一張工作單驗收，參考素材才真正接上產品需求。
