用 Claude 與 Midjourney 架站：文案、視覺到部署的生產線

其實不少人都曾打開 Claude，輸入「幫我做一個網站」，然後盯著螢幕上那坨四不像的 HTML，心想：工具都這麼強了，為什麼我還是做不出心裡那個網站？

答案很簡單。你把一個生產線的問題，當成一個提示詞的問題來解。Claude 能寫碼，Midjourney 能出圖，但一個會被讀者記住、會被 Google 找到的網站，從來不是「一段程式碼加幾張圖」湊出來的，而是一條有順序的生產線跑出來的。接下來我們就把這條生產線拆開、排好、交到你自己手上。

我先說結論：用 Claude 加 Midjourney 做網站，真正的價值在於讓一個不懂寫程式、不懂畫圖的人，第一次有能力完整當一個網站的製作人（producer）。但前提是，你得搞清楚哪一段交給 AI、哪一段死都不能放。把全部交出去，你只會得到一個沒有靈魂的樣板；全部自己來，你又回到了請設計師報價的起點。這條線該畫在哪裡，會隨工具演進持續移動，想掌握整體走向，可以先讀AI 時代的網頁設計趨勢。

為什麼「用 AI 做網站」該當一條生產線來經營

我做網站做了十幾年，看過最常見的失敗都出在分工，跟技術厲不厲害關係不大。業主把「做網站」想成一件事，找一個設計師、或丟給一個 AI，然後期待成品自己長出來。真實世界裡，一個網站至少經過四個人之手：企劃想內容、設計師弄視覺、工程師寫碼、行銷顧 SEO。誰缺席，成品就破一個洞。

AI 時代的好消息是，這四個角色你都能用工具替代一部分。壞消息是，替代不等於消失，你只是從「找四個人」變成「一個人指揮四個 AI」。你如果不知道這四個環節各要做什麼，再強的工具也救不了你。

換個比喻。想像你在開一間餐廳。Claude 是你的內場廚師，能照著你的食譜把菜炒出來；Midjourney 是你的食材供應商，能生出你指定規格的食材；但餐廳的定位、菜單怎麼排、盤子怎麼擺、招牌寫什麼，這些是餐廳老闆的事，也就是你的事。你不可能對廚師說「隨便煮一桌」，然後期待客人會喜歡。

所以這篇文章的整個架構，會圍著一個觀念轉：AI 是產能，判斷是產能的閘門。產能再大，閘門不開或亂開，流出去的都是廢水。

先把網站拆成三層：內容骨架、視覺皮層、工程外殼

要把一個網站想清楚，最快的方法是把它拆開。我自己習慣拆成三層，每一層由不同的力量負責，也對應到不同的工具。你只要記住這三層，後面所有步驟都不會迷路。

層	它的任務	讀者感受	主要負責的工具／人
內容骨架	這個網站在講什麼、分幾頁、每頁講什麼、字怎麼寫	「這網站有我要的答案嗎」	Claude（＋你的判斷）
視覺皮層	配色、字體、圖片、留白、版面節奏	「這網站看起來值得信任嗎」	Midjourney（＋你的品味）
工程外殼	HTML／CSS、響應式、速度、網址、SSL	「這網站能順利打開、手機也好看嗎」	Claude Code（＋你的驗收）

這三層有一個關鍵特性：由內而外。內容骨架先決定，視覺皮層才有依據；視覺皮層定下來，工程外殼才知道要把什麼東西包起來。絕大多數新手的錯，是從視覺開始做、挑了一個漂亮的版型，然後回頭硬把內容塞進去，最後做出一個長得像別人、講不出自己是誰的網站。

這也是為什麼這篇文章不會一開始就叫你打開 Midjourney 生圖。圖是最後才做的事，不是最先。我們從骨架講起。

Claude 負責什麼、Midjourney 負責什麼、你負責什麼

