# 影片筆記：【保姆級教學】Claude Code＋Claude Skills＋Nano Banana 組合，做出價值 10 萬的網站！

## 一句話總結

本影片示範如何僅用 10 分鐘、零成本，透過組合使用 VSCode、Cloud Code、Google Flow（基於 Nano Banana 與 Fill 模型）等工具，從生成素材到編寫程式碼，最終部署出一個具備 Apple 風格滾動動態效果的高質感動態網站。

## 核心重點

1.  **零成本快速開發**：強調在 10 分鐘內完成從素材生成到網站部署的全流程，無需額外付費。
2.  **AI 輔助全流程**：
    *   **素材生成**：利用 Google Flow 工具，透過 Nano Banana 模型生成圖片，再透過 Fill 模型將圖片串接生成影片。
    *   **程式碼生成**：使用 Cloud Code 將影片拆解為圖片，並生成具備滾動動態效果（Hero Section）的網頁程式碼。
    *   **結構完善**：透過 AI 輔助增加產品介紹、定價、評價等區塊。
3.  **兩種部署策略**：
    *   **免費快速版**：結合 GitHub 與 Netlify，適合快速驗證或個人專案。
    *   **正式優質版**：使用 hosting.com 主機服務，搭配 cPanel 上傳檔案並綁定獨立網域，以提升 SEO 與安全性。
4.  **環境設定關鍵**：需安裝 VSCode、Cloud Code 外掛，並安裝特定的 Skill（指令）以提升網頁設計的美學質感。

## 詳細大綱

### 1. 前置環境安裝
*   **編輯器安裝**：安裝 VSCode 編輯器。
*   **AI 工具啟用**：安裝 Cloud Code 外掛，以啟用 AI 對話功能。
    *   *註：逐字稿中曾提及 "FaceCode" 與 "Clouds Code"，後續統一為 Cloud Code。*
*   **設計強化**：安裝 "Scale" 指令（Skill），用於強化網頁設計的質感與美學。
    *   *註：口語中曾出現 "SKIA"，應指代 Skill。*

### 2. 素材生成（Flow）
*   **工具使用**：使用 Google 官方工具 Flow。
*   **圖片生成**：
    *   基於 **Nano Banana** 模型生成開頭圖片（盒子）與結尾圖片（少女跳舞）。
    *   提及 Flow 中有 Pro 版模型選項。
*   **影片生成**：
    *   基於 **Fill** 模型將生成的圖片串接，生成最終影片素材。

### 3. 網站開發（Cloud Code）
*   **素材處理**：將生成的影片拆解為多張圖片（逐字稿提及 "多張針"，疑為圖片或幀）。
*   **程式碼生成**：
    *   利用 Cloud Code 生成具備滾動動態效果（Hero Section）的網頁程式碼，模擬 Apple 風格。
    *   描述該效果為 "通胎效果"（疑為動態效果或轉場效果）。
*   **內容擴充**：
    *   增加產品介紹、定價、評價等區塊，以完善網站結構。
    *   提及 "中暗層級"、"專案成績"、"專案資料夾"，疑為資料夾或目錄的聽寫錯誤。

### 4. 專案部署
*   **方法一：免費/快速部署（GitHub + Netlify）**
    1.  註冊 GitHub 並建立公開資料庫（專案）。
        *   *註：提及 "Banana cloud" 作為資料庫命名，疑為專案名稱或口誤。*
    2.  生成 GitHub Token，用於授權 AI 上傳檔案。
    3.  使用 Netlify 連結 GitHub 進行部署。
        *   *註：提及 "賄賂檔案的方式"，應為匯入或連結檔案。*
        *   *註：提及 "直網域"、"直網運"，應為子網域或根網域。*
*   **方法二：正式/優質部署（hosting.com）**
    1.  使用 hosting.com 主機服務。
    2.  透過 cPanel 檔案管理員上傳 `index.html` 及相關資源。
        *   *註：提及資料夾名稱 "assessed"，應為 "assets"。*
        *   *註：提及上傳圖片的資料夾 "Frames"，應為 "images" 或 "frames"。*
    3.  綁定正式網域（逐字稿提及 "網譽"，應為網域），以提升 SEO 與安全性。

## 工具 / 模型 / 名詞整理

*   **開發與編輯工具**：
    *   VSCode
    *   Cloud Code（AI 對話外掛）
    *   GitHub（版本控制與託管）
    *   Netlify（免費部署平台）
    *   hosting.com（正式主機服務）
    *   cPanel（主機控制面板）
    *   Git
    *   HomeBlood（Mac 系統安裝工具提及）
    *   Duck（指令來源提及）
