技能:重新設計與稽核
以稽核為先的重新設計,保存行為。
步驟
- 閱讀
workflows/redesign-audit.md(完整的掃描 → 診斷 → 方向 → 套用 → 驗證序列 + 輸出完整性)。 - 掃描程式碼庫:框架、樣式方法(→ 導向對應的
frameworks/適配器)、Token 現狀、元件、必須保留的內容。 - 診斷:使用禁止預設清單(
taste/design-taste.md)+ 審查評分表(design-review技能)。產出優先級排序的問題表。 - 方向:選擇符合品牌調性的原型/系統(
apply-aesthetic技能)。 - 套用:依序進行——先 Token,再字體/間距,接著元件狀態,最後動畫——不改變路由、資料或標記語意(可及性修復除外)。
- 驗證:重新執行
design-review+a11y-audit;對每個先前運作正常的流程進行煙霧測試;檢查深色模式與響應式設計。對 Token 來源執行scripts/validate_contrast.py,對變更過的程式碼執行scripts/lint_hardcodes.py。
護欄
絕不為美觀犧牲運作功能。絕不導入對比度失敗的品牌色。絕不移除現有的可及性輔助功能。交付完整的檔案,不含佔位符。
單一主題一致性(對多頁應用程式至關重要)
整合為一個共享的 Token 主題,並讓每個頁面都使用它——一個讓不同頁面殘留不同色板的重新設計就是失敗。將逐頁/臨時顏色替換為語意 Token;使用 scripts/lint_hardcodes.py 驗證沒有任何頁面重新引入偏離主題的數值。主題切換必須來自單一的 Token 來源,而非頁面編輯(.claude/rules/tokens-and-color.md → 單一主題一致性)。