把三層對應到三個角色之前，我先把分工一次講死。很多人以為「用 AI 做網站」就是把所有事丟給同一個 AI，但 Claude 和 Midjourney 是完全不同性質的工具，硬要它們做對方擅長的事，只會兩頭空。

工作項目	Claude	Midjourney	你（不能外包）
決定網站要解決誰的問題	能問問題、幫你釐清	做不到	必須自己決定
資訊架構、頁面清單	主力	做不到	審核、改
文案撰寫	主力	做不到	把真實經驗灌進去
HTML／CSS 程式碼	主力	做不到	測試、debug
首圖、插畫、情境圖	能給提示詞建議	主力	挑選、風格統一
品牌一致性、品味	能模仿，但抓不到你的魂	能模仿風格，但不認識你	必須自己把關
SEO 與上線設定	主力（給清單與做法）	做不到	實際設定、驗收

看出門道了嗎？Claude 包辦了「會寫字、會寫碼」這一整條，Midjourney 只負責「會畫圖」這一塊。而你，這個人，負責三件 AI 怎麼樣都取代不了的事：定位、品味、真實經驗。換句話說，就是 E-E-A-T 裡那個 Experience。AI 寫不出你親身踩過的坑，這才是別人最難搬走的資產。

也因此，我不會把這篇文章包裝成「三分鐘自動架站」。那種承諾跟「保證排名第一」一樣，都是紅旗。真實的流程是：AI 幫你把四分之三的重複勞動吃掉，但你那四分之一的判斷，決定了成品是 60 分還是 90 分。

第零步：在碰任何工具之前，先用一句話講清楚這個網站要解決誰的什麼問題

這一步我稱為「第零步」，因為它發生在所有工具之前。而你會驚訝，十個想做網站的人，有八個講不出這一句話。他們會說「我要一個形象網站」「我要一個部落格」「我要一個能賣東西的網站」，這些都是形式，不是定位。

一句好的定位長這樣：「這個網站要讓〔某種人〕在〔某個情境〕下，解決〔某個問題〕，並且相信我能幫他。」舉例，一個做寵物鮮食的品牌，定位不是「賣狗食的網站」，而是「讓每天加班、沒空煮鮮食的狗奴，在三分鐘內相信我們的配方比飼料健康」。後面這句話，每一個字都會決定你的選單怎麼排、首圖放什麼、文案怎麼寫。

這一步你可以用 Claude 當教練，但答案得你給。一個好用的問法是這樣的：

「我要做一個〔主題〕的網站，我的目標讀者是〔描述〕，他們現在最大的困擾是〔描述〕。請用訪談的方式，一次問我一個問題，總共問我五題，幫我把這個網站的定位濃縮成一句話，再展開成三個核心訊息。」

關鍵是讓 Claude 問你，而不是你問 Claude。因為答案在你的腦袋裡，AI 的工作是把你的答案問出來、整理好。這跟單向丟一個 prompt 叫它「幫我想定位」完全不同，後者只會給你一堆正確但空洞的廢話。

想更系統化地把這個「先搞清楚要解決什麼問題」的腦子練起來，可以回頭讀我們寫的設計思考完整指南，把同理心地圖那一套搬過來用。定位沒有想清楚就開工，等於裝潢房子連平面圖都沒畫就敲牆。

用 Claude 把資訊架構與文案先長出來

定位一句話有了，接下來就是把它展開成一張地圖。這一層是 Claude 的主場，也是我最推薦你把 AI 用到極致的地方。原因很實際：內容骨架是文字，文字正是 Claude 最強的能力，而且改字比改圖快太多，在這一層多試幾次幾乎零成本。不確定怎麼起手的話，可以從14 個 ChatGPT 設計指令裡挑幾個句式來改，先把問問題的手感練起來。

從網站地圖開始，不要從首頁開始

