本頁示範如何用結構化提示詞產出使用者故事地圖（User Story Mapping）的互動原型。從使用者旅程的骨幹（Activity → Step）出發， 將需求拆解為可按 Release 排列的 Story 卡片，建立團隊對產品的全局觀。
站內單檔示範（iframe）
單檔來源：public/showcase/user-story-mapping-prototype.html（檔名與本頁路徑 /showcase/user-story-mapping 區隔）。
流程：需求 → 結構化提示詞 → 產出 → 迭代
- 原始需求（給 AI）：「請規劃使用者故事地圖應具備的功能，並實作 Vibe Coding 範例。」
- 擴寫後：角色、功能表（MVP／進階）、單檔技術限制與驗收（見下方可複製區塊）。
- 產出：將提示詞貼給程式碼生成模型，產生單檔 HTML（Tailwind CDN + Story Map 骨幹 + 拖曳）。
- 迭代：可進一步加入：Story 點擊編輯、估算點數欄位、Release 之間拖曳移動、匯出為 JSON/CSV、多人協作等進階功能。
推薦提示詞（可複製貼給 AI）
角色設定：你是一位熟悉 Scrum 敏捷框架與使用者故事地圖 (User Story Mapping) 的產品規劃專家兼前端工程師。 任務分兩部分，請依序完成： （一）功能規劃（簡表即可） 請列出「使用者故事地圖」MVP 應具備的功能（含：骨幹層 Activity/Step、身體層 Release Slice、Story 卡片、拖曳排列、視覺層次），並另列「可選進階功能」（例如：Story 詳情彈窗、估算點數、標籤篩選、localStorage 持久化）。請用表格呈現，並標註 MVP 與進階。 （二）Vibe Coding 實作 請根據上述 MVP，直接產出單一檔案網頁。 單檔網頁技術限制： - 使用 Tailwind CSS（CDN）排版，所有 HTML/CSS/JS 合併在同一個 .html 檔。 - 骨幹層包含 Activity（藍色）與 Step（綠色）卡片，身體層按 Release 分切。 - Story 卡片可在同一欄位間拖曳排列（HTML5 Drag and Drop）。 - 卡片需可點擊，彈出詳情 Modal 並顯示「User story Vibe-Coded 展示」。 - UI 清楚易讀，支援優先級色彩指示（紅/黃/綠）。 - 不需後端；資料可僅存於記憶體。 驗收：在瀏覽器開啟單檔即可查看完整故事地圖，點擊卡片可彈出詳情，拖曳卡片可排列，無主控台錯誤。
下載與原始檔
可直接開啟單檔原型體驗完整的使用者故事地圖互動功能。