[AI 分享] Claude Code 前端技能組合

 [AI 分享] Claude Code 前端技能組合

摘要 : 用 Claude Code 做前端時，先補齊設計、系統、元件與檢查五項技能，成品更完整也更不易有 AI 味。

內容:

如果你用 Claude Code 做前端，不要只讓它直接硬寫頁面。先補上幾個關鍵前端 skill，能讓整體成果更成熟、可用，也更有設計感。

第一個是 Frontend Design，主要負責視覺方向。它會先幫你定好版式、字型、配色和動效，讓做出來的頁面不再像制式模板。

第二個是 Design Taste Frontend，重點在提升設計品味。若你要做官網、落地頁或作品集，又不想成品一看就很有 AI 痕跡，這個 skill 能先把整體風格拉開。

第三個是 Tailwind Design System，適合 Tailwind 專案使用。它能把顏色、間距、元件變體與 Dark Mode 整合進同一套設計系統，讓後續開發更一致。

第四個是 ShadGUI，適合 React 加 Tailwind 的後台或 SaaS 工具站。它能讓 Claude 依照 ShadCN 的方式搭建元件，後續維護與調整也更方便。

第五個是 Frontend Design Review，頁面完成後不要急著上線，先用它檢查響應式、可訪問性、設計 Token 與元件一致性。整體順序就是先定設計、再搭系統、再做元件、最後質檢。