完整工作流程

原型設計 → 需求分析 → 技術規劃 → 開發實作 → 測試驗證
   ↓          ↓          ↓          ↓          ↓
 BDD文件    設計系統    TODO清單    代碼實作    自動測試

提示詞模板集

提示詞一：產生 BDD 文件

請根據以下使用者介面原型，撰寫完整的 BDD 文件。

格式要求：使用 Gherkin 語法、中文描述；每張原型對應一個 Feature；每個 Feature 包含 3-5 個 Scenario（含正常流程、邊界情況、錯誤處理）。

每個 Scenario 必須包含：Given（前置條件）、When（用戶動作）、Then（系統回應）、And（額外驗證）。

額外要求：標註優先級（@high / @medium / @low）與測試類型（@smoke / @regression / @integration），並包含可測量的驗證標準。

提示詞二：產生設計系統規範

根據 UI 原型，產出完整的設計系統規範（Markdown + 表格）：

1. 設計令牌：色彩系統、字體系統、間距系統（4px/8px 基準網格）、陰影與圓角。
2. 原子層級 Atoms：元件名稱、屬性、狀態變化、使用情境。
3. 分子層級 Molecules：組成原子、互動邏輯、Props 介面。
4. 有機體層級 Organisms：組成分子、資料結構、業務邏輯。
5. 互動規範：微交互（動畫時長、緩動）、回饋機制（Loading / Success / Error）、響應式行為。
6. 無障礙設計：ARIA 標籤、鍵盤導航、色彩對比。

提示詞三：產生開發 TODO 清單

根據 UI 原型與 BDD 需求，產出結構化的開發任務清單，分階段（基礎架構 → UI 元件 → 功能整合 → 測試優化）。

每個任務包含：功能描述與驗收標準、技術實作要點、API 介面設計、風險點、測試策略、時間估算（樂觀／悲觀／最可能），並分類為 MVP 必要、體驗優化、未來擴展。

進階工作流程

階段一：需求收集與分析

• 原型審查會議：產品、設計、開發三方對齊，確認技術可行性，識別風險點。
• 技術調研：選擇技術棧、評估第三方依賴、制定編碼規範。

階段二：設計轉開發

• 設計系統建立：建立 Storybook 元件庫、定義 CSS 變數、設計代碼生成器。
• 開發環境準備：腳手架搭建、開發工具配置、CI/CD 流程設定。

階段三：敏捷開發執行

• Sprint 規劃：基於 TODO 清單切分任務，設定 DoD（Definition of Done）。
• 代碼品質保證：ESLint + Prettier、Git hooks、Code review 流程。

品質檢核清單

開發前：BDD 場景覆蓋率 ≥ 80%、設計系統完整性、API 介面確認、效能預算設定。

開發中：代碼覆蓋率 ≥ 85%、元件 Props 型別安全、響應式驗證、無障礙標準。

上線前：跨瀏覽器相容性、效能指標達標、安全性掃描、用戶驗收測試。

成功指標

• 開發效率：從原型到可用代碼 < 2 週
• 代碼品質：測試覆蓋率 > 85%
• 用戶體驗：Core Web Vitals 達到 Good 等級
• 團隊協作：需求變更響應時間 < 1 天

這套流程能幫助你建立更系統化、可擴展的前端開發工作流程。