AI網頁做得出來卻無法上線？工具、製作步驟與網址主機的準備

現在要用 AI「做出一個網頁畫面」，已經沒有以前那麼困難。

但真正開始使用之後，下一連串問題才會出現：

• 網址要去哪裡買？
• 網站要放在哪一台主機？
• 怎麼把自己的網域接上去？
• Google 搜尋得到嗎？
• 下個月要換價格、加產品，行銷人員自己改得了嗎？
• 網站有表單、會員甚至金流時，資料安全又該怎麼處理？

愛貝斯深耕網頁設計領域超過 18 年，服務超過 1,500 家上市櫃公司與中小企業，我們自己的設計與開發團隊也持續把 AI 導入網站製作流程。

實際使用下來，我們有一個很深的感受：AI 會加速成果，也可能加速錯誤。

這篇文章會照實際建站順序帶你走一遍：AI 網頁設計有哪些工具、如何規劃與製作網站、網址與主機怎麼準備、DNS 與 SSL 怎麼設定，以及網站正式上線後最容易遇到哪些維護問題。

AI網頁現在能做到什麼程度？

AI產出的不一定只是HTML，而是一套網站程式

早期用 AI 製作網頁，常見的方式是直接產生 HTML、CSS 與 JavaScript。

這三者分別負責：

• HTML：網站內容與結構，例如標題、段落、圖片、按鈕。
• CSS：網站視覺，例如顏色、字體、間距、版面與手機版。
• JavaScript：網站互動，例如選單、輪播、表單檢查與動畫。

但現在的 AI 建站工具已經進一步發展。

除了單純的 HTML 網頁，也可能直接建立 React、Next.js、Vue、Vite 等網站專案，甚至串接 API、資料庫、會員登入與 Server Functions。

哪些網站適合用AI做？哪些要更謹慎？

AI 網頁很適合需求單純、內容固定，而且網站生命週期較短的情境。

活動頁與一頁式網站

短期活動、產品發表、廣告 Landing Page 等，內容上線後不會頻繁異動，很適合利用 AI 快速製作。

個人作品集與履歷頁

頁數少、內容由自己管理，而且使用者願意自行調整程式或重新發布，AI 可以大幅降低製作門檻。

提案與網站Prototype

需要先快速做出網站方向，讓主管、客戶或團隊確認資訊架構與視覺概念時，AI 非常適合拿來快速驗證。

相對來說，以下網站就不建議只考慮「AI 能不能做出來」。

需要頻繁更新的企業官網

如果最新消息、產品、案例、人才招募等內容每週都需要修改，真正重要的通常不是第一次網站怎麼產生，而是：

未來誰來維護？

如果每次改一張圖片、改一個電話，都必須重新找工程師或開啟 AI 修改程式，長期維護成本反而可能更高。

有會員、購物車與金流的網站

只要開始涉及會員資料、個人資料、訂單、付款、權限與資料庫，就不能只看「功能跑不跑得動」。

AI網頁設計會用到的三類工具

現在 AI 建站工具非常多，而且產品功能更新速度很快。

與其只記工具名稱，更重要的是先知道它們大致可以分成哪幾類，以及每一類適合什麼使用者。

對話生成型：用文字直接產生網站

這一類工具在瀏覽器裡就能使用，你用文字描述需求，它直接生成可以預覽的網頁，多數還能一鍵發布到它自己的主機。

• v0：Vercel 推出的 AI 網頁與應用程式生成工具，適合前端介面與 Web App 雛形。
• Bolt：可以透過對話建立、修改並部署 Web 專案，適合想快速上線的小型專案。
• Lovable：以文字描述建立網站與 Web App，適合快速產出 Prototype。
• ChatGPT Sites：直接在 ChatGPT 對話裡描述需求，就能生成、託管並發布網站，適合輕量網站與小工具（需付費方案）。
• Gemini Canvas：Gemini 裡的互動式工作區，用對話生成網頁並即時預覽，適合快速做出網頁雛形。
• Manus：一次對話完成產業調查、設計、寫程式到部署上線，官方表示可做出含資料庫、會員與金流的全端網站。

