메뉴
全方位的設計指南，提供專業的 UI/UX 原則、配色方案與開發工作流。適合需要從零打造高品質介面的場景。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
本專案使用 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 | 混合使用不同的容器寬度 |