Mosin112/建立原型

步驟 4 · 可點擊原型

原型讓利害關係人在工程開始前感受行為樹。它是合約的展示，而非設計規格：必須展示每一條分支，包括錯誤和邊界情況，而不僅僅是快樂路徑。

首先閱讀：work/<item>/03-trees/ 中已核准的樹、概念、context/product.md 和 context/writing-style.md。使用 ../../examples/price-alerts/04-prototype/index.html（相對於此技能）作為下方結構的參考實作。

需求

1. 單一自包含檔案： work/<item>/04-prototype/index.html。內嵌所有 CSS 和 JS。無需建置步驟，無外部請求（可選網路字體除外），以便從磁碟開啟、附加到工單或作為連結發布。

2. 畫面： 每個不同的狀態是一個帶有 data-screen="<id>" 屬性的元素。一次只有一個畫面可見。導航透過原型自己的按鈕進行，就像真實產品一樣。

3. 場景控制： 一個側邊面板，與產品 UI 清楚分開，包含每個 while 狀態和 if 條件的切換開關（已驗證/未驗證、達到限制、通知關閉、模擬價格變動……）。改變切換開關必須改變產品 UI 的行為，以便每一條分支都可達。

4. 覆蓋率地圖： 一個 <script type="application/json" id="tree-coverage"> 區塊，將每棵樹的每一行 then 和 and 映射到展示它的畫面：

   {
     "trees": {
       "functional/price-alert-creation": [
         { "line": "then the alert is saved as active", "screen": "alerts" },
         { "line": "and the alert's direction is set to above or below the current price", "screen": "alerts" }
       ],
       "functional/price-alert-trigger": [
         { "line": "then no further notification is sent", "screen": null, "reason": "Not visible: absence of a notification" }
       ]
     }
   }
   

   僅當有 reason（後端專屬或「無任何事發生」的結果）時才允許使用 screen: null。

5. 可見的覆蓋率面板： 在側邊面板中將覆蓋率地圖呈現為樹狀行清單；點擊一行會跳轉到其對應的畫面，並設定好正確的場景。這使得原型成為一個審查工具。

6. 逼真的文案： 使用樹中的確切訊息。將範例資料標記為範例資料。

7. 品牌： 遵循 context/product.md 中的任何設計標記；否則使用中性、可存取的樣式。在手機寬度下可正常運作。鍵盤焦點可見。

檢查

執行 python3 .pm-harness/pm_check.py prototype work/<item>/03-trees work/<item>/04-prototype/index.html。 如果任何樹狀行在覆蓋率地圖中缺失，或指向不存在的畫面，則檢查失敗。修正直到通過。

閘門

帶領 PM 走一遍原型中的 Journey 樹，然後是他們選擇的任何分支。收集回饋。如果回饋改變了行為，先更新樹，重新執行樹狀檢查，然後更新原型。當 PM 核准後，在 01-idea.md 中設定 stage: prototype，並提供 /pm-harness:create-eng-tickets。如果 PM 的團隊使用 Figma 進行最終設計，請說明設計師應該將哪些畫面推進下去。