這類工具最大的優勢，就是：

不用先會寫程式，也能快速把想法變成畫面。

而且現在許多工具已經整合網站發布與託管功能，因此從「輸入需求」到「得到一個可以分享的網址」，時間可能只需要幾分鐘。

不過要注意，真正耗額度的往往不是第一次生成，而是後面的：

「這裡往左一點。」
「按鈕換個顏色。」
「手機版跑掉了。」
「上一版比較好，可以恢復嗎？」

修改次數增加之後，免費額度通常很快就會消耗完。

設計轉程式型：讓AI協助把設計變成網站

如果你已經有設計稿，或團隊裡有設計師，可以用Figma Make 這類工具，把設計概念轉成前端程式碼。
愛貝斯的團隊實際用過，它能生成 React 程式碼，CSS 結構也算乾淨。

這一類的優點是視覺由人決定，AI 只負責「把畫好的東西變成程式」，成品比較不會有一看就知道是 AI 做的樣板感。

🔗 延伸閱讀：如何利用 AI 改善網頁設計公司團隊協作與效率

程式助理型：直接讀取並修改網站專案

第三類是給會看程式碼的人用的，AI 直接在你的專案資料夾裡讀檔、改檔。

• Cursor
• Claude Code

這類 AI 不只是回答「這段程式怎麼寫」，而是可以直接理解整個專案架構、搜尋檔案、修改程式，甚至協助除錯與重構。

優點是自由度最高。

前端、後端、API、資料庫、既有系統，都能納入同一套開發流程。
但相對地，使用者必須有能力判斷：AI 改的是不是對的？
因為 AI 能快速改十個檔案，也可能快速把錯誤寫進十個檔案。

三類 AI網頁設計工具的對照表

AI 工具的功能、額度與價格異動非常頻繁，因此實際訂閱前，仍建議再次確認各工具官方網站最新方案。

用AI建立網站的五個步驟

不管使用哪一類 AI 工具，真正影響成品品質的，通常不是你選了哪一個模型，而是：

你有沒有先把網站想清楚。

第一步：先整理網站架構，不要直接叫AI開始畫

最常見的做法是直接輸入：「幫我做一個企業官網。」
問題是，「企業官網」可以有幾百種長相。
當需求沒有被定義，AI 只能自己補空白。

最後得到的通常不是你真正需要的網站，而是 AI 對「一般企業網站」的平均想像。
因此，在開始之前，至少先整理：

• 網站有哪些頁面？
• 每一頁有哪些區塊？
• 最重要的服務或產品是什麼？
• 希望使用者進站後先看到什麼？
• 品牌主色與視覺風格是什麼？
• 有沒有參考網站？
• 文案、照片與產品資料準備好了嗎？

如果資料還沒完成，也可以先標示「待補」，不要讓 AI 自己虛構正式內容。

第二步：把提示詞拆成角色、任務、上下文、限制與輸出格式

愛貝斯工程團隊在用AI開發時，會把提示詞拆成幾個區塊：角色、任務、上下文、限制、輸出格式。

• 角色：你是資深前端工程師，熟悉響應式網頁。
• 任務：製作牙醫診所的首頁。
• 上下文：客群是 30 到 50 歲的家長，主色為淺藍色，區塊依序是主視覺、診療項目、醫師介紹、門診時間、地圖。
• 限制：使用語意化 HTML 標籤，手機版優先，不要使用外部付費素材，圖片都要有替代文字。
• 輸出格式：輸出單一 HTML 檔，CSS 寫在同一份檔案內。

🔗 延伸閱讀：AI輔助後端開發：如何利用Claude工具從0開始撰寫一個專案

