Claude Code + Nano Banana 2 + Kling = 價值 1.5 萬美元的動畫網站

🧑‍🏫 這支影片示範怎麼用 Claude Code（Anthropic 出的 AI 寫程式工具，你打字下指令，它幫你寫出網站），搭配 AI 生成的動畫，做出往下捲畫面就會動的 3D 質感網站，再放上網路。作者以前靠接網站案子維生，他想證明這種過去要價上萬美元的網站，現在花幾塊美元、十幾分鐘就做得出來。

• 00:01 作者說他約 15 分鐘做了 4 個有 3D 捲動效果的網站，素材都用 AI 生成：耳機、森林復育（背景是 3D 地球）、室內設計（背景是房屋爆炸圖）、旋轉太空站
  ↳ 作者展示 4 個網站，往下捲動時畫面會跟著動，看起來很立體。裡面的耳機、地球、房屋拆解圖、太空站都不是實拍，全部由 AI 生成。
• 00:31 作者以前靠賣網站維生。他說幾年前這種網站一個要 5,000 到 10,000 美元，現在不到 10 分鐘就能做好，花費約 2～3 美元 tokens
  ↳ 重點在成本落差。以前請人做要 5,000～10,000 美元，現在主要花在 tokens（AI 按用量計費的單位，可以想成 AI 的使用費），約 2～3 美元。這是作者自己的估算。
• 00:31 不需要在 30 個平台之間跳來跳去，作者說其實只有三個步驟
  ↳ 作者想打破「做網站要學一堆工具」的印象。他的流程只用少數幾個工具，照三個步驟走就能完成。
• 00:31 整體流程：在 Claude Code 寫幾點需求 → 用一位 16 歲作者在 Twitter 分享的 skill → 用 Kling 3.0 生成 exploded view 或動畫素材 → 整合進網站並上線
  ↳ 三步驟分別是：叫 AI 寫網站、用 AI 做動畫、叫 AI 把動畫放進網站並上線。skill 是一份給 AI 的做事指引；exploded view 是物件往各方向拆開、露出內部的畫面。
• 01:02 taste skill 是公開的 repo，內含高階網站設計原則與設計 schematics，讓簡單的 Claude Code prompt 就能 one-shot 出高品質網站
  ↳ repo（repository）是放在網路上公開的檔案庫。taste skill 等於把資深設計師的品味寫成規則。one-shot 指下一句指令就做出能用的成品，不用來回修改。
• 01:34 範例：私人飛機室內設計業務的網站，作者完全沒修改，一次生成。這個 skill 會統一間距、高端奢華風格等設計細節
  ↳ 作者用私人飛機室內設計公司的網站當例子，說完全沒改過。因為 skill 已經規定好間距、高級感等細節，AI 不會亂排版，所以第一次就做得像樣。
• 01:34 影片生成用 Kling 3.0，透過 Higgsfield 平台使用。作者約 3 分鐘就能做出一批動畫，例如旋轉地球、太空船
  ↳ Kling 3.0 是生成影片的 AI 模型，作者透過 Higgsfield 這個平台付費使用。他說約 3 分鐘就能生出一批旋轉地球、太空船之類的動畫。
• 02:05 最後用 Claude Code 兩秒整合。作者在這裡說花費約 5 美元 tokens，並不複雜
  ↳ 最後讓 Claude Code 把動畫放進網站，作者說幾乎瞬間完成。這裡他說費用約 5 美元，跟前面說的 2～3 美元不一樣，可以理解成「幾塊美元」的等級。
• 02:05 事前準備：Claude Code 要跑在某種 IDE 平台上，作者用的是 Antigravity
  ↳ IDE 是專門用來寫程式、管理檔案的軟體，像寫程式用的工作桌。作者在一個叫 Antigravity 的 IDE 裡使用 Claude Code，他說操作很簡單。
• 02:35 步驟一：複製 Leon 的 skill 連結貼到 Antigravity，輸入「Use this skill to design a high-end website about interior design.」
  ↳ 第一步只做兩件事：把 Leon（這份 skill 的作者）的 skill 網址貼給 AI，再用一句英文要它「用這個 skill 設計一個高級的室內設計網站」。
• 03:06 Claude Code 會去抓 skill repository 了解內容，約 2 分鐘完成整個網站設計
  ↳ AI 會自己上網讀那份 skill，弄懂裡面的設計規則再動手，約 2 分鐘就把整個網站做好。那份文件你不用自己讀。
• 03:06 在 Kling 下 prompt：高品質 3D render 風格、平移穿過 3D 室內設計場景、白色背景、素材高品質，要像網站或 landing page 上會看到的畫面
  ↳ prompt 就是你打給 AI 的指令。這段指令在描述畫面：3D 電腦繪圖風格、鏡頭穿過室內、白底、精緻。landing page 是別人點進來第一眼看到的宣傳頁。
• 03:06 生成設定：Kling 3.0、5 秒、16:9（寬大於高，適合放在 landing page）、1080p（作者說大約是最高畫質）
  ↳ 5 秒是影片長度。16:9 是寬螢幕比例，跟電腦螢幕差不多，放在網頁上剛好。1080p 指畫面清晰度，作者說大概是能選的最高等級。
