القائمة
引導 Claude 產出高品質的前端設計，避免 AI 生成的通用風格（AI slop）。包含字型、色彩、動態、背景的設計指引。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | frontend-design |
| description | 引導 Claude 產出高品質的前端設計，避免 AI 生成的通用風格（AI slop）。包含字型、色彩、動態、背景的設計指引。 |
來源：Improving Frontend Design Through Skills 📦 離線歸檔：
archive/articles/improving-frontend-design-through-skills.md
避免：Inter、Roboto、system-ui 等過度使用的預設字體 推薦搭配：
避免：漸層按鈕、藍紫配色、過度飽和 推薦：
避免：彈跳動畫、過度的 hover 效果 推薦：
transition 而非 JS 動畫避免：純白背景、stock photo 背景 推薦：
分析 claude.com/blog 的新文章，提取可操作洞察並更新 workspace 設定。手動調用。
分析當前專案的 Claude Code session 資料，產出 context 效率報告（模型用量、工具效率、委派比例、TodoWrite 使用率）。搭配 context-management.md 使用。
冷啟新 session：掃描 codebase 結構並讀取 README，快速建立專案 context。適合在陌生 repo 或新 session 開始時使用。
追蹤並計算當前 session 的 Token 使用量和花費（USD）。產出前後對比報告，幫助使用者了解 workspace 優化的實際效益。
研究外部 Claude Code best practice 來源（GitHub repos、官方 docs、blog），對比現有 workspace 做 gap analysis，產出可操作建議清單。
大型功能開發前，讓 Claude 用 AskUserQuestionTool 深度訪問你（技術、UI/UX、風險、取捨），產出完整 spec，再開新 session 執行。適合在複雜功能實作前、需求模糊時、或開始新專案架構設計時使用。