AI 繪圖＋ChatGPT 網頁設計實戰：零背景也能上手

想像一下這個畫面：你有一個扎實的生意點子，產品也準備到位了，但打開網頁編輯器，面對的卻是一片空白畫布。沒有設計背景的人，卡點未必是工具操作，也可能是不清楚網站要給誰看、希望對方完成什麼動作，以及成品該長什麼樣子。

ChatGPT 與 AI 繪圖工具降低了非設計背景者整理需求、探索視覺方向與製作草稿的門檻。HubSpot 的 2026 年行銷報告也指出，AI 已進入不少團隊的日常產出環節。工具能不能轉成穩定成果，仍取決於工作流與人工把關。

重點摘述：AI 繪圖與 ChatGPT 可協助把模糊需求轉成可測試的圖片、文案與程式碼草稿，但仍需要人工決定品牌方向、授權、正確性與上線品質。流程依序涵蓋需求盤點、生圖、文案、配色、組裝與行動版檢查。

先承認一件沒人愛說的事：卡住你的不是「會不會畫」，是「有沒有畫面」

你身邊一定有這種人：同樣用 Midjourney、同樣用 ChatGPT，他產出的東西就是比你好看，而且快得多。多數人以為對方是 prompt 功力比較強，老實說，那是表面原因。真正的差距在於，對方在動手之前，腦袋裡已經有一個夠明確的「目標長相」：他知道自己在做給誰看、知道參考什麼風格、知道哪些細節要、哪些不要。

把這句話記下來，它會貫穿整篇文章：AI 是執行力放大器，不是品味放大器。你腦袋裡的畫面越清楚，AI 幫你把它變成現實的速度越快；你腦袋裡越模糊，AI 只會用十種不同的方式，把你的模糊放大十倍還給你。這樣看來，建議你在開任何工具之前，先花二十分鐘把下面三件事寫在紙上：這個網站要讓誰、在什麼情境下、產生什麼感受。這二十分鐘的投資報酬率，比你看十篇 prompt 教學都高。

AI 網頁設計工具可以協助整理需求、探索版型、產生文案與建立原型，但仍需要人員判斷品牌定位、資訊架構、可用性與技術限制。若想了解以對話產生視覺稿與互動原型的流程，可參考〈Claude Design 功能與操作方式〉。

把工作流拆成三條平行線，才不會被工具牽著走

把架構、視覺與文案全部混在同一個對話裡，容易失去版本與決策脈絡。下面把「用 AI 做網站」拆成三條工作線；它不是唯一流程，但能讓需求、素材與組裝各自留下可檢查的產出。

線	主要工具	它負責解決的問題	你必須自己把關的事
結構與文案	ChatGPT / Claude	網站地圖、頁面大綱、標題與內文、行動呼籲	搜尋意圖、語氣一致性、品牌真實性
視覺素材	AI 繪圖工具	Hero 圖、情境照、背景紋理、社群分享圖	避免「很 AI」的塑膠感、版權與商用授權
樣式與組裝	ChatGPT 寫 CSS／頁面編輯器	配色變數、按鈕樣式、響應式排版、區塊結構	行動裝置實測、載入速度、可維護性

這張表真正值得你停下來看的，是最右邊那一欄，工具分工只是表象。AI 可以幫你把三條線都跑完，但每一條線都有一件只有你能負責、AI 永遠取代不了的事。整個流程的成敗，就看你願不願意在那三個欄位裡，把「把關」這兩個字當真。下面會一條一條拆開，連同實際跑流程時會下的指令骨架一起給你。

第一條線｜用 ChatGPT 把網站的骨架與文案先定下來

做網站前先盤點內容：網站有幾頁、每頁回答什麼問題、訪客看完要做什麼。ChatGPT 可以協助發散頁面與問題清單，但效率與完整度沒有固定三倍，仍要由熟悉產品與受眾的人刪選。

實務上常會丟給 ChatGPT 一段這樣的指令骨架，你可以照著改：

• 角色設定：「你是一個擅長為〈某產業〉規劃轉換導向形象網站的內容策略師。」
• 背景輸入：把你的品牌一句話、目標客群、主要服務、競爭優勢、三個最想被搜尋到的關鍵字貼進去。
• 產出要求：請給我一份五頁式形象網站的頁面清單，每一頁註明主要標的、必含區塊、建議字數、以及一個明確的行動呼籲。

