影片筆記：【保姆級教學】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 輔助增加產品介紹、定價、評價等區塊。

1. 兩種部署策略：

• 免費快速版：結合 GitHub 與 Netlify，適合快速驗證或個人專案。
• 正式優質版：使用 hosting.com 主機服務，搭配 cPanel 上傳檔案並綁定獨立網域，以提升 SEO 與安全性。

1. 環境設定關鍵：需安裝 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" 作為資料庫命名，疑為專案名稱或口誤。*

1. 生成 GitHub Token，用於授權 AI 上傳檔案。
2. 使用 Netlify 連結 GitHub 進行部署。

• *註：提及 "賄賂檔案的方式"，應為匯入或連結檔案。*
• *註：提及 "直網域"、"直網運"，應為子網域或根網域。*
• 方法二：正式/優質部署（hosting.com）

1. 使用 hosting.com 主機服務。
2. 透過 cPanel 檔案管理員上傳 index.html 及相關資源。

• *註：提及資料夾名稱 "assessed"，應為 "assets"。*
• *註：提及上傳圖片的資料夾 "Frames"，應為 "images" 或 "frames"。*

1. 綁定正式網域（逐字稿提及 "網譽"，應為網域），以提升 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) 指令以提升設計質感。

1. 素材製作：

• 打開 Google Flow 工具。
• 使用 Nano Banana 模型生成開頭（盒子）與結尾（少女跳舞）圖片。
• 使用 Fill 模型將圖片串接生成影片。

1. 網站編碼：

• 將影片拆解為多張圖片。
• 使用 Cloud Code 生成具備滾動動態效果（Hero Section）的程式碼。
• 透過 AI 對話增加產品介紹、定價、評價等區塊。

1. 部署上線：

• 選項 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 生成的程式碼以確保網頁載入速度？