# 敏捷看板 — Vibe Coding 提示詞與紀錄

> 本站展示頁：`/showcase/kanban-prototype`  
> 站內單檔示範：`/showcase/kanban-prototype-standalone.html`

## 原始一句話需求（可再請 AI 擴寫成結構化提示詞）

> 「請規劃敏捷看板應具備的功能，並實作 Vibe Coding 範例。」

（注意用字為**看板**，非「看版」。）

## 推薦的提示詞（Prompt）

可複製以下文字給 AI：

```
角色設定：你是一位熟悉 Scrum／Kanban 與前端互動原型的全端工程師。

任務分兩部分，請依序完成：

（一）功能規劃（簡表即可）
請列出「敏捷看板」MVP 應具備的功能（含：欄位定義、卡片資料欄位、拖曳規則、新增／編輯／刪除卡片、基本視覺層次），並另列「可選進階功能」（例如：WIP 上限警示、欄位自訂、localStorage 持久化、篩選標籤）。請用表格呈現，並標註 MVP 與進階。

（二）Vibe Coding 實作
請根據上述 MVP，撰寫一份「給程式碼生成模型用的完整提示詞」，或直接產出單一檔案網頁（二選一由你擇一執行；若空間允許請直接產出單檔）。

單檔網頁技術限制：
- 使用 Tailwind CSS（CDN）排版，所有 HTML/CSS/JS 合併在同一個 .html 檔或可貼上的單一區塊。
- 至少三欄：待辦、進行中、完成；卡片可在欄位間拖曳（HTML5 Drag and Drop 或等效實作）。
- 每張卡片至少：標題、簡短說明（可選）、可刪除；支援新增卡片（表單或按鈕）。
- UI 清楚易讀（標題、欄位對比、空狀態提示）；行動版欄位可改為橫向捲動或堆疊，但桌面版維持三欄。
- 不需後端；資料可僅存於記憶體，若實作 localStorage 請在功能表中註明。

驗收：在瀏覽器開啟單檔即可新增卡片、拖曳跨欄、刪除卡片，無主控台錯誤。
```

## 精簡版（若只要程式、不要功能表）

將「（一）功能規劃」改為：「請用 5 條以內條列說明 MVP 範圍」，其餘保留「（二）」與技術限制。

## 站內參考實作

- 單檔原型：`public/showcase/kanban-prototype-standalone.html`（含 localStorage 持久化，供對照迭代）
- React 說明頁：`/showcase/kanban-prototype`

## 迭代修正建議（可依體驗自行補充）

- 觸控裝置：純 HTML5 DnD 在行動瀏覽器上可能不佳，可改為「點選卡片後點欄位移動」或導入輕量拖曳庫。
- 卡片內容：可加上編輯中狀態、截止日期、標籤色塊等，並在功能表標註為進階項。