設計師和開發者在跨專案維護一致且具無障礙性的設計系統時面臨困難。此技能提供全面的設計指南、色彩調色板、字體排印建議，以及涵蓋 9 個主要技術棧的元件模式。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「ui-ux-pro-max」。 為醫療保健應用程式推薦色彩調色板
預期結果:
醫療保健應用程式色彩調色板：主色（#0891B2 - 沉靜青色）建立信任和平靜感。次要色（#22D3EE - 亮青色）提供視覺層次。CTA（#059669 - 成功綠色）用於主要動作。背景（#ECFEFF - 柔和白色）減少眼睛疲勞。文字（#164E63 - 深青色）確保可讀性。邊框（#A5F3FC - 淺色邊框）用於微妙分隔。此調色板優先考慮平靜和信任，這在用戶可能感到焦慮的醫療保健應用中至關重要。
正在使用「ui-ux-pro-max」。 行動按鈕的觸控目標要求是什麼？
預期結果:
觸控目標指南：最小 44x44 像素（iOS HIG 和 WCAG 要求）。建議經常使用的動作使用 48x48 像素。測量時應包含內距，不僅是可見按鈕。觸控目標之間的間距：最小 8px 以防止意外點擊。對於關鍵動作（刪除、購買），請考慮最小 56x56px。
安全審計
低風險Static analysis flagged 1176 patterns but nearly all are false positives. 'Weak cryptographic algorithm' detections are hex color codes (#2563EB) in design data files. 'Hardcoded URLs' are documentation links in guidelines. 'System reconnaissance' and 'C2 keywords' are design terminology matches. Python scripts read CSV files to generate design recommendations - no network calls or code execution. One legitimate concern: scripts/design_system.py uses subprocess calls (Ruby/shell execution patterns) for design tooling integration, which is appropriate for this use case but documented as a minor risk.
中風險問題 (1)
低風險問題 (3)
品質評分
你能建構什麼
新創公司建立 MVP 設計系統
獨立創辦人使用此技能為其 SaaS 產品建立一致的 UI 模式，為其 React 基礎的應用程式選擇適當的色彩調色板、元件樣式和無障礙指南。
設計團隊標準化元件
設計團隊負責人利用綜合指南建立統一的設計系統文件，確保所有團隊成員在多個產品線中遵循一致的模式。
開發者實作無障礙需求
前端開發者參考無障礙指南，確保其 Vue 應用程式符合 WCAG 2.1 要求，包括適當的色彩對比、焦點管理和鍵盤導航模式。
試試這些提示
我正在建立一個 [產品類型，例如：SaaS 儀表板]。請推薦包含主色、次要色、CTA、背景、文字和邊框色彩的調色板。請包含十六進位代碼並解釋色彩心理學。
請展示在 [框架，例如：React] 中實作 [元件，例如：資料表格] 的最佳實踐。請包含無障礙需求、常見模式和程式碼範例。
請檢視我的 [頁面/元件類型] 是否存在無障礙問題。我有 [描述你的 UI]。我應該檢查哪些 WCAG 指南？請提供優先順序清單。
為針對 [目標受眾] 的 [產品類型] 生成全面的設計系統。請包含：色彩調色板、字體大小比例、元件樣式、間距系統，以及針對我領域的 UX 指南。
最佳實務
- 在最終確定設計前，始終驗證色彩對比度比例是否符合 WCAG AA 最低標準（一般文字 4.5:1，大文字 3:1）
- 在所有頁面中保持一致性 - 在整個應用程式中使用相同的樣式、色彩調色板和元件模式
- 採用行動優先設計：從觸控友善的佈局（44px+ 目標）開始，然後為較大螢幕進行擴展
- 使用語義化色彩名稱（primary、secondary、error）而非硬編碼值，以啟用主題和深色模式支援
- 使用減少動畫偏好（prefers-reduced-motion）測試設計，確保對患有前庭障礙的使用者具有無障礙性
避免
- 在生產環境介面中使用表情符號作為圖示 - 它們在各平台上的渲染不一致且缺乏專業外觀
- 實作僅限懸停的互動而沒有點擊替代方案 - 排除觸控裝置使用者和無障礙情境
- 跳過載入狀態和骨架螢幕 - 在異步操作期間造成感知效能問題和使用者不確定性
- 內聯硬編碼色彩而非使用設計令牌或 CSS 變數 - 無法支援主題化並造成維護負擔
- 將動畫用於裝飾目的而不尊重 prefers-reduced-motion - 可能導致某些使用者感到不適或噁心