很多人在平板上使用 AI Studio 上傳圖片時，往往只會附上一句模糊的「這張圖是什麼？」或「幫我分析一下」。結果模型不是泛泛而談，就是抓錯重點。今天我們要探討：當輸入媒介從「純文字」變成「圖片 + 文字」時，提示詞的結構該如何升級，才能精準引導模型的視覺注意力？

為什麼傳統文字 Prompt 套在圖片上容易失效？

1. 視覺資訊密度極高：一張照片或介面截圖包含了佈局、顏色、字體、空間相對位置與隱含情境。如果沒有給予視覺錨點，模型只能隨機挑選最顯眼的物體描述。
2. 文字與視覺的「對齊（Alignment）」需求：多模態提示詞的核心在於「定位（Where）」與「任務（What）」的結合，必須明確告訴 AI 要看圖中的哪一個局部、用什麼視角去解讀。
   精準圖片提示詞的「VIC 結構法則」
   針對多模態任務，我們將純文字的 RCIC 結構進化為專為視覺設計的 VIC 法則：
   V（Visual Anchor，視覺錨點）：指定模型觀察的範圍或元素（如：「請注意圖表右下角的折線走勢」、「請觀察照片中央人物的手部動作」）。
   I（Interpretation Role，解讀角色）：賦予專業視角（如：UI/UX 設計師、放射科醫師、前端工程師）。
   C（Constraint & Delivery，交付規格）：規定萃取出來的資料格式（如：Markdown 表格、JSON、或是缺陷清單）。

實測設計：手繪 Google 登入流程 Wireframe
我在平板的繪圖軟體上隨手畫了一張經典的 Google 登入介面手繪草圖（包含頂部標題、說明字樣、Email 輸入框、忘記帳號連結、建立帳號與 Next 圓角按鈕），並上傳至 Google AI Studio 進行對照測試。

實驗 1：模糊視覺提問（對照組）

• prompt：這是一張我畫的介面草圖，請幫我看這張圖，告訴我這是在做什麼。
  這是一張我畫的介面草圖，請幫我看這張圖，告訴我這是在做什麼。
  
• 成果觀察
  模型準確辨識出「這是一張手繪的使用者介面（UI）草圖，模擬的是 Google 帳號的登入頁面（Sign In page）」。 
  它將畫面中的 6 個元素依序列出：標題、副標題、輸入框、忘記選項、建立帳號、下一步按鈕。 
  痛點評估：雖然辨識能力極高（連手寫英文都全部抓對），但內容僅僅是「文字化描述」，缺乏工程落地價值，工程師看完依然無法直接拿去排版或寫元件代碼。

實驗 2：套用 VIC 視覺提示法則（實驗組）

• prompt：
  【角色】你是一位專精於 Design System 與前端切版的資深 UI/UX 工程師。
  【視覺錨點】請由上至下掃描這張手繪 Wireframe，辨識出圖中的每一個介面元件與佈局階層。
  【任務與交付規格】
  請產出一份前端工程規格清單，必須包含：

1. 【元件盤點表】：用 Markdown 表格整理，欄位包含「視覺位置（上/中/下）」、「元件類型」、「建議命名 (ID/Key)」、「狀態與互動說明」。
2. 【佈局結構建議】：說明建議使用的 Flexbox/Grid 排版方式（如方向、對齊與間距）。
3. 【UX 盲點與實作提醒】：指出這張草圖轉換為真實程式碼時需補足的關鍵互動細節。
   
   -成果觀察：
   套用 VIC 結構後，模型給出的成果直接達到了資深工程師可以直接照著切版的專業水準： 
4. 結構化【元件盤點表】： 

• 用整齊的表格將每個元件映射為標準元件（Text H1、Input、Link/Button、CTA Button）。 
• 甚至直接替工程師命名好了 Semantic ID：⁠heading_sign_in⁠、⁠input_email⁠、⁠btn_forgot_email⁠、⁠btn_next⁠。 
• 明確標示出各元件需要實作的狀態（如：Focus、Hover、Error、Loading、Disabled）。 

2. 精確的【Flexbox 佈局建議】： 

• 容器層直接給出具體 CSS 屬性建議：⁠flex-direction: column⁠、⁠align-items: stretch⁠、⁠padding: 40px⁠、⁠gap: 24px⁠。 
• 底部操作區精準建議採用 ⁠display: flex; justify-content: space-between⁠ 將「建立帳號」推至左側、「下一步」推至右側。 
• 針對 Email 輸入框，模型甚至主動看出這是 Material Design 的 Floating Label（浮動標籤） 特徵！ 

3. 極度敏銳的【UX 盲點與除錯】（最神細節）： 

• 模型敏銳抓出手寫文字誤會——因為手寫體較潦草,AI把n辨識成h「草圖頂部寫的是 Sigh In（嘆氣），工程實作時務必修正為 Sign In（登入）」，
• 單欄位驗證邏輯：點出這是「單欄位驗證（Identity-first login）」，說明為什麼草圖沒有密碼欄（因為點 Next 後才會動態切換到密碼畫面）。 
• 無障礙與響應式：提醒務必加入 ⁠aria-label⁠，並指出手機版若按鈕文字過長可改用

今日結語
多模態的核心價值，從來不只是讓 AI「看見圖裡有什麼」，而是透過專業視角，把圖像資訊「翻譯」成高價值的結構化成果。 
從今天的實測可以看到，在純文字對話下隨手繪製的草圖，只要套用 VIC 提示法則（視覺錨點、角色定義、交付規格），Gemini 就能瞬間展現出像素級的審查能力——從幫你抓出「Sigh In」手寫筆誤，到寫出標準的 Flexbox 佈局建議。這讓平板搭配 Apple Pencil 不再只是做筆記的工具，而是成為隨手產出工程規格的超級 AI 工作站！