光是這一輪對話，你就會拿到一份比你自己硬擠出來完整得多的網站地圖。但別急著全收，一定要再做第二輪，請它「扮演最挑剔的目標客戶，指出這份大綱裡哪些段落他根本不想看、哪些資訊他還找不到」。這一步會把 AI 從聽話的助理，升級成會反駁你的顧問，這才是它真正值錢的地方。如果你是 ChatGPT 的新手，連基本操作都還不熟，先回去把 ChatGPT 新手教學 走一遍，再回來跑這個流程會順很多。

還可以多做一個動作，就是請 ChatGPT 針對每一頁，列出讀者可能在搜尋引擎上打的長尾關鍵字，以及這些字背後真正的疑問。這個清單有兩個用途：一是回頭校正每一頁的標題與首段，讓它們命中真實的搜尋意圖；二是找出有沒有哪一頁其實應該再拆成兩頁，因為它想回答的問題太多。你要記得，網站地圖不只是「有幾頁」的問題，它是「每一頁跟讀者的某個明確疑問之間，有沒有一對一的對應」的問題。AI 幫你看見全貌，但這個對應關係成不成立，要你自己拍板。

頁面骨架出來之後，可以把每一頁的標題跟首段交給 ChatGPT 寫第一版，但這個版本不該直接當成可上線的成品。標題要自己再過一遍，因為標題決定了點閱率跟搜尋意圖的命中率，這是 AI 最容易寫得四平八穩、卻最需要人味的地方。文案也是，AI 寫出來的版本通常訊息正確但缺乏溫度，實務上的習慣是把它當草稿，再把真實的客戶故事、自己的觀點、口語化的轉折，一段一段嫁接進去。記住一句話：為真人寫作，為機器人優化，這兩件事在這條線上要同時成立。

第二條線｜AI 繪圖的核心不是「生一張圖」，是「收斂方向」

這是整個工作流裡，非設計背景者誤解最深的一段。多數人把 AI 繪圖當成「我描述一次，它給我一張，我拿去用」。這個用法你永遠只能拿到中段的成品，因為你連自己要什麼都還沒想清楚，就急著生結果。真正會用 AI 繪圖做網站素材的人，把第一輪生圖當成一個「快速看見可能性」的過程，先別急著把它當成品。

實務上的流程是這樣：先讓 AI 繪圖工具一次吐出八到十二張同一個情境、但風格參數各異的圖，目的是逼自己看清楚「自己真正偏好的方向是哪一種」。你會發現，當你同時看到十張圖並排，你的品味會自動跳出來告訴你答案：這張的光線太假、那張的構圖太擠、另一張的色溫才對。這個「在大量選項裡做選擇」的動作，本質上就是設計師每天都在做的事，只是過去你需要先會畫，現在 AI 幫你畫，你只需要會選。

底下是這條線上固定會跑的三階段：

1. 發散期：故意下寬鬆的 prompt，把同一個畫面用四、五種風格關鍵字各跑一次，例如「攝影寫實」「日系極簡」「編輯雜誌風」「柔和粉彩」。這階段不求好看，只求看見全貌。
2. 收斂期：挑出最順眼的那一張，把它的風格描述鎖定下來，再針對構圖、光線、色調下更精確的指令，例如「主體偏左三分之一、留白在右側、自然側光」。
3. 定稿期：用同一組風格參數，把網站需要的其他圖片（次頁 Hero、產品情境、社群分享圖）一張一張生產出來，確保整站視覺屬於同一個語系，避免拼裝車的觀感。

這個「發散再收斂」的節奏，是 AI 繪圖送給非設計者最大的禮物。你不必再賭運氣，不必再跟設計師來回改圖改到翻臉，你可以在一個下午就把整站的視覺方向定到自己也安心。但這份安心有一個前提：你得願意花時間看大量的圖、訓練自己的眼睛。品味不是天生的，是大量比較出來的，這一點值得再三強調。

