只要 10 分鐘就能做出
價值 10 萬的動態沉浸式網站
而且不用花任何費用
今天這部影片
我會分享 VSCode 加 Claude Code 的使用方法
再教你使用超強的網頁設計 Claude Skill
讓你做出不同於以往的 Vibe Coding 網站
直接屌打其他 AI 網頁設計作品
示範用 Nano Banana 製作高級古典照片
用 Veo 做出導演級影片
最後教你把網站部署到正式的主機環境
讓訪客可直接在線瀏覽
準備好了嗎？
我們就直接開始吧！
首先來看一下今天的教學流程
第一步我們會帶大家安裝 VSCode
加 Claude Code
再來我們會安裝 Claude
裡面有一個 Skill 指令
這 Skill 可以幫我們美化稍後要做的網站
我們會透過 Flow 去生成
所謂的網站圖片還有影片
他是基於 Nano Banana 的功能
再來使用 Claude 進行網頁設計
當網站做好之後
我們會分兩個方法跟大家做分享
首先方法一
我們會上傳到 GitHub
加上 Netlify 進行網站部署
方法二
我們會直接上傳到比較正式的主機
這邊我們會用 hosting.com 跟大家做分享
以上就是今天的教學流程
這個章節會帶大家來開啟 VSCode
跟安裝 Claude Code
我們等一下會先安裝這個 IDE 軟體
這個軟體滿方便的
是可以讓我們編寫一些程式
當然我們等一下不會寫到程式碼
主要是會在他裡面置入 Claude Code 的對話視窗
這樣你之後如果真的有編輯需求的話
也會比較方便
相關的連結我一樣會放在下面
我目前是已經把這個 VSCode 編輯器給下載起來了
他這邊支援滿多種外掛
我們可以看到左手邊這個 EXTENSIONS
裡面可以讓我們安裝
滿多種都是支援這個編輯器的
我這邊可以直接搜尋跟 Claude Code 相關的小功能
這個功能可以幫助我在這個編輯器裡面
直接跟 AI 做對話
我目前是已經下載完畢了
我這邊就直接可以看到右上角
他會有一個小小的 icon
我就點選他
這個時候我就可以直接進入到對話模式
他可能會要求你進行登入
因為要使用 Claude Code 至少要 Pro 版的方案
這部分大家都可以自行再去做了解
我們目前前置作業就已經完成了
接著我們等一下可以開啟一個專案
把相關的程式都放在裡面
所以我先在桌面建立一個相關的資料夾
我這邊直接開啟我的資料夾
找到剛剛所新增的資料夾
然後打開
稍後我們的專案檔案就會統一放在這個資料夾裡面
這邊的這個路徑跟我桌面的這個資料夾
他是連動的
目前都是空的
稍後我們會把一些相關的影片
圖片、程式都擺在裡面這樣子
這章節會教大家安裝 skills
這個 skills 是基於 Claude
目的是可以幫我們強化我們網頁設計上的質感
他裡面有個 SKILL 檔案我們可以點進來
他這個 skills 會幫我們把我們的 Prompt 指令強化
AI 所生成出來的網頁
有時候會覺得很一般或者是不好看
他可以幫我們強化所謂的像風格性
差異化
還有前端美學
會幫我們優化所謂的字體、色彩或是動態效果等等
我們稍後就會來安裝這個 skills
你可以回來到你的這個 ID 編輯器
直接請 AI 幫我們做安裝
剛好安裝這個 Claude
這個時候我們可以把他呼喚出來
你在右手邊其實有個小小的摺疊框
你可以把這個視窗給叫出來
這邊也會出現 CLAUDE 的這個英文
就點選之後就可以進入到對話模式
另外一種方式你可以從剛剛的這個外掛安裝專區
一樣你找到剛剛的外掛再點一下
他就會把他叫出來
他這邊一樣也有 icon
你點選之後一樣也可以把視窗叫出來
所以他有滿多種方法的
我們稍後會直接跟這個 Claude 對話
請他幫我們安裝剛剛的那個 Skill
我剛剛輸入的這串 Prompt
就是請他幫我在這個專案層級下安裝這個 Skill
因為我們目前左手邊
是已經綁定桌面上的這個資料夾
所以相關的檔案都會在裡面
你也可以取名比較簡單的都是 OK 的
然後這個 Skill 的來源會是這個連結
一樣會放在下方資訊欄給大家
完成之後你就可以直接點選送出
我們剛剛已經順利把這個 Skill 給安裝起來了
然後他也幫我們把這個檔案
放在我們想要的專案層級裡面
我們可以看到左手邊這是我們所建立的專案層級
然後裡面你會看到他多出一個 .claude 的檔案
進來之後他裡面會有 skills
SKILL 裡面就會是我們目前畫面所看到的這個
剛剛從線上
安裝下來強化網頁設計的這個 Prompt 指令
我們稍後就會再來運用他
這章節會教大家如何透過 Flow
我們去生成圖片的部分
有圖片之後我們才有辦法把他去串成影片
我們等一下會用到的這款
是 Google 官方所開發的 Flow 軟體
他這個 AI 軟體是基於這個 Nano Banana
包括 Veo 去生成所謂的圖片跟影片
一開始的話你可以點選下方的這個新建項目
首先的話
他下方他支援是用圖片的方式或是用影片的方式
我們會先用圖片的方式
他支援不同的尺寸
我們目前就先用 16:9
然後我們可以先請他幫我們生成兩張
這邊我們可以選擇他使用的這個模型
我們就用這個 Pro 版
他目前這個行為會耗費我們就是 0 點的點數
所以可以持續的去做測試
這個 Docs 是我們幫大家準備好的這個指令
如果你有需要用到一樣在下方的資訊欄會找到
首先透過 Flow 去生成結尾圖
結尾圖的部分我們就直接先複製起來他的指令
把他貼上來
這個結尾圖
其實對應我們剛剛的這個網站成品
就會是少女他在跳舞
這部分是他的結尾
然後我們開頭的話會是一個蓋起來的盒子
等一下我們會先把這兩張圖都先做出來
我們就先進行送出
系統幫我們生成兩張圖片
目前看起來右邊會比較適合
因為他是整個畫面都有放進來
這個就是我們的結尾圖片
接著我們可以在這個結尾圖片的基礎之上
我們請他幫我們去生成所謂的這個開頭圖
把他貼上來
這個指令是希望他幫我生成一張盒子蓋著的版本
我們就直接送出
這個開頭圖片已經完成了
你可以點選右邊的兩張圖我們進行下載
下載完畢之後這兩個檔案
你就可以直接把他放在你的專案資料夾裡面
這章節會來教大家如何去生成影片的部分
我們可以看到下方切成視頻
然後選擇 16 比 9 的方式
我們來生成一個影片就 OK 了
這個影片他本身會耗費點數
所以大家也可以再留意一下
這邊支援開頭跟結束
點擊之後去做指定
剛剛已經把這個開始跟結尾圖片都放進來
影片生成的 Prompt 放在這個地方
主要我們就是針對影片的過程
去做一個比較詳細的描述
複製
回來我們進行貼上
都確認沒問題之後就可以直接送出
我們剛剛已經把影片生成出來了
進來之後他也會展示動畫所生成的一個結果
我們稍後就會來把這個影片放在網站上
這章節要來教大家如何用 Claude
製作一個精美的網站
我剛剛已經把相關的這個圖片
比如說是開頭的圖片跟結尾的圖片
然後還有我們所製作出來這個影片
我全部放在專案資料夾裡面
剛剛所提到的這個 skills
也是配置在這個專案層級下面
我們這邊也幫大家貼心的準備相關指令
我們會分成兩個步驟
首先第一個步驟是把影片切成多張圖片
我們稍後會用這些圖片去做成這個動態網站
也就是上方這個動態的效果
我們回到編輯器
一樣我們跟 Claude Code 去做對話
這邊這個影片檔名
大家要記得去更換成自己的檔名
因為我們這邊的檔名
是跟我們左手邊的這個檔名是吻合的
所以 AI 他會偵測得到
把這個影片切成多個幀
用圖片的方式呈現
然後並放在這個資料的層級下
這樣他就比較不會太亂
因為晚點我們要用他來做成動態網站
送出
剛剛系統已經幫我們切成 360 張
這樣每一張都可以稱為是一個畫面了
相關的規格他有幫我們列出來
然後放的位置也是幫我們放在
我們所命名的這個資料夾層級下
你點開來就會發現有很多張圖片
如果我們圖片的部分準備沒問題
可以再度回來到 Docs
我們這邊會使用第二步驟
就是開始製作動態高質感網站
他會針對這個圖片的檔名
營造這種像 Apple 式的動態效果
這邊我們有給他相對應的配色
還有一些網格化設計
我們就直接請 Claude
幫我們產生相關的網站
剛剛 AI 已經幫我們把這個網址
都給做好了
這是我們剛剛透過 AI
直接做出來的版本
我們主要會是看最上方這個 Hero Section
我們往下滾動滑鼠的時候
你會發現他音樂盒就慢慢地打開
然後裡面的小女孩就出來跳舞
也會去做轉動
效果整個都非常不錯
然後他右手邊也有這個 Hover 的效果
做一些特色上的分享
再來下面就是他所幫我們規劃的區塊
最後就是 CTA 結尾的部分
如果說你今天想讓整個網頁
再變得更加豐富的話
可以再度回到 AI 裡面
我們給他相關的指令
我覺得網頁區塊目前不夠多
希望可以幫我增加像是
關於我們、產品介紹、價格等相關的區塊
讓整體是完整的
剛剛系統已經幫我們生成多個區塊了
像是關於我們、產品系列、定價、評價等等
我們來看一下成品
我們一樣可以往下滾動
一樣我們會有所謂的音樂盒
然後小女孩出來跳舞的這個動態效果
接著我們往下滑會有一個相關的區塊介紹
再來這邊會有關於我們顯示一些數字等等
然後這邊有多個商品的呈現
再來會有價格的部分
然後包括客戶好評
然後還有 QA
整個來說都非常的完整
最後還有 CTA
然後網站頁尾
OK 我們透過 Claude 製作一個完整
然後又沉浸式的網站
已經順利的大功告成了
這章節要教大家如何把自己的網站檔案
上傳到 GitHub
GitHub 他是一款可以幫助你管理網站專案
網頁、程式碼等等一個地方
滿方便的
我們目前是已經註冊完畢了
所以我就直接登入
可以參考 Docs
我們相關的分頁裡面有分成六個步驟
可以順利把檔案上傳到 GitHub
當然我們也會透過 AI 的模式去完成
接著就進到第二步
就是你可以在 GitHub 建立你的專案資料庫
這資料庫會放你的網站檔案
這個命名的部分你可以改成自己的
我們再度回來
點選這個按鈕綠色的
新增資料庫
幫資料庫做命名
這邊可以選擇是要公開還是私密
目前我就先用公開
然後進行創建
這樣資料庫就創建完畢了
這時候你可以點一下右上角
然後點選資料庫
你會發現你剛剛創建的資料庫就已經出現了
再來我們可以前往到下一步
就是生成這個 GitHub 的 Token
這個 Token 可以授權給 AI
這樣他才有辦法把檔案丟到你的 GitHub 裡面
前往到這個 GitHub
然後我們點選右上角
他這邊有個 Settings
點選
進來之後往下滑
他有個開發者 settings
你就可以直接去做生成
左手邊展開來
他有一個經典 Tokens 的生成方法
這邊也可以點選生成
Token 的名稱我們可以先隨意命名
他可以設定他的有效期限
我們把相關的指令給打開
下方的話就是跟管理員比較有相關的
目前我們就先不用
完成後就直接生成
這樣 Token 指令就完成了
這是滿重要的大家可以好好保留
接著我們就可以在終端機安裝 Git 指令
如果說你還沒有安裝 Git 的話
可以看一下相關的文檔
這個 git 指令就是 GitHub 相關的
如果說你是 Windows
你就可以跟著他去安裝
你是 mac 的話你也可以跟著他
我們這邊可以用 Homebrew 的方式會比較快
這個比較適合是 mac 系統
你可以搜尋他的網址
這邊點選的時候他其實也會展開
你就直接複製這個安裝的方法
到你的終端機裡面再輸入這串指令
你就可以安裝完畢了
git 安裝完畢之後
回來到我們的手冊裡面
就可以走到第五步
在 Git 上因為他會需要你的使用者名稱
跟使用者 Email
他比較有辦法去找到你的位置
記得把這個地方先改成你的 GitHub 的名稱
這邊 Email 也是需要更改一下
如果你要在 VSCode 開啟終端機
進來之後他上方有一個終端機的英文
就直接打開來
生成一個終端機
你在這個地方就可以直接打上相關的指令了
我先貼上了第一串指令
就是我在全局裡面可以設定我的使用者名稱
當然這地方應該會是你自己的英文
所以大家可以更改一下
完成後你就可以直接按 Enter
系統就會幫你去做一個設定
這是第一個
第二個就是說你的 Email
一樣你都可以複製起來
再度回到終端機裡面再把他貼上
把 Email 改成你自己的 Email
這樣就可以了
基本上我們會分成兩次做輸入
比較不會有問題
設定完畢這個基本路徑就建立完成
最後就比較簡單了
就是我們可以請 AI
幫我們把專案檔案上傳到 GitHub
我們剛剛這個資料庫是這樣的命名
如果說你是命名別的話
這邊記得也要改
我們是請 GitHub 上傳到這資料庫
然後也告訴他我們的 Token 的名稱
這樣他才有權限
回到我的 AI 裡面直接把他貼上去
關於 Token 的部分
你可以回到我們剛剛在 GitHub 所生成的
這個 Token
你就複製起來
來到這個地方做貼上
我們指令滿明確的
然後請他幫我們把
目前我們左手邊的檔案去做上傳
檔案部分我有整理過了
把相關的圖片跟影片放到 assets 的資料夾裡面
分成圖片
把他整理在 frames 的資料夾
這個 index.html 就是我們的網頁主程式
完成之後我們就直接送出
AI 告訴我們說他已經成功幫我們
推送檔案到這個資料庫裡面了
我們這邊可以回來做檢查
一樣當你生成完畢之後
這個 Token 如果你用不到的話
是可以直接做刪除的也會比較安全
回到我們的資料庫裡面
可以看到剛剛這個 banana 資料夾裡面
確實檔案都上傳上去了
我們在 GitHub 歸檔我們的專案資料已經順利完成了
這個章節會教大家如何把網頁資料
上傳到線上主機可以對外訪問
我們使用的軟體會是 netlify
相關連結我會放在下方資訊欄
我已經註冊完畢了
我這邊要新增一個新的專案
可以點選按鈕
進來之後我們可以選擇匯入檔案的方式
我們這邊會使用 GitHub 的方式
選擇
他會自動連動到我們的 GitHub 帳號
找到剛剛上傳的這個專案資料庫
這個 banana-claude
選擇
你可以幫你的網站專案去做個名稱命名
完成後我們就可以直接進入到部署
這邊就可以等待他一下
因為他目前正在安裝
系統已經部署完畢
我們可以點選這個連結
這個連結就是我們對外
人家可以訪問到的網址
我們剛剛所做的這個音樂盒的網站
就順利完成了
我們用方法一已經示範給大家看
希望對大家有幫助
接下來我們會示範第二種
把這個網頁專案可以上傳到
比較正式而且更好一點的主機
我們剛剛是使用 netlify 這家主機商
但他會有幾個問題
首先目前你的網址是這個 netlify 的子網域
基本上子網域看起來就不是這麼正式
而且對於 SEO 也不是一件好的事情
這是第一點
第二點是 netlify 這家主機商
不論在規模度或者是安全性跟效能性
都沒有正式主機來得更好
如果說你想用比較好的主機
可以參考 hosting.com
這家主機商他歷史悠久
全世界代管非常多的網站
很多企業都是用他進行網站架設
不論在資安跟速度上的表現都滿優異的
相關的這個折扣連結
我會放在畫面這邊
還有下方的資訊欄
你可以享有折扣
這個主機商也有相關的教學跟註冊流程
另外如果說你想了解更多優質主機的話
我們有一篇比較文章
相關的連結都會放在下方資訊欄
同時這家主機商也會贈送你免費的一年網域
非常的佛心
我們目前已經租用完畢
找到他點選這個按鈕
就可以進入到他的主機商後台
這邊你會看到滿多功能
這個是 cPanel 的功能
我們往下滑
他可以讓你變更語言
如果你是英文的話
你選擇他然後把他改成繁體中文
這樣就可以了
會比較好做辨認
接著我們就要開始把網站資料
上傳到這個主機商裡面了
首先你可以找到檔案
裡面有個檔案管理員
接著進入這個 public_html
目前檔案都是空的
這邊我們可以先把這個資料層級建立起來
這邊的資料層級
基本上會吻合我們的這個網頁專案
所以我們可以先點選左上角
有個新增資料夾
我們就個別的命名
命名完畢之後
我們開始把檔案可以進行上傳了
點選上面的上傳
我把這個 index.html 上傳
他有支援拖曳跟直接選擇都可以
他上傳完畢之後我們就回到上一層
你就會看到檔案已經上傳成功了
接著我們就上傳 assets 相關的檔案
進去之後一樣點選上傳
我們把這三個檔案直接拖曳進來
完成後回到上一層
接著進入 frames
一樣點選上傳
我們把相關的全部圖片
全部都直接拖曳進來
我們目前已經把所有的檔案都上傳完畢了
我們可以再回到上一層
所以目前我們的檔案架構
跟這邊的檔案架構是一樣的
就沒有問題了
再來我們就回到 cPanel 的畫面
這邊有個網址點選
這個網址基本上就會是你所購買的網址
你會發現一件事情
就是我們目前的這個網域已經成為正式網域了
我們的網站已經隸屬於在他下面了
所以我今天滑鼠滾動
你就看到我的音樂盒已經打開了
整個網站呈現得非常的精緻
而且沉浸感很強、質感也很棒
所以我們完成了幾件事情
首先第一個我們擁有了自己的一個網域
第二個我們是放在優質的主機商
在穩定度跟安全性也都會比較高
這是我們跟大家分享的第二種
部署網站的一個方法