visual-design-foundations

此技能為軟體代理程式提供了建立與維護專業級設計系統的基礎架構。它使代理程式能夠擔任設計系統工程師的角色，確保介面在複雜的應用程式中保持無障礙、可擴展且視覺一致。透過利用產業標準實踐（如 8 點網格系統、WCAG 對比度規範及模組化字體縮放），代理程式可以程式化地建構樣式指南、Tailwind CSS 設定檔及組件級間距規則。這對於需要橋接設計意圖與程式碼實作的開發者、前端工程師及 UI 設計師至關重要。

• 實作設計代幣，包含品牌、成功、錯誤與中性狀態的語義色彩變數。

• 設定模組化排版系統（例如基於比例的字體大小）與響應式行高規範。

• 應用 8 點網格系統，確保邊距、填充與佈局空白的一致性。

• 利用符合 WCAG 標準的色彩對比度計算自動執行無障礙審計。

• 使用 CSS clamp 函數與容器感知大小技術定義響應式佈局。

• 定義圖示大小系統並標準化組件級間距常規。

• 透過 CSS 變數作用域支援深色模式與多主題實作。

• 在啟動新專案時使用此技能，透過 Tailwind 設定檔或標準 CSS 自定義屬性建立穩健的 CSS 架構。

• 當審計現有程式碼庫以識別並解決視覺層級不一致的問題時使用。

• 非常適合將 Figma 等設計工具的雛型轉化為可維護的程式碼庫常數。

• 實作時，請確保代理程式已接收設計系統需求或特定的品牌指南作為背景資訊。

• 輸入需求通常包含品牌調色盤或特定字體選擇；輸出通常包含 CSS/Tailwind 設定檔、代幣清單或組件特定樣式準則。

• 限制條件包含維持語義化無障礙標準，並確保在不同螢幕斷點下的流暢響應能力。