收斂期還有一個少人提起的技巧，是固定一組風格參數，把它當成這個網站的「視覺指紋」。多數 AI 繪圖工具讓你用同一組關鍵字、甚至同一個參考種子值，重現接近的色溫與構圖偏好。把這組參數寫下來存檔，之後不管你要生第三張、第十張圖，都套用同一套設定，整站看起來才會像同一個攝影師拍的，而不像從五本雜誌各撕一頁拼起來。這個習慣看起來很瑣碎，卻是把「AI 做的網站」跟「有品牌辨識度的網站」拉開差距的低成本動作。

為什麼 AI 生成的 Hero 圖一看就很 AI：四個破綻與修法

這一節是整篇文章最值得留給你的部分，因為它是你跟其他用 AI 做網站的人，拉開質感差距的關鍵。當 AI 繪圖普及之後，網路上出現一大批「一眼就看得出來是 AI 生」的網站 Hero 圖，它們其實都好看，卻好看到一種不自然的程度。這種感覺可以歸納成四個常見的破綻，每一個都有對應的修法。

破綻	為什麼觀感差	修法
過度完美的光影	每個表面都有攝影棚級的柔光，缺乏真實世界的雜訊	在指令加上「自然光、微弱陰影、輕微顆粒感」，或後製加一層低濃度噪點
文字渲染破圖	AI 對圖內文字掌握差，出現亂碼或扭曲字母	圖內盡量不放文字，標題改用 HTML 疊上去，把圖跟字分離
置中對稱的疲勞	AI 預設把主體擺正中央，整版看下來千篇一律	明確指定「主體偏左、負空間在右」，保留給文字標題的位置
細節過載	每個角落都有紋理跟細節，沒有給眼睛休息的留白	指令加上「負空間、留白、構圖極簡」，或事後裁切掉過度擁擠的區塊

這四個破綻，本質上都是 AI 在「平均值」上做得太好的副作用。它綜合了幾百萬張最常見的好看照片，所以給你的也是那種「最安全、最不會出錯、但也最沒有作者」的樣子。要打破它，你反而要刻意要求 AI「不要那麼完美」，加入一些真實世界才有的不完美。這是一個反直覺但非常實用的技巧：會下「不完美」指令的人，產出的圖反而更像真人在拍的。

除了這四個視覺破綻，還有一個更隱性的問題，是 AI 生成的圖常常「文化錯位」。你下一個「咖啡館」的 prompt，它給你的多半是歐美風格的吧台與光線，因為訓練資料裡這類照片最多。但如果你做的是台灣在地的店，畫面裡少了屬於在地的物件與氣味，讀者會有一種說不上來的距離感。修法是在 prompt 裡明確指定地域與文化脈絡，例如「台灣街屋巷弄」「東亞潮濕氣候的漫射光」「在地早餐店的物件」，這層指定會讓產出的圖更貼近你的真實受眾，而不是跨國通用的樣板。這個細節，是 AI 繪圖從「能用」走到「有感」的分水嶺。

還有一個常常被錯過的點，是這些 Hero 圖最終會變成網頁的資產，要考慮的是它在畫面上的功能，不是它在作品集裡的好看程度。一張漂亮的圖，如果沒有給標題留位置、如果在手機上裁切後主體只剩半顆頭，那它就是一張失敗的網頁圖，不管它單獨看多美。所以在定稿之前，一定要把圖丟進實際的頁面框架裡預覽，確認它「帶著字一起看」的時候是成立的，這個動作可以省下你後來回頭重做整批圖的痛苦。圖片最終要進到網站被搜尋引擎收錄，命名跟壓縮也不能漏掉，相關的細節整理在 圖片 SEO 優化指南 裡。

把 ChatGPT 當設計顧問，而非影印機：配色、字體、Logo

很多人以為「配色跟字體」是設計師的專利，AI 插不上手。剛好相反，這正是 ChatGPT 最能幫非設計背景者補上功課的地方。差別在於，你怎麼用它。把它當影印機，問它「幫我配一組網站顏色」，你會拿到一組四平八穩、跟全世界其他十萬個網站一樣的色票；把它當顧問，問它「我這個品牌是要服務〈某客群〉、傳達〈某感受〉，請給我三組候選配色，每一組附上為什麼這樣配、以及它在心理學上的理由」，你會拿到一份能讓你做判斷的設計論述。

