visual-design-foundations

此技能為構建連貫、易於訪問且響應式的用戶界面提供了一個系統化框架。它專為需要建立設計標記（Design Tokens）、構建樣式指南或執行視覺審核的設計師與前端工程師而設計。透過運用 8 點網格系統和模組化排版比例等行業標準，該技能確保視覺輸出在各個平台間保持一致，從而減少設計負債並改善開發者與設計師之間的交接流程。它涵蓋了從定義視覺原語、管理語意色彩標記到實現現代網頁應用響應式字體策略的全流程。

• 排版比例：實施模組化縮放系統以確保字體大小一致，包括行高比例，並使用 CSS clamp() 實現響應式排版。

• 間距與節奏：部署行業標準的 8 點網格系統，以確保組件間的間隙、內邊距和垂直節奏在所有組件中保持一致。

• 語意色彩系統：定義並維護符合無障礙標準的色彩調色盤，包括主要、成功、警告、錯誤與中性標記，並內建深色模式支持與 WCAG 對比度驗證。

• 圖標與資產：應用標準化的圖標尺寸系統與視覺資產實現指南，以保持各種 UI 密度下的視覺清晰度。

• 無障礙合規性：利用程式化的對比度計算函數，確保所有文本與 UI 元素符合 WCAG AA 與 AAA 標準。

• 在專案初始階段使用此技能定義設計標記與 CSS 變數。

• 參考提供的字體搭配最佳實踐（如 Inter, Playfair Display）以確保專業的視覺層級。

• 利用提供的 Tailwind 配置模式，將設計標記直接整合至建置系統中。

• 確保所有色彩標記都針對背景亮度進行測試，以避免佈局與無障礙性問題。

• 使用流式排版（Fluid Typography）模式來防止佈局偏移，並維持在手機、平板與桌機視窗下的易讀性。

• 本技能假設使用者具備 CSS 變數、Tailwind 配置與標準網頁無障礙需求的基本知識。