s0xDk/refactoring-ui-skill

解決的問題

它解決了 AI 生成的使用者介面看起來「業餘」或「不對勁」的問題，透過為 Claude Code 提供一套具體的機械化設計規則。AI 不再需要猜測或使用臨時的數值，而是可以套用基於《Refactoring UI》一書的專業設計系統。

運作方式

這是一個適用於 Claude Code 的「技能」，由一組 Markdown 檔案和 CSS tokens 組成。它為 AI 提供了間距、排版、顏色和陰影的特定比例，以及一個診斷表，將模糊的 UI 問題轉化為機械化的修復。啟用後，Claude 會使用這些固定的比例和技術，透過粗細和顏色來建立視覺層級和深度，而不僅僅是字體大小。

適用對象

使用 Claude Code 的開發者，希望在不身為專業設計師的情況下提升其網頁介面的視覺品質。

重點功能

• 固定的設計比例：使用受限的間距、字體、顏色和陰影比例以確保一致性。
• 診斷工具：將「看起來很廉價」等模糊的回饋轉化為具體、可執行的設計修復。
• 詳細參考資料：包含使用 HSL 和色相旋轉從頭建立調色盤的系統。
• 對比度驗證的 Tokens：提供一組已驗證對比度的入門 CSS tokens。