| 工具 | 用途 | 網址 |
|---|---|---|
| Manus | AI Agent：自動完成複雜任務 | manus.im |
| Claude | 核心工具：生成完整 HTML 網站 | claude.ai |
| ChatGPT | 整理內容文字 / 生成圖片素材 | chatgpt.com |
| Perplexity | 搜尋靈感、找設計範例 | perplexity.ai |
| Gemini | 查資料、輔助工具 | gemini.google.com |
| VS Code | 網站編輯器 | code.visualstudio.com |
| Git | 版本控制工具 | git-scm.com |
| GitHub | 存放網站 + 免費網址 | github.com |
| Saori AI 工具箱 | 取得 Prompt 產生器 | lab.heysaori.com/tools |
你的網站需要包含以下六個區塊，每個都有其核心任務：
以上都不合適，Prompt 產生器裡可以選「自訂風格」，用自己的話描述。
Vibe Coding 最常卡關的幾個狀況，先看這裡，通常都能自己解決。
index.html，用瀏覽器打開這個檔案，或依 Step 3 上傳到 GitHub 後看線上網址。打開是 404？通常是 repository 名稱格式不對，或檔案還沒處理完。等 3 分鐘後重新整理，通常就好了。
每一步的畫面截圖，也可以對照課堂投影片。
🛠 開發者方案：適合想持續開發、或想繼續用 AI 開發其他工具的同學。其中 Claude Code 需要 💳 付費方案。
只想先把網站上線的同學，可以跳過這一區，用上面 Step 3 的零安裝方案就好。
git config --global user.name "你的名字" git config --global user.email "你的GitHub信箱"
新手推薦桌面版 App，不用碰終端機，跟安裝一般軟體一樣：
需要 Claude Pro／Max／Team／Enterprise 帳號。免費版可以裝 App，但 Code 分頁要付費方案才能用。
進階：指令列版（已經習慣用終端機的人）
irm https://claude.ai/install.ps1 | iex
curl -fsSL https://claude.ai/install.sh | bash
安裝完成後，在終端機輸入 claude 即可開始使用，第一次會引導你登入帳號。
讓 Claude 做出來的網頁設計更有質感。不裝也能完成今天的工作坊。桌面版 App 不用終端機，下載一個檔案丟給 Claude 就好：
請把這個檔案安裝成技能，放到我專案資料夾的 .claude/skills/frontend-design/SKILL.md
放在專案資料夾內，Claude 不用碰資料夾以外的位置，比較不會跳出權限詢問。裝好後，請 Claude 做網頁時它會自動使用。
進階：指令列版（已經裝好指令列版 Claude Code、習慣用終端機的人）。打開終端機（不是在 Claude 裡面），貼上這一行：
claude plugin install frontend-design@claude-plugins-official
也可以到 claude.com/plugins/frontend-design，按「Install in Claude Code」自動複製這行指令。裝好後下次啟動 claude 就會生效。
winget install --id GitHub.cli
brew install gh
安裝完成後輸入 gh auth login，依畫面指示用瀏覽器登入 GitHub 帳號即可。
不想裝 gh 也可以改用 Personal Access Token（PAT）當密碼登入，做法請看 HackMD 說明。
上架後，繼續請 Claude 幫你改進。複製以下 Prompt 範本，填入你的需求後貼給 Claude。拿到 Claude 改好的完整 HTML 後，照 Step 3 的「修改檔案」貼上覆蓋，網站就更新了：
請修改上面的網站設計，調整以下部分： 1. 主色調改為 [填入顏色，例如：深藍色 #1a3c5e] 2. Hero 區塊的背景改為 [純色／漸層／圖片] 3. 字型改為更 [現代／溫暖／正式] 的風格 4. 按鈕樣式改為 [圓角／方形／有陰影] 其他內容維持不變，請輸出完整修改後 HTML 檔案。
請修改 HTML 中的以下內容，其他都不要動： - Hero 標題改為：[填入] - About 區塊第一段改為：[填入] - Service 項目一改為：[填入] 請輸出修改後的完整 HTML 檔案。
請幫我改善這個網站的以下部分： 1. Service 區塊加入價格資訊（[填入定價]） 2. 新增一個 FAQ 區塊，問題如下： - Q1：[填入] A1：[填入] 3. Contact 區塊加入一個 Calendly 預約連結按鈕 - 連結：[填入你的 Calendly 網址] 請輸出完整修改後的 HTML 檔案。
① 先用 CloudConvert 將照片轉成 .webp
② 照 Step 3 的「新增檔案」，把照片上傳到你的 Repository
③ 照片網址就是 https://你的帳號.github.io/repository名稱/照片.webp，貼到下面的指令裡給 Claude
請在 Hero 區塊加入我的個人照片。 https://你的帳號.github.io/repository名稱/照片.webp 請把照片放在文字的右側，圓形裁切，寬度約 200–250px， 在手機版時照片移到文字下方。 其他內容不變，請輸出完整修改後的 HTML 檔案。
🎓 自訂網域、PWA、課後可以繼續做的事：課堂講解，不在學習單。
