design-pass 是做什麼的？
目標：$ARGUMENTS
工具包：${CLAUDE_SKILL_DIR}/../ui-audit/scripts/ · 檢查清單：${CLAUDE_SKILL_DIR}/reference/review-checklist.md
1. 基線（在修改程式碼之前）
確保開發伺服器正在執行（必要時在背景啟動；絕不要執行 production 建置），然後：
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/before
2. 修補前的審核
- 找出目標所渲染的每個元件，以及渲染相同模式的所有其他位置（透過 grep class 字串與元件名稱）。
- 在撰寫新元件之前，優先重用現有原始元件（按鈕、卡片、模態框、章節標題）。如果相同標記出現 2 次以上，則提取出來，然後一次性重新設定樣式。
- 僅建構被要求的內容。除非被要求，否則不要新增區段、徽章、切換開關或動畫。
- 僅使用專案的 token。如果某個值不在比例範圍內，則使用最接近的步驟，或者提議一個 token（請參閱
design-ref）。
3. 套用
按照檢查清單逐步進行：階層、每個視圖一個主要操作、間距比例、字型比例、空/載入/錯誤狀態，以及行動裝置上的輸入欄位 ≥ 16 px。
4. 驗證
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/after
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/diff.mjs /tmp/design-pass/before /tmp/design-pass/after
- 閱讀每個寬度在淺色與深色模式下的「before」結果檔案。檢視差異 PNG 是否有目標區域以外的非預期變更。
- 灰階檢查：使用
--inject "document.documentElement.style.filter='grayscale(1)'"重新執行一個寬度。 - 然後執行完整的
ui-audit寬度設定一次，再加上 typecheck + lint（不進行建置）。 - 如果專案有與程式碼同步的 Figma 檔案，請在同一個任務中更新對應的畫框。
退出條件
- 無水平捲軸，與之前相比無新的對比度或 axe 問題。
- 差異僅顯示在預期的變更區域。
- 無新增的元件與現有元件重複，且無未請求的 UI。
- 已檢查深色模式，或確認專案沒有深色模式。
- Typecheck 與 lint 通過。
- 向使用者提供簡短摘要，以及 1–2 個值得查看的結果檔案路徑。