Menu
全方位的設計指南，提供專業的 UI/UX 原則、配色方案與開發工作流。適合需要從零打造高品質介面的場景。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
本專案使用 Astro、Tailwind CSS 和 TypeScript 開發的最佳實踐與指引。
「Teal Comic」風格指南與組件系統，基於 Mandy's Website 主題。包含了詳細的組件分類、配色規範與實作原則。
定義程式碼品質標準、防止幻覺 (Anti-Hallucination) 與官方文件查證流程。確保所有程式碼皆為最新、穩定且符合最佳實踐。
專案部落格文章與 Markdown 文件寫作規範，涵蓋 Frontmatter、格式與 SEO 最佳實踐。
建立獨特、生產級且高品質的前端介面。當需要構建 Web 組件、頁面、Landing Page 或應用程式時使用。
根據 Web 介面指南 (Web Interface Guidelines) 審查 UI 代碼。當需要「審查我的 UI」、「檢查無障礙性」、「稽核設計」或「檢查最佳實踐」時使用。
| name | UI/UX Pro Max (設計智能) |
| description | 全方位的設計指南，提供專業的 UI/UX 原則、配色方案與開發工作流。適合需要從零打造高品質介面的場景。 |
本技能提供建立 Web 與移動端應用介面的綜合指南，包含樣式選擇、UX 最佳實踐與實作檢查清單。
當需要進行 UI/UX 工作（設計、建立、實作、審查、修復、改進）時，請遵循以下步驟：
從請求中提取關鍵資訊：
html-tailwind (本專案適用 Astro + Tailwind)。在編寫程式碼前，先定義設計規範：
根據需要補充特定領域的設計：
| 規則 | Do (建議) | Don't (避免) |
|---|---|---|
| 無 Emoji 圖示 | 使用 SVG 圖示 (如 Iconify, Heroicons) | 使用 🎨 🚀 ⚙️ Emoji 作為 UI icons |
| 穩定的 Hover | 使用顏色/透明度過渡 | 使用會改變佈局大小的縮放 (Scale) |
| 一致的圖示大小 | 使用固定的容器 (如 w-6 h-6) | 混合使用不同尺寸的圖示 |
| 規則 | Do (建議) | Don't (避免) |
|---|---|---|
| Cursor Pointer | 所有可點擊/Hover 的卡片加上 cursor-pointer | 保留預設游標於互動元件上 |
| Hover 回饋 | 提供視覺回饋 (顏色, 陰影, 邊框) | 無任何互動提示 |
| 平滑過渡 | 使用 transition-colors duration-200 | 瞬間變化或過慢 (>500ms) |
| 規則 | Do (建議) | Don't (避免) |
|---|---|---|
| 亮色卡片 | 使用 bg-white/80 或更高不透明度 | 使用 bg-white/10 (太透明) |
| 文字對比 (亮) | 使用 #0F172A (slate-900) 於主要文字 | 使用 #94A3B8 (slate-400) 於內文 (太淡) |
| 邊框可見度 | 亮色模式使用 border-gray-200 | 使用 border-white/10 (看不見) |
| 規則 | Do (建議) | Don't (避免) |
|---|---|---|
| 懸浮導航列 | 加入 top-4 left-4 right-4 間距 | 直接貼齊 top-0 left-0 right-0 |
| 內容內距 | 考量固定導航列的高度 | 讓內容被固定元素遮擋 |
| 一致的最大寬度 | 統一使用 max-w-6xl 或 max-w-7xl | 混合使用不同的容器寬度 |