創建專業 UI/UX 設計需要深入的可訪問性、色彩理論、排版和特定技術棧模式知識。此技能提供 50+ 設計風格、配色方案、字體配對和實施指南的可搜索資料庫，幫助您更快地構建精美的介面。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「ui-ux-pro-max」。 搜索'beauty spa wellness elegant'設計系統
預期結果:
設計系統已生成：
- 產品模式：以預約為核心的服務型業務
- UI 風格：帶有有機形狀的柔和極簡主義
- 配色方案：鼠尾草綠主色、米白背景、玫瑰金點綴
- 排版：Playfair Display（標題）+ Lato（正文）
- 效果：微妙陰影、柔和漸變、流暢過渡
正在使用「ui-ux-pro-max」。 獲取動畫可訪問性的 UX 指南
預期結果:
UX 指南已找到：
1. prefers-reduced-motion：檢查媒體查詢並提供靜態回退方案
2. 持續時間限制：微交互使用 150-300ms
3. 變換性能：動畫 transform/opacity，而非 width/height
4. 加載狀態：為異步操作顯示骨架屏或旋轉加載器
安全審計
安全Static analysis flagged 1395 patterns across 28 files, but all findings are false positives. The 'weak cryptographic algorithm' detections are triggered by BM25 scoring math (log functions) in a text search engine, not actual cryptography. 'Hardcoded URL' findings are documentation URLs in CSV data files. 'External commands' are bash examples in documentation showing how to run the Python search tool. The skill performs local file operations on its own data files with no network calls, no dynamic code execution, and no user input processing.
品質評分
你能建構什麼
前端開發者構建新儀表板
開發者需要為 SaaS 產品創建管理儀表板。他們使用此技能獲取'SaaS dashboard'的設計系統建議，檢索適合數據密集型界面的可訪問配色方案，並獲取 React 特定的性能優化指南。
獨立創始人創建落地頁
非設計師背景的創始人需要為其初創公司創建專業的落地頁。他們搜索'beauty spa wellness service'以獲取完整的設計系統，包括風格、顏色、排版和落地頁模式，然後使用 Tailwind CSS 指南進行實施。
設計師確保可訪問性合規
設計師希望確保其 UI 符合 WCAG 指南。他們在 ux 領域查詢'accessibility contrast focus'以獲取關於顏色對比度、焦點狀態和鍵盤導航的具體規則及代碼示例。
試試這些提示
搜索符合'minimalist dark mode dashboard'的設計風格。顯示前 3 個風格建議及其配色方案和主要特徵。
為'fintech crypto trading dashboard'生成完整的設計系統。包括產品模式、UI 風格、配色方案、排版和效果。將項目命名為'CryptoVault'。
審查此按鈕組件的可訪問性問題：[粘貼代碼]。根據 WCAG 指南檢查顏色對比度、焦點狀態和觸控區域大小。提供具體修復方案。
我正在使用 Tailwind CSS 構建響應式導航欄。在 html-tailwind 技術棧中搜索'navbar responsive floating'指南，並提供包含適當 aria 屬性的實施代碼。
最佳實務
- 始終先使用 --design-system 標誌獲取帶推理說明的綜合建議，然後再實施
- 首先檢查可訪問性指南 - 顏色對比度 (4.5:1)、焦點狀態和觸控區域 (最小 44x44px)
- 使用特定技術棧的搜索獲取遵循框架慣例的實施模式
避免
- 使用 emoji 作為 UI 圖標而非正確的 SVG 圖標庫（如 Heroicons 或 Lucide）
- 使用 scale 變換實施 hover 狀態導致佈局偏移
- 在淺色模式中使用透明玻璃卡片 (bg-white/10) 導致其變得不可見