大量的踩坑後我發現，很多頁面最後跑偏，並不是 AI 不會畫圖，也不是代碼模型寫不出精妙的組件，而是一開始就沒有把頁面說清楚
整理版優先睇
做AI頁面前，先釐清11個問題，避免頁面跑偏
呢篇文章係由全棧開發者兼量化交易者MaxKing分享，佢發現好多AI生成嘅頁面最後走樣，唔係因為模型畫圖或者寫代碼能力唔夠，而係一開始就冇將需求講清楚。作者提出咗一個核心觀點：做AI頁面前，應該先搞清楚「邊個用、睇啲乜、點操作、有咩狀態」，而唔係直接叫AI開工。
佢整理咗一份11條問題嘅清單，由頁面名稱、目標用戶、核心任務，去到數據來源、異常狀態同驗收標準，全部要釘實。作者強調呢啲問題唔係畀AI填嘅表格，而係用嚟鎖定人、任務同邊界，等模型發揮嗰陣唔會亂嚟。佢仲用咗一個「交易儀表盤」做實戰示範，將抽象嘅需求變成具體嘅工程清單。
最後，作者提供咗一段Prompt，教你點樣將呢11個問題嘅答案塞畀AI，等佢幫你整理成UI Spec。佢認為AI時代做頁面，最關鍵嘅能力係表達，而唔係工具。先補齊輸入，再開工，先係高效做法。
- 頁面跑偏嘅主要原因係需求模糊，唔係AI能力問題。
- 用11條問題釘實頁面嘅人、任務同邊界，係開工前嘅必做動作。
- 先釐清需求再寫代碼，比直接叫AI畫圖更有效。
- 呢份清單可以當成固定checklist，減少遺漏同後續修改。
- 下次做AI頁面前，用呢個清單過一遍，再配合Prompt畀AI做UI Spec。
AI頁面需求拆解Prompt
將11個問題回答整理成UI Spec嘅Prompt，可複製畀ChatGPT或Claude使用。
點解需求會令頁面跑偏？
作者話，佢最怕唔係模型慢，而係需求一句話飄喺空中。評審羣入面如果只係話「做個好睇嘅後台管理頁面」，佢會先停一停，將頁面名稱、用戶、核心任務、狀態同驗收標準拉出嚟。
需求一句話飄在空中
如果頁面連對象、目標同狀態都冇定，後面嘅視覺同代碼都會補窿。作者將11個問題當成飛行檢查清單，先將人、任務同邊界釘住，再畀模型發揮。
11條必問問題，鎖定頁面骨架
作者提出咗11條問題，每一條都係為咗避免後期走樣。問題涵蓋咗頁面嘅定義、用戶、任務、場景、資訊優先級、模塊、操作、數據、狀態、響應式同驗收標準。
- 1 頁面名稱係咩？名越具體，AI越易對上行業慣例，例如「交易儀表盤」。
- 2 目標用戶係邊個？決定資訊密度：畀老闆睇就突出大盤，畀運營睇就突出篩選效率。
- 3 用戶嚟到頁面要完成嘅核心任務係咩？一個頁面要有絕對核心任務，例如快速查看賬户風險。
- 4 頁面喺邊個場景下使用？影響視覺重心同節奏，例如盤中高頻監控 vs 週末覆盤。
- 5 頁面最重要嘅資訊係咩？排優先級，放邊啲資訊大，邊啲摺疊。
- 6 頁面包含邊啲主要模塊？拆清楚先知道係一組可拼裝嘅組件。
- 7 用戶會做邊啲關鍵操作？例如組合搜索、提交、重置，避免生成只能睇嘅海報。
- 8 數據從邊度嚟？真實頁面要有字段同來源，唔得剩係佔位符。
狀態好易漏，淨係做normal根本冇法上線
實戰示範：交易儀表盤
作者以「交易儀表盤」為例，將11條問題過一遍，將模糊嘅「整一個靚嘅後台」變成一份工程清單。佢列舉咗每個問題嘅具體答案。
- 頁面名稱：外匯交易數據儀表盤，目標用戶係個人專業交易者。
- 核心任務：快速判斷賬户安全狀態，監控持倉盈虧。
- 使用場景：登錄後首頁默認展示，盤中高頻刷新。
- 最重要資訊：賬户淨值、可用保證金比例、總浮動盈虧。
- 主要模塊：頂部指標卡、風險預警條、持倉數據表、近期活動流。
- 關鍵操作：切換賬户、篩選幣種、一鍵平倉。
- 數據來源：交易賬户API（前期用Mock）。
- 頁面狀態：loading、empty、normal、warning（平倉警告）。
風險比視覺花活更應該放大
佢特別提醒，交易儀表盤入面，風險資訊嘅優先級要高過裝飾效果。
點樣將問題丟畀AI？用呢段Prompt
作者話唔使自己手寫長文檔，將上面嘅簡短答案整理好，再配合下面段Prompt掟畀ChatGPT或Claude就得。
你是一個資深產品經理 + UI 架構師 + 前端工程師。請根據我下面提供的【11 個頁面需求回答】，幫我整理成一份嚴謹的頁面需求拆解文檔。請重點輸出以下結構：
1. 頁面核心目標與用戶畫像2. 信息優先級層級3. 核心模塊清單（細化到組件級別）4. 數據結構建議（關鍵字段）5. 頁面狀態流轉說明6. 響應式與驗收標準【特別要求】作為架構師，請在文檔末尾毫不客氣地指出：
- 我目前的回答中，哪些信息還不夠清晰？- 哪些模塊的邏輯可能存在遺漏？- 哪些邊界狀態我沒有考慮到？- 哪些地方可能會增加後續代碼實現的難度？以下是我的 11 個問題回答：{把你填好的內容粘貼在這裏}先讓AI幫你查漏補缺，唔係直接寫代碼
呢段Prompt嘅目的唔係叫AI寫代碼，而係先幫你睇嚇有冇漏嘢，將粗糙諗法轉成更接近工程現場嘅需求拆解。
總結：表達能力比工具更重要
作者最後話，AI時代做頁面，唔係先拼工具，而係先拼表達能力。你將目標、模塊、狀態講得清楚，AI先至可以順住做落去。
個11條問題可以作為固定checklist
作者鼓勵讀者收藏呢份清單，下次做AI頁面前直接過一遍，唔使每次都由零諗起。
MaxKing寶藏
全棧開發者 × 量化交易 × AI 重度用戶。呢度記錄我用 AI 提升效率、解決問題、優化流程 嘅真實實踐，仲分享工具背後嘅判斷、踩坑同可重用方法。
評審 group 裏面句「先做個靚嘅後台管理頁面」一講出嚟，我通常唔會叫 AI 即刻開工。做 AI 頁面，真正要先處理嘅唔係出圖，而係將需求講清楚。
我見過太多頁面走歪，唔係輸在模型能力，而係輸在開局太冇嘢。頁面俾邊個用、最重要嘅資訊係乜、用戶要點操作、異常狀態點處理，呢啲都冇講清楚，AI 只能靠估。
AI 好擅長執行，但佢唔可以幫你補返曬個業務上下文。
所以呢篇唔講虛嘢，只講一件事：做 AI 頁面前，先將「邊個用、睇乜、點操作、有咩狀態」講清楚。呢個前置動作做啱咗，後面無論係出圖、寫 UI Spec，定係落到前端 code，都會順好多。
我做 AI 頁面嘅時候，最怕嘅唔係模型慢，而係需求一句話浮喺半空。評審 group 裏面如果只係掟句「做個靚嘅後台管理頁面」過嚟，我會先停一停，將頁面名稱、用戶、核心任務、狀態同驗收標準拉出嚟。
頁面如果連對象、目標同狀態都未定清楚，後面嘅視覺同 code 都會係咁補窿。
呢個都係我一直將嗰 11 個問題當做飛行檢查清單嘅原因。佢唔係俾 AI 填嘅表格，而係先將人、任務同邊界定死，再俾模型去發揮。
01
-MaxKing.cc-
我做 AI 頁面前必問嘅 11 個問題
頁面名係乜？
先俾頁面一個準確嘅名。個名越具體，AI 越容易對應返正確嘅行業慣例。
示例： 交易 dashboard、訂單管理頁、SaaS 偏好設定頁、外貿客戶 inquiry 頁、電商 login 頁。
目標用戶係邊個？
呢一步決定資訊密度。俾老細睇、俾運營睇、俾新手睇，頁面重點完全唔同。
示例： 俾老細睇，就突出核心大盤數據；俾運營睇，就突出篩選同批量操作效率；俾新手用戶睇，就突出引導同轉化。
用戶嚟到頁面要完成嘅核心任務係乜？
一個頁面可以有好多功能，但一定要有一個絕對核心任務。冇主線，頁面就會散曬。
示例： 快速睇賬户風險、一鍵提交 inquiry 表單、篩選同匯出上個月嘅財務報表。
頁面係邊個場景下用？
場景會影響頁面節奏，仲會影響視覺重心。係匆匆睇一眼，定係盤中高頻盯住睇，完全唔係同一回事。
示例： 每日朝早睇一眼概況、交易盤中實時監控、週末靜靜覆盤。
頁面最重要嘅資訊係乜？
呢一問係排優先級。唔係所有資訊都應該同等重要，AI 需要知道邊度要放大，邊度要摺埋。
示例： 交易 dashboard 裏面最重要係賬户風險預警同保證金比例；外貿 inquiry 頁裏面最重要係產品賣點同表單入口。
頁面包含邊啲主要模塊？
模塊拆清楚，AI 先知呢個唔係一張死圖，而係一組可以拼裝嘅組件。
示例： 交易 dashboard 可以拆成賬户概覽區、風險預警卡片、持倉數據表格、交易信號面板。
用戶會做邊啲關鍵操作？
頁面係用嚟交互嘅，唔係掛喺嗰度睇嘅。操作冇講清楚，到頭嚟就會生成一個只可以睇唔可以㩒嘅海報。
示例： 組合搜索、按時間篩選、提交保存、清空重置、㩒入去睇彈窗詳情。
數據從邊度嚟？
呢一步係將頁面由「生咩樣」推向「點樣行得通」。真實頁面唔可以得佔位符，字段同來源要先諗清楚。
示例： 數據來自後端 API 接口，或者來自用戶手動填寫計算。
頁面有咩狀態？（好易漏咗！）
好多頁面睇落好似做曬，其實只係做咗正常狀態。真正上線嗰時，最容易出問題嘅就係 loading、empty 同 error。
示例：normal（正常狀態）、loading（加載中）、empty（冇數據空狀態）、error（接口報錯）、warning（風險預警狀態）。
一個只考慮 normal 狀態嘅頁面，根本上唔到線。
響應式要覆蓋邊啲設備？
呢個問題唔係附加項，係上線項。桌面端靚仔，唔代表手機端可以生存。
示例： 桌面端完整展示多列，平板端側邊欄收起，手機端表格轉成疊埋卡片。
02
-MaxKing.cc-
點判斷頁面已經滿足需求？
冇驗收標準，AI 生成到咩程度都只能叫「差唔多」。呢一步係將「靚仔」變成「可交付」。
示例： 用戶 5 秒內可以睇得明賬户係咪爆倉；表格塞入 50 條數據頁面唔會 lag；核心掣喺手機端唔會被軟鍵盤遮住。
冇驗收標準，AI 生成到咩程度都只能叫「差唔多」。
將呢 11 個問題填完，頁面就唔再係「先做個靚嘅後台管理頁面」呢種空話，而係一份可以繼續向前推嘅 AI 頁面需求拆解。
03
-MaxKing.cc-
用「交易 dashboard」實戰打個樣
將呢 11 個問題過一次，原本模糊嘅「做一個靚嘅後台」就會變成一張更接近工程現場嘅清單：
| 頁面名 | |
| 目標用戶 | |
| 核心任務 | |
| 使用場景 | |
| 最重要資訊 | |
| 主要模塊 | |
| 關鍵操作 | |
| 數據來源 | |
| 頁面狀態 | loadingempty、normal、warning（平倉警告） |
| 響應式 | |
| 驗收標準 |
呢 11 個問題答完，頁面就有咗骨架。下一步唔好咁急寫 code，先將呢啲回答整理成 AI 讀得明嘅 UI Spec（結構化設計規範）。
交易 dashboard 裏面，風險比視覺花巧更應該被放大。
04
-MaxKing.cc-
抄功課：點樣將呢 11 個問題掟俾 AI？
你唔需要自己手寫長篇大論嘅文檔。將上面呢啲簡短答案整理好，再配上下面呢段 Prompt 掟俾 ChatGPT / Claude 就得：
呢段 Prompt 唔係叫 AI 幫你寫 code，而係叫佢先幫你查漏補缺，將粗糙諗法轉成更接近工程現場嘅需求拆解。
先將輸入補齊，再叫 AI 開工。
我而家越來越覺得，AI 時代做頁面，唔係先鬥工具，而係先鬥表達能力。你能夠將目標講清楚、將模塊講清楚、將狀態講清楚，AI 先可以順住做落去。
下一步可以咁樣做
先收藏呢份清單，下次做 AI 頁面前直接過一次，唔使次次都從頭諗。
🎁 資料包免費領取： 為咗方便大家隨時用返，我將呢 11 個問題做咗高清嘅《頁面需求拆解模板》卡片，連同上篇嘅完整工作流一齊放咗入我個資料包。關注公眾號，喺後台回覆關鍵字：「UI工作流」，就可以直接打包帶走。
💬 文末互動： 回憶一下你最近一次做頁面，呢 11 個問題裏面，你最易漏咗嘅係邊一項？係頁面狀態唔記得做？真實數據結構冇考慮？定係唔記得理手機端嘅死活？
👉 下篇預告：《唔好再用 gpt-image-2 亂咁畫圖啦：探索視覺圖嘅正確打開方式》 需求理清楚咗，下篇我哋嚟傾下點樣用圖片模型定下準確嘅「視覺基調」，仲要保證佢可以完美轉譯成前端組件！
- END -
關於 MaxKing寶藏
我係 MaxKing，全棧開發者、量化交易實踐者，亦係 AI 重度用戶。呢度分享嘅唔係遙遠概念，而係我喺真實使用、搭建同踩坑之後留下嘅判斷。
如果呢篇文章對你有啟發，歡迎like、在看、分享，仲歡迎加我好友交流 AI 工具同自動化實踐。
MaxKing寶藏
全棧開發者 × 量化交易 × AI 重度用戶。這裏記錄我用 AI 提升效率、解決問題、優化流程 的真實實踐，也分享工具背後的判斷、踩坑和可複用方法。
評審羣裏那句“先做個好看的後台管理頁面”一落下來，我通常不會讓 AI 先開工。做 AI 頁面，真正要先處理的不是出圖，而是把需求講明白。
我見過太多頁面跑偏，不是輸在模型能力，而是輸在開局太空。頁面給誰用、最重要的信息是什麼、用戶要怎麼操作、異常狀態怎麼處理，這些都沒說透，AI 只能靠猜。
AI 很擅長執行，但它不能替你補全業務上下文。
所以這篇不講虛的，只講一件事：做 AI 頁面前，先把“誰用、看什麼、怎麼操作、有哪些狀態”講清楚。這個前置動作做對了，後面不管是出圖、寫 UI Spec，還是落到前端代碼，都會順很多。
我做 AI 頁面時，最怕的不是模型慢，而是需求一句話飄在空中。評審羣裏如果只扔來“做個好看的後台管理頁面”，我會先停一下，把頁面名稱、用戶、核心任務、狀態和驗收標準拉出來。
頁面如果連對象、目標和狀態都沒定，後面的視覺和代碼都會補洞。
這也是我一直把那 11 個問題當成飛行檢查清單的原因。它不是給 AI 填的表格，而是先把人、任務和邊界釘住，再讓模型去發揮。
01
-MaxKing.cc-
我做 AI 頁面前必問的 11 個問題
頁面名稱是什麼？
先給頁面一個準確的名字。名字越具體，AI 越容易對上正確的行業慣例。
示例： 交易儀表盤、訂單管理頁、SaaS 偏好設置頁、外貿客戶詢盤頁、電商登錄頁。
目標用戶是誰？
這一步決定信息密度。給老闆看、給運營看、給新手看，頁面重點完全不一樣。
示例： 給老闆看，就突出核心大盤數據；給運營看，就突出篩選和批量操作效率；給小白用戶看，就突出引導和轉化。
用戶來到頁面要完成的核心任務是什麼？
一個頁面可以有很多功能，但一定要有一個絕對核心任務。沒有主線，頁面就會散。
示例： 快速查看賬户風險、一鍵提交詢盤表單、篩選並導出上個月的財務報表。
頁面在哪個場景下使用？
場景會影響頁面節奏，也會影響視覺重心。是匆匆瞥一眼，還是盤中高頻盯着看，完全不是一回事。
示例： 每天早上看一眼概況、交易盤中實時監控、週末安靜覆盤。
頁面最重要的信息是什麼？
這一問是在排優先級。不是所有信息都該同等重要，AI 需要知道哪裏該放大，哪裏該摺疊。
示例： 交易儀表盤裏最重要的是賬户風險預警和保證金比例；外貿詢盤頁裏最重要的是產品賣點和表單入口。
頁面包含哪些主要模塊？
模塊拆清楚，AI 才知道這不是一張死圖，而是一組可以拼裝的組件。
示例： 交易儀表盤可以拆成賬户概覽區、風險預警卡片、持倉數據表格、交易信號面板。
用戶會做哪些關鍵操作？
頁面是用來交互的，不是掛在那兒看的。操作沒說清，到頭來就會生成一個只能看不能點的海報。
示例： 組合搜索、按時間篩選、提交保存、清空重置、點擊查看彈窗詳情。
數據從哪裏來？
這一步是把頁面從“長什麼樣”往“怎麼跑起來”上推。真實頁面不能只有佔位符，字段和來源要先想清楚。
示例： 數據來自後端 API 接口，或者來自用戶手動填寫計算。
頁面有哪些狀態？（極易漏掉！）
很多頁面看着像做完了，其實只做了正常態。真正上線時，最容易出問題的就是 loading、empty 和 error。
示例：normal（正常態）、loading（加載中）、empty（無數據空狀態）、error（接口報錯）、warning（風險預警態）。
一個只考慮 normal 狀態的頁面，根本沒法上線。
響應式要覆蓋哪些設備？
這個問題不是附加項，是上線項。桌面端好看，不代表手機端能活。
示例： 桌面端完整展示多列，平板端側邊欄收起，手機端表格轉成堆疊卡片。
02
-MaxKing.cc-
怎麼判斷頁面已經滿足需求了？
沒有驗收標準，AI 生成到什麼程度都只能叫“差不多”。這一步是在把“好看”變成“可交付”。
示例： 用戶 5 秒內能看懂賬户是否爆倉；表格塞入 50 條數據頁面不卡頓；核心按鈕在手機端不會被軟鍵盤遮擋。
沒有驗收標準，AI 生成到什麼程度都只能叫“差不多”。
把這 11 個問題填完，頁面就不再是“先做個好看的後台管理頁面”這種空話，而是一份可以繼續往下推進的 AI 頁面需求拆解。
03
-MaxKing.cc-
拿“交易儀表盤”實戰打個樣
把這 11 個問題過一遍，原本模糊的“做一個好看的後台”就會變成一份更接近工程現場的清單：
| 頁面名稱 | |
| 目標用戶 | |
| 核心任務 | |
| 使用場景 | |
| 最重要信息 | |
| 主要模塊 | |
| 關鍵操作 | |
| 數據來源 | |
| 頁面狀態 | loadingempty、normal、warning（平倉警告） |
| 響應式 | |
| 驗收標準 |
這 11 個問題回答完，頁面就有了骨架。下一步先別急着寫代碼，先把這些回答整理成 AI 能讀懂的 UI Spec（結構化設計規範）。
交易儀表盤裏，風險比視覺花活更該被放大。
04
-MaxKing.cc-
抄作業：如何把這 11 個問題丟給 AI？
你不需要自己手寫長篇大論的文檔。把上面這些簡短答案整理好，再配上下面這段 Prompt 丟給 ChatGPT / Claude 就行：
這段 Prompt 不是讓 AI 替你寫代碼，而是讓它先幫你查漏補缺，把粗糙想法轉成更接近工程現場的需求拆解。
先把輸入補齊，再讓 AI 開工。
我現在越來越覺得，AI 時代做頁面，不是先拼工具，而是先拼表達能力。你能把目標說清楚、把模塊說清楚、把狀態說清楚，AI 才能順着往下幹。
下一步可以這樣做
先收藏這份清單，下次做 AI 頁面前直接過一遍，不用每次都從零想。
🎁 資料包免費領取： 為了方便大家隨時調用，我把這 11 個問題做成了高清的《頁面需求拆解模板》卡片，連同上一篇的完整工作流一起放進了我的資料包。關注公眾號，在後台回覆關鍵字：「UI工作流」，即可直接打包帶走。
💬 文末互動： 回憶一下你最近一次做頁面，這 11 個問題裏，你最容易漏掉的是哪一塊？是頁面狀態忘了做？真實數據結構沒考慮？還是忘了管手機端的死活？
👉 下一篇預告：《別再用 gpt-image-2 隨便畫圖了：探索視覺圖的正確打開方式》 需求理清楚了，下一篇我們來聊聊如何用圖片模型定下精準的“視覺基調”，而且保證它能完美轉譯成前端組件！
- END -
關於 MaxKing寶藏
我是 MaxKing，全棧開發者、量化交易實踐者，也是 AI 重度用戶。這裏分享的不是遙遠概念，而是我在真實使用、搭建和踩坑後留下的判斷。
如果這篇文章對你有啓發，歡迎點贊、在看、轉發，也歡迎加我好友交流 AI 工具和自動化實踐。