新手最常犯的錯，是直接做首頁。正確的順序是先畫 sitemap（網站地圖）：這個網站有幾頁、每頁之間怎麼連。為什麼？因為首頁只是這張地圖的入口，地圖沒畫好，入口做得再漂亮，讀者走進去也是迷宮。

你可以把定位那句話丟給 Claude，請它產出三個版本的 sitemap 草案，每個版本附上理由：

「根據這個定位〔貼上〕，請給我三個不同取向的網站結構：第一個偏『轉換導向』（盡量少頁、每頁都推行動）、第二個偏『內容權威導向』（主題叢集、支柱頁加群集頁）、第三個偏『品牌故事導向』（用敘事帶讀者走）。每個版本列出頁面清單，並說明各頁的用途。」

這裡的「主題叢集」「支柱頁」是 SEO 的觀念，意思是不要把所有內容攤成一堆，而是圍繞一個主題，做一個總覽頁（pillar）加上一群支援頁（cluster），用內部連結串起來。這對長期累積搜尋流量非常關鍵，如果你打算讓這個網站活超過一年，這個結構從第一天就要埋進去。這部分的完整做法，可以看SEO 完整攻略裡關於主題權威的章節。

每一頁都要先回答「讀者帶著什麼問題進來」

sitemap 定了之後，每一頁都對應一個讀者的問題。首頁對應「你是誰、能幫我什麼」；關於我們對應「我憑什麼相信你」；服務頁對應「你怎麼收費、流程怎麼走」；部落格對應「你懂不懂我在煩惱的事」。

把每一頁的「讀者問題」列出來，再讓 Claude 針對每個問題寫文案。這裡有一個我重複驗證過無數次的訣竅：不要叫 Claude「幫我寫關於我們」，要叫它「幫我回答一個猶豫要不要合作的潛在客戶，心裡那三個最大的疑慮」。前者會給你官腔，後者會給你有血肉的文案。差別在你有沒有把搜尋意圖（search intent）講給它聽。

文案出來之後，這時候我會強烈建議你做一件事：把你自己真實的經驗手寫進去幾段。Claude 寫得出通順的句子，但寫不出「我去年幫一個客戶踩過這個坑，後來我們怎麼補救」這種東西。把這種第一手經驗插進去，整篇文章的 E-E-A-T 會瞬間被拉起來。這就是「AI 負責產出、你負責灌入經驗」的實際操作。想更深入理解 AI 內容在經驗維度的弱點，可以參考AI 搜尋時代的 SEO 全攻略。

文案的長度，由搜尋意圖決定，不由字數決定

一個常見的誤解是「文章越長 SEO 越好」。這是錯的。正確的判斷是：看這個主題在搜尋結果第一頁的平均長度，以及讀者真正需要多少資訊。有些問題三行就答完了，你硬寫三千字只會增加跳出率；有些問題讀者要的是完整教學，你寫五百字就是敷衍。

你可以把目標關鍵字丟給 Claude，問它：「這個搜尋背後，讀者真正想完成的事是什麼？他要的是快速答案、還是步驟教學、還是深度比較？」它通常能給你不錯的判斷，你再結合自己對這個產業的理解去調整。站內 SEO 的細節，例如標題、描述、標題層級怎麼排，這篇站內 SEO 攻略有完整的清單，這裡不重複。

用 Midjourney 產出視覺素材，但用設計判斷收斂它

內容骨架穩定後，再處理視覺方向。若版面仍不明確，可以用 Anthropic 推出的 Claude Design，透過對話嘗試設計稿與互動原型；這項產品確實支援設計與原型工作。Midjourney 則可用來快速探索多個視覺方向，但生成數量、速度與一致性會受方案、設定、提示詞和服務狀態影響，正式量產前應先固定風格參考與驗收規則。

所以這一層的成敗，不在「你會不會下 prompt」，而在「你會不會收斂」。Midjourney 負責生，你負責選。生的環節我給你幾個原則，選的環節才是真正的戰場。

