⚡️ 本次 Skill Shot 重點

這堂課將帶你建立一套 Claude Code × Notion × Cloudflare × Railway 的個人網站工作流：先學會把網站需求清楚說給 AI，再透過講師提供的 CLAUDE.md 與 Skill 建立開發規則，完成網站製作、Notion 內容後台、Cloudflare 圖床串接與 Railway 部署。

你也會使用 Claude Design 規劃網站的色彩、字體、版面與元件風格，讓 AI 生成的網站不再只是常見模板，而是更符合你的個人品牌。

我們會完整實作這條流程：

網站需求整理 → Claude Design 視覺設計 → Claude Code 網站開發 → Notion 內容後台 → Cloudflare 圖床 → Railway 部署上線

☝️ 你會學到

1. 如何把網站需求、功能與視覺方向清楚說給 AI，降低反覆修改與溝通成本
2. 如何安裝 VS Code、Claude Code 與網站開發所需的基礎工具
3. 如何使用講師提供的 CLAUDE.md 與個人網站 Skill，建立可重複使用的 AI 開發流程
4. 如何透過 Claude Code，從零建立個人網站的頁面、功能與內容結構
5. 如何串接 Notion，將文章與內容管理功能轉換成容易維護的網站後台
6. 如何串接 Cloudflare 圖床，集中管理網站使用的圖片與視覺素材
7. 如何使用 Railway 部署網站，讓完成的作品正式公開上線
8. 如何透過 Claude Design 規劃色彩、字體、版面與元件，建立具有個人特色的網站風格
9. 如何將整套方法延伸到作品集、個人品牌網站、內容網站與其他軟體產品

這不只是一堂教你做出網站的課，而是帶你完成從需求、設計、開發、內容管理到部署上線的完整 AI 產品製作流程。

👥 適合對象

• 個人品牌經營者
  希望建立自己的官方網站，集中呈現個人介紹、作品、服務與文章內容的人
• 獨立開發者／Side Project 創作者
  想使用 Claude Code 加快產品開發，並學習如何將設計、內容後台與部署流程整合起來的人
• 內容創作者／講師
  需要持續發布文章、課程與觀點，希望透過 Notion 輕鬆管理網站內容的人
• 自由工作者／顧問
  想建立專業形象網站，展示服務項目、合作案例與個人經歷的人
• 產品經理／設計師
  想了解如何把需求與設計方向交給 AI，並將概念實際轉換成可以使用的網站產品的人
• 不熟悉程式開發的人
  希望透過 CLAUDE.md、Skill 與實作模板，在 AI 協助下完成第一個個人網站的人
• 已經有 Notion 內容的人
  希望將 Notion 中的文章與資料轉換成個人網站，減少重複搬運與維護內容時間的人

⏱️ 課程內容

• Part 01｜需求整理與開發環境準備
  了解如何描述網站目標、功能與視覺需求，並完成 VS Code、Claude Code 等工具安裝。
• Part 02｜CLAUDE.md 與個人網站 Skill
  安裝講師提供的 CLAUDE.md 與 Skill，建立網站架構、開發規則與 AI 協作方式。
• Part 03｜Claude Code 個人網站實作
  從首頁與基本頁面開始，逐步建立個人介紹、作品、服務與文章等網站內容。
• Part 04｜Notion 內容後台串接
  將 Notion 作為網站內容管理後台，讓文章與資料可以持續新增及更新。
• Part 05｜Cloudflare 圖床串接
  設定網站圖片的儲存與讀取流程，集中管理文章圖片、封面與網站視覺素材。
• Part 06｜Claude Design 網站風格設計
  規劃網站色彩、字體、版面與元件風格，建立更符合個人品牌的視覺系統。
• Part 07｜Railway 部署與網站上線
  設定部署環境，將完成的網站發布到 Railway，完成可以公開分享的正式網站。

🧰 課前準備

請事先準備一台可進行網站開發的電腦，並完成以下帳號申請與工具安裝：

• GitHub 帳號
• Claude 付費帳號
• VS Code
• Railway 帳號
• Cloudflare 帳號

課程使用的 CLAUDE.md 與 Skill，將透過講師提供的 GitHub 專案取得。