底下這張表是實務上會跟 ChatGPT 一起產出的決策表，把它填完，你的品牌視覺基本盤就穩了：

項目	要它回答的問題	把關動作
主色	哪一個顏色最能傳達這個品牌的核心情緒？	實際套到大面積區塊，確認不會讓眼睛疲勞
輔色與強調色	什麼顏色當背景、什麼顏色留給按鈕？	測試強調色對比是否過得了無障礙標準
字體配對	標題字與正文字怎麼搭才不衝突？	中文情境另覓思源體或在地字體，不套英文字體了事
留白與層級	哪些段落要呼吸、哪些要緊湊？	套到實際頁面，看掃讀動線成不成立

這幾個項目每一個都有對應的深度資源，如果你要往下挖，配色的部分可參考 配色工具總整理，字體排版的節奏整理在 排版設計實戰技巧。建議你跑完 ChatGPT 那一輪之後，拿它的產出，對照這兩篇一起看，你會很清楚地看出 AI 給的建議哪些站得住、哪些其實是它自己編的。這種「拿 AI 的答案跟可信資料交叉比對」的習慣，是 AI 時代最值錢的素養之一。

Logo 可以用 AI 發想方向，但若要長期作為品牌識別或申請商標，應另外做相似商標檢索、確認工具條款與素材來源，並由熟悉適用司法管轄的專業人士評估。人工重繪或向量化不會自動消除侵權或可註冊性問題。想了解工具邊界，可參考 AI Logo 產生器推薦。

ChatGPT 寫 CSS 與區塊：零程式背景的真正槓桿

即使不熟悉 CSS，也能用白話請 ChatGPT 產生程式碼草稿；但貼入網站前仍要理解作用範圍，檢查選擇器、響應式、瀏覽器相容性、無障礙與既有樣式衝突，並先在測試環境驗證。

向 ChatGPT 要 CSS 時，固定遵守四個原則。第一，永遠用設計 token 跟它溝通，例如「主色是 --brand-primary、按鈕圓角十二像素、內距上下十六左右二十四」，不要講「給我好看的按鈕」。第二，一次只問一個元件，按鈕、卡片、表單分開來問，它會給你更聚焦的答案。第三，要求它附上「行動裝置的對應樣式」，例如「這個區塊在桌機是三欄，手機要塌成單欄，請給我 media query」，這一點很關鍵，因為 AI 預設會給你桌機版的答案，但你的讀者大半是從手機來的。第四，請它解釋每一段程式碼的作用，這不是要你學會寫，是為了讓你在它出錯時，至少知道要去哪一行改。

把這四個原則練熟，你就能在不懂程式的情況下，做出客製化程度很高的頁面。如果你是走 Elementor、Bricks 這類視覺化編輯器的路線，ChatGPT 還能幫你規劃區塊結構、寫自訂 CSS 來微調編輯器做不到的細節。對於想要更深入用 AI 思考 UI 與 UX 決策的設計師，也整理了一批很好用的 ChatGPT 介面與體驗設計指令，可以搭配著用。

這裡要提醒一個新手常踩的坑：ChatGPT 給的 CSS 偶爾會出錯，尤其是在版面疊層、flex 對齊、或響應式斷點這幾個地方。遇到它給的樣式套上去不對，別急著怪工具，把實際看到的問題用白話描述回去，例如「這兩個區塊在手機上重疊在一起了，我希望它們上下排」，它通常會在第二、第三輪把你帶到正確的解法。這種來回除錯的節奏，本來就是寫程式的日常，差別在於現在是你用中文描述、AI 動手改。你只要守住「一次只描述一個症狀、改完再驗證」這個紀律，就不會陷入越改越亂的泥淖。把這個習慣養起來，你慢慢會發現，自己對版面行為的直覺，也在這個過程裡被悄悄建立起來了。

手機不是縮小版的桌機：先看真實流量與任務

若主要客群大量使用手機，就不該只把桌機版縮小交差。Statista 的全球彙整顯示行動裝置占相當比例的網站流量，但不同網站與市場差異很大。先看自己的分析資料與核心任務，再決定採 mobile-first 或同步設計。