四個讓 Midjourney 聽話的 prompt 原則

第一，綁死風格關鍵字。同一組風格詞要在每一張圖都重複出現，例如「minimalist, soft daylight, muted pastel palette, lots of negative space, editorial photography style」。這組詞等於你的視覺指紋，每次都要帶上，否則每張圖會各走各的路。

第二，先決定比例再產圖。首圖通常要 16:9 或 21:9，產品圖可能是 1:1，手機版 hero 可能要直的 9:16。你先用錯比例生圖，再硬裁切，構圖一定崩。Midjourney 用 --ar 參數指定比例，這一步千萬別省。

第三，用參考圖（image prompt）鎖品牌感。如果你已經有 logo 或一張定調的參考圖，把它的網址放進 prompt 開頭，Midjourney 會去抓它的調性。這對品牌網站特別重要，能讓新產的圖跟既有視覺貼得起來。

第四，一次生一批，從裡面挑，不要一生就上。同一個需求，我通常會生成四到八個版本，挑一個最貼的，再把它的種子值（seed）記下來，用它繼續微調。挑圖的品味，是 AI 永遠學不會你的部分。想更系統化地練 prompt 的基本功，這篇AI 提示詞入門是很好的起點。

Midjourney 會在哪裡翻車，你要先知道

老實說，Midjourney 不是萬能。它有幾個硬傷，你要在企劃階段就避開，不要等到圖都生了一堆才發現不能用。

第一個硬傷是文字。叫它畫招牌、畫包裝、畫任何上面有字的東西，那個字幾乎都是亂碼。所以凡是需要正確文字的圖（logo、產品包裝特寫、UI 介面截圖），不要交給它，改用設計工具做。

第二個硬傷是精確的產品細節。如果你賣的是一個有具體外觀的實體產品，Midjourney 生出來的「近似品」會跟真品有出入，用在正式產品頁會誤導消費者。這種圖請用實拍。

第三個硬傷是真人臉部的授權問題。它生的人臉是合成的，但用在你網站上當「客戶見證」「團隊照片」會有誠信問題。讀者越來越會辨識 AI 臉，被抓到反而扣信任。團隊照片請用真的，見證可以化名但要標示清楚。

Midjourney 最適合的，是氛圍圖、情境圖、抽象意象圖、裝飾性插畫。首頁那張帶情緒的 hero、文章開頭的意境圖、分類頁的裝飾背景，這些才是它的主場。把它的邊界畫清楚，你才不會把它推到會翻車的位置。

Midjourney 採訂閱制，依方案等級決定你能用的功能（快速出圖時數、放大的解析度等），實際價格以 Midjourney 官方定價頁為準。它的成本結構是「每月固定費＋有限快速額度」，所以企劃階段把圖的需求清單先列好再一次集中產，會比想到一張生一張更省。

視覺一致性，比單張圖漂亮更重要

我寧可一個網站每一張圖都只有 70 分但風格一致，也不要一個網站有幾張 95 分的神圖夾在一堆 60 分的圖中間。因為讀者的眼睛會自動偵測不一致，一旦覺得「這網站好像拼裝車」，信任就掉一階。

要維持一致，最有效的動作是在開工前先做一頁「視覺規範」：配色三到五色、字體兩到三種、圖片的色溫與飽和度區間、留白比例。這一頁就是你的品味具象化，每一次 Midjourney 出圖、每一次 Claude 給你配色建議，都拿這一頁對著檢查。網頁設計必備的幾個視覺元素，這篇網頁設計必備關鍵元素有完整清單，可以直接拿來當檢查表。想看目前主流的視覺走向，也可以對照最新網頁設計趨勢，但記得趨勢是參考、不要照抄。

把 Claude 的程式碼、Midjourney 的圖、你的判斷組起來

