不會寫程式也能用 AI 做個人網站：從零到上線的完整教學

為什麼非工程師現在也能做出網站

過去要架一個個人網站，往往得先學會 HTML、CSS、JavaScript，再處理主機、資料庫與部署，光是環境設定就能勸退大半的人。但在 AI 生成工具成熟之後，情況完全不同了。你只要用自然語言描述想要的樣子，像是 ChatGPT、Claude、Gemini 這類對話式 AI 就能幫你產出完整的網頁程式碼，而 v0、Bolt、Lovable 這類專門的 AI 建站平台，甚至能直接在瀏覽器裡即時預覽並一鍵部署。

本篇的目標讀者是完全沒有程式基礎的人。我們不會要你背語法，而是把重點放在如何清楚描述需求、如何把 AI 產出的成果變成一個真的能被別人打開的網址。讀完之後，你會有一個可以放進履歷、社群個人檔案或名片上的個人網站。

第一步：先想清楚網站要做什麼

動手之前，先花十分鐘回答三個問題，這會決定後面所有的提示詞品質。

第一，這個網站給誰看。是給潛在雇主看的作品集，還是給客戶看的接案介紹，或只是記錄興趣的部落格。對象不同，內容重點與語氣就不同。

第二，網站需要哪些區塊。最常見的個人網站包含四到五個區塊：首頁自我介紹、關於我、作品或經歷、聯絡方式。先在紙上或記事本列出來，這份清單就是你交給 AI 的骨架。

第三，你希望的風格。是簡潔的黑白極簡，還是活潑的彩色，或是專業的商務感。你可以直接參考喜歡的網站，把它的網址或描述交給 AI 當範例。

把這三題的答案寫成一段文字，就是你的第一版需求說明。

第二步：選一個適合新手的工具

以下三類工具都不需要你自己安裝開發環境，適合零基礎者。

工具類型	代表工具	特點	適合對象
對話式 AI	ChatGPT、Claude、Gemini	產出程式碼，需自行貼到平台部署	想理解過程的人
AI 建站平台	v0、Bolt、Lovable	即時預覽，內建部署	想最快看到成果的人
傳統無程式平台加 AI	Wix、Framer	拖拉為主，AI 輔助生成	完全不想碰程式碼的人

如果你的目標是最快看到一個能打開的網址，建議從 AI 建站平台入手，例如 Bolt 或 Lovable，因為它們把生成、預覽、部署整合在同一個畫面。如果你想順便理解網站是怎麼組成的，用 Claude 或 ChatGPT 產出單一 HTML 檔案，會是很好的學習方式。

第三步：寫出好的提示詞

提示詞的品質，直接決定 AI 產出的品質。新手最常見的錯誤是只寫「幫我做一個個人網站」，這種模糊的需求只會得到模板化的結果。好的提示詞應該包含身分、內容、風格與技術限制四個部分。

以下是一個可以直接套用的範例，你只要把括號內的內容換成自己的資訊：

「請幫我做一個個人作品集網站，使用單一 HTML 檔案，內含 CSS 與 JavaScript，不要依賴外部框架。我是一名（平面設計師），需要以下區塊：首頁要有我的名字（王小明）與一句標語（用設計解決問題）；關於我區塊寫三段自我介紹；作品區塊用網格排列，先放六個佔位方塊；聯絡區塊放 Email 與社群連結。風格請走簡潔的黑白極簡，字體用無襯線體，整體要能在手機上正常顯示。」

這段提示詞明確給了 AI 檔案格式、身分、每個區塊的內容與風格，產出的成品會遠比模糊需求好用。拿到結果後，你可以繼續用對話微調，例如「把作品區塊改成三欄」或「標題字放大一點，加一點行距」。

第四步：預覽與逐步修改

拿到程式碼後，最重要的觀念是一次只改一件事。如果你一次要求 AI 改十個地方，往往會發現它改壞了其中幾個，而你很難判斷是哪一次改動出的問題。

正確的做法是：先把整份程式碼存成一個檔案（例如 index.html），用瀏覽器打開看看樣子，然後針對最想改的一個點，回到對話請 AI 修改，再重新預覽。這樣即使出錯，你也知道是剛剛那一次改動造成的，可以請 AI 還原。

常見的微調需求包括：調整顏色、換字體、改變區塊順序、讓圖片變成可點擊、加上滑動時的淡入動畫。這些都可以用白話描述交給 AI。

第五步：讓網站真正上線

做好的檔案還躺在你的電腦裡，別人打不開，這一步要把它放到網路上。對新手最友善的免費部署服務有以下幾種。

第一種是 Netlify 或 Vercel 的拖拉部署。你只要把 HTML 檔案所在的資料夾拖進它的網頁，幾秒後就會得到一個網址。第二種是 GitHub Pages，適合願意花一點時間學基本操作的人，好處是完全免費且穩定。第三種是 AI 建站平台內建的部署按鈕，例如 Bolt 或 Lovable，做完直接點發布即可。

上線後你會拿到一個系統給的網址，通常結尾是平台的網域。如果你想要更專業的自訂網域，例如 yourname.com，可以到網域註冊商購買，一年費用大約新台幣三百到六百元，再依照部署平台的說明把網域指向你的網站即可。

常見錯誤與排除方法

第一個常見問題是圖片不顯示。原因通常是圖片路徑錯誤，或是你把圖片放在別的資料夾卻沒一起上傳。解法是把圖片和 HTML 檔案放在同一個資料夾，並確認檔名大小寫一致。

第二個問題是手機上版面跑掉。這是因為沒有做響應式設計，你可以直接告訴 AI「請確保網站在手機螢幕上不會超出邊界，圖片與文字要自動縮放」。

第三個問題是改著改著整份程式碼變亂。這幾乎都是因為一次改太多。養成每次只改一項、隨時保留一份可運作版本的習慣，就能避免。

第四個問題是把敏感資訊寫進網頁。個人網站不需要放身分證字號、完整地址等資訊，聯絡方式建議只放 Email 或社群連結。

小結與後續

用 AI 做個人網站的核心，不是學會寫程式，而是學會清楚描述需求、一次改一件事、以及善用免費部署服務把成果上線。當你完成第一個版本後，可以再逐步加上部落格文章、作品的詳細頁面，或串接聯絡表單。整個過程你會發現，AI 把技術門檻降到很低，剩下的關鍵反而是你對自己想呈現什麼的想法夠不夠清楚。