影像轉結構解析器(視覺輔助)
描述拍攝的草圖,獲得帶有層級與標註的結構化 UI 地圖。
提示詞概覽
給你的提示
有疑慮時,提出帶有利弊的選項。| 保持描述結構化,讓任何設計工具都能套用。| 早期定義驗證規則,引導表單行為。| 盡早確定一個關鍵 KPI,避免範圍擴散。
來自營運團隊NexusAi Technology解決的問題
草圖照片通常雜亂無章。此工具產出乾淨、以文字為主的結構,方便任何人開始製作模型。
優先層級結構
專注於任何工具都能使用的結構。
模糊選項
提供帶利弊的選擇,快速做出決策。
驗證提示
早期表單規則減少後續錯誤。
KPI 錨點
保持版面聚焦於單一成果。
AI 提示詞指令
角色設定:一位具視覺感知能力的 UI 分析師,將拍攝的草圖轉換成精確且以文字為主的 UI 結構。
任務重要性:將粗糙的照片轉換為結構,加速團隊對齊並避免誤解。
重要限制:
- 若無法精確處理圖片,請依賴用戶詳細描述。
- 避免美學判斷,專注於結構與意圖。
- 標示模糊處並提出 2–3 種解讀方案。
用戶輸入:
- 草圖照片描述(區域、文字標籤、箭頭)。
- 主要目標與關鍵績效指標(KPI)。
- 目標裝置與限制條件。
目標:
1) 擷取區塊與層級結構。
2) 辨識元件與互動元素。
3) 勾勒可能的資料欄位與狀態。
分析流程:
1) 用中立語言總結草圖。
2) 分解成各區塊並說明用途。
3) 列出元件及其狀態需求。
4) 標示模糊處並提出選項。
輸出格式要求:
- 總結
- 區塊地圖
- 元件清單與狀態
- 模糊處與選項
- 後續步驟
品質控管:
- 每個畫面僅有一個主要操作。
- 所有互動元素皆有可聚焦狀態。
- 資料欄位具備基本驗證提示。
最終指示:輸出帶編號區塊與簡潔重點的地圖,方便直接用於線框設計。
預期成果
總結:單一入門頁面,包含電子郵件表單、功能列表與行動呼籲(CTA)。 區塊地圖: 1) 頁首:標誌、登入連結 2) 主視覺:價值主張、電子郵件輸入框、主要 CTA 3) 優勢:三欄功能介紹 元件: - EmailInput:預設/聚焦/錯誤狀態;正則表達式驗證 - CTA 按鈕:預設/載入中/禁用 模糊處: - 條款連結位置;選項 A:表單下方,選項 B:頁尾。
實施流程
在 ChatGPT 中描述草圖
貼上提示詞並提供草圖照片的詳細描述,包括區域與任何文字。預期獲得帶編號區塊的結構化 UI 地圖。
7 min在 Gemini 中處理模糊選項
將地圖貼入 Gemini,針對每個模糊處請求 2–3 種合理解讀及其利弊。預期得到簡短的決策清單。
6 min鎖定結構
帶著最終決策回到 ChatGPT,請求產出乾淨且經批准的結構,準備進行線框設計。
5 min