內容有了、圖有了，接下來是把它們裝進一個能跑的網站。這一層是 Claude Code 的主場。Claude Code 是 Anthropic 出的命令列工具，本質上是一個能直接動你整個專案的AI Agent，能直接讀寫你電腦裡的檔案、跑指令、改完再驗證，跟只會在對話框裡吐一段 HTML 的純聊天模式很不一樣。如果你對這個工具完全陌生，先看Claude Code 中文教學打好底，再回來這一節。

用元件思維，不要用一頁一頁的思維

叫 Claude Code 寫網站，最容易踩的坑是叫它「幫我寫首頁」，然後再叫它「幫我寫關於我們」，每一頁都從零開始。這樣做你會得到一堆重複的程式碼，改一個顏色要改十個檔案。

正確的做法是先做元件，再組頁面。把按鈕、卡片、標題列、頁尾這些會重複出現的東西，先做成獨立的小單位（component），統一樣式，再像積木一樣組成每一頁。你可以在第一個 prompt 就告訴 Claude Code：

「我要用純 HTML 加 Tailwind CSS 做一個網站。請先幫我建立共用的元件：按鈕（三種尺寸）、卡片、章節標題、頁首、頁尾。所有元件的配色用〔你的視覺規範〕，字體用〔你選的字體〕。元件做好並展示在一個示範頁之後，再開始組正式頁面。」

這種「先骨架後頁面」的做法，是工程師做網站的標準流程，把它搬過來用，你的網站會從一開始就乾淨、好維護。想看完整的元件化架站實戰，用 Claude Code 搭建專業網站有非常詳盡的 Skills 加 MCP 工作流示範。如果你連「為什麼要用 AI 寫程式」這件事都還在猶豫，也可以先讀Vibe Coding 入門認識一下這個流派。

響應式不是選配，是入場券

在手機上能不能看，決定了你一半的讀者會不會在三秒內離開。叫 Claude Code 寫版面時，務必要求它從一開始就用行動裝置優先（mobile-first）的寫法，而不是先寫桌面版再「順便」調手機版。後者幾乎一定會漏。

驗收的時候，不要只在電腦上看。把手機拿出來實際開，把瀏覽器縮到最窄，點每一個按鈕、讀每一段字。響應式設計的完整觀念與檢查清單，響應式網頁設計 RWD寫得很細，照著檢查就不會漏。這一步省下來的，是你未來三個月被「手機版跑版了」這種訊息追著跑的時間。

Claude Code 會犯的錯，你要會抓

Claude Code 寫的程式碼通常能跑，但「能跑」不等於「沒問題」。它最常犯的幾個錯：重複定義同一個樣式、把響應式中斷點設得太粗、忘記給圖片加替代文字（alt）、外部連結忘記開新分頁。這些都不會讓網站壞掉，但會讓網站品質掉一階。

我的習慣是，Claude Code 每改一輪，我都會要它自己做一次自我檢查：「這次的改動裡，有沒有重複的樣式、漏掉的 alt、沒處理的手機版斷點？請列給我。」它通常會抓出大部分，剩下的我人工再看一次。這種「讓 AI 自己審 AI」的迴圈，是把 AI 從聽命行事的工廠小弟升級成策略副駕的關鍵動作。整個 Claude 生態裡不同工具怎麼分工，可以看Claude、Claude Code、Claude Cowork 比較。

一個能直接套用的 Claude Code 起手式

講了這麼多觀念，給你一個能今晚就貼進去用的起手式。這組 prompt 的設計邏輯，是把「我是誰、做給誰、視覺規範、技術限制」一次講清楚，讓 Claude Code 從第一個檔案就照你的規矩走，別讓它自己發明一套約定。你只要把中括號裡的東西換成自己的資訊就能用，改完再依它的回覆繼續追問細節。