• 03:36 一次花 7.5 credits。Higgsfield pro 方案是 30 美元 600 credits，作者用 7.5÷600×29 美元算出約 36 美分
  ↳ credits 是 Higgsfield 的點數，一支影片扣 7.5 點，作者換算約 0.36 美元。他說方案是 30 美元，算式卻用 29，數字只能當大概參考。
• 04:07 作者通常建議生成 2～3 次，挑最好的影片。再多加幾個動畫，大約 3～4 美元
  ↳ AI 每次生成的結果都不一樣，所以作者建議同一段多生 2～3 次，挑最好的。再加上其他幾段動畫，影片部分總共約 3～4 美元。
• 04:07 Claude Code 用量另外約 1 美元左右；作者偏好的 hosting 方式完全免費
  ↳ Claude Code 寫網站的費用另外算，約 1 美元。hosting 是把網站放到伺服器上讓別人連得到，作者用的方式不用錢。
• 04:37 地球網站做法：先在 Nano Banana 生成地球圖片再丟進去，prompt 寫地球在原地旋轉、重心不動、完美繞軸旋轉。也可以直接 one shot
  ↳ 地球網站分兩段做：先用 Nano Banana（AI 生圖工具）生一張地球圖，再交給影片模型讓它轉起來。指令強調地球要原地自轉、不能亂飄。也可以不給圖，直接一次生成。
• 05:07 下載生成的影片，先確認播放效果，再到 Finder 改名為 interior_design.mp4
  ↳ 下載影片後先播一遍確認沒問題，再到 Finder（Mac 的檔案管理視窗）把檔名改成簡單的英文。檔名好認，之後跟 AI 說要用哪個檔案比較不會出錯。
• 05:37 請 Claude Code 把影片設為 hero header 背景並置中，加上 inward masking gradient，讓動畫背景不干擾網站背景
  ↳ hero header 是網站最上方、第一眼看到的大區塊。inward masking gradient 是讓影片邊緣往內慢慢淡掉的遮罩，影片才能跟網頁底色自然融合，不會出現明顯的邊框。
• 05:37 Claude Code 在主目錄找不到檔案，作者補充說明檔案在 downloads
  ↳ AI 不一定知道你把檔案放在哪。它在專案資料夾找不到影片，作者告訴它檔案在「下載」資料夾就解決了。遇到這種狀況，直接講清楚位置就好。
• 06:07 完成後畫面乾淨。作者認為動畫有綁定滑鼠位置，所以畫面有時會移動
  ↳ 做好的畫面很乾淨。畫面有時會自己移動，作者推測是動畫跟著滑鼠位置在動，但這只是他的猜測，影片裡沒有確認。
• 06:37 截圖給 Claude Code，說明文字看不清楚、副標太小難讀，要求讓文字更明顯
  ↳ 不會講技術用語沒關係。截圖給 AI，再用白話說「字看不清楚、副標太小」，它就會自己調整文字的大小和顏色。
• 06:37 在 Kling 生成房屋 exploding view：無文字、白色背景、往各方向（含垂直與水平）爆開、不能超出畫面邊界；作者把 diagram 改成 animation
  ↳ 這段指令要 AI 生出房屋往上下左右爆開的動畫，並要求不能有字、白底、不能超出畫面。作者把原本寫的 diagram（示意圖）改成 animation（動畫），讓結果是會動的畫面。
• 07:09 credits 夠多的話可以同時生成 2～3 支，提高拿到理想結果的機率
  ↳ 同一段指令一次開 2～3 支同時生成，等於多抽幾次，比較容易拿到滿意的版本，只是點數會花得比較快。
• 07:40 從右下角下載影片，改名為 interior_design_exploding_view.mp4，並告訴 Claude Code 檔案在 download/
  ↳ 下載後一樣改成看得懂的檔名，並主動告訴 AI 檔案在下載資料夾，省得它再找一次。
• 07:40 要求在 hero header 正下方做 scroll animation：捲動時出現 2～3 段介紹設計能力的文字，同時逐格播放 exploding view
  ↳ scroll animation 是隨著你往下捲才播放的動畫。作者要求捲動時房屋一格一格爆開，旁邊依序出現 2～3 段介紹設計服務的文字。
• 08:12 Claude Code 做了 locomotive scroll sequence，複製影片並加上 scroll reveal logic。作者發現背景色和網站不完全一樣，之後要調整
  ↳ locomotive scroll sequence 和 scroll reveal logic 是 AI 做捲動動畫用的技術手法，影片沒有細講，知道是 AI 自己處理的就好。作者另外發現影片底色跟網頁底色有點不同。
• 08:43 結果：文字在中間、有加陰影，捲動時一格一格播放，但很卡頓
  ↳ 第一版效果有出來：文字置中、有陰影、捲動時逐格播放。但捲起來卡卡的，還需要再修。
• 08:43 背景明顯偏暗，原因是 mask 的模糊漸層沒有延伸到頂端
  ↳ 畫面上方偏暗，原因是那道淡化遮罩沒有延伸到最頂端，影片原本的顏色露了出來，跟網頁接不起來。
