互動式打樣
探索真正的替代方案，讓使用者挑選，然後讓挑選的方案能在瀏覽器中運作 — 而不會在過程中悄悄重新設計。
使用時機
- 「打樣」、「製作原型」、「給我幾個方向」、「讓這個可點擊」。
- 設計評審已產出規格，使用者想感受實際效果。
- 資訊架構仍開放的嶄新畫面。
不應使用時機
- 僅評論而不建立 — 請改用設計評審流程。
- 在應用程式的實際框架中進行生產實作。
- 單純調整間距、顏色或文字。
- 任何需要真實使用者或生產資料的場景。原型只能使用合成資料。
輸入
- 任務與限制（平台、視口、權杖（如可用））。
- 具代表性的合成資料。請在使用者介面中標示為合成資料。切勿貼上生產或個人資料。
- 可選：需遵循的設計評審或規格。
- 可選：使用者已選擇的方向。若有，則跳過發散階段，直接進入步驟 3。
工作流程
1. 發散：兩到三個方向簡報
使用 templates/direction-brief.md 為每個方向撰寫簡報。所有方向共享相同的限制、資料與任務。它們必須在資訊架構或互動模型上有所不同 — 例如列表優先 vs 焦點模式 vs 看板 — 而不只是配色方案不同。
- 若你的執行環境支援真正獨立的 worker（子代理或獨立會話），請獨立產生方向並註明。
- 否則請依序產生並標示：「方向由單一代理依序產生。」
每個方向使用 templates/direction.html 建立為獨立的靜態 HTML 檔案。靜態意味著具代表性的佈局與狀態；尚未需要互動。
2. 比較並讓使用者選擇
使用 templates/comparison.html 建立一個比較頁面，連結每個方向並說明有意義的取捨（每個方向最佳化什麼、犧牲什麼、適合誰）。**停下來請使用者選擇。**在使用者選擇前，不要建立互動版本，除非使用者明確委託你代為選擇。
3. 嚴格嫁接：建立互動原型
遵循 references/graft-rules.md。簡言之：
- 讀取所選方向的 HTML 原始碼。
- 保留其標記結構、CSS 及視覺決策。
- 為可能衝突的新類別或 ID 加入命名空間。
- 使用原生 JavaScript 加入可運作的互動。
- 使用 templates/change-ledger.md 記錄每一項變更。任何非純添加的變更都需要理由。
不得進行未經許可的重新設計。若所選方向有缺陷，請在紀錄中記下並在修改前詢問使用者。
4. 品質檢查
根據 references/prototype-quality.md 檢查原型：離線、視口 meta、回應式、鍵盤、可見焦點、減少動畫、空/載入/錯誤狀態、無停用的主要操作、合成資料已標示。
預設原則
- 每個成品為一個獨立的
.html檔案：內嵌 CSS 與 JS，無 CDN，無網路字型，無外部圖片（使用內嵌 SVG 或 CSS）。 - 使用系統字型堆疊。
- 能透過
file://在無伺服器環境下運作。 - 絕不自動發布、部署或上傳。
輸出
<output-dir>/
├── directions/
│ ├── a-<name>.html
│ ├── b-<name>.html
│ └── c-<name>.html （可選）
├── comparison.html
├── prototype.html
└── change-ledger.md
誠實聲明
原型僅展示互動與佈局。它並非原生可行性、效能、無障礙合規或生產就緒的證據。請在交接時說明這一點。
授權條款
下列聲明隨此獨立技能及其支援檔案一同傳遞。
MIT 授權條款
版權所有（c）2026 jamesonedge
特此無償授予任何取得本軟體及相關文件檔案（「軟體」）副本之人，無限制處理本軟體之權利，包含但不限於使用、複製、修改、合併、發布、分發、再授權及/或銷售軟體副本之權利，並允許被提供軟體之人如此行事，惟應遵守下列條件：
上述版權聲明及本許可聲明應包含於所有軟體之副本或重要部分中。
本軟體依「現狀」提供，不附任何明示或默示之擔保，包括但不限於適售性、特定用途適用性及非侵權之擔保。在任何情況下，作者或版權持有者均不對任何索賠、損害或其他責任負責，無論是基於合約、侵權行為或其他原因，且與軟體之使用或其他處理有關。