AI 繪圖＋ChatGPT 網頁設計實戰：零設計背景也能打造驚豔網站
AI 網頁設計怎麼做？真正的做法是把網站製作拆成三條獨立產線：用 Midjourney 生成圖像、用 ChatGPT 產出架構與文案、再用 WordPress 搭配 Element…
AI 網頁設計怎麼做：用三條產線做出能上線的形象網站
AI 網頁設計怎麼做？真正的做法是把網站製作拆成三條獨立產線：用 Midjourney 生成圖像、用 ChatGPT 產出架構與文案、再用 WordPress 搭配 Elementor 把素材組裝上線，絕大多數「一句話架站」的宣傳只會停在第一段。把這條產線走完，一個沒寫過程式、沒學過設計的創業者，月費控制在數百元到千元出頭就能啟動 AI 網站建立工具實測，產出可對外開放的形象網站。
重點先看： Midjourney 與 ChatGPT 採訂閱制，月費各落在數百元台幣級距（以各工具官網當期方案為準），WordPress 則是全球使用最廣的網站系統之一。把三條產線分工、再逐段品管，才是 AI 網頁設計真正能重現的流程；後續章節依這條產線逐段拆解，從工具選型、提示詞寫法到上線品管一次走完。
AI 網頁設計是什麼？先把這條產線搞清楚
AI 網頁設計並不是讓 AI 幫你「自動生成一個會上線的網站」。它的本質是把網站製作拆成三段，分別交給不同工具，每一段都由人把關品質。目前的 AI 還沒辦法直接吐出一個可上線、可維護的完整網站，它輸出的是素材與草稿：圖是圖、字是字、版型是版型，最後還是要人來組裝。看懂這一點，才不會被「一句話架站」的宣傳綁架。
把網站製作想成一條工廠產線，就不會被「AI 全自動」的幻想困住。三條產線各自獨立運作：視覺產線交給 Midjourney 與 Canva AI，結構與文案產線交給 ChatGPT，組裝上線產線則交給 WordPress 加 Elementor。每一條產線都可以單獨重做、單獨品管，不會因為其中一張圖失敗就整個網站報銷。
這條產線最大的價值，在於把過去要外包給設計師與文案的成本，壓到自己能產出的範圍。一張首頁大圖以前要等設計師三到五天，現在用 Midjourney 反覆生成、挑選、後製，半天就能產出多個方向。但你得心裡有底：AI 不會替你做決定，挑哪一張、文案怎麼改、版型怎麼排，責任還是在你身上。
- 視覺產線：Midjourney 負責首頁大圖、服務示意圖，Canva 負責修圖、去背與尺寸裁切
- 架構文案產線：ChatGPT 把零散想法整理成 網站選單 與逐頁區塊文案草稿
- 組裝上線產線：WordPress 加 Astra 主題與 Elementor，把素材變成真正會上線的網站
適合這條產線的人很明確：沒有設計與程式背景，但願意動手組裝、願意花時間挑選與改寫的人。如果你期待的是「按下按鈕就有網站」，那這條路會讓你失望；但如果你願意把 AI 當成幫手而不是代勞者，它能替你省下大量的外包費用與等待時間。關於整體的學習路徑，可以參考 網頁設計自學路線圖。
三條產線 vs 一鍵架站工具：哪條路適合你
市面上確實有「填幾格資料就生成網站」的一鍵架站工具，不少人會拿它跟這條三產線做法比較。兩者各有清楚的使用情境，沒有絕對優劣，關鍵在於你願不願意對成品擁有控制權。底下用一張決策表把差異攤開，幫你判斷自己該走哪條路。
| 比較項目 | 三條產線做法 | 一鍵架站工具 |
|---|---|---|
| 成品的可控制度 | 高，圖、字、版型逐項可改 | 低，多為固定版型 |
| 製作時間 | 較長，需逐段品管 | 極短，數分鐘生成 |
| 適合的網站類型 | 想長期累積的品牌形象站 | 急著上線的門面、活動頁 |
| 月費彈性 | 工具可逐個挑選替換 | 通常綁單一平台方案 |
| 學習曲線 | 中，要熟悉幾項工具 | 低，填表即可 |
| 後續擴充性 | 高，可換主題與外掛 | 受限於平台功能 |
用一句話做選擇判斷：要的是「快點有個東西掛上網」就選一鍵架站，要的是「這個網站三年後還能持續長大」就選三條產線。一鍵架站的隱形代價是「換平台很痛」，一旦你的內容、圖片、版型都鎖在該平台，日後想搬到自主性更高的 WordPress，遷移成本往往比當初重做還高。三條產線的做法一開始就扎根在 可自主搬移的 WordPress 上，長期看是更穩的底盤。
決定走三條產線之後，多數人第一個低估的是時間。底下這張「三條產線時間預算表」是我建議你照著排的分工框架：把第一次建站的總工時，按產線切分，再標出每條產線最容易超支的環節。把它當成排程依據，你才不會把全部時間砸在生圖、最後沒時間組裝與檢查手機版。
| 產線 | 第一次建站建議工時占比 | 最常超支的環節 |
|---|---|---|
| 視覺產線（Midjourney＋Canva） | 約三成 | 反覆重生同一張圖、忘了固定風格片段 |
| 架構文案產線（ChatGPT） | 約兩成 | 接受第一次輸出、未做四步改寫 |
| 組裝上線產線（WordPress＋Elementor） | 約四成 | 手機版檢查、外掛衝突除錯 |
| 全站驗收（評分卡逐項） | 約一成 | 急著發布、跳過放大檢查圖片 |
這張表傳達一個反直覺的重點：組裝與驗收加起來占一半工時，生圖反而只占三成。很多新手把八成時間花在挑圖上，結果組裝階段草草了事，手機版一塌糊塗就上線。把比例倒過來排，成品品質會立刻拉開差距。
工具清單：做一個 AI 網站你需要準備什麼
做一個 AI 網站到底要裝哪些工具、要花多少錢？最小可運作組合是四件：Midjourney 生圖、ChatGPT 產文案與架構、Canva 修圖與去背、WordPress 加 Astra 與 Elementor 組裝上線。月費合計控制在數百元到千元出頭就能啟動，主機與網域則是另一筆固定成本。
先把工具與用途對齊，再談費用，順序不能顛倒。Midjourney 負責圖像生成，ChatGPT 負責 結構規劃與文案草稿，Canva 負責修圖與去背，Astra 加 Elementor 負責把素材組裝成網站。這四件缺一不可，少掉任何一個，流程就會斷在某一環節。
| 工具 | 負責的工作 | 費用型態 |
|---|---|---|
| Midjourney | 生成首頁大圖、服務示意圖 | 訂閱制，月費約數百元台幣級距，以 Midjourney 官網當期方案為準 |
| ChatGPT | 規劃選單架構、產出區塊文案 | 訂閱制，月費約數百元台幣級距，以 OpenAI 官網當期方案為準 |
| Canva | 修圖、去背、尺寸裁切 | 免費可用，進階功能另計 |
| Astra 主題 | 網站的視覺骨架 | 免費版可用，Pro 版另計 |
| Elementor | 視覺化拖曳編輯 | 免費版可用，Pro 版另計 |
主機與網域是另一筆固定成本，金額會根據你選的 WordPress 自架網站費用 結構而浮動。不建議一開始就綁死單一廠商，先把流程跑通、確定方向，再決定要不要升級到更穩定的 主機方案。免費方案能跑通整條流程，只是素材品質與產量會受限，這個代價要先想清楚。
為什麼底盤要選 WordPress？因為它是目前全球佔比最高的網站系統之一，市占率長期領先其他同類工具。根據 W3Techs 的調查，WordPress 被全球 59.2% 已知使用內容管理系統的網站採用，相當於全體網站的 41.5% [來源：〈W3Techs — Usage Statistics and Market Share of WordPress〉〈https://w3techs.com/technologies/details/cm-wordpress〉〈2026-06-29〉]。這個規模意味著兩件對新手很實際的事：遇到問題幾乎都查得到解法，以及佈景主題與外掛的生態系最完整。挑選 WordPress 佈景主題 與 必裝外掛 時，選擇數量遠多於其他平台，三條產線因此能順利銜接。
把上述工具的月費攤開算一筆帳，你會發現這條路真正貴的不是訂閱費，而是你投入的時間。以一個常見的新手情境為例：每月網站相關固定開銷落在工具訂閱數百元到千元出頭、主機加網域數百元級距，合計大約一兩千元台幣就能讓站跑起來。但同樣這個站，從零到可對外開放，第一次通常需要投入數十小時的學習與組裝時間，第二次再做會大幅縮短。給你一個判斷基準：如果你估計自己每月能穩定撥出十小時以上經營網站，三條產線的投報比才劃得算；若你連每月兩三小時都擠不出來，直接找現成 一鍵架站工具 或外包反而務實。這個時間門檻，是任何報價表都不會告訴你的隱形成本。
講了這麼多工具，你可能會問：是不是裝完就能直接做網站？老實說，工具只是入場券。真正決定成品好壞的，是你能不能在每個環節末端做好品管：圖有沒有破綻、文案有沒有靈魂、版型在手機上有沒有跑掉。接著把視覺、文案、組裝三段分開來看。
第一步：用 Midjourney 生出首頁大圖與視覺素材
不會畫圖，怎麼用 AI 做出能放在首頁的大圖？關鍵是把品牌風格翻譯成 Midjourney 看得懂的提示詞，鎖定風格、色調、構圖三個變數，反覆生成與篩選，最後再用修圖工具做尺寸裁切與文字留白。這張圖才有辦法放進 Hero Section，否則只是漂亮的桌面桌布。
提示詞寫法可以拆成三段式：主題加上風格關鍵字，再補上畫面參數。主題講清楚要什麼（例如咖啡館、科技感辦公室），風格關鍵字決定視覺調性（極簡、暖色調、電影感光線），參數則控制比例與 色調。一段好的提示詞，比你反覆按重新生成更有用。想找靈感，可以從 PromptHero 或其他提示詞參考資源著手。
- 主題段：明確描述畫面主角與場景，例如「現代風格的獨立咖啡館內部」
- 風格段：指定視覺調性，例如電影感光線、柔焦、明確的配色計畫
- 參數段：控制比例（例如 16:9）、畫質、種子值，方便重現與微調
首頁大圖的用途很明確：Hero Section 背景、關於我們的視覺、服務區塊的示意圖。但生成後有一件事絕對不能省，那就是放大檢查細節。Midjourney 的圖縮圖看都很完美，一旦放到全螢幕，文字渲染不穩、人物手指多一根、Logo 細節變形 這類破綻就會現形。這屬於 AI 生圖目前的共識性限制，也是所有主流模型共同的短板。
所以生成後必做兩件事：第一，用 修圖工具 預留文字與按鈕的留白區，否則標題會壓在圖的雜訊上看不清楚；第二，把破綻區域裁掉或用 去背與修補工具 處理掉。我自己的做法是每張首頁大圖至少生成八到十二張再挑一張，挑選的標準放在「放大後破綻最少、留白最夠」，好不好看反而是次要。寧可多花半小時生成，也不要把瑕疵放大給每一位訪客看。
讓整站視覺一致：種子值、參考圖與風格鎖定
新手最常碰到的進階問題，是首頁大圖做得很滿意，服務示意圖、關於我們的照片卻風格完全不搭，整站拼起來像三家不同公司的網頁疊在一起。要解決這個一致性問題，靠的是三個可控的技術變數，審美天分反而次要：種子值、參考圖、風格關鍵字固定。
- 種子值（seed）：挑定一張滿意的圖後，記下它的 seed 值，後續生成其他圖時帶入同一個 seed，能讓色調與構圖調性貼近同一條線，差異比隨機生成小很多。
- 參考圖（image prompt）：把首頁大圖當成風格參考餵給 Midjourney，再補上你要的新主題，產出的圖在光影與配色上會自然靠攏，整站視覺因此連貫。
- 風格關鍵字固定：把「電影感光線、暖色調、柔焦」這組風格描述存成固定片段，每張圖的提示詞都帶上同一段，避免每生成一次風格就漂移一次。
這三招疊起來，效果比逐張手調配色更省力，也更可重現。實務上建議把「風格片段」與「seed 值」記在一張備忘卡上，跟前面提的品牌色卡放在一起，組裝階段直接對照。一致性這件事，靠紀律比靠天分可靠得多。
說到底，AI 生圖的強項是「大量產出方向」，這項特質最適合用來探索視覺的可能性。把它當成提供選項的助手，你就不會在某一張圖上耗到天荒地老。對整體製作流程來說，視覺這段時間的分配，應該是七成生成挑選、三成後製裁切。
用 ChatGPT 把架構與文案一次草擬出來
ChatGPT 在網站製作裡到底能幫上什麼忙？它最適合接手兩件事：把零散想法整理成網站選單與頁面架構，以及為每個區塊產出初版文案。但要把它當成草稿產生器，產出後必須人工改寫，把它當定稿會讓你的網站讀起來跟別人的範本一模一樣。
第一種用法是規劃架構。給定品牌定位與目標客群，請 ChatGPT 輸出選單結構與每頁應有的區塊。例如你告訴它「我是一間做手工甜點的個人品牌，客群是二十五到四十歲的上班族女性」，它就能回給你一組首頁、關於我們、產品、聯絡資訊的選單，並標出每頁該放哪些區塊。這一步的好處是把「我到底要做幾頁、每頁放什麼」這種最讓人卡住的問題，先有個草案。
第二種用法是逐區塊產出文案草稿。首頁標語、關於我們、服務介紹、聯絡資訊，都可以交給 ChatGPT 寫網站文案來產生第一版。但這裡有個關鍵技巧：千萬不要接受第一次輸出。ChatGPT 第一次給的文案幾乎都太空泛、太像範本，務必用追問與修正迭代，例如「這段太像廣告詞，請用更口語的方式重寫，並加入我實際的服務流程」。
| 區塊 | ChatGPT 初版常見問題 | 人工改寫方向 |
|---|---|---|
| 首頁標語 | 過度行銷、空泛形容詞 | 換成具體承諾與數字 |
| 關於我們 | 讀起來像履歷範本 | 加入創業動機與真實故事 |
| 服務介紹 | 只列功能不講價值 | 補上客戶能獲得什麼的具體說明 |
| 聯絡資訊 | 制式化、沒有行動指引 | 加上明確的下一步 |
把文案草稿升級成有靈魂的內容：四步改寫法
多數人拿到的 ChatGPT 草稿之所以空泛，是因為提示詞只給了「幫我寫服務介紹」這種粗略指令。要讓輸出有觀點、有層次，可以照著固定的四個步驟反覆逼出深度，這個方法對任何區塊的文案都適用。
- 步驟一：餵背景：先把你的實際服務流程、定價、客群痛點逐條列出來交給 ChatGPT，背景越具體，輸出越不容易回到範本腔。
- 步驟二：限定語氣：明確指定語氣，例如「用朋友聊天的口吻、避免形容詞堆疊、每段不超過三句」，限制越清楚，空泛話越少。
- 步驟三：追問反例：要求它「指出這段文案裡最可能被質疑的兩句話，並補上佐證」，逼出原本被跳過的具體證據。
- 步驟四：人工刪減：最後一步務必自己來，把 ChatGPT 愛用的「專業、用心、堅持」這類形容詞整段刪掉，只留下能被驗證的事實與動作。
品質把關只有一個原則：ChatGPT 的文案易空泛與過度行銷，務必用實際案例與數字替換泛用詞。「我們提供最專業的服務」這種句子要刪掉，換成「過去三年協助超過五十位創業者完成 品牌官網架設」。有數字、有案例，文案才有靈魂；根據 Google Search Central 對實用內容（helpful content）的說明，缺乏原創價值、大量複製既有範本的內容會被視為低品質訊號。
換個角度看，ChatGPT 在這一段最好的角色，是幫你把空白頁填上「有東西可以改」的草稿。多數人卡住的真正原因，往往是不會寫之外，更是對著空白頁不知道從哪裡開始。它給你一版爛草稿，你就有靶可以改，這比從零開始快太多。學會 把 ChatGPT 當成草稿產生器，是整個做法裡最值錢的觀念。若你日後想把網站再往前推一步、需要動到一點程式碼，Codex AI 程式助理 也能接手處理片段，降低對技術的恐懼。
Logo 與品牌視覺識別
不會設計，怎麼用 AI 做出一個能用的 Logo？Logo 可以交給 AI Logo 產生器或 Midjourney 生出多個方向，但最終一定要用 Canva 或向量工具整理成可用於網站頁首的格式。同時要一併定下品牌配色與字體，讓整個網站的視覺保持一致，否則 Logo 再好看，網站整體還是會散。
做 Logo 有兩條路徑。第一條是 AI Logo 產生器，速度快，輸入品牌名與產業就能生成一排選項，缺點是同質性高，跟別人撞圖的機率不低。第二條是用 Midjourney 自訂提示詞，例如指定極簡線條、幾何圖形、特定意象，產出的方向更有特色，但需要後製整理成可用檔案。時間緊就走第一條，想做出識別度就走第二條。
Logo 之外，有一組東西必須同時決定，不能拖到後面才想：主色、輔助色、中英文字體。這三項一旦定下來，整個網站的 品牌色彩挑選 與 中文字體 就有依據可循，不會每開一頁就換一次配色。建議把這組規範寫成一張小卡片，主色 hex 碼、輔助色、字體名稱都記下來，組裝時直接對照。
- 輸出格式：網頁用建議轉成 SVG 或透明背景 PNG，方便放進頁首與頁尾
- 尺寸預備：準備全彩版、單色反白版、社群大頭貼方版，一次做齊
- 版權查重：AI Logo 可能與他人撞圖，上線前建議做 基本查重，至少用圖片反搜跑一次
退一步看，品牌視覺識別的重點其實是「一致性」這三個字能不能貫徹全站，Logo 本身多精緻反倒是次要。一個普通的 Logo 加上貫穿全站的配色與字體，看起來會比一個超精美的 Logo 配上隨意的配色專業許多。這也是為什麼配色字體要跟 Logo 放在同一階段一起決定，避免做完 Logo 之後才回頭修配色。一致性帶來的信任感，往往比單點的精緻度更值錢。
第四步：把 AI 產出組裝進 WordPress
AI 做好的圖和文案，要怎麼變成真正會上線的網站？用 Astra 主題當底，搭配 Elementor 視覺化編輯器，把生成的大圖放進 Hero Section、把 ChatGPT 文案填入各區塊、用 Theme Builder 做出頁首頁尾。最後逐頁檢查手機版排版，這一步才是網站成敗的關鍵，前面做得再漂亮，組裝亂掉就全毀。
組裝的順序固定：架主機與 WordPress、套 Astra 主題、裝 Elementor、再把區塊逐一組裝進去。先把骨架搭起來，再填內容，順序顛倒會讓你一直重來。主機裝好後，WordPress 可以用 快速設定流程 在半小時內架起來，Astra 則有一整套 模板可一鍵匯入，省掉從空白頁開始的痛苦。
頁首頁尾用 Elementor Theme Builder 客製，放上 Logo、選單、聯絡資訊。這兩個區塊會出現在每一頁，所以值得花時間一次做好。首頁則分區塊組裝：Hero 大圖、服務介紹、關於我們、行動召喚（CTA）、聯絡表單。把 網頁設計必備元素 一次列清單，逐項填入，才不會做到一半發現少了某塊。
| 首頁區塊 | 放什麼素材 | 常見雷點 |
|---|---|---|
| Hero Section | Midjourney 大圖加首頁標語 | 標題壓在圖的雜訊上、比例跑掉 |
| 服務介紹 | 服務示意圖加文案 | 只列功能不講價值 |
| 關於我們 | 品牌照片加故事文案 | 讀起來像履歷 |
| CTA | 行動召喚按鈕 | 沒有明確下一步 |
| 聯絡表單 | 表單與聯絡資訊 | 欄位太多嚇跑人 |
手機版檢查絕對不能省。AI 生圖在桌面上看比例完美，到了手機上常常會因為 響應式設計 的縮放而失控，不是人物被切頭，就是文字被壓到看不清。手機版之所以要當成頭等大事，是因為現在超過一半的網頁瀏覽都來自手機：根據 Statista 統計，2026 年第一季，全球網站流量有 52.27% 來自行動裝置（不含平板）[來源：〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]。這個比例代表，你站上大多數訪客看到的第一眼，是手機版而不是桌面版。我會建議每組裝完一頁，就拿起手機重新整理一次看實際呈現，不要只信電腦上的預覽。這一步省下來的時間，最後都會在客訴或跳出率上還回去。
組裝過程會用到不少外掛，從表單、SEO 到快取。挑選時可以參考 Elementor 外掛推薦 與 必裝 WordPress 外掛，但原則是能少則少，外掛裝太多反而會拖慢速度、增加 衝突風險。若想換編輯器或主題，頁面編輯器比較 與 WordPress 佈景主題推薦 可以當作備選清單。
組裝時常見的排版崩壞與排查清單
組裝階段最讓人頭痛的，往往出在「做好之後在某個裝置上突然跑掉」這種跨裝置的不一致。底下把高頻出現的排版崩壞整理成一張排查清單，出問題時照著跑，比漫無目的重畫快得多。
| 症狀 | 最可能原因 | 排查與修法 |
|---|---|---|
| 桌面正常、手機文字超出邊界 | 固定寬度或 padding 過大 | 切到行動版斷點，改用百分比或 vw 單位 |
| Hero 大圖在手機被橫向裁切 | 背景圖未設焦點位置 | 指定 background-position，讓主體落在可視範圍 |
| 按鈕在平板上變成兩行 | 文字過長、欄寬不足 | 縮短按鈕文字或調整欄位比例 |
| 圖片載入後版面跳動 | 未設圖片寬高比例 | 補上 aspect-ratio 或預留空間 |
| 選單在手機無法點開 | 漢堡選單未正確綁定 | 檢查 Theme Builder 的行動選單設定 |
這張表的價值在於把「憑感覺調」變成「按症狀查」。每改一個區塊，就拿手機、平板各重新整理一次，照著清單逐項確認，比一次塞滿所有裝置的設定再回頭除錯，效率高得多。養成這個紀律，組裝階段的返工次數會明顯下降。
AI 網頁設計的 5 個常見錯誤與避坑方法
用 AI 做網站最容易踩到哪些地雷？最常見的五個錯誤是：把 AI 生圖直接當最終稿不後製、放任 ChatGPT 文案空泛上線、忽略圖片壓縮導致網站變慢、配色字體沒有統一規範、忘記做手機版檢查。每一項都會直接拉低專業度與轉換率，而且都是新手最容易犯的。
第一個錯誤最致命：AI 生圖未後製就上線。前面提過，Midjourney 的圖放大一定會在文字、手指、Logo 細節出現破綻。把這種圖直接放首頁，等於把瑕疵放大給每一位訪客看，專業度瞬間歸零。企業形象網站的價值往往在這種細節裡決定，可參考 企業形象網站的價值 的論點。避坑方法只有一個：每張上線的圖都放大到百分之百檢查一遍，有破綻就後製或重生成。
- 錯誤一：AI 生圖未後製就上線，細節破綻被一眼看穿 → 強制放大檢查再發布
- 錯誤二：ChatGPT 文案未改寫，網站讀起來像範本 → 用實際案例與數字替換泛用詞
- 錯誤三：未壓縮圖片，AI 大圖拖垮載入速度與 SEO → 上線前壓縮並開啟延遲載入
- 錯誤四：配色字體各頁不一致，缺乏品牌視覺紀律 → 先定規範再組裝，全程對照
- 錯誤五：只看桌面版，手機版排版崩壞卻沒發現 → 每頁用手機實機檢查一次
第三個錯誤特別要講。AI 生成的圖檔案都偏大，一張未壓縮的首頁大圖動輒兩三 MB，直接上傳會讓網站載入時間拉長，而載入速度是 Google 公開的排名訊號。避坑方法是用 圖片優化 工具壓縮，並開啟延遲載入，讓圖片在使用者捲到時才載入。別讓一張好看的圖，把整個網站的載入速度拖垮。
載入速度的影響範圍比多數人想像得更廣，它同時牽動排名與轉換。Google 在 2020 年正式將 Core Web Vitals 列為搜尋排名訊號之一，結合行動裝置友善、HTTPS、侵入性插頁等指標，構成完整的頁面體驗評估 [來源：〈Google Search Central Blog — Evaluating page experience〉〈https://developers.google.com/search/blog/2020/05/evaluating-page-experience〉〈2020-05-28〉]。換句話說，圖片壓不壓、頁面開得快不快，已經是會直接反映在搜尋結果的硬指標，不再只是「使用者體驗」這種抽象說法。
不過話說回來，這五個錯誤的共同根源都一樣：太相信 AI 第一次的輸出。AI 給你的東西，無論圖或字，多半只是七十分的草稿，剩下那三十分要靠人工補。把這個預期放進心裡，就不會把 AI 的產出直接當成品，更多 網頁設計的完整觀念 也是同一個邏輯。
上線前的成品驗收評分卡：一張表檢查能不能發布
前面談了很多分段品管的方法，但真正要按下發布鍵之前，你需要的是一個能把整站拉到同一個標準的驗收機制。底下設計一張評分卡，把網站品質拆成六個面向、每個面向三個檢查項，逐項打勾，全綠燈才發布。這張卡的好處是把「我覺得差不多了」這種模糊感覺，換成可逐條確認的硬指標。
| 驗收面向 | 檢查項 | 通過標準 |
|---|---|---|
| 視覺一致性 | 主色與輔助色全站統一 | 無頁面使用色卡以外的顏色 |
| 字體層級固定 | 標題與內文各只用一組字體 | |
| 圖片風格連貫 | 生圖皆帶同一風格片段或 seed | |
| 圖片品質 | 放大百分之百無破綻 | 文字、手指、Logo 細節清楚 |
| 圖檔已壓縮 | 單張首頁大圖低於合理門檻 | |
| 替代文字補齊 | 每張圖皆有描述性 alt 文字 | |
| 文案品質 | 無空泛形容詞 | 「專業、用心」等詞已刪除或佐證 |
| 有具體案例或數字 | 關鍵區塊皆帶可驗證資訊 | |
| CTA 有明確下一步 | 每頁底部有清楚行動指引 | |
| 排版穩定性 | 桌面版無溢出 | 文字不超出容器邊界 |
| 手機版無破版 | 實機檢查每頁排版正常 | |
| 圖片有預留比例 | 載入時版面不劇烈跳動 | |
| 技術 SEO | 每頁有唯一 H1 | 標題層級單一且清楚 |
| 永久連結已設定 | 網址可讀、無預設參數亂碼 | |
| 標題與中繼描述補齊 | 每頁皆有專屬標題與描述 |
用這張卡的方式很簡單：印出來或開成一份文件，逐頁逐項打勾。只要有任何一欄未過，就回頭修到過為止，不要帶著紅燈發布。多數網站崩壞不是出在大設計，而是出在這種「差一點點就上線」的小破綻累積。評分卡存在的目的，就是強制你在發布前，把這些小破綻一次清乾淨。這也是 網頁設計常見錯誤 最有效的預防方式。
AI 做的網站 SEO 會比較差嗎？上線前的優化清單
用 AI 做的網站，在 Google 排名上會不會吃虧？答案是：網站是不是 AI 做的，Google 不會因此扣分，真正影響排名的是上線前有沒有做好基本 SEO。網站速度、圖片壓縮、標題與中繼描述、永久連結結構、內容是否原創，補齊這幾項，AI 網站一樣能排上去。而排名之外，現在還多了 GEO、AEO、LLMO 等 AI 搜尋優化 的新戰場，觀念一起建立會更完整。
先破除一個迷思。Google 看的是內容品質與技術規範，不是製作工具。用 AI 生圖、用 ChatGPT 寫草稿，這些都不會被演算法直接懲罰。會被懲罰的是薄內容、抄襲、載入太慢、結構混亂。所以問題的核心在於「你有沒有把 AI 的產出品管到位」。而且現在流量來源早已不限 Google，各類 AI 搜尋引擎 也是潛在訪客入口，內容值得同時準備好。完整的 SEO 優化 思路，照樣適用 AI 網站。
事實上，用 AI 協助產出內容早已是主流做法，並非邊緣行為。根據 HubSpot 2026 年的行銷報告，約 80% 的行銷人使用 AI 進行內容產製，75% 用於媒體素材產出；更有約 94% 的行銷人計畫在 2026 年將 AI 納入內容產製流程（含部落格文章）[來源：〈HubSpot 2026 State of Marketing Report〉〈https://www.hubspot.com/state-of-marketing〉〈2026〉]。這組數字說明，AI 產製內容本身不會被判為低品質，差別只在於產出後有沒有經過人工品管。把草稿改寫成有觀點的原創內容，AI 網站在搜尋結果裡一樣有競爭力。
| 優化項目 | 要做什麼 | 為什麼重要 |
|---|---|---|
| 圖片壓縮與延遲載入 | 壓縮圖檔、開啟 lazy load | 載入速度是排名訊號 |
| 永久連結結構 | 設定 SEO 友善永久連結 | 網址可讀、易索引 |
| SEO 標題與中繼描述 | 每頁補齊標題與描述 | 影響點閱率與主題判讀 |
| H1 與 H2 結構 | 確認每頁只有一個 H1 | 幫助搜尋引擎理解層級 |
| 圖片替代文字 | 補上 圖片 SEO alt 文字 | 圖片搜尋與無障礙 |
內容把關是另一個重點。ChatGPT 產出的文案必須改寫成有觀點、有實例的原創內容，避免薄內容。直接把 ChatGPT 的草稿貼上線，不只讀起來空泛，還可能跟其他用同樣提示詞的人高度雷同，這在 Google 眼裡就是低品質訊號。改寫的方向前面講過：用具體數字、真實案例、個人觀點，把「範本味」洗掉。想確認自家品牌在網路上的能見度與被提及狀況，可借助 Ahrefs Brand Radar 這類監測指標來追蹤。
上線前的優化清單其實不長：圖要壓、字要改、連結要設、手機要檢查，幾件事逐一過一遍。這些動作跟是不是用 AI 做的沒關係，純粹是基本功，做完之後 AI 網站的排名不會比手工架的站差，反而因為你用工具省下了製作時間，能把更多心力花在 內容與排版 上。如果想把 SEO 當成長期戰力來養，搭配 支援 Ahrefs 工具的 SEO 陪跑班 邊做邊學，會比單看文章更踏實。如果完全不想碰技術細節，把組裝這段交給 用 Astra 打造形象網站 的標準流程，會更省心。
回顧一下整個流程。視覺、文案、組裝三段各自獨立，每段末端都有品管關卡。AI 在這裡的角色，是加速素材與草稿的產出，不是取代你的判斷。把這個分工想清楚，AI 網頁設計就會從一句口號變成一條沒設計背景也走得通的可重現流程。網站上線後若想進一步衝刺搜尋排名，從產業分析到落地實戰的 SEO 排名攻略學 可以接著看。想看更多 AI 應用的網頁設計趨勢 或 最新網頁設計趨勢，可以在完成基礎網站後再延伸閱讀。
常見問題：AI 網頁設計的疑問一次解答
動手之前，多數人會卡在幾個反覆出現的疑問。這裡把最常被問到的問題一次答清楚，方便你在投入時間之前先釐清方向。如果你還在比較 各種 AI 工具 或考慮 UIUX 設計入門，這些答案也能幫你判斷哪條路適合自己。
不會設計也能用 AI 做網站嗎？
可以，前提是你願意動手組裝與品管。AI 負責產出素材與草稿，但挑選、改寫、排版這些動作還是要自己來。沒有設計背景的人，靠 配色工具 與 品牌官網設計全攻略 的現成思路，足以做出及格水準的形象網站。
Midjourney 和 ChatGPT 各自負責什麼？
Midjourney 負責圖像生成，舉凡首頁大圖、服務示意圖都交給它；ChatGPT 負責架構規劃與文案草稿，把選單結構與逐頁文案產出第一版。兩者一個管視覺、一個管文字，分工清楚，最後再由你組裝進 WordPress。
用 AI 做網站需要會寫程式嗎？
不需要。整個流程全程不用寫程式，從生圖、寫文案到組裝，都是視覺化操作。Elementor 提供拖曳編輯，Astra 有現成模板可一鍵匯入，技術門檻比想像中低很多。想知道還有哪些 AI 助手能協助規劃，可參考 Gemini AI 入門攻略 與 Claude AI 使用指南。
AI 生成的圖片可以直接商用嗎？
多數 AI 生圖工具的訂閱方案允許商用，但實際授權範圍以各工具官網條款為準。建議在使用前先確認授權細節，特別是用於 Logo 等品牌識別時，避免後續爭議。若不想冒風險，商用免費圖庫 是另一個穩妥來源。
用 AI 做一個網站要花多少錢？
工具月費部分，Midjourney 與 ChatGPT 各約數百元台幣級距，以各工具官網當期方案為準；Canva、Astra、Elementor 免費版就能跑通流程。主機與網域是另一筆固定成本，整體可參考主機方案與網域的預算拆解。
用 AI 架的站，Google 會不會扣分？
不會。Google 看的是內容本身夠不夠紮實、技術規範有沒有到位，從來不管網站用什麼工具做出來。圖壓好、中繼描述補齊、永久連結設乾淨、文案改到有自己的觀點，排名照樣能上去。真正會拖累的是沒改過的 ChatGPT 草稿，那種空泛內容才是低品質訊號。網站上線後別放著不動，定期跑一輪 SEO 年度內容更新，才能讓排名穩住甚至往上爬。
Midjourney 生成的圖片版權是誰的？
版權歸屬與商用權限依 Midjourney 當時的服務條款而定，付費訂閱者通常取得商用授權，但詳細範圍與限制以 Midjourney 官網當期公告為準。用於正式品牌識別前，建議自行查閱最新條款並做基本查重。
不會畫圖的人怎麼用 AI 做出好看的首頁大圖？
把品牌風格翻譯成三段式提示詞（主題、風格、參數），反覆生成八到十二張再挑一張，挑選標準是放大後破綻最少、留白最夠，最後用 Canva 裁切並預留文字空間。這套流程不需要任何繪圖能力。
做完的網站怎麼確保視覺一致，不會東拼西湊？
一致性靠三個可控變數撐起來：先把品牌主色、輔助色、字體寫成一張色卡，組裝全程對照；生圖時固定使用同一組風格關鍵字與同一個 seed 值，讓新圖自然靠攏既有調性；最後用前面那張驗收評分卡，逐頁打勾確認沒有偏離規範。紀律比審美天分更能保證整站看起來像同一個品牌做的。
一鍵架站工具跟這條三產線做法，我該選哪個？
判斷標準在於你對成品的控制權與長期規劃。要的是幾分鐘內掛上網的門面，選一鍵架站；要的是三年後還能持續擴充、可自主搬移的品牌形象站，選三條產線。一鍵架站的隱形成本是換平台很痛，內容與版型一旦鎖死在該平台，後續遷移代價往往高於重做。