「我要做一個〔網站類型，例如：烘焙工作室形象網站〕，目標讀者是〔描述，例如：想訂生日蛋糕的台北上班族〕。技術堆疊用純 HTML 加 Tailwind CSS（CDN 版），行動裝置優先。視覺規範：主色〔色碼〕、輔助色〔色碼〕、字體〔字體名〕、大量留白、圓角按鈕。請先建立共用的 header、footer、按鈕（primary／secondary／ghost 三種）、卡片四個元件，放在 components 資料夾，再做一個 index.html 把它們組起來。每個 img 都要加 alt，外部連結開新分頁。完成後告訴我你建了哪些檔案、為什麼這樣切。」

這個 prompt 有三個地方值得你注意。它把視覺規範寫進去，等於把前面那一頁品味清單直接餵給 AI，產出來的東西才會跟你 Midjourney 生的圖同一個調性，不會一邊冷色一邊暖色。它要求元件先行，逼 AI 用結構化的方式切檔案，避免它吐一坨單檔 HTML 給你，後續要改任何一個按鈕的樣式，都只改一個地方就全站同步。最後那句「告訴我你為什麼這樣切」是整段最關鍵的一句，它強迫 AI 把每個決策說出來，你才有辦法審核它的判斷對不對、有沒有偷懶。把要求 AI 解釋自己的動作變成固定習慣，你會從「被 AI 牽著走」慢慢變成「審核 AI 的工作」，這個身分的翻轉，是用 AI 做網站能不能做出專業級成品的分水嶺。

還有一個容易在企劃期被漏掉的細節：在 Claude 幫你把頁面骨架排出來的那一刻，就要把內部連結一起拉好。哪一頁要連到哪一頁、錨點文字寫什麼，在你還沒填正文之前決定最輕鬆，因為這時候架構清楚、沒有文字干擾。內部連結是 SEO 的地基工程，等於在自己網站裡鋪路，讓讀者與搜尋引擎爬蟲都走得通；等到文章都寫滿了才回頭補連結，會改得到處都是，也容易漏。把支柱頁跟群集頁之間的連結先畫成一張圖，再交給 Claude Code 一次拉好，是最省力的順序。

AI 產出最容易翻車的五個地方（與補救）

走到這裡，你已經把三層都跑過一次了。接下來我要誠實地告訴你，這整套流程裡，讀者最容易一眼看出「這是 AI 做的」、然後瞬間扣分的五個地方。這一節是我自己踩坑踩出來的清單，價值比前面任何一節都高，因為它救的是信任。

翻車點	讀者的感受	補救動作
文案全都是正確的廢話	「每一句都對，但看完什麼都沒記住」	每頁強制插入一段你親身經歷的故事或具體數字；刪掉所有「在現今社會」「隨著科技的進步」這類開場
圖片風格東拼西湊	「這網站像四個人做的」	開工前先定一頁視覺規範，每張圖都拿它對照；不一致的圖寧可重出也不要硬上
用 AI 合成臉當真人	「這見證是不是假的」	團隊與見證用真實照片（可化名但標示清楚）；氛圍圖才用 Midjourney
結構抄得太像樣板	「這版型我昨天才在別的網站看過」	sitemap 要你自己的答案決定，不是 Claude 給的通用模板；至少改選單順序與區塊命名
沒有作者的樣子	「這網站背後是誰？我不確定」	放一個真實的關於頁、作者介紹、聯絡方式；讓讀者知道出問題找得到人

這五個地方有一個共同根源：AI 的預設值是「安全的中位數」。它會給你最不容易出錯、但也最沒有記憶點的答案。你要做的，就是在這五個地方手動把成品從中位數往外推，推到有你這個人的味道的位置。這就是我反覆說的，把判斷留在自己手上。

如果你的網站是要長期經營的內容站或品牌官網，這幾個點的影響會被時間放大。一個沒有作者樣子的網站，做三年也不會累積出 E-E-A-T；一個結構抄樣板的網站，做三年也只是一個跟別人長一樣的複製品。這方面的長期思考，這篇給品牌網站的關鍵建議有很實用的提醒。

