pen-designlisted

# Pencil 設計稿切版與核對 ## 0. 前置硬閘門：頁面是否已切版完成（先判這個，再談模式） 進「TL;DR 模式判斷」**之前**，先確認目標頁是不是「已切版完成、版面已凍結」。**切版與串接是兩個階段，混做會反覆改壞已驗收的版面**——一旦切版完成，現有程式碼頁（`.vue`/`.tsx`/`.html`）即視覺權威，後續串接/行為/重構/修 bug 一律凍結版面、不再回頭重開設計稿。 **怎麼判（任一訊號成立 → 視為已切版完成）**： 1. 專案 `CLAUDE.md` / `DESIGN.md` / `STYLE_GUIDE.md` / `PEN_DESIGN.md` 等出現「視覺凍結」「以程式碼頁為視覺權威」「切版已完成」「封存」等字樣 → **先讀它**。 2. 目標前端檔已存在且是完整頁面（非空殼／非 mock scaffold 待生成）。 3. 對應 story / 規格寫著「不重切視覺」「版面零改」「視覺鎖定」。 **判定後的行為**： | 情境 | 動作 | |---|---| | 已切版完成（上述任一成立）| **預設不進核對模式、不開 Pencil MCP**。改以**現有程式碼頁為視覺權威**處理串接/行為；視覺有疑慮就請使用者明確指認「哪個可見元素要改」。設計稿只當行為/欄位/權限態對照。 | | 使用者明確說「這頁要重切／改版／版面不對要重來」| 才進核對或切版模式動視覺。 | | 該頁尚未切版（檔不存在或仍是空殼/mock）| 正常進切版模式。 | | 不確定是否已切版 | **先問使用者一句**，別假設、別逕自開設計稿核對。 | > 同元素的**屬性狀態變化**（如唯讀時 `disabled`）屬串接範圍、不需動本 skill。只有**增刪／替換可見元素、改版面**才屬視覺變更、才需要走下面流程。 通過此閘門（確認要動視覺）才往下走 ↓ ## TL;DR — 快速決策流程 ``` 收到需求 │ ▼ 0. 判斷模式 ├── 使用者說「切版」或目標 Vue 檔案不存在 → 【切版模式】 └── 有現成 Vue 檔案 + 說「核對/比對/check」 → 【核對模式】 │ ▼ 1. 前置盤點（必做，見下方「步驟 0」） ├── 盤點既有 components + prop 白名單 └── 讀 1-2 個相近頁面了解慣例 │ ▼ 2. get_editor_state + batch_get 根節點（readDepth:4, resolveVariables:true） │ ▼ 3. 根節點展開後，直接子區塊 ≥ 3 個？ ├── 是 → 拆成 3-6 個語意區塊，並行派發 subagent（Explore） └── 否 → 主流程單人處理 │ ▼ 4a.【切版】Subagent 各自讀設計 → 輸出結構 spec + Tailwind snippet（不寫檔） 主流程收到 spec → 組裝前端頁面 → Chrome MCP 視覺驗證 │ 4b.【核對】Subagent 各自比對 → 輸出差異報告（不修檔） 主流程彙整去重 → 驗證可疑項 → 修程式碼 → Chrome MCP 視覺驗證 ``` **預設行為是「拆」**。即使區塊看起來不大，拆分成本極低（並行），但涵蓋率顯著提升，漏掉細節的風險大幅降低。 ## 動手前快速檢核（30 秒版） 在派發第一個 subagent