搜尋「AI 寫網頁」「用 AI 整網站」「Vibe Coding」的香港讀者，多半不是要學完整前端工程，而是想在有限時間與預算下，先做出一頁能說明服務、能接收查詢的網站。本文以實際步驟為主，說明零基礎如何開工；產品介面會變動，請以你使用的工具當日說明為準（查閱日期：2026-10-02）。
若你想先建立心智模型，可併讀〈零 Code 用 AI 整網站：香港人 Vibe Coding 入門路線〉；需要帶作品實操，可參考 AI Vibe Coding Express 寫網實戰 或 全部實戰課程。
開始前先釐清：你要的是「可上線落地頁」，還是「可長期維護的品牌站」
| 目標 | 適合先做什麼 | AI 主要幫手 |
|---|---|---|
| 兩週內要有頁面收查詢 | 單頁或三頁落地頁（首頁／服務／聯絡） | 大綱、文案、區塊排版草稿 |
| 已有品牌，要換站或重建 | 資訊架構＋舊站內容盤點＋轉向計畫 | 內容改寫、頁面清單、對照表 |
| 要長期排名與 GEO 可見度 | 結構、內容深度、案例與來源引用 | 草稿加速；策略仍要人定 |
診所／專業服務站的內容與轉換邏輯，可參考個案〈中小企診所網站怎麼做好？〉。搜尋與 AI 答案可見度見〈GEO 是什麼〉。
步驟一：用一句話寫死網站目標（15 分鐘）
- 寫下目標讀者（例如：九龍區中小企負責人、想學職場 AI 的上班族）。
- 寫下唯一主要行動（例如：WhatsApp 查詢、填表預約、報名免費講座）。
- 寫下三個必須說清楚的承諾（服務範圍、服務地區、如何開始合作）。
- 寫下不做什麼（避免一頁塞滿所有服務而無人點擊）。
可複製提示：你是香港品牌策略顧問。請根據以下業務描述，輸出：目標讀者一段、主 CTA 一句、三個必須說清的賣點、兩個常見誤解、首頁應避免的內容。限制：不捏造獎項與數據；未知事項標「待核對」。業務描述：［貼上］
步驟二：產出頁面大綱與資訊架構（30–45 分鐘）
請 AI 先交頁面清單，不要直接出整站 HTML。
- 建議最小集合：首頁、服務說明、關於／師資或團隊、常見問題、聯絡／報名。
- 每一頁寫清：H1、三至五個 H2、主 CTA、需要的圖（實拍／示意）。
- 把「價格、條款、地址、營業時間」列成事實來源表，只准從你提供的資料填入。
可複製提示：根據步驟一的目標，為香港中小企網站產出資訊架構。輸出表格：頁面名稱｜URL 建議 slug｜H1｜H2 列表｜主 CTA｜需要的真實資料欄位。限制：最多五頁；不要發明客戶評價與數據。
步驟三：分頁寫文案（書面語，可覆核）（60–90 分鐘）
- 一次只寫一頁；完成覆核再下一頁。
- 要求輸出繁體中文書面語，避免極簡口號與含糊形容。
- 每段標註「可直接上稿」或「待核對」。
- 聯絡頁單獨覆核：電話、電郵、WhatsApp、地址、地圖連結是否與實體一致。
可複製提示：角色：香港網站文案編輯。任務：根據大綱寫「服務頁」全文。限制：完整語意、書面語；不寫「全港第一」等無法核證句；價格與時數只使用我提供的數字。輸出：H1、導言、各 H2 正文、FAQ 四則、頁尾 CTA。我提供的事實：［貼上］
提示詞結構可對照〈職場提示詞公式：角色 × 任務 × 限制 × 輸出格式〉。
步驟四：用 AI 輔助搭建頁面（工具可互換）
實務上常見三條路（選一條走完，不要同時開三套半成品）：
- 對話式建站／區塊生成工具：適合快速落地頁；上線前必須自己測手機版與表單。
- Cursor／程式助理 + 範本主題：適合愿意改一點結構、日後要自己維護的人；見課程 Vibe Coding Express。
- 現有 WordPress／品牌主題 + AI 只寫內容：適合已有主機與網域；AI 負責文案與版面說明，人負責上稿。
無論哪一條路，都請 AI 額外輸出一份「區塊清單」：導覽、主視覺、服務三欄、社會證明、流程、FAQ、頁尾。缺社會證明就先留位，不要用假評價填滿。
步驟五：接好聯絡與轉換（不可跳過）
- 主按鈕只保留一個主行動（例如「WhatsApp 查詢課程」）。
- 表單欄位越少越好：姓名、聯絡方法、想解決的問題。
- 設定自動回覆或辦公時間說明，避免訪客以為系統壞掉。
- 用自己手機與另一個電郵各測一次送出。
步驟六：上線前檢查清單（列印後逐項剔）
- 網域 HTTPS 正常；首頁與內頁沒有混用 http 資源。
- 每個頁面 title、meta description 完整語意（不要極簡縮寫）。
- 圖片有替代文字；主圖檔案勿過大導致手機載入緩慢。
- 導覽在手機可打開；按鈕可點、不被鍵盤擋住。
robots.txt未誤擋公開頁；需要被搜尋時，確認未勾選「勸阻搜尋引擎」。- 提交或準備好 XML sitemap，並在日後於 Search Console 提交。
- 版權：Logo、照片、字型、音樂是否有權使用；AI 圖需標示用途與風險。
步驟七：上線後 14 日內只做三件事
- 每週看一次查詢來源：哪個 CTA 有人按、哪一頁跳出高。
- 補一篇真實問題解答：把最多人問的問題寫進 FAQ 或學習文章。
- 再談流量：先有穩定轉換，再擴大 SEO／GEO／廣告；見 線上學習 與〈GEO 與新興行業〉。
常見失敗原因（請對照自查）
| 現象 | 常見原因 | 修正 |
|---|---|---|
| 頁面很長但無人聯絡 | 主 CTA 不清、服務範圍含糊 | 回到步驟一，重寫唯一行動 |
| AI 文案「很專業」但不像你 | 未提供真實服務邊界與案例 | 補事實來源表，重跑步驟三 |
| 手機版按鈕按不到 | 只在桌面預覽 | 步驟五、六用真機重測 |
| 上線後完全沒有收錄 | noindex、sitemap 未開、內容過薄 | 檢查索引設定與 sitemap |
何時應該報實戰課，而不是繼續自己試
- 你需要在限期內交出可展示作品（面試、提案、客戶交付）。
- 你要接表單、付款說明、多頁結構，而不是單頁傳單。
- 你希望有導師覆核提示詞、結構與上線檢查，而不是只靠對話碰運氣。
可先瀏覽 寫網實戰課、香港 ChatGPT 課程，或查詢 企業 AI 培訓。內容產能與網站互相配合時，可接讀〈用 AI 管理社交媒體的每週步驟〉。
常見問題（FAQ）
完全不懂程式，可以用 AI 寫網頁嗎？
可以先完成「可上線、可聯絡」的落地頁。關鍵是把目標、事實與檢查清單做清楚，而不是追求一次生成完美程式。長期維護或客製功能，再考慮課程或工程支援。
AI 寫出的網站會不會與別人撞款？
版面範本相近很常見。差異應來自你的服務邊界、真實案例、照片與聯絡流程。不要用假評價或虛構獎項製造「獨特感」。
要不要一開始就做網店與會員系統？
若你的主目標是收查詢，先做清楚服務與聯絡。電商與會員會增加金流、私隱與維運成本，應在有穩定需求後再擴。
寫好網站後，社交媒體要怎麼配合？
用同一套服務承諾與主 CTA，再按平台改長度與格式。完整每週流程見〈AI 管理社交媒體實際步驟〉。
結語：步驟比工具名稱重要
用 AI 寫網頁的勝負，不在於你追了哪個新模型，而在於你有沒有把目標、事實、轉換、上線檢查做成可重複流程。先交一頁能聯絡的站，再迭代視覺與內容深度。
延伸閱讀：〈Vibe Coding 入門路線〉、〈診所網站個案〉；工具總覽見 AI 工具箱。
