如何用 AI 建置網站：從第一則提示到上線網站

用 AI 建置網站，就是先寫下網站的用途與需要哪些頁面，用幾句白話文描述給 AI 網站或 app 建置工具，讓它產生第一個版本，你可以在即時預覽中看到。接著修正文案、在手機上檢查、加入搜尋引擎需要的基本設定，然後發布到網域。大多數小型網站，例如企業網站、作品集、著陸頁或簡單的部落格，都可以在一次作業中從構想到上線。

你要做哪一種網站？

「網站」涵蓋的範圍很廣，你選擇的類型會改變你要提出的需求：

如果你的網站屬於最後一列，你其實是在做一個帶有行銷前台的網頁應用程式。這沒問題，AI app 建置工具兩種都能處理，但應該把 app 的部分另外規劃。我們的 如何用 AI 建置 app 指南有相關說明。

AI 網站建置工具、範本與 AI app 建置工具的比較

常見的路線有三種，各自適合不同的人。

• 附 AI 功能的範本式建置工具（如 Wix、Squarespace、Framer 等）。你從設計好的範本開始，用視覺方式編輯；AI 協助撰寫文字或建議版面。如果你想要經過驗證的設計、視覺化編輯器，以及部落格或預約元件等內建功能，這類工具很適合。
• AI app 建置工具（Mythex、Lovable、Bolt 等）。你在聊天中描述網站，AI 從零開始撰寫程式碼，然後在即時預覽中執行。如果你想要量身打造的網站、想用說話而非拖曳方塊來修改，或預期之後會加入 app 功能，這類工具很適合。
• 手工或代理商製作的網站。 對於內容流程複雜、品牌系統嚴謹，或每個頁面都需要法務審核的大型網站，仍是最合適的做法。

若想並排比較特定工具，請參考 最佳 AI 網站建置工具。

步驟 1：在一頁上規劃網站

開啟任何工具之前，先回答以下五個問題。大約十分鐘，能省下好幾個小時的來回溝通：

1. 造訪者是誰，他們應該做什麼？ 「需要報價的在地屋主」是一個明確的規劃。「所有人」則不是。
2. 有哪些頁面？ 把它們列出來。大多數小型網站需要四到五個頁面。
3. 每個頁面要放什麼？ 每頁寫一兩行即可，例如「服務：三項服務，附簡短說明與起始價格」。
4. 哪些資訊是真實的？ 整理你實際的事業名稱、服務、價格、地址、營業時間、照片，以及你獲准使用的推薦語。你沒提供的部分，AI 會自行填入佔位內容。
5. 希望呈現什麼感覺？ 兩到三個詞（「平靜、乾淨、大量留白」），或一個你喜歡的網站連結。

步驟 2：撰寫第一則提示

好的第一則提示會描述事業與頁面，而不是程式碼：

為 Harbor Physio 建置一個網站，這是一家位於沿海小鎮的物理治療診所。頁面包括：首頁（主視覺含「預約評估」按鈕、三個選擇我們的理由、簡短的推薦語區塊）、服務（運動傷害、背痛、術後復健，每項附一段說明與療程時長）、關於我們（兩位物理治療師，照片以佔位圖代替），以及聯絡（地址、營業時間、電話與聯絡表單）。風格平靜乾淨，搭配柔和的藍色重點色。以手機優先設計。請使用聽起來真實的文案，不要使用 lorem ipsum，也不要捏造評價或獎項。

最後一句很重要。AI 工具很樂意用虛構的推薦語、「10,000 位客戶信賴」的標語或假獎項來填補空白。請告訴它不要這樣做，而且無論如何都要自己檢查。

如果你已經有 logo、品牌色或你喜歡的網站截圖，可以一併附上。更多有效的寫法請參考 如何為 AI app 建置工具撰寫提示。

步驟 3：像訪客一樣檢視

第一個版本出現時，不要一開始就調整字型。請以訪客的角度逐步瀏覽：

• 進站五秒內，你能看出這個事業在做什麼嗎？
• 主要按鈕是否明顯，點擊後會到達正確的地方？
• 選單中的每個頁面都存在，且連結正確嗎？
• 切換到手機大小的預覽。大多數訪客會用手機瀏覽，擁擠的文字與過大的圖片都會在那裡顯現出來。

然後一次只改一件事。「把主標題縮短，並把電話號碼放到頁首」會比「讓它更好」得到更好的結果。如果某個修改出錯，請還原到較早的版本，而不是試圖用對話補救。

步驟 4：用真實內容取代佔位內容

第一版草稿會有佔位圖片與通用的句子。請逐頁處理：