• 09:14 回報兩個問題：漸層不夠強，上下要加強；網站很 lag，要修好並大幅加快載入
  ↳ 作者一次回報兩件事：上下邊緣的淡化要更強，還有 lag（卡頓、反應慢）要修好、載入要更快。問題寫清楚，AI 比較能一次改到位。
• 09:44 Claude Code 把影格抽成 optimized JPEG，每張圖對應捲動位置並預載，速度明顯變快
  ↳ JPEG 是常見的圖片格式。AI 把影片拆成一張張壓縮過的圖片，每張對應一個捲動位置，並事先載入好（preloading）。捲到哪就顯示哪一張，所以變順了。
• 09:44 作者以前是網頁開發者，他說這些事他以前要做 3 天，AI 只花 30 秒
  ↳ 作者以前是寫網頁的工程師。他說這種效能調整以前要花 3 天，現在 AI 30 秒就做完。這是他個人的經驗比較。
• 09:44 仍有一點 lag，作者再要求優化，並幫文字加 overlay，避免文字和動畫混在一起看不清
  ↳ 還是有點卡，作者就再叫 AI 優化一次。overlay 是墊在文字後面的一層半透明底，讓文字跟動畫分開，比較好讀。
• 10:16 確認頂端和下方區塊之間已看不出色差，作者也考慮加寬，或讓文字隨房屋 exploding view 淡入
  ↳ 上下兩個區塊的顏色已經接得很自然。作者也在想下一步可以把動畫放寬，或讓文字跟著房屋爆開的節奏慢慢浮現。
• 10:46 這個網站頂端跑一支影片、下方是預載的 JPEG，運算負擔不算輕；但只要說「make it faster」就會變快
  ↳ 這個頁面同時有影片和大量圖片，對電腦是不小的負擔。但作者說不用懂原理，直接跟 AI 說「make it faster（讓它更快）」就會改善。
• 10:46 可以重複要求加速三、四次，同時評估畫質下降多少，在速度和畫質之間取得平衡
  ↳ 加速通常靠壓縮檔案，壓得越多，畫質越差。所以可以重複要求加速三、四次，每次看一下畫面有沒有變糊，找出又快又夠清楚的平衡點。
• 11:16 要求 hero header 也加速後，Claude Code 把它從 5.3 megs 壓縮到 252 kilobytes
  ↳ MB（megs）和 KB（kilobytes）是檔案大小的單位，1 MB 約等於 1,000 KB。頂端影片從 5.3 MB 壓到 252 KB，大約只剩二十分之一，網頁自然開得快很多。
• 11:47 作者說大多數人捲到某個位置時，第一格才開始載入；整體載入連貫、沒有之前的頓挫感
  ↳ 作者的意思是：圖片會在捲到附近時才開始載入，不用一打開頁面就全部下載完，所以整段看起來很連貫，不再一頓一頓。
• 11:47 上線：告訴 agent「This looks awesome. I want you to make it live on Netlify.」
  ↳ 上線只要一句話。agent 指能自己動手執行任務的 AI，這裡就是 Claude Code。Netlify 是幫你把網站放上網路的服務，作者直接叫 AI 把網站放上去。
• 12:17 Netlify 免費方案永久免費，可從 AI、Git 或 API 部署，有 unlimited deploy previews，每月 300 credit 上限，並提供 global CDN
  ↳ 免費方案的重點是不用付錢就能一直放。Git 和 API 是工程師常用的上傳方式，用 AI 部署就不用管這些。deploy previews 影片沒有解釋。每月有 300 點用量上限。
• 12:17 global CDN 讓世界各地的人都能快速開啟網站：網站和檔案快取在 edge nodes，不必跨國發送請求
  ↳ CDN 是把網站複製到世界各地伺服器的服務，edge nodes 就是這些分散各地的節點。在台灣的人連線時，從附近的節點拿資料，不用連到國外，所以開得快。
• 12:47 點一下按鈕網站就上線，網址是 atelieramerin.netlify.app，作者說會讓它一直開著
  ↳ 部署完成後會拿到一個免費網址，任何人點開都看得到。作者說這個網站會一直保留。
• 12:47 這個網站還沒做手機版優化，作者說只要說「mobile optimize the site」三、四次，模型就會處理
  ↳ 這個網站目前還沒做手機版，用手機看排版可能會跑掉。作者說不用自己改，跟 AI 說「mobile optimize the site（幫網站做手機版優化）」重複三、四次就好。
• 13:17 作者結論：很多人把網站設計框架講成要 35,000 個步驟，其實做出高品質網站遠沒那麼複雜
  ↳ 作者想表達的是：網路上很多教學把做網站講得很複雜，但其實找對工具、照幾個步驟走，就能做出很像樣的網站。
• 13:48 這支影片的所有 prompts 都放在說明欄，免費提供
  ↳ 影片裡用到的所有指令都放在說明欄，免費提供，可以直接複製來用。

作者在 Kling 生成室內設計影片時，用的設定是哪一組？