本頁示範如何將「一句話需求」擴寫為功能規劃 + 單檔實作的結構化提示詞，對齊首頁 Showcase「待辦、進行中、完成」三欄可拖曳看板。下方 iframe 為站內參考實作（含 localStorage），可用於對照迭代。
站內單檔示範（iframe）
單檔來源：public/showcase/kanban-prototype-standalone.html（檔名與本頁路徑 /showcase/kanban-prototype 區隔）。備用嵌入：/embed/kanban-prototype。
流程：需求 → 結構化提示詞 → 產出 → 迭代
- 原始需求（給 AI）：「請規劃敏捷看板應具備的功能，並實作 Vibe Coding 範例。」（用字為看板）
- 擴寫後：角色、功能表（MVP／進階）、單檔技術限制與驗收（見下方可複製區塊）。
- 產出：將提示詞貼給程式碼生成模型，產生單檔 HTML（Tailwind CDN + 拖曳）。
- 迭代：觸控裝置：純 HTML5 DnD 在行動瀏覽器上可能不佳，可改為「點選卡片後點欄位移動」或輕量拖曳庫。卡片可再加編輯、截止日、標籤色塊等進階項。
推薦提示詞（可複製貼給 AI）
角色設定：你是一位熟悉 Scrum／Kanban 與前端互動原型的全端工程師。 任務分兩部分，請依序完成： （一）功能規劃（簡表即可） 請列出「敏捷看板」MVP 應具備的功能（含：欄位定義、卡片資料欄位、拖曳規則、新增／編輯／刪除卡片、基本視覺層次），並另列「可選進階功能」（例如：WIP 上限警示、欄位自訂、localStorage 持久化、篩選標籤）。請用表格呈現，並標註 MVP 與進階。 （二）Vibe Coding 實作 請根據上述 MVP，撰寫一份「給程式碼生成模型用的完整提示詞」，或直接產出單一檔案網頁（二選一由你擇一執行；若空間允許請直接產出單檔）。 單檔網頁技術限制： - 使用 Tailwind CSS（CDN）排版，所有 HTML/CSS/JS 合併在同一個 .html 檔或可貼上的單一區塊。 - 至少三欄：待辦、進行中、完成；卡片可在欄位間拖曳（HTML5 Drag and Drop 或等效實作）。 - 每張卡片至少：標題、簡短說明（可選）、可刪除；支援新增卡片（表單或按鈕）。 - UI 清楚易讀（標題、欄位對比、空狀態提示）；行動版欄位可改為橫向捲動或堆疊，但桌面版維持三欄。 - 不需後端；資料可僅存於記憶體，若實作 localStorage 請在功能表中註明。 驗收：在瀏覽器開啟單檔即可新增卡片、拖曳跨欄、刪除卡片，無主控台錯誤。
下載與原始檔
Markdown 內含精簡版提示詞與迭代建議，可與首頁「提示詞與範本下載」列表一併使用。