從上線到被找到：別讓 AI 幫你做了一個沒人看的網站

網站做好了，最痛的不是它不漂亮，而是它沒人來。我看過太多人花兩個月用 AI 把網站做到 90 分，然後上線之後就放著等流量，等了半年等不到一個訪客，才驚覺 SEO 不是自動發生的。所以這一層，我們在企劃階段就要埋好，上線那一刻就要驗收。

上線前必做的四件事

第一，HTTPS。網站一定要走加密連線，沒有 SSL 憑證，瀏覽器會直接把它標成「不安全」，讀者還沒看到內容就走了。HTTPS 同時也是 Google 在 2014 年 8 月的〈HTTPS as a ranking signal〉公告中公開承認的排名訊號之一，雖然影響不大，但它是零成本就能拿到的分數，沒理由不拿。SSL 憑證怎麼選、怎麼裝，這篇SSL 憑證完整教學有完整步驟。

第二，網址與網域。挑一個好記、跟品牌一致的網域，是讀者能不能記住你的第一關。網域註冊與 DNS 指向的設定，網域申請購買全攻略一步步帶著做。如果你還在思考子網域跟子目錄哪個對 SEO 好，這篇子網域 vs 子目錄全解析有清楚的比較。

第三，速度。Midjourney 出的高解析圖、Claude Code 寫的未壓縮 CSS，都是拖慢網站的兇手。Core Web Vitals 是 Google 量化網站體驗的指標，LCP（最大內容繪製）、INP（互動延遲）、CLS（版面位移）三個數字顧好，排名與留存都會受惠。完整優化做法在Core Web Vitals 完全攻略。圖片記得壓縮、用現代格式、延遲載入，細節看速度優化的完整做法。

第四，結構化資料。用 Schema 標記告訴 Google 你是誰、賣什麼、文章是誰寫的，能讓你在搜尋結果佔到更豐富的版位。這對 AI 搜尋時代特別重要，因為 AI 答案引擎也會讀 Schema 來決定要不要引用你。完整教學在結構化資料 Schema 標記教學。如果你想在 AI 搜尋裡被引用而不只是被排名，AEO 優化指南跟GEO 生成式搜尋優化是必讀。

主機與平台，影響的是你未來能不能輕鬆改

網站要放在哪裡跑，這個決定會跟著你很多年。你用 Claude Code 做出來的是純靜態檔案，那麼基本的虛擬主機就夠用，虛擬主機完整指南可以幫你挑。如果你想用內容管理系統，後續改文案不用每次都碰程式碼，那 WordPress 是最主流的選擇，30 分鐘架好 WordPress是新手起點；WordPress 跟其他架站平台的比較，看Wix vs WordPress 終極對決。Claude 本身的方案選擇（Free、Pro、Max 或 API 用量計費）會影響你做網站時能用的額度與模型，實際方案以 Anthropic 的 Claude Plans 頁面為準。

整個技術性 SEO 的全貌，技術性 SEO 完全指南有一份完整清單，建議上線前一個欄位一個欄位打勾。這件事現在做，比你三個月後發現流量起不來再回頭補，省下十倍的力氣。

三種人，三種工作流：個人作品集 / 品牌官網 / 內容站

講到這裡，整套流程你應該有輪廓了。但「AI 架站」這件事，會因為你要做的網站類型不同，流程的比重也跟著不一樣。我把最常見的三種人，各自的流程重點拆給你，讓你對號入座，不要把別人的流程硬套在自己身上。

個人作品集：視覺比重最高，內容求精不求多

作品集的讀者只有一個問題：「這個人厲不厲害、風格對不對我的胃口」。所以視覺皮層是主角，Midjourney 在這裡的價值最高。一張張有品味、有個人風格的 hero 圖、作品縮圖，比三千字自傳有用十倍。內容骨架則反過來，越精煉越好，Claude 幫你把「關於我」「聯絡我」寫得俐落就夠了，不要堆字。工程外殼用一頁式（one-page）捲動即可，響應式顧好，不需要複雜的 CMS。視覺與版面的入門，UI/UX 設計差異全解析跟網頁版面設計攻略很夠用。

