imagine-it 是做什麼的？
將規格轉換為推測性原型：一組精簡的 .html 檔案，展示該功能在此產品內可能呈現的樣子。這是供人類回饋意見的對話道具，而非正式程式碼——因此速度與合理性比完整性更重要。
輸入（皆為選填，順序不拘）：Issue/PR 網址或 #123、Jira 代碼或網址、檔案路徑、自由文字，以及下列旗標：
--wireframe—— 強制使用灰階線框而非程式庫的視覺風格。--out <dir>—— 輸出根目錄（預設為程式庫根目錄下的.imagine-it/）。輸出目錄固定為<out>/<slug>/。--screens <n>—— 限制或強制指定畫面檔案數量。--screenshot[=png|jpeg]—— 同時截取畫面影像（預設為 PNG）。--states—— 搭配截圖時，捕捉所有狀態，不僅是初始狀態。--viewport <WxH>—— 截圖尺寸（預設為 1440x900；對行動優先的產品為 390x844）。--notes—— 截圖時顯示規格註解疊加層（預設為關閉）。
若未提供任何輸入，則以當前對話作為規格來源。
工作流程
依序執行以下步驟。每個步驟產生的成品會供下一步使用；請保留在你的工作筆記中——只有 HTML 會寫入磁碟。
1. 規格摘要
讀取並提煉規格，產出規格摘要：標題、slug、目標、參與者、進入點、主要流程、包含實際範例值的實體、狀態、編號的驗收條件（AC-1…）、超出範圍事項、假設、開放問題。
你填補的每個空白都成為一個假設；只有人類才能決定的項目則成為開放問題。持續進行——只在沒有任何規格存在（無引數、對話中也無內容）時才詢問使用者。
完成條件：摘要中的每個欄位都已填寫（或明確標示「無」），且每個驗收條件都已編號。 詳細的來源擷取方式與範例請見：references/context-intake.md。
2. 設計簡報
以唯讀方式掃描程式庫，產出設計簡報：模式（高保真或線框）、技術棧、一組可直接貼上的 :root token 區塊（使用標準變數名稱）、深色模式、應用程式外殼、元件備註、1–3 個最接近該功能的參考畫面、圖示風格、UI 語系，以及所有資料的來源檔案。
如果你的環境支援子代理，請將此掃描工作委派給子代理並只取回簡報；若不支援，則在同一讀取預算內內聯執行掃描。當傳入 --wireframe 旗標或程式庫沒有任何可模仿的 UI 時，模式為線框；請在簡報中說明原因。然後將摘要中的「進入點」更新為找到的實際路由與標籤。
完成條件：token 區塊使用了每個標準變數名稱（除非是線框模式：Token = 無），且每個 token 群組都引用了來源檔案。 技術棧偵測矩陣、token 隱藏位置、標準名稱請見：references/design-discovery.md。
3. 畫面規劃
在撰寫任何 HTML 之前先決定檔案清單：一個以流程順序排列的表格，包含 # | 檔案 | 用途 | 狀態 | 涵蓋的 AC。每個不同的檢視畫面或內容較重的疊加層一個檔案；狀態（空白、載入中、錯誤、成功…）作為區段存在於所屬畫面內。數量依需求而定，越少越好——通常為 2–6 個。
完成條件：每個驗收條件都出現在至少一列的「涵蓋的 AC」欄位中。 規則與範例請見：references/screen-planning.md。
4. 產生
寫入 <out>/<slug>/：
index.html 中樞頁：摘要摘要、流程、AC 涵蓋範圍、假設、開放問題、設計來源
styles.css 設計簡報 token + assets/base.css 原文 + 功能元件樣式
ii.js 直接從 assets/ii.js 複製（原型工具列：導航、備註、狀態、主題）
01-<screen>.html 畫面規劃的每一列一個檔案
02-<screen>.html
從 assets/index-template.html 和 assets/screen-template.html 開始；從此技能資料夾複製 assets/base.css 和 assets/ii.js。模仿參考畫面：相同的外殼、導航標籤、元件形狀與文案語氣，使用程式庫的 UI 語言。填入實際的領域資料。為每個滿足驗收條件的元素加上 data-note="AC-n: …"，每個推測性設計選擇加上 data-note="NOTE: …"。
輸出為自包含的純 HTML/CSS，搭配輕量的原生 JS，可直接從磁碟開啟：僅使用相對連結、內聯 SVG 圖示、以系統字型作為程式庫字型的後備方案。 完整的輸出規範與交付前檢查清單請見：references/html-conventions.md。
5. 驗證
執行 references/html-conventions.md 中的交付前檢查清單。完成條件：每個檢查項目都通過；否則修正並重新檢查。
6. 截圖（僅搭配 --screenshot）
若無截圖旗標則完全跳過。否則將規劃的畫面（以及中樞頁，最後處理）渲染為 <out>/<slug>/screenshots/ 內的圖片，並在 index.html 中加入「Screenshots」區段。截圖問題絕不阻礙執行。
完成條件：每張規劃的圖片都存在、非空、具有正確的魔術位元組，且第一張圖片已被檢視；跳過的截圖需回報手動指令。 旗標、淺色/深色模式、命名規則、工具階層與備援方案請見：references/screenshots.md。
7. 交付
回覆內容包含：index.html 的路徑、畫面規劃表格、截圖路徑（以及任何跳過的截圖與其手動指令）、假設與開放問題，並提供開啟該檔案的指令（Windows 使用 start，macOS 使用 open，Linux 使用 xdg-open）。如果 <out> 位於程式庫內且尚未被忽略，建議將其加入 .gitignore。
後續更新：從 <out>/<slug>/index.html（假設、設計來源）和 styles.css 重建上下文；不要重新掃描程式庫；保留 slug；更新 index.html 以保持一致；重新執行步驟 5（如果原本有截圖，則重新擷取受影響的畫面與中樞頁）。