visual-design-foundations

概覽

什麼是 visual-design-foundations？

visual-design-foundations 是一項針對 UI 設計師與開發者的實用技能，幫助打造視覺一致且易於使用的介面。它提供字體比例、色彩理論、間距系統與圖示設計的基礎指引，協助團隊建立設計標記與風格指南，適用於網頁與產品介面。

誰適合使用這項技能？

• 建立或優化設計系統的 UI/UX 設計師
• 實作風格標記的前端開發者
• 希望提升視覺層次與可讀性的團隊
• 需要審核或更新產品視覺一致性的人員

解決的問題

• 建立可擴充的字體與間距系統
• 指導可及性色彩調色盤的建立（含暗色模式）
• 支援圖示系統設計與視覺資產一致性
• 協助審核並改善介面視覺層次

使用方式

安裝步驟

1. 使用以下指令安裝 visual-design-foundations：

   npx skills add https://github.com/wshobson/agents --skill visual-design-foundations
   

2. 首先閱讀 SKILL.md，了解核心原則與推薦工作流程摘要。
3. 探索相關檔案：
   • references/color-systems.md：了解感知均勻色彩比例與語意色彩標記。
   • references/spacing-iconography.md：理解 8 點格線與語意間距標記，確保版面一致性。
   • references/typography-systems.md：建立模組化字體比例並應用 CSS 自訂屬性。

適應您的工作流程

• 將推薦的 CSS 自訂屬性與標記系統整合至您的程式庫或 Figma 資料庫。
• 以模組化比例與間距系統為基礎，依品牌或產品需求調整比例與單位。
• 參考色彩系統指引，產生可及性調色盤與語意標記以支援主題。

什麼時候適合使用 visual-design-foundations？

• 開始建立新的設計系統或 UI 資料庫時
• 審核現有介面以確保一致性時
• 實作暗色模式或主題變體時
• 建立可及且可擴充的視覺資產時

什麼時候不適合使用？

• 專案已有成熟且完善文件的設計系統時
• 針對高度自訂或實驗性視覺風格，且不依賴標準設計標記時

常見問題

我在哪裡可以找到所有相關檔案？

請開啟 Files 標籤，檢視完整檔案樹，包括巢狀參考與輔助腳本。

visual-design-foundations 支援 Figma 工作流程嗎？

支援。原則與標記系統可調整應用於 Figma 資料庫與設計系統檔案。

我可以用 visual-design-foundations 來支援暗色模式嗎？

完全可以。此技能包含可及性調色盤產生與語意標記指引，對主題與暗色模式支援至關重要。

如何自訂字體或間距比例？

請參考 references/typography-systems.md 與 references/spacing-iconography.md，了解模組化比例公式與 CSS 屬性範例。依專案需求調整比例與基準單位。

這項技能適合設計系統團隊使用嗎？

適合。visual-design-foundations 非常適合建立或優化設計標記、風格指南與一致 UI 模式的團隊。