工程開發
color-palette
從單一十六進位顏色代碼生成完整且易於存取的色彩系統。包含 11 階色譜 (50-950)、語意標記、深色模式變體及 Tailwind v4 CSS 輸出。
簡介
此技能作為自動化設計系統架構師,允許開發者從單一品牌十六進位色彩值生成完整且符合 WCAG 標準的調色盤。透過應用 HSL 轉換與飽和度加權明度調整,確保您的色彩系統在所有色階中維持一致的視覺識別與易用性。它專為需要快速構建設計權杖(Design Tokens)或在現代 Web 應用中實施強大主題化的前端開發者與 UI 設計師而設計。該工具自動化了確保高對比文字與可讀背景所需的繁瑣運算,將單一品牌色轉化為完整的 Tailwind 配置。
-
自動生成 11 階色譜 (50-950),在保持色相一致性的同時,防止出現過於鮮豔或渾濁的粉彩色。
-
為亮色與深色模式建立全面的語意標記,確保每個背景都有適當的前景配對。
-
輸出可直接植入專案配置檔案的生產級 Tailwind v4 CSS 程式碼片段。
-
包含內建的深色模式反轉模式,在映射明度極值的同時,為邊框、按鈕與文字等 UI 元素保留品牌識別。
-
支援設計系統、Tailwind 主題與品牌識別一致性的工作流程最佳化。
-
使用者應先提供單一品牌十六進位色碼(例如 #0D9488)來觸發生成程序。
-
本工具使用明度/飽和度乘數表來區分不同色階的用途,範圍涵蓋從 50(細緻背景)到 950(最深強調色)。
-
務必根據 WCAG 標準對生成的數值進行對比度驗證,以確保生產環境的存取性。
-
生成的標記包含特定角色,例如卡片背景、輸入框邊框、主要/次要按鈕狀態及靜態文字變體。
-
專為 Claude Code CLI 環境設計,旨在簡化從單一品牌色到完整 CSS 主題的轉換過程。
倉庫統計
- Star 數
- 752
- Fork 數
- 64
- Open Issue 數
- 17
- 主要語言
- Python
- 預設分支
- main
- 同步狀態
- 閒置
- 最近同步時間
- 2026年4月30日 上午10:55