• 文案。 貼上你真實的服務說明、價格與營業時間。你可以請 AI 幫忙精簡，但事實必須是你自己的。
• 圖片。 盡可能上傳你自己的照片。背景使用圖庫照片沒問題；但你的作品、團隊或營業場所的真實照片更能建立信任。
• 證明。 只使用你能佐證的推薦語、標誌與數字。
• 法律頁面。 如果你透過表單收集任何個人資料，通常需要隱私權政策。你可以請 AI 產生一頁，然後依你營運所在地的規定進行檢查。產生的政策只是起點，不是法律意見。

步驟 5：表單、預約與其他「app」部分

聯絡表單需要一個地方來接收送出的內容。選項由簡單到複雜如下：

如果你需要真正的預約或付款功能，請參考 如何建置預約 app 與 如何為你的 app 加入付款功能。

步驟 6：分享前的 SEO 基本功

AI 可以寫出很漂亮的頁面，但搜尋引擎可能幾乎看不懂。上線前，請要求：

• 每個頁面都有獨特的標題與 meta 描述
• 每頁只有一個清楚的主標題，並搭配合理的副標題
• 圖片有描述性的替代文字（alt text）
• Open Graph 標籤，讓連結在社群媒體或訊息中分享時顯示正確
• 網站地圖與 robots 檔案

有一個技術重點值得了解。許多 AI 建置工具會產生單頁應用程式，也就是由瀏覽器透過 JavaScript 組出頁面。搜尋引擎可以索引這類頁面，但對於需要排名的頁面，靜態或伺服器端渲染的 HTML 更可靠。如果搜尋流量很重要，請要求靜態網站，或使用在伺服器上渲染頁面的框架。我們的 AI 建置網站的 SEO 指南有更深入的說明。

步驟 7：發布並連接網域

發布會把預覽變成公開網站。大多數建置工具會先提供免費子網域，適合測試並分享給朋友。如果是營業用途，請連接你自己的網域：你可以透過建置工具購買網域，或把你已擁有的網域用 DNS 記錄指向該網站。如何連接自訂網域 會說明 DNS 的部分。

上線後，請設定免費的 Google Search Console 帳號，以便查看你的頁面是否已被索引。

常見錯誤

• 一次要求全部。 在一則提示中要求十二個頁面、一個部落格、一間商店與一個會員區，結果每個部分都會很淺。請先建置核心頁面。
• 發布佔位文字。 上線前，請在每個頁面搜尋「Lorem」、「Your Company」以及虛構的數字。
• 忽略手機版。 每個頁面都要用手機寬度檢查，而不只是首頁。
• 行動呼籲模糊。 每個頁面都應讓下一步很明顯：致電、預約、購買或聯絡我們。
• 忘了誰要更新。 如果之後會有其他人每週編輯網站，請確認他們做得到：可以透過同一個建置工具用聊天修改，或選擇有視覺化編輯器的工具。

費用

用 AI 建置的簡單網站，通常比專門設計與開發的網站便宜許多。需要規劃的持續費用包括：

• 建置工具。 大多數有可供試用的免費方案，以及用於自訂網域與更多用量的付費方案。
• 託管。 有時包含在方案中，有時依用量計費。
• 網域名稱。 每年的註冊費，依網域名稱與副檔名而定。
• 額外費用。 用於表單通知的寄信服務，或用於預約與電子報的付費工具。

什麼時候範本式建置工具才是更好的選擇

請誠實評估你的需求。如果你想要傳統的宣傳型網站、讓不懂技術的同事使用的視覺化編輯器、具排程功能的內建部落格，或是由平台代為處理庫存與運送的線上商店，那麼範本式網站建置工具或 Shopify 等專門平台，可能比任何 AI 生成的程式碼更適合你。當網站很特殊、經常變動，或是通往某個行為像 app 之服務的入口時，AI app 建置工具的優勢才會明顯。

用 Mythex 建置

Mythex 是一套 AI app 建置工具，而網站是人們用它最常建置的東西之一。你描述網站，它會在即時預覽中建置（包括手機大小的檢視），然後發布到 yourname.mythex.app 位址；Pro 方案中，你可以在 Mythex 購買網域，或連接你擁有的網域。如果搜尋排名很重要，你可以要求一個單純的靜態網站，而不是預設的 React app。請參考 靜態網站 與 已發布 app 的 SEO 文件。

Mythex 不是內容管理系統（CMS）：行銷團隊沒有獨立的編輯登入介面，因此修改要透過與建置工具聊天，或直接編輯程式碼。若要略過空白頁面，可以從 網站範本 或 作品集範本 開始，每個範本都會開啟一個已填入起始提示的新專案。

常見問題