1/ 如何利用 Claude Code + Skills 提升您的網站設計 我用 vibe-coded 設計了這個網站。它是功能性的，但缺乏活力 然後我發現了 Claude Skills，讓它變得生動 這是我的具體工作流程 🧵

2/ AI 生成的前端問題在於： - 它們看起來都一樣 - 安全的顏色選擇（藍色按鈕，白色背景） - 通用的組件樣式 - 完全沒有個性或獨特性 我最初的網站還不錯，功能正常，但沒有我想要的火花。

4/ 回到我網站的例子，我做了這些步驟來運用 Claude Skills： 1. 在我的專案中打開了 claude 代碼 2. 執行：> explain claude skills（了解我專案中可用的功能） 3. 調用前端設計技能 4. 它回覆了一個詳細的前端設計概念，並不是通用的 只需一個命令，Claude 就從一個基本的代碼助手轉變為設計專家

5/ 僅使用 Claude Code 將為您提供一個功能完整的網站，但這是一個通用網站。 使用 Claude Code + 技能可以為您提供一個生產級且獨特的網站，並使其生動起來。 技能為 Claude 提供了專門的上下文，改變了它解決問題的方式。 前端設計技能特別避免了「通用 AI 美學」的陷阱。

6/ 自己試試看！ 1. 安裝 Claude Code 2. 打開你的前端專案 3. 調用前端設計技能 4. 安裝你的技能 5. 描述你目前的設計 + 你想要的氛圍 6. 讓它以實際的設計思維重建 如果你們喜歡這個，我會做更多這樣的工作流程視頻，因為我自己也在進行大量實驗！