*   **AI 模型與功能**：
    *   Nano Banana（用於生成圖片）
    *   Fill（用於將圖片串接生成影片）
    *   Flow（Google 官方工具，包含上述模型）
    *   Pro 版（Flow 中的模型選項）
*   **其他名詞**：
    *   Scale / Skill（網頁設計強化指令）
    *   Hero Section（網頁首屏動態區塊）
    *   Token（授權金鑰）
    *   SEO（搜尋引擎優化）

## 操作流程整理

1.  **環境準備**：
    *   安裝 VSCode。
    *   安裝 Cloud Code 外掛。
    *   安裝 Scale (Skill) 指令以提升設計質感。
2.  **素材製作**：
    *   打開 Google Flow 工具。
    *   使用 Nano Banana 模型生成開頭（盒子）與結尾（少女跳舞）圖片。
    *   使用 Fill 模型將圖片串接生成影片。
3.  **網站編碼**：
    *   將影片拆解為多張圖片。
    *   使用 Cloud Code 生成具備滾動動態效果（Hero Section）的程式碼。
    *   透過 AI 對話增加產品介紹、定價、評價等區塊。
4.  **部署上線**：
    *   **選項 A（免費）**：
        *   建立 GitHub 公開專案。
        *   生成 GitHub Token。
        *   使用 Netlify 連結 GitHub 進行部署。
    *   **選項 B（正式）**：
        *   購買 hosting.com 主機。
        *   透過 cPanel 上傳 `index.html` 及資源檔案（assets/images）。
        *   綁定獨立網域。

## 值得注意的限制或風險

1.  **模型名稱辨識**：影片中多次提及 "Nano Banana" 與 "Fill" 模型，需確認其為 Google Flow 工具內的特定模型名稱或功能代號。
2.  **免費方案的限制**：GitHub + Netlify 組合雖免費，但可能僅適用於公開專案或個人展示，商業應用建議使用正式主機。
3.  **AI 生成內容的準確性**：依賴 AI 生成的程式碼與素材，後續可能需要手動調整細節（如圖片資源路徑、網域綁定等）。
4.  **授權與權限**：使用 GitHub Token 授權 AI 上傳檔案時，需注意 Token 的權限範圍與安全性。

## 逐字稿辨識疑點

*   **FaceCode**：逐字稿開頭提及，後續主要講述 Cloud Code，疑似聽寫錯誤。
*   **Five Coding 網站**：形容網站類型，疑似聽寫錯誤，實際語境可能指代某種特定風格或口誤。
*   **Clouds Code**：安裝步驟中提及，應為 Cloud Code。
*   **破版的方案**：提及 Cloud Code 需付費方案時，「破版」疑似聽寫錯誤，應為「付費」或特定版本名稱。
*   **SKIA / SKILL**：安裝網頁設計強化指令時，口語中出現「SKIA」，應為「Skill」。
*   **中暗層級 / 專案成績 / 專案資料夾**：多次出現「成績」，應為「資料夾」或「目錄」的聽寫錯誤。
*   **多張針**：描述影片拆解時，應為「多張圖片」或「幀」。
*   **通胎效果**：描述動畫效果時，應為「動態效果」或「轉場效果」。
*   **Banana cloud**：GitHub 資料庫命名提及，應為專案名稱或口誤。
*   **賄賂檔案的方式**：Netlify 部署步驟中，應為「匯入」或「連結」檔案的方式。
*   **直網域 / 直網運**：描述 Netlify 網址時，應為「子網域」或「根網域」。
*   **網譽**：提及主機贈送時，應為「網域」。
*   **assessed**：上傳檔案時提及的資料夾名稱，應為「assets」。
*   **Frames**：上傳圖片時提及的資料夾，應為「images」或「frames」。

## 可延伸追問

1.  Google Flow 工具中的 "Nano Banana" 與 "Fill" 模型具體是什麼？它們與常見的 AI 繪圖模型（如 Midjourney, Stable Diffusion）有何不同？
2.  Cloud Code 外掛在 VSCode 中的具體配置步驟為何？如何確保 AI 生成的程式碼符合專案需求？
3.  Netlify 部署時，GitHub Token 的權限應如何設定以確保安全？
4.  hosting.com 主機服務相比 Netlify，在 SEO 優化與效能提升上的具體優勢為何？
5.  若生成的影片拆解圖片數量過多，如何優化 Cloud Code 生成的程式碼以確保網頁載入速度？