自從可以使用 AI 輔助寫程式，架設簡易的網站，這次終於把我的 Notion 資料庫裡的追劇紀錄放上去，完成我的個人網站 —「韓劇日記 Kdrama Diary」！
這篇文章整理「用 Claude AI 架站」的詳細教學，從如何下指令、到最後用 Netlify 部署上線，每個步驟都有真實指令範例可以直接參考。如果你也是完全不懂程式、或是剛入門的 AI 新手，都可以照著這篇的操作流程，製作屬於自己的網站！
Table of Contents
一、開始前準備的三件事
1. Claude 帳號
前往 claude.ai 進行註冊，整個製作過程在網頁版操作即可，不需要額外安裝其他工具。免費版可以直接製作，但考慮額度上限制，也可評估是否升級 pro 版。
2. Netlify 帳號
前往 netlify.com 免費註冊，這是最後用來讓網站部署的平台，如果有習慣其他平台，EX：GitHub Pages、Vercel 也都可以使用。
以上都可以直接使用免費方案，也會提供自動產生的免費網址，如果有想要指定網域名稱和網址，則需要再額外購買。
3. 你的資料和想法
製作網站之前，也建議要有明確的想法和對網站架構的需求，是否能提供「明確清楚」的指令，會影響最後生成出來是否符合我們需要的結果。
舉例來說，我這次製作的是「追劇紀錄」的網站，除了大主題，我也會把我想要的項目，EX：我要有評分頁、影劇類型分類等等，以及我想要的風格、色調、字體等大方向一併提供。
二、Claude AI 指令教學
底下會拆成五個步驟和大家分享，教學都會是以我自己製作「追劇日記」的指令為主，可再自行更換為自己的需求。
Step 1、明確提供想法與目標
第一個步驟是最重要的，我會分成三個部分下指令：
★ 指令區 ★
| a. 我的主要需求是什麼？ – 把整理在 Notion 上的韓劇資料庫，做成一個可以公開瀏覽的個人網站- 會是一頁式的網站，有不同 tab 可以切換主題分類 – 以「放映」作為網站呈現主軸，並使用咖啡色為主色調呈現 b. 我要求的限制是什麼？ – 過程需要是「完全免費」製作，且不需要任何程式背景- 中文內容皆須要使用「繁體字」，禁止使用中國用語 – 只能上線我提供的資訊為主，禁止自行發想、延伸內容 c. 完成後會提供我什麼？ – 每一版完成需要提供我預覽內容，電腦、手機呈現皆需要 – 每次提供皆須回報是否有資訊缺漏或錯誤，並提供可改善建議 |
提供 AI 初版的想法，確認需求之後，AI 也會告訴你接下來需要準備或提供什麼。
Step 2. 決定基本設定與視覺風格
說明網站的想法與目標後，可以開始提供基本設定需求，雖然可以請 Claude 自訂，但若有清楚說明，後續也可以減少來回溝通的過程。
★ 指令區 ★
| 【基本資訊】 – 網站標題：追韓日記 Kdrama Diary – 網站副標：(省略) 【視覺設計外觀】 – 整體風格：整體簡約、排版整齊、質感呈現 – 主色調：咖啡 / 奶茶色 / 杏色，暖色調為主 – 字型設定：思源宋體為主，辰宇落雁體為輔 – 可包含元素：紙質、信封、底片 – 排除元素：可愛風格裝飾、對比強烈色彩元素、花俏動畫 |
Step 3. 匯入資料，提供呈現內容
因為這次有使用 Notion 資料庫，所以我會匯出給 Claude，以利後續版型內容需求使用。如果沒有用 notion，可以依照自己習慣，看如何把資料及細節需求提供進行製作。
★ 指令區 ★
| 【資料來源】 – 已上傳 Notion 匯出的 CSV 檔案 – 欄位說明：（依你的 CSV 欄位列出，說明每個欄位代表什麼） – page 頁大標：韓劇劇名 – 「年度」欄位：韓劇的播出年份 – 「評分」欄位：我給的分數，0-10分，10是滿分最高 – 「主演」欄位：本齣韓劇的主演 – 「劇照」欄位：都有附上圖檔，會是統一顯示的海報照片 – 空白欄位請隱藏，不要顯示 null 或 undefined – 所有 tab 共用同一份資料，資料請整理成網頁裡一個集中的資料區塊，方便之後新增內容 【韓劇資訊呈現】 – 每部劇於網站皆以「海報」照片展示，比例固定為 2:3 – 每部劇點擊後，會以卡片形式以跳出彈跳視窗呈現 – 卡片呈現：膠片外觀，比例固定 5:3，內容須包含 CSV 檔案提供之所有欄位 – 欄位排列方式可以先自由發揮提供 |
Step 4. 決定分頁架構與呈現形式
確認要顯示的資訊之後，可以開始規劃整個網站的 layout 架構，構思預計會區分幾個區塊，或是要安排幾個 tab 來呈現 (我自己是用 tab 切換來分類內容顯示)。
★ 指令區 ★
| 【頁面架構 – tab 規劃】 tab 1：年度總覽 – tab 名稱：年度｜放映大廳 – 內容呈現：全部韓劇，依照年度排序，同年度會自成一排 (橫排，可右滑查看更多) – 分組排序：依 notion 裡面「年度總覽」同方式分組，依照放送時間從年初至年尾排列 – 呈現方式：小張海報呈現（可附圖），海報下方顯示中韓文劇名 – 點擊功能：點開指定韓劇，可查看完整韓劇小卡畫面 (上述膠片小卡外型) tab 2 ……tab 3 ……tab 4 …… (以此類推可自己追加更多 tab 或區塊) 【tab 操作方式】 – tab 列位置：水平放在頂部，標題下方，單排呈現 – 滑鼠碰到變色，點擊後可切換不同 tab 資訊顯示 – 預設開啟的 tab：年度總覽 |
如果想先確認 AI 方向是否與自己一致，也可以指令說明「先提供我 2-3 款設計的圖檔讓我選擇，不要直接提供檔案」，避免方向錯誤還要重來。
這邊提供越詳細越好，參考圖檔也建議都可以附上，做出來會越符合理想的模樣，Claude 提供程式碼檔案之後，可以用瀏覽器開啟 index.html 進行預覽，不清楚怎麼預覽也都可以直接同一串詢問 AI 操作方式。
Step 5. 確認最終呈現，準備上線
初版完成後，接著就是微調再微調，不斷和 Claude 溝通的過程，也可以參考底下「Claude 操作小技巧」查看一些溝通的方式。
直到所有的呈現都已經是你想要的內容，即可安排最終測試，準備上線。
★ 指令區 ★
| 【最終驗收確認】 – 請確認所有功能皆能正常操作，無任何 bug 產生 – 請測試實際在手機尺寸和電腦尺寸都無跑版 – 請協助提供 zip 壓縮檔，以及說明後續部署上線的流程 |
最終提供的 zip 檔案，也記得再用瀏覽器開啟 index.html，安排最後一次預覽確認，真的沒問題即可依照 AI 教學，繼續完成部署步驟。
三、Netlify 部署上線
完成最終版本的 zip 檔案之後，即可進入 Netlify 平台，開始部署上線自己的網站。也可以直接在 Claude 發問，請它提供「Netlify 完整部署上線流程」。
Step 1. 登入 Netlify 平台
前往 netlify.com，用 Google 或其他 Email 建立後台帳號。
Step 2. zip 檔解壓縮並拖曳上傳
把 Claude 提供的 zip 下載後解壓縮，會得到一個網站資料夾。登入 Netlify 後，找到拖曳上傳區域 (底下紅框說明處)，把「整個網站資料夾」直接上傳上去。
Step 3. 等待部署完成
上傳成功後，Netlify 會自動處理部署流程，通常 1 分鐘內即可完成。完成後頁面上會出現一組自動生成的網址。
格式舉例：https://random-name.netlify.app
灰字部分可以自訂，可以在平台找到調整的地方。
這個即是網站正式上線的網址，到這邊網站就是已經正式上線了！所有人都可以透過網址直接輸入、點擊開啟並進行瀏覽。
Step 4. 後續維護操作
假設網站需要不定期修改或是更新，可以在 Claude 更新新的 zip 檔案之後，回到 Netlify 平台，重新上傳新的資料夾，等待部署完成後，網站即會自動更新！
部署的步驟如果有不清楚的，也都可以截圖操作畫面上傳 Claude，AI 會再根據截圖顯示引導進行正確的操作內容。
四、Claude 操作小技巧
1. 指令需要明確，可附上參考圖
指令其實很看重溝通表達技巧，提供想法時一定要有「具體」表達：
(X) 希望用清新的顏色呈現
(O) 希望用淡藍搭配淡黃，呈現清新的色調
(X) 希望紙張可以多加一些細節
(O) 希望紙張可以加入紙質紋理，帶一點泛黃，邊框有手撕的感覺
另外，如果可以直接找到類似的風格設計參考圖，也可以直接同步上傳提供，可以更快速呈現想要的頁面，減少來回的溝通。
* 但請注意版權問題，可以參考免費素材網資料為佳
2. 指令加上「不要改動其他部分」
因為每次修改都會重新提供 index，為了避免改 A 的時候動到 B，也可以下指令的時候，多強調不要更動到其他部分，避免出現其他錯誤。
3. 先提供圖檔，再更新檔案
如果有想要調整設計呈現，可以請 AI 先單純提供圖檔，或是提供多版本設計可以選擇，定案後再實際去調整 index 檔案，也可以省下很多來回時間。
4. 每次修改項目，可列點編號
這樣修改完畢後，也方便逐項對比修改項目或是是否遺漏，若有需要二、三度調整，也可以更快速、明確表達調整需求。
5. 要求安排測試與改善建議
可以在指令中加入「實際測試無誤再回報提供」，要求每一次提供檔案之前，都會完整確認一次檔案，確保開啟後的預覽資訊都正確。
也可以時不時要求提供改善建議，或是檢查錯誤資訊，也許會有一些自己思考需求時沒有想到的盲點，或是有提供到錯字或是錯誤連結等等，可以一併改善。
七、常見問題 FAQ
1. 不會寫程式，也能用 Claude 做網站嗎？
可以！製作的過程主要是用「文字說明+圖片輔助」提供需求與調整，Claude 則會生成對應程式碼架設網站，過程不需要手動撰寫任何程式。
操作主要在於溝通是否具體且清楚，才能做出符合自己想像的內容。不懂的地方都可以原對話串直接詢問，再根據教學步驟重新操作即可。
2. 製作網站的過程，需要付費嗎？
Claude 有免費版可以使用，Netlify 部署也完全免費 (其他平台也會有免費方案)。不考慮製作時間的部分的話，免費完成整個網站製作是沒問題的！
如果有考慮以下兩個情況，才會需要花費：
a. Claude 免費版的額度真的很容易用完，恢復使用的等待時間真的很～長，需要耐心和時間都很夠用才行XD 可以考慮升級 pro 版本就很足夠了。
b. 使用 Netlify 雖然支援免費網域，但網址會是 netlify.app 結尾，如果想要更改常見的 .com 網域，會需要額外花費購買再進行綁定。
3. Claude 可以製作什麼類型的網站？
畢竟是簡易的程式碼生成，所以還是以靜態網站為主，用來做個人介紹、作品集、資料庫清單旅行行程規劃、追蹤紀錄等，偏向「展示型」的內容，基本上都可以製作。
如果會需要後端的功能，例如：會員登入、即時資料庫、購物體驗等，這些超出靜態網站的範圍，也和個資、金流相關，建議需要更專業的操作與理解比較保險。
4. 網站壞掉可以修復嗎？平常需要備份嗎？
可以！如果有網站無法打開或顯示錯誤，都可以在 Claude 重新輸出，安排修復無誤後再重新上傳，也可以截圖錯誤的地方，加速修正的速度。
也建議保留 Claude 上的對話紀錄，後續調整有過往內容也比較保險，也可以儲存最新的 zip 檔案，如果有上線錯誤，或是意外對話串消失，也都可以找回最新版本，不必從頭開始。
5. AI 製作網站需要花多少時間？
以我自己為例，我有購買 pro 版進行操作，平時都是利用零碎下班、假日時間，斷斷續續完成，最後大概花了 2 周左右的時間，也給大家參考！
因為自己是沒有需要快速上架的需求，算是抱持很輕鬆的態度在製作，如果想要快速完成，建議也可以升級 pro 版本，大概花 3-4 天我認為也是可以完成的！
以上就是我自己摸索，使用 Claude 完成網站製作的教學流程，完成後覺得真的會滿有成就感的～推薦大家都可以試試看，使用 AI 輔助完成自己的作品！
延伸閱讀：
用 Claude 做自己的網站｜AI 結合 Notion 打造韓劇紀錄網站
如何用 Notion 紀錄韓劇清單，追劇實用的 3 種模板分享
Midjourney 教學｜AI 生成韓劇劇照海報圖 + 優缺點分析
Chat GPT 角色設定｜當一日韓國編劇，用 AI 寫韓劇劇本