Google 沒有一個單一的「網頁體驗分數」。Core Web Vitals 會用於排名系統，但只是眾多訊號之一，良好分數不保證排名提升；行動版按鈕點不到或圖片過大，本質上是使用體驗問題；相關說明可見 Google Search Central 對網頁體驗的說明文件。AI 圖像常需要另外裁切、壓縮與輸出適合尺寸，不能直接把生成原檔上線。

這條線上固定要做三件事：所有圖片進站前一定壓縮、轉成 WebP 之類的現代格式；所有區塊一定進手機實機預覽，用大拇指實際點過一輪，別只在桌機縮小視窗看；所有行動呼籲按鈕一定放在拇指熱區，別只顧桌機版看順眼、手機版卻要伸長手指才點得到的位置。這三件事不花你什麼時間，但決定了你的網站在真實讀者手上的命運。想把這一塊的底子打穩，響應式網頁設計 這篇有完整的觀念跟實作。

AI 產出的東西誰負責：授權、原創性、品牌一致性

工具越方便，使用者越要為授權、來源與品牌一致性把關。不同 AI 繪圖工具的商用條款、方案限制與生成內容權利不同，著作權是否成立也受司法管轄與人類創作投入影響。上線前應保存當時適用的條款、方案與素材產製紀錄，並確認輸入素材也有權使用。

原創性是第二層。AI 繪圖的產出，理論上有可能跟某些訓練資料裡的作品近似，如果你做的是電商、品牌官網這種會長期露出、會被很多人看到的素材，不建議把未經收斂的 AI 原圖直接當主視覺。比較穩的做法，是把 AI 產出當成「半成品素材」，再經過你的裁切、調色、加字、跟其他元素組合，讓它變成有你的判斷在裡面的作品。這層加工，不只是為了版權，也是為了讓整站看起來不像同一個工廠一次出品。

這裡也牽涉到一個常見的取捨：什麼時候用 AI 繪圖，什麼時候回頭用圖庫照片，什麼時候該真的找人拍。實務上常畫的界線是這樣：需要傳達品牌真實場景、真實人物、真實產品的圖，例如店面實景、團隊成員、餐點成品，這類要嘛用圖庫的授權照片，要嘛花小錢自己拍，因為它的真實感是 AI 給不出來的；需要傳達氛圍、概念、抽象意境的圖，例如 Hero 背景、分類頁的情境照、社群分享的主視覺，這類才是 AI 繪圖的主場。把界線畫清楚，你就不會陷入「全部用 AI 生」的誤區，也不會花冤枉錢去拍本來用 AI 就能解決的素材。需要圖庫照片時，免費圖庫網站整理 裡有幾個常用的口袋名單。

品牌一致性是第三層，也是最多人翻車的地方。AI 每一次生圖、每一段文案，預設都會往「最通用、最討喜」的方向走，這代表你如果不去約束它，你的網站會出現十種不同的語氣、五種不同的色溫、三種字體。這對品牌是致命的，因為品牌的力量來自重複與一致。解法是寫一份品牌簡報，把主色票、字體、語氣範例、禁止出現的字眼、Logo 使用規則全部列進去，每次開新的 AI 對話或新的生圖任務，都把這份簡報貼在前面。這份簡報就是你的品牌憲法，AI 是來遵守它的，不是來重新發明它的。

WordPress 仍是常見落地平台：把 AI 產出穩穩接進去

把素材跟文案準備好之後，接下來要選落地平台。W3Techs 的偵測資料顯示，WordPress 約占全球網站相當大的比例。它是常見選項，但是否最划算仍取決於維護能力、功能、預算與可攜需求，AI 產出也可以落在其他架站平台。

把 AI 產出放進 WordPress，可以先規劃頁面與區塊，再選擇合適的主題和編輯器，最後由人檢查文案、圖片、品牌一致性、無障礙與效能。若不想自行維護主機與外掛，可比較AI 網站建立工具的客製、匯出與續費條件；想保留 WordPress 編輯流程，可參考Kadence AI 生成整站初稿。Google 的設計與開發工具可參考〈Gemini AI 網頁設計實作〉；若要把畫面接進程式開發，再看Stitch 與 Claude Code 的串接流程。