第三步：先完成核心頁面，再延伸其他頁

不要一次叫 AI 做完全部頁面。
先做首頁，確認風格與結構都對了，再請它「沿用同一套樣式」做其他頁，各頁的外觀才會一致。

每完成一頁，請務必用手機實際打開檢查：

• 文字會不會太小、會不會超出畫面。
• 按鈕夠不夠大，手指點不點得到。
• 圖片有沒有變形或載入過慢。
• 選單在手機上能不能正常展開。

第四步：補齊SEO與內容結構

網站可以打開，不代表搜尋引擎就一定理解你的內容。

上線前請逐頁確認：

• 每頁有清楚、不同的 <title>
• Meta Description 能準確描述頁面內容
• 頁面具有明確的主要標題
• H1、H2、H3 呈現合理的資訊層級
• 重要圖片具有具描述性的 alt 替代文字
• 網址簡潔且具有意義
• 重要頁面可以被搜尋引擎檢索
• 內部連結關係清楚

實務上，網站可以維持一個清楚的主要 H1，方便內容管理與資訊結構一致。
但真正重要的不是「H1 數量本身」，而是：
標題是否正確描述內容，而且層級容易理解。

第五步：保留完整網站原始檔與版本

確認沒問題後，把程式碼下載、匯出或同步到 GitHub。
選工具時就要先確認它是否支援匯出。
如果網站有資料庫或會員功能，也要確認資料能否一併匯出，否則只拿到程式碼，網站仍然搬不走。

AI架設網站，上線前還要準備什麼？網址和主機

現在很多 AI 建站平台都能一鍵發布，因此「讓網站出現在網路上」已經越來越簡單。但正式企業網站通常還會需要處理：
網域、DNS、SSL、主機、SEO、郵件與帳號管理。
這些才是真正進入營運階段後不能忽略的基礎設定。

網址（網域）怎麼買、年費大概多少

網址就是 www.你的品牌.com 這一串，需要向網域註冊商購買，而且是每年續約。
以台灣常見註冊商的公開價格來看：

• .com 首年約 NT$350 到 NT$720
• .com.tw 首年約 NT$550 到 NT$1,070
• 續約價約 NT$400 到 NT$1,260 之間

買網址時請留意三件事：

• 看續約價，不要只看首年價：很多業者首年便宜、第二年調漲。
• 用公司的帳號與信箱註冊：網址登記在離職員工或外包個人名下，日後要拿回來很麻煩。
• 開啟自動續約：網址過期被別人註冊走，品牌與 SEO 成果會一起消失。

🔗 延伸閱讀：網域怎麼選？網域名稱、申請流程與注意事項完整解析

主機有哪幾種，靜態網頁該選哪一種

主機可以簡單理解成：放置並執行網站的環境。

依網站需求，大致可以分成：

🔗 延伸閱讀：網站主機介紹，網站設計不同種類的主機挑選建議！

DNS 指向與 SSL 憑證的設定順序

AI架設網站時，買了網址、租了主機，兩者還要接在一起，這一步叫 DNS 設定。
順序如下：

1. 到主機或託管平台新增你的網址，平台會告訴你要填哪種紀錄。
   一般來說，有 www 的網址填 CNAME，沒有 www 的填 A 紀錄；
   有些平台則會請你把整個網域的 DNS 交給它們管理。
2. 登入網域註冊商的管理後台，把這組紀錄填進 DNS 設定。
3. 等待 DNS 更新生效，這段時間網站可能有些人看得到、有些人看不到，屬於正常現象。
4. 啟用 SSL 憑證，讓網址從 http 變成 https。

SSL 憑證可以使用 Let's Encrypt，它不收取憑證費用，目前標準效期為 90 天，但將自 2027 年起逐步縮短，2028 年降至 45 天。
多數託管平台會自動幫你申請與更新。
自己管主機的話，請使用支援自動更新的工具，不要寫死固定天數的排程，並另外設定到期監控。

