Communitygithub.com

michelleecalderon/interface-polish

改進或審查現有介面的視覺與互動細節。適用於字體排版、元件表面、圖示、狀態、動畫與響應式行為的介面打磨;不適用於完整的視覺重新設計。

interface-polish 是什麼?

此技能專為需要讓現有介面感覺更完整、或實現注重微小視覺細節的元件時所設計。它協助開發者在不改變產品視覺識別、資訊架構或互動模型的前提下,提升清晰度、一致性與使用者回饋。技能支援「實作」與「審查」兩種模式:實作模式僅解決觀察到的問題或完成明確要求的處理;審查模式則保持唯讀,依據渲染介面或原始碼證據回報發現。此技能適用於任何使用 CSS、Tailwind、React Motion、GSAP 或 Three.js 的專案,並內建對 WCAG 無障礙標準的支援,包含檢查對比度的腳本。它強調遵循專案現有視覺語言,從共享來源修復問題而非四處打補丁,避免純裝飾性變更,並確保動畫尊重使用者的「減少動畫」偏好設定。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/michelleecalderon/interface-polish/tree/HEAD

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

介面打磨

當使用者希望現有介面感覺更完整,或在實現一個注重微小視覺細節的元件時,請使用此技能。在不改變產品視覺識別、資訊架構或互動模型的前提下,提升清晰度、一致性與使用者回饋,除非另有要求。

建立區域視覺語言

在編輯之前,先識別框架、樣式方法、元件庫、設計代碼以及附近元件的慣例。遵循現有系統,並重複使用共享的元件與數值。寧可從共享來源修復一個問題,也不要在多處打補丁。請勿為了打磨細節而新增依賴項或樣式系統。

視覺一致性是證據,但個人品味並非缺陷。當專案中有明確的設計慣例(如平面表面或節制的動畫)且被一致應用時,請予以保留。

選擇正確的模式

實作。 僅進行能解決觀察到的問題或完成明確要求的處理的變更。保持行為的可訪問性,並使實作方式符合專案習慣。

審查。 除非也要求實作,否則保持唯讀。說明檢查範圍,評估相關狀態,並僅報告由渲染介面或原始碼證據支持的發現。請勿將未觀察到的視覺行為當作事實陳述。

對於任一種模式,請閱讀 references/polish-checklist.md 以了解決策指南、狀態覆蓋範圍和報告格式。對於實作,僅針對專案實際使用的技術堆疊(CSS、Tailwind、React Motion、GSAP 或 Three.js)閱讀 references/implementation-recipes.md。處理顏色、焦點、動畫、控制或目標大小的問題時,請閱讀 references/wcag-accessibility.md;當前景色與背景色可解析為十六進制值時,請執行 scripts/check_contrast.py。

應用高價值的改進

  • 文字: 根據內容長度和視口選擇文字換行方式;當動態數值的寬度變化干擾附近內容時,將其穩定下來。
  • 表面: 將巢狀圓角、深度、圖片邊緣和圖示位置視為視覺關係。當它們在渲染上下文中看起來不對勁時,予以修正。
  • 回饋: 讓靜止、懸停、焦點、按下、選中、載入和禁用狀態易於區分。不要讓動畫成為事物改變的唯一跡象。
  • 動畫: 對使用者驅動的狀態變更使用可逆轉場。將分階段動畫保留給不常見的時刻,用於說明層級或方向。尊重 prefers-reduced-motion。
  • 輸入情境: 不要讓觸控裝置繼承粘性懸停處理。在打磨控制項時,保持可見的焦點行為、鍵盤操作和實用的目標尺寸。

避免對使用者沒有實際益處的純裝飾性變更。不要使用廣泛的轉場、永久性的效能提示,或讓例行操作變慢或更難理解的動畫。

相關技能