品牌官網：三層都不能偏，品牌一致性是生死線

品牌官網是三層最均衡的一種。內容要講清楚你是誰、賣什麼、憑什麼相信你（Claude 主場）；視覺要把品牌感做出來、讓讀者記得住（Midjourney 加你的品味）；工程要穩、要能隨事業成長而擴充（Claude Code 加 CMS）。品牌官網最致命的錯，是視覺不一致，這一點我在前面視覺層強調過，這裡的代價最高，因為品牌一旦被記成「拼裝車」，要洗回來很貴。品牌官網從零開始的完整做法，品牌官網設計全攻略跟WordPress 架站新手教學是兩條主流路線。

內容站：內容骨架是命脈，主題叢集從第一天就埋

內容站（部落格、知識站、媒體站）的命脈是內容骨架。你的長期競爭力，取決於主題叢集佈局得夠不夠深、關鍵字地圖鋪得夠不夠廣。Claude 在這裡的價值最高，它能幫你把一個大主題拆成幾十篇文章的骨架、幫每篇寫初稿，但你必須把真實經驗灌進去，否則整站都是正確的廢話，Google 的演算法跟讀者都會淘汰你。視覺層在內容站反而最節制，乾淨、好讀、不搶戲就好，Midjourney 只用在文章首圖與分類視覺。工程層一定要上 CMS（WordPress 為主），否則文章一多你改不動。內容站的 WordPress 加 SEO 完整路線，WordPress 架站與 SEO 優化全攻略是聖經級的一篇。

你現在就能動手的六步行動方案

觀念講完了，接下來是你的下一步。我幫你把整套流程壓成六步，每一步都附一個今晚就能做的具體動作。不要試圖一次做完，一步一步來，每完成一步，你對這個網站的掌握度就實實在在多一層。

1. 寫下定位那句話。用我前面給你的模板：「這個網站要讓〔某種人〕在〔某個情境〕下，解決〔某個問題〕」。寫不出來，就開 Claude 用訪談模式讓它問你五個問題。沒有這句話，後面全部白做。
2. 產出 sitemap 草案。把定位丟給 Claude，要三個取向的版本，挑一個最貼的。手畫一張樹狀圖貼在牆上，之後所有決定都對著它檢查。
3. 做一頁視覺規範。配色、字體、圖片色溫、留白比例，寫成一頁。這是你品味的具象化，每一次 Midjourney 出圖都拿它對照。
4. 用 Claude Code 做元件，再組首頁。先做按鈕、卡片、頁首頁尾，再組頁面。行動裝置優先，不要先做桌面版。每改一輪都要它自我檢查。
5. 用 Midjourney 生視覺素材，從一批裡挑。只用在氛圍圖、情境圖、裝飾插畫。需要文字、產品細節、真人臉的圖，用別的方法做。
6. 上線前打勾技術 SEO 清單。HTTPS、網域、速度、結構化資料、響應式，一項一項驗收。這一步現在做，是未來流量能不能起來的地基。

這六步走完，你會得到一個不完美、但是真的是你自己做出來的網站。它會有你的判斷、你的品味、你的經驗在裡面，這是任何樣板、任何一鍵生成工具都給不了你的東西。AI 把門檻拉低了，但把門檻拉低之後，真正決定高下的，是你願不願意在那四分之一的判斷上，比別人多花一點心力。

如果你在這條路上想走得更深，whoops 這裡有一整套從架站到 SEO 的教學，都是我自己實戰累積下來的。你可以把這篇當起點，順著內部連結一站一站讀下去。把一個網站從零做到會被找到，是一件需要時間的事，但每一步都算數。開始播下你的第一顆種子吧。