🔗 延伸閱讀：SSL 是什麼？和 TLS 的差別？透過安裝 SSL / TLS 保障網站連線安全

上線後要檢查的四件事

AI網頁打得開不代表上線完成，請再確認這四項：

• http、有 www、沒有 www 的網址，都會自動轉到同一個正式的 https 網址。
• 到Google Search Console 驗證網站並提交 Sitemap。
• 用手機與電腦各開一次，測試表單是否真的收得到信。
• 把原始檔、網址帳號、主機帳號整理成一份文件，交給公司保管。

AI網頁上線後最常遇到的維護問題

AI網頁上線那一天通常很順利，麻煩多半出現在三個月之後。我們把客戶最常遇到的情況分成三類。

沒有後台，改一個字都要回去找檔案

多數 AI 生成的網頁沒有給一般人用的後台，內容直接寫在程式裡。

想把電話號碼換掉，若是自己架的 HTML 網頁，就得找出所有出現電話的檔案逐一修改再上傳。
若是用 AI 平台發布，就得回到對話請 AI 改，每改一次都會消耗額度。
頁數一多，很容易漏改，結果首頁是新電話、聯絡頁還是舊電話。

另一個選擇是回去請 AI 改。
問題是 AI 每次重新生成都可能順手動到其他地方，你請它改頁尾，它把導覽列的樣式也換了。

AI 產生的技術債：重複程式碼與命名不一致

技術債指的是「現在省下來的工，未來要加倍還」。
AI 特別容易產生這種債，因為它傾向直接寫一段新的程式，不太會回頭重複使用已經寫好的部分。

放到網站上，情況會像這樣：
同一個按鈕樣式在五個頁面各寫了一次，之後想把按鈕改成圓角，就要改五個地方。
網站越做越大，每一次修改都越來越慢，也越來越容易改壞。

資安與個資：表單、金鑰與權限檢查

愛貝斯在整理 AI 開發經驗時，列過幾個 AI 產出程式常見的風險：
金鑰直接寫死在程式碼裡、缺少防注入與權限檢查、測試只涵蓋順利的情況而忽略邊界條件。

純展示的 AI網頁風險較低。
只要網站有表單、會員或金流，這些漏洞就可能變成個資外洩事件。

AI網頁維護問題對照表

什麼情況該把網頁設計交給專業公司

當網站開始承擔詢問單、訂單或品牌形象，前面那些維護問題的成本就會超過自己動手省下的費用。
專業公司一樣在用 AI，差別在於 AI 被放進一套有紀律的流程裡。下面用愛貝斯實際的做法說明。

規模化開發：規範檔與自動檢查層

個人做 AI網頁，是想到什麼下什麼指令。
團隊要做幾十頁、多人同時開發，就必須讓 AI 每一次都照同一套規則做事。

愛貝斯的做法是在專案根目錄放置 AI 規範檔，包含 CLAUDE.md（AI 作業守則）、ARCHITECTURE.md（系統架構）、CODING_GUIDELINES.md（命名規範與安全規則）、SECURITY_POLICY.md（敏感資料保護）與 TESTING.md（測試規範）。
開發流程分成需求梳理、架構設計、實作與測試、重構與交付四個階段，架構由人決定，AI 負責重複性高的工作。

系統穩定不堆疊：每次修改都過審查

前面提到 AI 容易不斷疊加新程式碼。
要避免這件事，做法是讓 AI 的每次修改都以差異（diff）的形式呈現，先經過自動檢查層（lint、測試、SAST、DAST），再由人進行 PR review，確認後才合併。

愛貝斯在 Pull Request 階段另外導入 AI Code Review，公司內部試用的結果是程式審查時間縮短約三分之一。
省下來的時間拿去做定期重構，系統才不會越疊越亂。

🔗 延伸閱讀：如何利用 AI 改善網頁設計公司團隊協作與效率

