Claude Design 是什麼：把設計、原型與前端視覺塞進同一個對話

用 Claude Design 加上 Midjourney 再交棒 Claude Code 做網站，是一條「線框稿 → 高擬真 UI → 動態素材 → 可用程式碼 → 正式主機部署」的 AI 網頁技術流，全程不必手刻 HTML 也能跑完整個生產線。Claude Design 是 Anthropic 在 Claude 內建的視覺設計工作台，需要 Claude Pro 方案以上才能使用，能在同一個對話裡一次生成 Wireframe 與高擬真 UI 兩種版本 [來源：Anthropic〈Claude Plans〉https://www.anthropic.com/pricing 2026]。Midjourney 負責把 AI 生成的靜態圖再轉成動態影片，最後 Claude Code 把設計打包成 HTML 與素材資料夾，上傳到主機就能對外瀏覽。

重點先看：整套流程的核心順序只有五步：先把網站想法用 Prompt 餵給 Claude Design 生成 Wireframe、挑一個版型升級成高擬真 UI、用 Midjourney 生成 Hero Section 動態影片與其他素材、透過 Send To Claude Code 把設計轉成 HTML、最後把檔案上傳到 cPanel 並開啟 SSL。真正影響成品質感的關鍵在 Wireframe 階段有沒有把七個首頁區塊、調性與目標受眾一次講清楚，這份 線框稿設計指南 把前置思考講得很完整。

Claude Design 是什麼：把設計、原型與前端視覺塞進同一個對話

Claude Design 是 Claude 內建的視覺設計工作台，定位上跟 Claude Design 介紹 裡講的一樣，是把「設計、原型製作與前端視覺」整合在同一對話裡的獨立工作台。它跟一般的問答模式不同，左側有 prototype 面板，提供 Wireframe 與高擬真兩種形式，Wireframe 只畫結構，高擬真則把色彩、圖片與字體全部填進來。要把它跟 Claude Code 與其他工具協作 的環節串起來，前提是你必須是 Claude Pro 以上方案，否則連 Design 入口都看不到。

把它跟同類工具擺在一起看會更清楚。跟 Figma 完整教學 比，Claude Design 的強項是用自然語言生成多版型，省掉手拉元件的時間，但細部排版控制仍輸 Figma；跟 Vibe Coding 是什麼 比，它更早停在設計階段，把寫程式的工作交棒給 Claude Code。它真正適合的場景是「我想很快看到一個有七個區塊、風格明確的高擬真首頁」，至於要逐像素精修的量產設計，仍交回 Figma 或設計師處理。設計語彙的打底則可以對照 UI UX 設計指南 等基礎觀念。

工具	定位	在這條流程裡的角色
Claude Design	AI 視覺設計工作台	生成 Wireframe 與高擬真 UI
Midjourney	AI 圖片與影片生成	產出 Hero 影片與素材圖
Claude Code	代理式程式開發	把設計轉成可用 HTML
cPanel 主機	檔案管理與 SSL	部署對外瀏覽

說到底，Claude Design 解決的是「怎麼在五分鐘內把腦中那個模糊的網站樣子變成可挑選的兩個版型」，至於怎麼畫到完美，那是設計師的事。它的價值在於把過去要在白板上畫半天、再丟給設計師溝通的需求釐清階段，壓縮成一次 Prompt 互動。如果你的需求還在「我也不確定網站要做什麼」的階段，先讀過 做品牌網站前先想清楚的事 再進 Claude Design，產出的版型會精準很多。

前置準備：Prompt 大綱、Claude Pro 方案與 Midjourney 帳號

進 Claude Design 之前，先把三件事準備齊全才不會做到一半斷電。第一是 Claude Pro 以上方案，月費 20 美元起 [來源：Anthropic〈Claude Plans〉https://www.anthropic.com/pricing 2026]；第二是 Midjourney 付費帳號，它是訂閱制、不提供免費額度；第三是一份寫好的 Prompt 大綱，包含網站主題、首頁區塊數、調性、配色、目標受眾與 Hero Section 排版想法。把這份大綱整理成可複製貼上的指令，是整套流程能不能跑順的最大變數。

• 網站主題與情境：例如「高科技機器人打鬥賽事網站，走暗黑色系」，主題決定後續 Midjourney 生圖的視覺語彙。
• 首頁區塊清單：列出七個區塊，例如 Hero、賽事影片三格、價目表、最新消息、合作 Logo 輪播、常見問題、訂閱 CTA。
• 調性與配色：明訂暗黑、科技感、霓虹色系等關鍵字，Claude Design 會據此決定字體與背景。
• 目標受眾：寫出觀眾輪廓，例如賽事粉絲、科技愛好者，會影響版面密度與用語。
• Hero Section 排版：標明左右兩欄或全螢幕影片背景，這一項直接決定要不要動用 Midjourney 做動態素材。

Prompt 寫得好不好，可以靠一個簡單檢查：把你的指令丟給 Gemini 或 ChatGPT，請它回放一次它理解到的網站長相，如果回放結果跟你腦中想的有落差，那就是 Prompt 還沒寫夠清楚。這個動作很省事，因為在 Claude Design 裡每次重新生成都要消耗 Token，先在免費的對話裡把 Prompt 校準好，比在 Design 裡反覆試錯划算。指令設計的底層邏輯可以參考 Prompt 到底是什麼。

Midjourney 的帳號要提早辦好，因為它的訂閱方案最低每月 10 美元起 [來源：Midjourney〈Pricing〉https://www.midjourney.com/pricing 2026]，且付費後仍要進 Discord 或網頁版才能生圖。如果你打算把靜態圖再轉成動態影片，建議直接訂到能使用影片生成功能的方案，否則做到 Hero Section 那一步會卡住。素材壓縮則記得預留 WordPress 圖片壓縮外掛 或 TinyPNG 這類工具的時間，AI 生成的圖檔體積普遍偏大，不上壓縮會拖慢網站速度。

這裡有個成本上的小提醒值得先記下來。Claude Pro 方案每五小時有使用額度上限，密集跑高擬真 UI 與反覆迭代時很容易撞到上限，撞到就得等重置或臨時升級到 Max 方案；Midjourney 的方案則是按生成張數與影片秒數計算 Fast GPU 時數，超出後要嘛等 Relax 模式排隊、要嘛加購。把這兩個限制擺在心上，你的節奏會更穩，不會做到一半被迫中斷。配套的心態是「先用免費對話把 Prompt 校準好、再進付費工具一次到位」，這個習慣長期下來能省下不少訂閱成本，也是 Claude Sonnet 5 介紹 裡反覆強調的工作哲學。

第一步：用 Claude Design 生成 Wireframe 與多版型

進 Claude 之後點左側的 Design，先給專案取名、選擇 Wireframe 模式，再把準備好的第一段 Prompt 貼上。系統會跳出讓你勾選首頁區塊、調性、配色、佈局、目標受眾與 Hero 排版的選單，這些勾選就是它生成版型的依據。建議在版本數量那一欄填二或三就好，再多會把 Token 消耗推高但邊際效益遞減，跑完一次你大概就能看出哪個方向值得繼續。

送出後 Claude Design 會一次給你 Layout A 與 Layout B 兩個版本，左側附上完整的設計描述供你逐項比對。以一個賽事網站為例，Layout A 可能是 Hero 加三格影片加價目表的標準長版面，Layout B 則是左右兩欄的影音前置版型。兩者之間可以切換預覽，也可以點右上角按鈕在新視窗全螢幕看體感。這一步跟傳統 原型設計 最大差別在於，你不必自己拉任何一個元件，AI 一次給你兩個完整可挑的版型。 具體的 Prompt 怎麼下？舉一個可以直接套用的範例：「為一個高科技機器人格鬥賽事品牌設計首頁，調性暗黑科技感、霓虹青色與紫紅色為主、字體偏未來感無襯線。首頁要包含七大區塊：全螢幕 Hero（背景影片、左側大標與報名按鈕）、最新賽事三格影片牆、票價比較表（學生票、一般票、VIP 三欄）、選手戰績排行、合作媒體 Logo 輪播、常見問題下拉、Email 訂閱區。版型偏好左右兩欄不對稱，Hero 占滿第一屏。」這段指令把主題、調性、區塊清單、配色、版型偏好一次講足，跑出來的兩個版本就會落在你要的方向上，剩下的只是微調，而不是從零溝通。

老實說，第一次跑出來的版本九成不會一次到位，但它的價值是給你一個具體可挑剔的對象。看到 Layout A 你可能會發現「哎，價目表放太下面」「這個 CTA 怎麼擠在角落」，這些直覺反應就是下一步 Prompt 的素材。很多人卡在這一步，是因為不確定自己到底要什麼，於是不斷在腦中空想，但腦中模擬的精度永遠輸給一個眼睛看得到的具體版本。把這個迭代觀念跟 設計思考指南 的精神對照著看，會更清楚為什麼 Wireframe 階段要鼓勵快速產出多版，先有版本再挑毛病，比反覆琢磨一個還沒落地的想法更有效率。

選定想用的版型之後，把指令改成「請用 Layout A 做出高擬真 UI 設計」，送出後就會進入下一階段。這裡要提醒一件事：Token 消耗在高擬真階段會明顯跳升，因為它要把配色、字體、圖片預留位置全部填滿，如果你的方案額度有限，建議在 Wireframe 階段就把版型決定好，避免在高擬真階段才大改結構。整個 Claude 生態的協作邏輯可對照 Claude AI 完整指南。

第二步：把 Wireframe 升級成高擬真 UI

高擬真 UI 與 Wireframe 的最大差別在於，它把色彩、字體、圖片元素全部填進來，看起來跟正式上線的網站幾乎一模一樣。Claude Design 會大量套用科技感元素，例如漂浮背景、跑馬燈、LIVE 直播標籤、觀看次數計數器，這些細節讓你在還沒寫任何一行程式碼之前，就能拿到一個可以全螢幕預覽、可以截圖給客戶看的版本。

這個階段最常出現、也最容易被忽略的問題是「看起來很酷但內容空」。AI 會用假字、假圖片把版面填滿，看起來豐富，但這些填空內容能不能換成你真實要用的素材，才是決定網站會不會流於 Demo 的關鍵。所以高擬真 UI 跑出來之後，建議立刻把每一個區塊對應的真實內容標出來：這一格要放什麼影片、那一區要放幾張產品圖、CTA 要連到哪個報名表單。這份清單就是你接下來要請 Midjourney 生圖、或自己準備素材的依據。

高擬真 UI 常見區塊	要預備的真實素材
Hero Section 背景	Midjourney 動態影片或主視覺圖
焦點 Highlight 三格	三張主題情境圖
價目表	方案名稱、價格、內容條列
最新消息	至少三則新聞標題與配圖
合作 Logo 輪播	廠商標誌檔（建議透明 PNG）
常見問題	五到七題 QA 文字
訂閱 CTA	表單後端或 Email 收件設定

規劃這份素材清單時，把 網頁版面配置指南 與 網頁設計必備元素 一起擺在旁邊對照，會幫你抓出哪些區塊是裝飾、哪些是骨幹。

第三步：用 Midjourney 生成 Hero 動態影片與素材圖

Midjourney 在這條流程裡的角色是補上 Claude Design 自己做不出來的精緻圖片與動態影片，特別是 Hero Section 那一格。它的運作方式是先用 Prompt 生成靜態圖，一次給四張讓你挑，再把選中的靜態圖當成 Start Frame 餵回去，轉成四到五秒的動態影片。整個流程不需要會任何繪圖軟體，但要會寫夠完整的生圖指令。

生成 Prompt 最實用的訣竅是「用 AI 寫給 AI」。先把白話想法，例如「兩台機器人對打、有鋼鐵人感覺、會迸火花、16:9」丟給 Gemini 或 ChatGPT，請它產出符合 Midjourney 語法的完整指令，再把這段指令複製回 Midjourney 送出。這層中間翻譯能讓生圖結果穩定很多，因為 Midjourney 對參數順序與風格關鍵字很敏感，自己寫很容易漏掉它偏好的語法。 舉個具體的對照。白話想法是「暗黑機房裡兩台機器人對打、火花四射、電影感」，丟給 Gemini 後它可能回你這樣的指令：「cinematic shot, two heavy mechs clashing in a dark neon-lit arena, sparks flying, volumetric fog, dramatic rim lighting, teal and magenta palette, 35mm film grain, hyper-detailed, --ar 16:9 --style raw --v 6」。把這串貼回 Midjourney，跑出來的四張圖會比你自己硬擠關鍵字穩定得多。挑一張最滿意的，再透過 Start Frame 把它轉成四到五秒的動態影片，這就是 Hero 素材的完整誕生過程。指令的進階應用可參考 3D 設計素材資源 背後的素材挑選邏輯。

• 第一步：生成靜態圖。把 Prompt 貼到輸入框、選擇圖片模式、確認尺寸（16:9 適合網頁 Hero），送出後等四張結果。
• 第二步：挑一張下載。點選喜歡的那張下載到本機，這張會當成影片的起始畫面。
• 第三步：上傳回 Midjourney。把靜態圖拖回輸入框，開啟 Start Frame 功能、關閉 End Frame，指定它作為開頭。
• 第四步：補充細節指令。在欄位補上希望出現的動作描述，例如「對打後高舉雙手」。
• 第五步：送出等四段影片。挑最滿意的一段下載，準備嵌回 Claude Design。

影片下載後別直接丟上網站。AI 生成的影片檔案體積普遍偏大，動輒數十 MB，不上傳到 WordPress 圖片優化 或 TinyPNG 這類壓縮工具處理過，會把首頁載入時間拖到超過 Google Core Web Vitals 的門檻。壓縮完之後回到 Claude Design，在 Hero Section 左下角點加號把影片上傳，接著用第二段 Prompt 告訴它「請把背景換成這支影片、讓上層文字保持清晰可讀、影片要自動重複播放、順便幫我壓縮檔案」，送出後就能看到動態 Hero。

這一步最常踩的坑是字看不清楚。影片太亮時，上層的標題與按鈕會被背景吃掉，所以 Prompt 裡一定要明講「字要明顯呈現、避免影片明度與文字太接近」。如果跑出來字還是糊的，回頭請 Claude Design 在影片上加一層半透明遮罩再放字，這個小動作能救回可讀性。Hero 區塊的視覺密度拿捏可以對照 Bento Grid 網頁設計。

影片自動重複播放是另一個務必開啟、卻常被忘記的細節。Hero 影片如果只播一次就停格，使用者滑到第二屏再滑回來會看到一張靜止畫面，動態感立刻歸零；所以在 Prompt 裡明確要求 loop、autoplay、muted 三個屬性，才能確保影片進站就播、播完自動接、而且不會因為音軌被瀏覽器擋下。這幾個屬性最終會被 Claude Code 寫進 HTML 的 video 標籤，如果你之後要手動微調，知道它們落在哪一行就夠了。相關的網頁影片嵌入邏輯可以對照 WordPress 影片教學。

第四步：用 Midjourney 補齊其餘素材圖

Hero 影片搞定之後，回頭看高擬真 UI 裡那些還沒有真實圖片的區塊，例如焦點 Highlight、最新消息配圖、價目表示意圖，這些全部可以用 Midjourney 同一套流程補齊。把每一個缺圖的區塊對應到一份 Prompt 清單，逐筆生成、下載、命名、回 Claude Design 請它替換，整個網站的素材就會從假圖狀態升級成完整成品。

替換素材時建議維持同一組視覺語彙。如果你的 Hero 是暗黑科技感，那 Highlight 三格的圖也要走同一個色溫與構圖邏輯，否則網站看起來會像拼裝車。維持一致的方法是把第一段成功生成 Hero 的 Prompt 留下來當範本，後續只改主體描述，保留風格、色調、尺寸參數。這個習慣跟 品牌網站設計指南 強調的視覺一致性是同一件事，只是換成用 AI 生圖時要靠 Prompt 紀律來達成。

換個角度想，這個階段也是檢查網站結構的最後機會。當你把每一個區塊的真實素材準備齊全時，等於被迫把整個首頁的內容架構再走一次，這時候如果發現某一格始終生不出合適的圖，往往代表那一格的定位其實有問題，與其硬塞素材不如直接砍掉那個區塊。這個自問的動作比任何 網頁設計趨勢 文章都更能決定網站的清爽度。

素材全部替換完之後，建議點右上角全螢幕預覽，從 Hero 一路滑到頁尾，把每一個區塊的節奏、留白、CTA 位置再確認一次。這個全螢幕檢查與 響應式網頁設計 的行動版預覽是互補的：前者看內容架構，後者看在不同螢幕寬度的變形。等到兩個都過了，才能進入下一階段把設計轉成程式碼。

第五步：Send To Claude Code 把設計轉成 HTML

把設計交棒給程式碼這一步，是 Claude Design 跟 Claude Code 兩個產品串起來的關鍵。點 Claude Design 右上角的 Share，選 Send To，再選 Claude Code，系統會給你兩種指令：一種給本機 Claude Code，另一種給網頁版。本機版本會把設計拉成 HTML 與素材資料夾打包下載，網頁版則直接在瀏覽器裡展開。

用本機 Claude Code 的話，把指令複製後到終端機貼上，它會去把你剛剛在 Claude Design 完成的網址拉進來、整理成 HTML 結構，同時把影片與圖片素材個別整理到對應的資料夾。這一步的產出就是 index.html 加一個圖片資料夾，結構跟你在 Claude Design 看到的一致。它跟 Claude Code 是什麼 介紹的代理式開發是同一套邏輯，只是這次它的工作是把已有的視覺設計轉譯成可用程式碼，而不是從空白檔案開始寫。想理解它與其他 Anthropic 工具的分工，可看 Claude Cowork 介紹。

送出方式	適合場景	產出
本機 Claude Code	要自己部署到外部主機	本地 HTML 與素材資料夾
網頁版 Claude Code	只想快速預覽、不部署	瀏覽器內展開的網頁

把它跟 Claude Code 架站 與 Claude Code Stitch 網頁設計 的進階用法擺在一起看，你會發現這條流程其實是 Vibe Coding 的視覺強化版，差別在於設計源頭從文字 Prompt 換成 Claude Design 的高擬真 UI。它的好處是設計與程式兩端用同一份來源，不會出現「設計師交付的稿跟工程師做出來的不一樣」這種老問題。

拿到 HTML 之後建議做兩個動作再上傳主機。第一個是把 index.html 在瀏覽器打開，逐個區塊比對 Claude Design 裡的高擬真版本，看看文字、間距、圖片路徑有沒有在轉譯過程跑掉；第二個是用瀏覽器開發者工具的 Network 面板，重新整理一次看有沒有 404 的素材，這通常是資料夾名稱拼錯或大小寫不一致造成的。這兩個檢查只要五分鐘，卻能幫你省下上傳主機後才發現破圖、再重新打包上傳的來回時間。如果你打算之後把這個靜態站交給其他人維護，WordPress 頁面編輯器 介紹的視覺化編輯觀念，能幫對方更快看懂 HTML 結構，畢竟靜態站的瓶頸往往卡在「不會改 code」這一關。

第六步：部署到正式主機與網域

HTML 與素材備齊之後，要讓網站能被外界瀏覽，就必須把檔案上傳到主機並指派網域。預算有限的人可以選 Vibe Coding 架站教學 提過的 Netlify 免費方案，它同時給主機與子網域，但子網域在 SEO 上不利於排名，穩定度也輸正式主機。要展示形象或做商業用途，建議承租有品牌的共用主機，例如 hosting.com 這類歷史較久、資安防護較完整的廠商。

選好主機之後，登入 cPanel 把語言切換到繁體中文，找到檔案管理員進入 public_html，這一層就是網站的根目錄。把 index.html 拖曳上傳，接著新增一個資料夾名稱要跟 Claude Code 打包出來的素材資料夾一模一樣，再進到該資料夾把所有圖片與影片拖進去。路徑必須完全對齊，否則 HTML 裡的相對路徑會找不到檔案，網站就會出現破圖。整個 cPanel 操作邏輯可以對照 hosting.com 主機教學 與 WordPress FTP 教學。

• 先在 public_html 把 index.html 拖進去，主程式是最先上線的一塊。
• 左上角新增資料夾時直接複製 Claude Code 打包出來的名稱貼上，手打容易大小寫錯一格全站破圖。
• 進到資料夾後把圖片與影片一次拖完，檔案量大時建議分批，避免瀏覽器上傳中斷又要重來。
• 回到上一層核對結構，主程式與素材夾的相對位置必須跟本機完全一致。
• 最後開無痕視窗貼上網址測試，無痕能避開本機快取，看到的是真正對外的版本。

主機選擇上，常見的 虛擬主機指南 與 VPS 主機指南 對應的是不同流量與技術需求。一般形象網站或 Landing Page，共用主機就夠用；若預期流量大或需要高度客製化，再往 VPS 升級。

主機規格裡有一個細節容易被忽略，那就是贈送網域。多數共用主機方案會附一年免費網域，這對第一次架站的人等於省下一筆註冊費，但第二年起的續約價通常比向專門網域商註冊貴，所以一年後可以評估是否把網域轉移到 Gandi、Namecheap 這類廠商。把這個長期成本納入考量，才不會被「免費網域」這個表面誘因綁住。網域轉移的細節可以對照 Namecheap 網域設定。

網域這一塊也得一起想清楚。如果還沒註冊網域，可以先參考 網域註冊指南；要決定主網域 vs 子網域的結構，子網域 vs 子目錄 把 SEO 影響講得很清楚。DNS 指向則對照 DNS 設定教學，這一步沒設好，再漂亮的 HTML 也連不上。

第七步：開啟 SSL 並強制 HTTPS 連線

網站上線之後，如果網址列顯示「不安全」，對 SEO 與信任度都是扣分，所以最後一步是開啟 SSL 加密並把 HTTP 強制轉向 HTTPS。在 cPanel 的安全性區塊找到 SSL 憑證，勾選你的主網域、點繼續、按下進行加密，系統會開始跑，跑完之後狀態欄變成 Active 才算生效。這個過程可能要等一下，不是即時的。

SSL 憑證生效之後，再到 cPanel 的網域區塊找到強制 HTTPS 連線的選項把它打開。設定完成後，輸入 HTTP 版本的網址按 Enter，瀏覽器會自動轉向到 HTTPS 版本，這樣網址才能統一、加密也才會真正發揮作用。把這個動作跟前面提到的 SSL 憑證指南 對照著做，可以少走很多冤枉路，畢竟 SSL 沒設好會直接被 Google 標記為不安全，排名也會受影響。

另一個部署後常被忽略的是快取與壓縮。cPanel 主機多半內建 LiteSpeed 或類似的伺服器快取，建議在主機後台把頁面快取、Gzip 壓縮、瀏覽器快取都開啟，能讓靜態 HTML 站的載入時間再壓低一截，這對行動裝置使用者尤其有感。Cloudflare 這類 CDN 也是值得加的一層，它同時提供免費 SSL、邊緣快取與基礎 DDoS 防護，對展示型網站來說幾乎是免費的提速方案，設定門檻也不高。相關觀念可以對照 WordPress 速度優化 與 網站速度優化技巧，雖然兩者都以 WordPress 為例，但底層的快取與壓縮邏輯對靜態站同樣適用。

講了這麼多部署細節，歸根究底就一句話：AI 幫你把設計與程式做完了，但主機、網域與 SSL 這三件事仍要你自己跑完。這也說明為什麼即使有 Claude Design 與 Midjourney，WordPress 網站成本 與主機費仍是省不掉的固定開銷。

工具選擇邏輯：什麼時候該走這條流程

這條 Claude Design 加 Midjourney 加 Claude Code 的流程不是萬用解，它最適合的是「需要高視覺衝擊、單頁或少量頁面、上線時間緊迫」的情境，例如活動 Landing Page、產品發表頁、品牌形象首頁。如果你的需求是多頁面電商、會員系統、複雜後台，那 WordPress 加 WooCommerce 仍是更穩的選擇，相關比較可看 Wix vs WordPress 與 WordPress SEO 完整指南。

實務上常見的狀況是這樣：以某品牌形象網站需要快速打樣為例，這類站通常會先用 Claude 協助整理頁面架構與文案，再用 Midjourney 產出視覺方向參考，最後用前端框架把可上線的頁面兜起來。依這類站的典型表現，和傳統從零開始開會、寫文案、出視覺稿比起來，前期打樣時間通常會縮短一些，但幅度多半落在「幾天縮成一天以內」這個常見區間，談不上戲劇化的十倍提速；真正最有感的成果，往往是第一版 prototype 可以更快被看見、被具體討論，省下在白板上空想的反覆來回。要把這段打樣時間記錄下來方便檢討，可以用 Toggl 或一般專案時間軸工具追蹤各階段耗時，避免「感覺變快」卻沒有客觀依據。老實說哪裡會沒效也得先講清楚：AI 產圖很適合拿來找方向、對齊視覺調性，但不能直接當最終品牌素材，解析度、配色一致性、可商用授權這幾關都還要人工把關；文案同樣需要人工修掉模板感與過度誇飾，否則讀起來會千篇一律。最後上線前，把成品丟進 PageSpeed Insights 跑一次，確認 AI 生成的圖檔與動態影片沒有把首頁載入拖過 Core Web Vitals 門檻，這個動作能避免「視覺漂亮但分數難看」的常見收尾。

情境	建議流程	原因
活動 Landing Page、產品發表頁	Claude Design 加 Midjourney	視覺優先、頁面少、需快速上線
品牌形象官網	混合：首頁用 Claude Design，內頁用 WordPress	首頁求衝擊、內頁求維運效率
電商網站、會員後台	WordPress 加 WooCommerce	需要金流、庫存、會員系統
部落格、內容站	WordPress	SEO 與內容管理的長期維運優勢

決定走這條流程之前，建議先誠實評估自己的維運能力。Claude Design 生成的 HTML 是靜態檔案，沒有後台可以登入改內容，日後要更新就必須回 Claude Design 重新跑一次、重新部署，這個維運成本在內容頻繁更新的網站會變得很可觀。所以這條流程的甜蜜點是「做完上線、半年內不太需要改」的展示型網站。維運觀念的打底可以對照 WordPress 後台教學。

退一步看，整套工具鏈的成熟速度很快。今天的 Claude Design 與 Midjourney 已經能做出兩年前要價數萬元的動態網站，但相對地，工具門檻降低也意味著做出來的東西越來越像。要在這個基準之上做出差異，關鍵看你能不能用它講出別人講不出來的品牌故事，工具熟練度反而是次要。相關思考可以對照 AI 網頁設計指南。

流程之外：SEO、AEO 與 AI 引用的串接

網站上線只是起點，接下來要讓它被找到、被 AI 引用，才是真正考驗。靜態 HTML 站的 SEO 結構與 WordPress 不同，沒有外掛可以幫你自動產生 Sitemap 或 Schema，這些都要手動加進 HTML，等於把你過去交給外掛做的工作收回自己手上。好處是你對每一行 SEO 標記都有完全控制權，壞處是漏掉一個 meta 或 canonical 就可能影響收錄。基礎的 SEO 完整入門 與 站內 SEO 優化 觀念不能少，結構化資料則對照 結構化資料 Schema 標記。

AI 搜尋時代，網站能不能被 ChatGPT、Perplexity、Google AI Overviews 引用，是另一個獨立戰場。AI 搜尋時代 SEO 全攻略 與 AEO 答案引擎優化指南 把這條線講得很完整，GEO 生成式引擎優化 則補上品牌在 AI 平台能見度的觀念。

說實在的，工具越強，反而越要把基本功夫課顧好。一個用 Claude Design 做出來、視覺再炫的網站，如果沒有做好標題標籤、沒有行動版體驗、沒有 SSL，在搜尋結果裡一樣排不上去。所以這條流程的收尾，建議把 技術性 SEO 完全指南 與 Core Web Vitals 實戰 當成上線前的檢查表，逐項打勾再對外發布。

常見問題：方案、素材、部署與限制

Claude Design 一定要付費才能用嗎

Claude Design 需要 Claude Pro 以上方案才能開啟，免費版看不到 Design 入口。Pro 方案月費 20 美元起，另可選 Max 與 Team 方案 [來源：Anthropic〈Claude Plans〉https://www.anthropic.com/pricing 2026]。Midjourney 也是訂閱制，最低每月 10 美元 [來源：Midjourney〈Pricing〉https://www.midjourney.com/pricing 2026]，整套流程的工具月費加起來約 30 美元起跳。

不會寫程式也能用這套流程架站嗎

可以，Claude Code 會把設計自動轉成 HTML 與素材資料夾，你只要會把檔案上傳到 cPanel 就能上線。但部署之後的修改仍需具備讀 HTML 的基本能力，例如要改文字或連結時，能看懂 index.html 結構會輕鬆很多。完全不想碰程式碼的人，WordPress 快速架站 仍是更友善的選擇。

Midjourney 生成的圖片與影片會有版權問題嗎

Midjourney 付費方案生成的圖片，依其服務條款可用於商業用途，但生成的內容可能與他人作品近似，建議避開明顯模仿特定 IP 的 Prompt。要長期商業使用，最好保留生成紀錄與 Prompt 清單作為依據，並參考 品牌 Logo 設計靈感 的原創性原則。

這條流程做的是 WordPress 網站嗎

不是。Claude Design 加 Claude Code 產出的是純靜態 HTML，沒有 WordPress 後台、沒有外掛生態。它的優點是輕量、載入快、部署簡單，缺點是沒有後台可登入改內容。兩者的取捨可對照 WordPress 完整指南。

AI 生成的網站 SEO 表現好嗎

工具本身不決定 SEO 表現，內容品質與技術結構才決定。靜態 HTML 站因為沒有外掛協助，要手動補 Sitemap、Schema、標題標籤與 SSL，這些做齊了排名潛力跟 WordPress 站相當。基礎打底建議看前面提到的 SEO 入門指南與技術性 SEO 完全指南。

生成的影片檔案很大怎麼辦

Midjourney 生成的動態影片檔案偏大，建議上傳到 TinyPNG 或其他壓縮工具 先壓縮再嵌回 Claude Design，否則會拖慢首頁載入速度、影響 Core Web Vitals。Claude Design 本身也支援在 Prompt 裡要求它順便壓縮。

SSL 沒設好會影響排名嗎

會。Google 自 2014 年起將 HTTPS 列為排名訊號，未加密的網站會被瀏覽器標記為不安全，使用者信任度與停留都會下降 [來源：Google〈HTTPS as a ranking signal〉https://webmasters.googleblog.com/2014/08/https-as-ranking-signal_6.html 2014-08-06]。完整設定流程可對照 SSL 憑證完整指南。

把整套流程跑完：從一句想法到對外上線

回顧一下，這條 Claude Design 加 Midjourney 加 Claude Code 的網頁技術流，本質上是把過去要拆給設計師、美術、前端、主機商四個角色的工作，壓縮進一個人的對話裡。它並非要取代這四個角色，而是讓一個有判斷力的人，能靠自己把一個展示型網站從零做到上線。要勝任這件事，你需要的是對設計、內容與 SEO 的判斷，而不是對某一個工具的熟練度。

實作節奏上，建議第一次跑的人預留一個完整週末：週六上午寫 Prompt、下午跑 Wireframe 與高擬真 UI，週日上午生 Midjourney 素材、下午 Send To Claude Code 並上傳主機開 SSL。這個節奏能讓你在不失焦的情況下把整條鏈走完一次，跑過一次之後，第二個網站大概半天就能搞定。學習曲線的參考可以對照 免費 UI UX 學習資源。

最後給一個判斷：這條流程適合你，如果你做的是活動頁、產品發表頁、個人作品集這類「視覺優先、頁面少、維運需求低」的網站；它不適合你，如果你需要的是電商、會員系統、頻繁更新的內容站。把這個判斷跟 新手架站平台推薦 與 WordPress 架站 的選擇邏輯擺在一起看，會更清楚自己應該走哪一條路。把它跑順之後，你會發現網站這件事，從「找人做」變成「自己說一句話就能看到成品」，這個轉變才是這條流程真正改變的東西。