Name: 【保姆級教學】Claude Code＋Claude Skills＋Nano Banana 組合，做出價值 10 萬的網站！
Uploaded: 2026-04-15T00:38:40.849Z
Duration: 17 min 33 s

What's Moving

The Only Bamboo

https://media1-us-east.cloudokyo.cloud/video/v14/04/1b/f7/041bf781-2d6d-407a-8da6-cae3e91261d6/master.m3u8

▬▬▬▬▬ 🏆️ 犬哥專業服務 🏆️ ▬▬▬▬▬
網頁設計＆數位行銷服務 ➜ https://frankknow.com

▬▬▬▬▬ 🏆️ 精選架站系列 🏆️ ▬▬▬▬▬
新手自學架站（網域＋主機＋WordPress 架站，一次學會）➜ https://frankknow.com/wp-web-doing/
優質主機挑選 ➜ https://frankknow.com/wordpress-hosting/

▬▬▬▬▬ 🏆️ 精選線上課程 🏆️ ▬▬▬▬▬
WordPress 高手架站課：https://frankknow.net/wp-course/
SEO 排名飆升課：https://frankknow.net/seo-course

－

Claude Code 最近根本是核彈級的自動化工具，越來越多人用它做出超專業的網站！

這支影片會帶你完整走過整個流程：
用 Nano Banana 的 Flow 軟體生成精美動畫素材，再交給 Claude Code 完成整體網頁設計，最後手把手教你部署到正式網域，讓你擁有一個可以直接分享給別人的專屬網站連結。

從設計到上線一次搞定，做出來的質感直逼價值 10 萬的專業網站！

－

影片時間軸
00:00 開頭
00:37 教學流程一覽
01:14 安裝 VS Code ＆ Claude Code
02:44 安裝 Skill 指令
04:32 Flow 生成開頭＆結尾圖
06:06 生成動態影片
06:47 Claude Code 網頁設計
09:44 把網站檔案上傳到 GitHub
13:43 用 Netlify 部署網站
14:35 用 hosting.com 部署網網站

▬▬▬▬▬ 💡 相關教學＆資源 💡 ▬▬▬▬
Prompt 指令：https://docs.google.com/document/d/1c5d2Dxsw8ckc1EyNXk89yZLBHHnaC0fVO40wyFac5CM/edit?usp=sharing
VScode IDE 編輯器：https://code.visualstudio.com/
Claude Skills 網頁設計強化：https://github.com/anthropics/skills/tree/main/skills/frontend-design
GitHub 存放網站檔案：https://github.com/
Homebrew 安裝參考：https://brew.sh/
GIT 指令安裝：https://git-scm.com/install/mac
Netlify 臨時性主機：https://www.netlify.com/
Hosting.com 優惠連結（贈送免費一年網域）：https://frankknow.com/hosting
Hosting.com 主機教學：https://frankknow.com/hosting-teach/
WordPress 主機推薦：https://frankknow.com/wordpress-hosting/

▬▬▬▬▬▬▬ 💬 關注我們 💬 ▬▬▬▬▬▬▬
犬哥學院 ➜ https://frankknow.net
犬哥 IG ➜ https://www.instagram.com/wp.dog/
犬哥 FB 社團 ➜ https://www.facebook.com/groups/frankknow

#網站架設 #網頁設計 #flow #nanobanana #claude #claudecode #AI #人工智慧開發 #架站教學