上線後 AI 好讀、Google 好懂

網站現在有兩種讀者：搜尋引擎，以及 ChatGPT、Gemini 這類會讀網頁再回答問題的 AI。
兩者都需要清楚的結構才讀得懂，這也是 GEO（生成式引擎優化）在談的事情。

愛貝斯的 AI智能後台管理系統 讓每個頁面都有專屬 SEO 欄位，並提供 SEO 一鍵生成（TDK 標題、描述、關鍵字）與圖片替代文字自動生成。
也就是說，第四步提到的標題、描述、圖片替代文字，後台會在你新增每一頁時提醒你填好。

視覺與後台：不會寫程式也能自己更新

AI網頁設計工具生成的版面很容易撞版。
專業團隊的流程是設計師先決定視覺，再由 AI 協助轉成前端程式，品牌的樣子由人掌握。

上線之後，內容更新交給後台處理。
愛貝斯的後台採用拖曳模組排版，圖片會自動壓縮，還有 AI 翻譯助手與自動填入文案的功能，內容更新後可以立即在前台顯示，不會寫程式也能管理網站。

自己用 AI 做和找專業公司的對照表

愛貝斯的合作案例：客製視覺設計，做出 AI 版型做不到的質感

AI 建站工具能在幾分鐘內產出網站，但版型多半大同小異，換個品牌名稱就能套用，很難讓人一眼記住。
使用者在網站上停留多久、會不會相信這個品牌，往往從第一眼的視覺開始。
愛貝斯從品牌 DNA 出發，為每個客戶量身設計視覺，以下是三個不同產業的案例：

阿檸 a.ling｜手搖飲品牌

立即前往：阿檸 a.ling

主打「最強爆打檸檬手搖飲」。
愛貝斯先釐清品牌 DNA 與視覺識別，再製作高度客製與合成的形象圖，把屏東新鮮檸檬與手打工藝的強烈爽感直接拉進畫面，網站一打開就能感受到飲品的清爽與力道，這是現成素材庫與 AI 版型很難做到的辨識度。

群光電子ESG永續網站｜電子製造業

立即前往：群光電子 ESG 永續網站

永續報告內容龐大、資料密集，很容易做成難讀的文件頁。
愛貝斯依品牌識別設計視覺，並依「永續群光、公司治理、社會共榮、環境永續」整理版面與動線，讓複雜的 ESG 資訊看起來專業、有條理，也貼近「綠色、智慧的未來」這個品牌精神。

逸點亦旅｜特色旅宿

立即前往：逸點亦旅

品牌強調溫柔、土地與生活的記憶。
愛貝斯用詩意的品牌敘事搭配客製視覺，讓旅客在訂房之前，就先感受到旅宿的氛圍與質感。這種細膩的情緒表達，需要設計師理解品牌故事，才拿捏得出來。

從手搖飲、電子製造到旅宿，三個網站的視覺風格完全不同，卻都對準各自客群的喜好。
AI 工具適合用來加快製作與發想，但要讓網站有品牌個性、讓使用者願意停留，仍然需要專業設計師把關。

常見問題（FAQ）

AI網頁讓「做出畫面」這件事變得很簡單，這是好事。
真正花時間的部分一直都在後面：把網址和主機接起來、讓 Google 與 AI 讀得懂內容、讓同事不用碰程式就能更新，以及讓網站在一年後還改得動。
只是要做活動頁或雛形，照本文的五個步驟加上網址主機的設定就能完成。
如果網站要長期經營，建議在動手前就把後台與維護方式一起規劃進去。

如果你正在評估企業官網該怎麼做，歡迎到愛貝斯聯絡我們 留下需求。
愛貝斯以 AI 輔助開發流程搭配自研的AI智能後台管理系統，協助你把網頁做成一個穩定、好管理、搜尋引擎與 AI 都讀得懂的網站。