Day 08 說 AI 看得到的東西全攤在同事桌上，截圖也是其中一樣。這篇談怎麼把它放上去。

要 AI 做介面時，與其花十句描述「上面有標題、下面有卡片、按鈕靠右」，直接給一張截圖或線框圖常常更快。

這就像跟室內設計師說「我要簡約、有質感、留白多」，每個人腦中的畫面可能完全不同；但給一張參考照片，討論立刻有了共同基準。

除了截圖，也可以提供範例資料、線框圖、既有頁面與反例。例如告訴 AI：「卡片請參考 A 的排版，但不要像 B 一樣把重要按鈕藏太深。」

反例尤其有用，因為它不只告訴 AI「我要什麼」，也畫出「不要走到哪裡」。

說清楚你要它看的是哪一部分

一張截圖裡同時有版面、配色、字體、間距、圓角和內容文字。你心裡想的可能只是版面，但 AI 不知道，很可能連配色一起抄走。

所以貼圖的時候順手指定範圍：「參考它的欄位排列方式就好，顏色沿用我們現有的。」多打一句話，省掉一輪來回。

也順帶一提：截圖裡常常帶著真實資料——客戶姓名、Email、訂單編號、後台網址，貼出去之前記得遮掉。

但「看起來很像」不代表真的完成

圖看不見的，大致有三類。

響應式：一張桌面版截圖沒辦法告訴 AI 手機上該怎麼重排，哪些欄位要收起來、哪些要換行。

互動狀態：hover、focus、loading、錯誤提示，靜態畫面全都看不到。而且 hover 在觸控裝置上根本不存在——這本身就是截圖會騙人的好例子。

無障礙：就算畫面做得幾乎一模一樣，還是可能對比不足、缺少替代文字、焦點順序錯亂。

圖片適合回答「應該長什麼樣子」，文字規格則負責「應該怎麼運作」——也就是 Day 07 那幾條可以逐條去測的驗收標準。

延伸閱讀

W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation（https://www.w3.org/TR/WCAG22/）