CRUD UI 線框圖與元件規劃(用例 → 螢幕 → 欄位層級行為)
將使用者故事轉換為螢幕地圖、表單規格與元件行為,準備快速開發或交接。
提示詞概覽
精選 AI 合作夥伴
給你的提示
先設計標籤頁順序;及早定義空狀態;標準化表格操作;同時記錄停用與隱藏狀態。
來自營運團隊NexusAi Technology解決的問題
團隊在沒有共識計畫下直接進入 UI 編碼,導致重工。此方案明確定義螢幕、表單與驗證規則。
螢幕地圖
從列表到詳情再到建立的端到端路徑。
元件規格
表格、表單、篩選器與操作規則。
RBAC 註解
依角色定義可見性與停用狀態。
狀態模式
空狀態、錯誤與載入慣例。
AI 提示詞指令
擔任角色:專注於速度、清晰度與資料品質的內部商務應用產品設計師與 UI 架構師。
此任務重要性:清晰的螢幕與表單規則能縮短開發時間並減少驗證錯誤。早期元件選擇提升一致性。
重要限制條件:
- 優先鍵盤驅動的資料輸入與無障礙模式。
- 保持視覺噪音低;強調驗證與狀態。
- 假設有元件庫(例如 React + headless UI),但保持框架無關性。
使用者輸入:
- 主要使用者故事與驗收標準
- 實體與關鍵欄位及限制條件
- 必要角色與權限
目標:
1) 產出螢幕地圖與導覽模型。
2) 指定表單、表格、篩選器與內嵌驗證。
3) 記錄每個螢幕與控制項的權限。
4) 定義空狀態、錯誤狀態與載入狀態。
分析流程:
1) 將故事轉換為螢幕與流程。
2) 對每個螢幕列出元件與欄位規則。
3) 定義表格欄位、排序、篩選與分頁。
4) 指定成功/錯誤提示與復原/回滾模式。
5) 映射基於角色的可見性與停用狀態。
所需輸出格式:
- 螢幕地圖
- 每個螢幕的元件與行為
- 每個欄位的驗證規則
- 角色基礎存取控制(RBAC)備註
- 狀態處理(空、錯誤、載入)
- 交接清單
品質控管:
- 每個操作都有可見狀態變化與確認。
- 所有必填欄位有內嵌驗證與說明文字。
驗證清單:
- 每個故事至少對應一個螢幕
- CRUD 流程有一致的導覽與麵包屑
最終指示:輸出結構化計畫,適合快速線框設計或元件任務。
預期成果
螢幕地圖:儀表板、請求列表、請求詳情、新增請求、管理設定。 元件:請求列表(表格欄位:id、標題、狀態、擁有者、更新時間;篩選器:狀態、擁有者;操作:檢視、編輯)。驗證:標題必填;金額為數字且大於 0。 RBAC:請求者可建立;審核者可更新狀態;管理員可管理角色。 狀態:空狀態顯示行動呼籲;錯誤顯示內嵌訊息;載入顯示骨架畫面。
實施流程
在 ChatGPT 生成 UI 計畫
提供您的主要使用者故事與欄位限制給 ChatGPT。執行提示以獲得標示分區的螢幕地圖、元件清單與驗證規則。
20 min製作低保真線框圖
開啟 Figma,利用元件清單繪製每個螢幕。使用驗證規則標註欄位並直接在畫框上定義錯誤狀態。
30 min將元件拆分成任務
將各區塊匯出至您的議題追蹤系統作為任務:表格、表單、篩選器、RBAC 檢查。附上 Figma 連結並複製每個任務的驗收標準。
15 min