直白地說，工具鏈怎麼選是次要的，真正決定你的網站能不能被打到「驚豔」那個等級的，還是你願不願意在組裝階段，把那些「差一點點」的細節磨掉。一個區塊的留白多五像素、一張圖的色溫調低半階、一個按鈕的文案從「了解更多」換成「看實際案例」，這些動作 AI 都能幫你做，但「要不要做」這個決定，永遠是你下的。把 AI 的產出裝進 WordPress 的過程，本質上就是你把這些決定一個一個烙印進網站的過程。

三個一定要避開的地雷

跑這套流程的過程中，有三個錯最常出現，特別提出來給你。第一個，是把「產出量大」誤判成「品質好」。AI 能在一個晚上幫你生五十張圖、二十個版本的文案，這個數字會給你一種「我做完了很多事」的成就感，但量從來不等於質。一個網站真正被記住的，是那三到五個關鍵視覺與關鍵文案，其他都是配角。把時間押在打磨那幾個主角，會比你均勻分配心力在五十個地方有效得多。

第二個，是信任 AI 的「自信口吻」勝過自己的常識。ChatGPT 寫出來的文案、給出來的配色建議，語氣都會非常肯定，這會誤導你以為它一定是對的。但它只是「有信心」，不是「正確」。這一步固定要做一件事，就是把它給的每一個事實性陳述，拿去跟可查證的來源對一次。發現對不上，就直接刪掉重寫。這個動作花時間，但它決定了你的網站是「看起來專業」還是「真的專業」。

第三個，是跳過「目標讀者實測」這一步。整個網站用 AI 做完，很容易掉進自己的視角裡，覺得哪裡都順。但你不是這個網站的目標客戶。網站上線前，固定要找三到五位真正的目標讀者，請他們在手機上點一遍，一邊念念有詞說出心裡在想什麼。你會震驚地發現，你以為最清楚的那段文案，他們讀完根本不知道你要他做什麼。這個回饋，是 AI 再強也給不了你的，因為 AI 沒有真的活過這個情境、沒有真的需要你的服務。這正是真人經驗之所以無法被取代的原因。

從今天開始的七步行動清單

如果你讀到這裡，想要立刻動手，接著把整篇文章濃縮成七個可執行的步驟，照著跑一遍，你就會有一個用 AI 做出來、但不會被一眼看穿的網站雛形。

1. 寫下品牌一句話：用三十個字說清楚你的網站要服務誰、解決什麼問題、給人什麼感受。這句話是後面所有 AI 對話的根。
2. 用 ChatGPT 跑出頁面骨架：套用前面給的指令骨架，產出五到七頁的頁面清單，每一頁註明標的與行動呼籲。
3. 用 AI 繪圖走發散到收斂：對 Hero 圖跑八到十二張不同風格，挑出最順眼方向，再用同一組風格參數生產整站其他圖。
4. 檢查四個 AI 破綻：對每張定稿圖，逐項檢查過度完美光影、文字破圖、置中對稱、細節過載，能修就修。
5. 讓 ChatGPT 當配色顧問：要它給三組附理由的候選配色，你自己選一組，套到實際區塊看大面積觀感。
6. 手機實機預覽一遍：用大拇指點過每一頁，確認按鈕在熱區、圖片有壓縮、動線順暢。
7. 找三位目標讀者點一遍：請他們邊點邊說出心裡想法，把他們卡住的地方記下來，回頭改。

這七步走完，你手上的不會是一個完美的網站，但會是一個真正把你的判斷烙印進去、而非讓 AI 自己講話的網站。而這個差別，讀者看得出來，Google 也漸漸看得出來。

有一個小提醒：很多第一次跑這套流程的人，會在第三步發散生圖時卡住很久，因為那是最沒有標準答案、也最考驗品味的一步。給自己一個時限，例如一個下午，時間到就強迫自己收斂，不要無止盡地重 roll。你可以在第二批網站再回來優化，第一個站的重點是把流程完整跑完一次，建立信心與手感，這比任何單一張圖完美都重要。把第一個站當作你的練習場，第二個站才會真正受益於你這一輪累積下來的判斷。

AI 能降低產生草稿與嘗試不同方案的成本，但不能代替品牌理解、資訊層級、使用者研究與品質驗收。把它當成加速執行的工具即可；最終仍要由人決定內容是否準確、畫面是否一致，以及網站能否完成預期任務。