想做一個自己的作品網站，卻不知道該從哪裡開始？你不必先學會所有程式。先把「網站給誰看、想放什麼、希望訪客做什麼」說清楚，再請 AI 陪你規劃、製作、檢查，最後選一個發布平台把網站放上網。
這篇用簡單的個人作品網站當例子。ChatGPT、Claude、HERMES 等 AI 助理，或能建立網站檔案的 AI 開發工具，都可以作為起點；能不能直接做出檔案、預覽或發布，要看你使用的工具功能。以下流程著重在做法，不限定某一款 AI 或發布平台。
文章流程
- 先想清楚：網站要替你做什麼
先看懂網站架構和 UI
- 請 AI 先規劃，再開始製作
- 預覽、檢查，再一次改一件事
- 選適合的平台發布
公開前做安全小檢查
第一步｜先想清楚：網站要替你做什麼
先不用想技術。把網站想成一間小店：招牌讓人知道你是誰，展示區讓人看見作品，聯絡入口讓有興趣的人找到你。先完成一頁介紹、作品與聯絡方式，通常比一開始就做會員、付款和資料管理容易得多。
*流程示意：先完成小而清楚的網站，再逐步增加功能。這不是特定平台的操作畫面。*
開始前，準備四樣東西就好：你的名稱、一兩句介紹、想展示的作品，以及訪客可以使用的公開聯絡方式。還沒準備好的地方，先標示「待補」；不要請 AI 幫你編客戶、評價或成果。
先看懂｜網站架構和 UI 是什麼？
「架構」是內容怎麼分區、訪客先看什麼再看什麼；「UI」是訪客看到和操作的畫面，例如文字、圖片、按鈕和選單。個人作品網站可以先用這個順序：
- 導覽：讓訪客快速找到作品、關於我和聯絡方式。
- 首屏：一眼說清楚你是誰、提供什麼，並給出下一步。
- 作品與聯絡：展示真實作品，放上可用的聯絡入口。
*架構與 UI 概念圖：先看懂區塊順序，再請 AI 按自己的內容安排版面。*
網站還有幾個常見部分，可以把它想成不同工作區：
- 前端｜訪客看到的畫面：文字、圖片、按鈕，以及點擊後的反應。
- 後端｜幕後處理：例如登入、接收訂單、檢查使用者權限。
- 資料庫｜需要保存的資料：例如會員資料、訂單或文章內容。
如果第一版只是介紹自己、展示作品、連到公開聯絡方式，通常可以先不做後端和資料庫。若要收表單、登入或付款，就要再規劃資料如何保存、權限如何確認與安全如何維護。
*桌機與手機版面概念示意；畫面內容為生成的網站模型，不是實際建站平台截圖。*
看 UI 時先問四件事：重點明不明顯？文字好不好讀？下一步找不找得到？手機上要不要左右拖動？圖片也要保持原本比例，避免被拉長或任意裁掉重要內容。
第二步｜請 AI 先規劃，再開始製作
先把方括號換成自己的資料，貼給你正在使用的 AI。這一輪先讓它整理需求和版面，看看方向合不合適，再請它製作。
*準備資料與選方向的流程示意。*
提示詞 1｜請 AI 幫你整理網站方向
我想做一個給【誰】看的【網站類型】，希望訪客看完後【做什麼】。
我的名稱：【填寫】
簡短介紹：【填寫】
要展示的作品：【填寫；沒有就寫待補】
聯絡方式：【填入訪客能開啟的公開連結；沒有就寫待補】
請先用白話整理網站需要哪些區塊、每個區塊放什麼，
並提出一個適合桌機與手機閱讀的版面方向。
資料不足時請標示待補，不要替我編造經歷、作品或成果。看完規劃後，你可以挑一個方向，再請 AI 做出網站。若你的 AI 能建立檔案，告訴它存在哪個新資料夾；若它只能回覆程式碼，就請它說明如何存成可預覽的檔案。不同工具的交付方式可能不一樣。
提示詞 2｜請 AI 做出第一版
請依照剛才確認的方向，製作一頁式個人作品網站。
先包含：自我介紹、作品展示、聯絡入口。
使用清楚的標題和區塊，桌機與手機都要容易閱讀。
圖片保持比例；聯絡方式使用我提供的真實連結。
沒有提供的資料請標示待補，不要編造內容。
第一版先不加入登入、付款或保存個人資料的功能。
完成後請告訴我：你實際交付了什麼、我要在哪裡預覽，
以及哪些部分尚未實際測試。第三步｜預覽、檢查，再一次改一件事
拿到第一版後，先打開預覽，扮演第一次來訪的客人：看不看得懂你是誰？找不找得到作品？聯絡按鈕能不能開啟？再用手機或縮窄瀏覽器確認文字、圖片和按鈕沒有擠在一起。
*先看、再點、記下具體問題，最後請 AI 修改並重新確認。*
修改時不要只說「更漂亮一點」。指出位置、目前問題和希望看到的結果，例如：「手機版作品區的圖片被拉長了，請只修正圖片比例，其他區塊不要更動。」
提示詞 3｜把問題說清楚
我想修改一個地方。
位置：【例如：手機版的作品區】
目前問題：【例如：圖片看起來被拉長】
希望改成：【例如：保留原比例，完整看見作品】
請只修改這個問題，其他區塊和文字不要改。
改完後請告訴我如何重新預覽，以及我應該檢查什麼。AI 說「已測試」不等於它真的打開過你的網站。請確認它有沒有使用瀏覽器或測試工具；若沒有，就照清單自己點一次。檢查結果應分清楚「實際測過」和「還沒確認」。
第四步｜選一個適合的平台發布
發布平台就像替網站找一個能讓別人連進來的網路地址。你不一定要用 Netlify；先看 AI 交付的是單純網站檔案、GitHub 專案，還是需要建置的完整專案，再選平台。
- Netlify：可發布靜態網站；依平台提供的方式上傳檔案或連接程式碼專案。
- Cloudflare Pages：支援靜態網站，也提供直接上傳與 Git 整合等方式；選了某種建立方式後，部分設定不能直接互換。
- GitHub Pages：適合放在 GitHub 儲存庫中的靜態網站；需要了解檔案放置位置和發布來源設定。
- Vercel：可連接程式碼儲存庫部署，也支援不同的網頁專案；若 AI 交付的是框架專案，要依專案設定建置。
這些是可研究的選項，不代表每一種都適合每個人或每種網站。發布前要確認平台支援你的檔案、公開網址能正常開啟，手機也看得清楚。免費方案、額度與操作介面可能調整，請以各平台當時的官方說明為準。
*發布流程概念圖；各平台實際按鈕和上傳方式不同。*
提示詞 4｜請 AI 依你選的平台帶路
我的網站檔案目前在【填入資料夾或專案位置】。
我想使用【Netlify／Cloudflare Pages／GitHub Pages／Vercel／其他】發布。
請先確認這個平台目前支援我的專案交付方式，
再用新手看得懂的步驟帶我操作。
每一步請說明我要看到什麼，並提醒我如何確認公開網址真的能開。
如果你不能查看我的平台帳戶或實際操作，請明確告訴我。
不要宣稱網站已發布，除非已看到部署完成和可開啟的公開網址。公開前｜做三個安全小檢查
- 先只展示公開內容；不要把身分證、私人電話或不打算公開的資料放進網站。
- 密碼、API 金鑰等私密資料不要放在會送到瀏覽器的網頁程式碼裡。
- 如果網站要登入、收集資料或付款，先確認資料由誰保存、誰能讀取，以及權限在哪裡檢查；不要只把管理按鈕藏起來就當作安全。
第一次練習，先完成一個能介紹自己、展示真實作品、連到公開聯絡方式的一頁網站。等你真的需要收資料或管理內容，再另外規劃後端與資料庫，會比較容易看懂每個部分在做什麼。
你可以先記住這條路
整理內容 → 請 AI 規劃 → 做出第一版 → 預覽與修改 → 選平台發布 → 用公開網址驗收。
AI 可以幫你把第一版做出來，但你仍要確認作品、文字和連結正確，也要親自看過發布後的畫面。先完成一頁，再逐步加功能；小步驗收，比一開始要求 AI 做出完整的大型網站可靠。
官方延伸閱讀（可到官方文件站搜尋標題）
- OpenAI Developers：Prompt engineering（developers.openai.com）
- MDN：伺服器端入門（developer.mozilla.org）
- W3C WAI：圖片教學（w3.org）
- Cloudflare Pages：Direct Upload（developers.cloudflare.com）
- GitHub Pages：Quickstart（docs.github.com）
- Vercel：部署文件（vercel.com）
- Netlify：Create Deploys（docs.netlify.com）
本文的封面、裝置畫面與流程圖是為教學製作的概念示意，不是平台實際操作截圖。文章說明網站入門的通用概念；各家 AI 與發布平台的功能、介面和方案可能不同，請以官方文件為準。