用 Claude Code 搭建專業網站實戰：Skills + MCP 完整工作流，從零打造高品質網站
根據 Anthropic 官方文件的說明，Claude Code 是一個跑在終端機裡的 AI 程式助理，能實際讀寫檔案、建立資料夾、執行指令，從無到有組出可直接部署上線的 HTML…
Claude Code 架網站教學：非工程師也能跑完設計到部署的完整流程
根據 Anthropic 官方文件的說明，Claude Code 是一個跑在終端機裡的 AI 程式助理，能實際讀寫檔案、建立資料夾、執行指令，從無到有組出可直接部署上線的 HTML、CSS、JavaScript 網站檔案 [來源：〈Claude Code 概述〉〈https://docs.claude.com/en/docs/claude-code/overview〉2026-06]。配上 Flow 動畫素材與一份結構化的大綱，完全不寫程式的人也能在一個下午做出可分享的專業網站；真正決定質感天花板的是素材品質與 Prompt 結構，模型版本反而是次要變數。這套做法要贏過只靠對話生成的原型，關鍵在於你願不願意先把文案、配色、動畫備好再交給 Claude 組裝。
重點先看：Claude Code 架站一年軟體成本約落在數千元台幣區間（含訂閱與網域主機），最適合形象官網、作品集、活動頁這類前端專案，複雜會員與金流仍要分開處理（成本為概估，實際以官方方案為準）。
這條路對設計師、行銷人、接案者特別有感。你可能已經試過在 ChatGPT 或 Claude AI 的網頁對話框裡要一段程式碼，貼進編輯器還是跑不起來，或跑起來也停在「能看不能用」的原型階段。Claude Code 走的是另一條路：它直接動手把檔案寫進你的資料夾，只在必要時用文字向你解釋。相較於在 Claude Desktop 桌面版 或瀏覽器對話框裡來回問答，命令列模式更能一氣呵成把檔案落地。想知道它跟一般對話工具的差別，可以先把 Claude Code 完整入門教學 跟 Claude Code 新手安裝設定 這兩份看過一遍，心裡有底再進入架站流程。
Claude Code 真的能做出可上線的網站嗎？先搞懂它能做什麼、做不到什麼
可以，而且成品是實實在在的前端檔案。Claude Code 的定位是「terminal-first」的 AI 助理，它能讀寫你本機的檔案、執行 shell 指令，把一個空白資料夾逐步填成完整的網站專案 [來源：〈Claude Code 概述〉〈https://docs.claude.com/en/docs/claude-code/overview〉2026-06]。這種能自主規劃並執行多步驟任務的能力，背後正是 AI Agent 的運作原理，跟單純回答問題的聊天機器人有本質上的差別。它產出的是 HTML、CSS、JavaScript 這類可以直接丟上主機就運作的前端檔案。這跟你在 ChatGPT 網頁上問問題、拿到一段文字回覆，是兩種完全不同的工作方式。若你更習慣用 OpenAI 陣營的工具，也可以先了解 Codex AI 程式助理怎麼用，再比較哪一種工作流程更順手。
但把它想成「一句話自動生出完整網站」的魔法，一定會失望。模型再強，也不會憑空生出與你品牌調性一致的設計稿、動畫素材、文案節奏。那些東西要你自己準備，或用 AI 繪圖與 ChatGPT 網頁設計 這類工具先生成。決定成品天花板的是素材與 Prompt 結構，模型版本在這條路上的權重很低（對模型世代有興趣的人，可以順著 Claude Fable 5 是什麼 認識較新的模型定位）。
把模型放在架站流程裡實測，定位很明確：Claude Code 在「組裝既有素材」這一步非常強，但在「憑空發想質感」這一步很普通。素材越好、大綱越清楚，它越能逼近專業等級；只丟一句「幫我做一個漂亮的網站」，它通常會回你一個安全但平庸的版型。從工作量的分配來看，大約有一半的投入要落在素材準備與設計系統的設定。初次嘗試的人常覺得「AI 做出來的網站看起來都差不多」，共通點就在素材輸入太薄，模型只能套用最保險的預設值。
Claude Code 適合與不適合的網站類型
| 面向 | 適合 | 不適合 |
|---|---|---|
| 網站類型 | 形象官網、作品集、Landing Page、一頁式活動頁、部落格前端 | 複雜電商後台、會員系統、購物車金流、即時資料庫互動 |
| 產出形式 | 靜態前端檔案（HTML/CSS/JS），可直接部署 | 有後台管理的動態網站（需另行接後端或 WordPress MCP） |
| 決定質感的關鍵 | 素材品質、Prompt 結構、設計系統 | 模型版本、對話輪數 |
| 必要的人類環節 | 真人審查、響應式微調、文字校對 | 全程自動交付（現階段不建議） |
如果你本來就想要一個有後台、能上架商品、能接金流的網站，那 Claude Code 產出的前端檔案對你來說只是起點，後面還要接 WordPress 架站 或傳統開發。想把 Claude 跟外部服務串起來自動化，可以先弄懂 MCP 是什麼，它是讓模型直接呼叫外部資料與工具的橋樑，這對進階整合很有幫助。想知道更多前端工具的選擇，也能參考 AI 網站建立工具比較，看看哪些方案更貼近你的需求。
判斷你的需求落在哪一層：四象限決策矩陣
把網站需求拆成兩個維度來看，就能快速判斷 Claude Code 適不適合。第一個維度是「前後端複雜度」：純展示的前端是低複雜，需要會員、金流、即時資料的是高複雜。第二個維度是「內容更新頻率」：做好就放著、半年才改一次是低頻率，每週都要新增商品或文章是高頻率。兩個維度交叉，會得到四個象限。
| 象限 | 需求特徵 | Claude Code 的角色 |
|---|---|---|
| 低複雜＋低頻率 | 形象官網、個人作品集、活動登陸頁 | 主力工具，可直接做到上線 |
| 低複雜＋高頻率 | 部落格前端、常更新的內容站 | 做骨架，搭配 Headless CMS 或手動改 HTML |
| 高複雜＋低頻率 | 後台一次設定好就少動的電商 | 做前端門面，後端走 WordPress 或訂製開發 |
| 高複雜＋高頻率 | 持續營運的會員站、即時互動平台 | 僅適合做原型展示，正式版交給工程團隊 |
落在左上象限的人，這套流程能讓你從零一路做到部署；落在右下象限的人，請把 Claude Code 當成「快速做給客戶看見的視覺原型」就好，正式上線版本仍要交給專業開發。中間兩個象限則是灰階地帶，判斷的關鍵是「後端邏輯會不會頻繁變動」，會的話，前端再漂亮也只是門面，後端跟不上就會拖垮整個專案。
開工前要準備的環境與素材清單
環境一次裝好，後面組裝才不會一直卡關。你至少需要 VS Code 編輯器、Claude Code 命令列工具、Git、以及一份已經備好的素材包（文案、Logo、配色、Flow 動畫檔）。聽起來像很多，其實多數是第一次設定完就不用再碰的東西。沒碰過命令列的人，可以先看過 CLI 命令列入門教學，把基本操作熟悉一遍再進入架站流程。
- VS Code 編輯器：當主要 IDE 用，搭配終端機一起開最順手，Claude Code 就跑在這個終端機裡。
- Claude Code 命令列工具：依官方文件安裝，第一次要綁定 Anthropic 帳號，完成授權後才能呼叫模型 [來源：〈Claude Code 快速入門〉〈https://docs.claude.com/en/docs/claude-code/quickstart〉2026-06]。帳號與用量的關係可先看 AI Token 用量解析，心裡有個底。
- Git 與 GitHub 帳號：為了版本控制與部署，先把帳號註冊好可以少一道手續。
- 素材準備清單：品牌文案、Logo 檔、配色碼（HEX）、字體偏好、Flow 生成的開頭與結尾動畫檔。
- 網站大綱：先想好頁面架構寫成一份文件交給 Claude，比邊做邊想效率高很多。
配色碼是最容易翻車的小地方。只丟一句「深藍配橘色」給 Claude，它挑的深藍往往跟你想像的深藍差了十萬八千里。較穩當的做法是直接把 HEX 碼寫進大綱，例如主色 #1A3A5C、強調色 #FF6B35，一次到位。這種小地方正是素材準備的價值所在。
工具鏈的部分，AI 工具總整理推薦 裡有更細的安裝與設定步驟，這邊只抓架站會用到的最小集合。如果你想順手把開發環境一次弄齊，Claude Code 外掛推薦 也列了一些能省時間的擴充。Git 完全沒碰過的人，先把 30 分鐘快速架站攻略 裡的版本控制段落看過，心裡有個譜。
素材準備的檢查表：交給 Claude 前逐項打勾
素材齊不齊，直接決定第一輪 Prompt 能不能一次做對。把前面那份清單拆細，每一項都附上「不合格會發生什麼事」，就成了這張檢查表，能幫你提早發現缺口。建議在打開終端機之前先走完一遍，缺哪項補哪項。
| 檢查項 | 合格標準 | 不合格的後果 |
|---|---|---|
| 品牌文案 | 每個頁面區塊都有成稿文字，含標語與行動呼籲 | Claude 會填入佔位文字，視覺完成但內容空洞 |
| Logo 與圖檔 | 向量檔優先，另有 PNG 備用，命名語意化 | 臨時用示意圖替代，質感立刻掉一級 |
| 配色系統 | 主色、輔色、強調色、背景色各一組 HEX | 模型自由發揮，常出現與品牌無關的高彩度配色 |
| 字體偏好 | 中文字體與英文字體各指定一款，含粗細級數 | 套用系統預設字，中英文混排時層級混亂 |
| 動畫素材 | Hero 與結尾動畫各一支，已壓縮並命名 | 臨時省略動畫，Hero 區顯得單薄 |
| 網站大綱 | 頁面清單、每頁區塊順序、導覽結構都寫定 | 每輪都要追加結構，往返次數倍增 |
把這張表走完，第一輪 Prompt 才有足夠的素材可以組裝。很多人抱怨 Claude「做出來跟我想的不一樣」，回頭檢查多半是這張表有一半空白。素材輸入的密度，與輸出質感的密度高度正相關。
用 Flow 生成開頭與結尾動畫素材
Flow 是動畫生成工具，輸入文字提示就能產出開頭動畫、結尾品牌收尾畫面這類短影片素材。把它當成「幫你的網站 Hero 區做出一段會動的視覺」的來源就好，不要期待它生出一整支品牌影片。檔案下載成 MP4 或 GIF，放進 Claude Code 專案的素材資料夾，再請 Claude 把它嵌進 Hero 區塊即可。
提示詞的具體程度直接決定產出能不能用。每個提示詞都該涵蓋三件事：風格（例如極簡幾何、賽博龐克）、主色（直接寫 HEX 或色名）、節奏（開場兩秒淡入、接著三秒展開）。少了其中一項，產出常常跟品牌調性對不上，重生成幾次都很花時間。
- 適合用 Flow 做的：Hero 區開場動畫、頁面載入動畫、結尾品牌收尾畫面、區塊之間的過場短素材。
- 輸出格式：MP4 或 GIF，檔名要語意化（hero-intro.mp4、footer-outro.gif），方便 Claude 辨識要放哪。
- 素材歸位：統一放進 assets 或 media 資夾，並在 Prompt 裡明確告訴 Claude 每個檔案要用在哪個區塊。
- 檔案大小：動畫太大會拖慢載入，建議先用 圖片壓縮工具推薦 裡的思路壓過再交付，必要時砍解析度。
動畫素材做好之後，別急著一次全塞進網站。較穩當的做法是先把 Hero 動畫放上去預覽，量一下載入會不會卡，再決定要不要在其他區塊加動畫。網站速度對 SEO 與使用者感受的影響是真的，相關細節可以對照 網站速度優化全攻略。靜態素材的部分，免費商用圖庫總整理 跟 免費 3D 素材資源 都能補上 Flow 沒覆蓋到的視覺缺口。
動畫在整體策略裡是搭配文案的輔助，不是用來掩蓋內容空洞的裝飾。一個網站如果只有動畫好看、文案卻空泛，訪客三秒就跳出。先後順序要想清楚：文案與資訊架構站穩了，動畫才有加分空間；順序顛倒，再炫的動畫也留不住人。
動畫載入效能：別讓 Hero 影片拖垮分數
Hero 區放一段影片是最常見的質感來源，也是最常見的效能地雷。Google 早在 2018 年就把行動版網頁載入速度列為排序因素之一，後續更把 Core Web Vitals 整合進頁面體驗訊號 [來源：Google Search Central Blog〈https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search〉2018-01-17；〈https://developers.google.com/search/blog/2020/05/evaluating-page-experience〉2020-05-28]。換句話說，你把動畫做得多好看，跟它會不會拖慢手機載入是兩件事，後者直接影響排名與轉換。
實務上有幾個做法可以兼顧質感與速度。第一，Hero 影片只在桌面版自動播放，手機版改成靜態海報圖，避免行動網路下載大檔。第二，影片用 MP4 並壓到 2MB 以內，長度控制在 6 到 10 秒，夠帶出品牌感就好。第三，加上 poster 屬性，影片還沒載入時先顯示一張設計過的截圖，視覺不會出現空白。第四，用 lazy loading 或在捲動到 Hero 時才觸發播放，減少首次載入負擔。這些都是 Claude Code 能照著 Prompt 做出來的細節，前提是你要在指令裡講清楚，模型才會主動處理。
把效能當成可有可無的打磨，是低估了它的商業影響。web.dev 整理的案例顯示，投資 Core Web Vitals 對轉換有實質拉抬：Vodafone 把 LCP 改善 31%，營收隨之提升 8%；redBus 改善 INP 後銷售增加 7% [來源：〈Why does speed matter?〉〈https://web.dev/articles/why-speed-matters〉2026]。換句話說，一段過重的 Hero 動畫不只是「稍微慢」，而是會直接吃掉轉換。對接案者而言，這組數字也等於一個報價依據：把效能優化列進交付項目，有第三方數據撐腰，比單純說「順便幫你調一下」更有說服力。
Claude Skills 怎麼強化網頁設計產出
Claude Skills 是可以把重複的設計規範、Prompt 範本、常用元件庫打包成可重複呼叫的指令集（若對這套機制還不熟，可先讀過 Claude Skills 是什麼 打好基礎）。裝了之後，Claude 產出的網頁會更貼近專業設計標準（間距、配色、響應式），不裝則容易每次都要從頭重講一遍偏好。對要重複做網站的人來說，這東西的投報率很高。
你可以把 Skills 想成「幫 Claude 寫一份你的設計偏好備忘錄」。它把你的規則變成可重用的設定，不用每次都交代「圓角用 8px、字距用 0.05em、手機版要單欄」。可以先安裝社群分享的網頁設計強化 Skill，再依自己的品牌調性微調，省下不少試錯時間。細節操作可以對照 Claude Skills 工作流指南。
實測的關鍵不在於裝了 Skill 這個動作，而在於把素材清單、網站大綱、設計系統寫進同一份檔案。差別來自「可重現的偏好」取代「每次重新交代的偏好」：當色彩、字體、間距都固定成變數，模型組裝每個頁面時套用的是同一套參數，跨頁面才不會出現三種不同的圓角或字距。這個做法的核心其實跟 Vibe Coding AI 驅動架站入門 講的道理一樣：把「你的品味」結構化，AI 才有辦法重現。剛接觸這套用自然語言驅動開發的人，可以先看 Vibe Coding 是什麼，理解它跟傳統寫程式的差別在哪。Skill 解決的是一致性與重現性，創意發想與最終審查仍須人工把關，這一步不能外包給工具。
有裝 Skills 跟沒裝的差別
| 面向 | 有裝 Skill | 沒裝 Skill |
|---|---|---|
| 設計一致性 | 間距、配色、字距自動套用你的規範 | 每次產出規格不一，需手動修正 |
| 重複指令 | 呼叫一次 Skill 即可 | 每輪對話都要重講偏好 |
| 響應式品質 | 內建斷點規則，行動版較穩定 | 容易漏掉手機版細節 |
| 學習曲線 | 第一次寫 Skill 要花時間 | 門檻低，但長期累積成本高 |
給 Skill 命名的時候要語意清楚，例如 web-design-system、brand-assets，方便之後呼叫，也方便你回頭找。命名一旦固定下來，之後跨專案複用就不會亂。版面規範寫進 Skill 之後，間距與留白的拿捏可以對照 網頁設計從零到一指南 的版面段落，把抽象的設計偏好落實成可重複套用的條件。想更進一步用 AI 產出設計稿的人，也能了解 Claude Design 怎麼用，把它當成素材發想的另一條路。
一份可重用的設計系統 Skill 該寫進什麼
把設計系統寫進 Skill，等於把「你公司的視覺規範手冊」轉成模型讀得懂的指令。內容越具體，跨專案的成果越一致。一份合格的設計系統 Skill 至少要涵蓋幾個區塊，建議用條列方式寫死，不要留模糊空間。
- 色彩變數：主色、輔色、強調色、成功、警告、錯誤、背景、文字共八組 HEX，直接對應 CSS 變數命名（--color-primary 等）。
- 字體階層：H1 到 H6 的字級、行高、字距，正文與輔助文字各一組，中英文分開指定。
- 間距尺度：以 4px 或 8px 為基本單位的 scale（4、8、12、16、24、32、48、64），所有 padding 與 margin 都從中取值。
- 圓角與陰影：卡片、按鈕、圖片的圓角半徑，以及三層陰影定義，避免每個元件各自發明。
- 響應式斷點：手機、平板、桌面的斷點數值，以及各斷點下的欄數與欄寬規則。
- 按鈕與表單：主要、次要、危險三種按鈕的樣式，輸入框的 focus 狀態與錯誤提示規範。
把這六個區塊寫滿，模型在組裝每個區塊時就有明確的參數可套，不會出現「同一個網站裡三種不同的圓角」這種低級不一致。第一份 Skill 會花比較多時間，但寫完之後，第二個、第三個專案幾乎是複製貼上再微調品牌色就能上工。
把素材組成網頁：實戰 Prompt 與組裝節奏
素材都備好之後，實際組裝的節奏是：把大綱、素材清單、設計系統一次餵給 Claude Code，請它先建立檔案結構、再逐頁生成 HTML/CSS/JS，每一輪產出後立刻在瀏覽器預覽、用具體回饋微調。這個節奏比「一次要它做完整個網站」穩得多，也更容易抓出問題。
第一輪 Prompt 是最關鍵的一步。把專案目標、頁面清單、素材路徑、設計系統、響應式要求一次講清楚，Claude 才有足夠的上下文一次做對。很多人架站卡關，根本原因是第一輪 Prompt 寫得太短，模型只能猜，猜錯了再回頭改，反而更慢。
組裝的標準節奏
- 第一輪 Prompt：專案目標＋頁面清單＋素材路徑＋設計系統＋響應式要求，一次講清楚。
- 產出檔案結構：請 Claude 先建立資料夾結構與共用樣式檔（CSS 變數、排版規則），再逐頁生成內容。
- 逐頁生成：一次做一頁，每跑完一頁就在瀏覽器開預覽，發現問題立刻回饋修正。
- 嵌入動畫：在這階段把 Hero 動畫、結尾動畫放進對應區塊，並測試載入效能。
- 整體審查：響應式、連結、文字校對、動畫順暢度，最後做一輪整體檢查。
預覽這一步最常被跳過，常見的心態是「等全部做完再一次看」。問題在於錯誤會逐頁累積，等五個頁面一起開，根本分不清是哪一頁引入了版面偏移或破圖，回頭除錯反而更耗時。較穩當的做法是每做完一頁就開瀏覽器預覽，手機版也用開發者工具切過一次，把問題控制在小範圍內修正。響應式的觀念如果不熟，響應式網頁設計 RWD 這份要先讀。
組裝過程會反覆用到一些前端設計的判斷，例如留白比例、字級層級、配色對比。這些不見得是 Claude 一次就能做對的地方，建議搭配 網頁設計從零到一指南 跟 最新網頁設計趨勢 來培養自己的判斷力，才知道要給 Claude 什麼樣的回饋。想做一頁式頁面的人，一頁式網頁設計攻略 跟 Landing Page 銷售頁教學 能幫你把結構想得更清楚。
第一次跑這套流程會覺得步驟很多，但跑過兩三個專案之後，節奏會固定下來：備料、組裝、預覽、微調。到那個階段，一個形象官網從零到預覽版，大概一個下午就能跑完。正因如此，把素材清單寫成一份可重用的文件很值得，第二個專案開始就能直接套。
第一輪 Prompt 範本結構：五個區塊照順序填
第一輪 Prompt 寫得好，整個專案的往返次數可以砍掉一半。把 Prompt 想成一份給承包商的施工說明書，越具體越省事。實測下來最穩的寫法是五區塊結構，照順序填進去就好。
- 專案定位：這是什麼網站、給誰看、要傳達什麼核心訊息、上線後主要導流來源是什麼。
- 頁面清單與區塊：每個頁面有哪些區塊、各區塊的順序與目的，例如首頁是 Hero、服務簡介、案例、聯絡。
- 素材對照表：每個素材檔案要放在哪個區塊，路徑寫死（例如 assets/hero-intro.mp4 用在首頁 Hero）。
- 設計系統：呼叫 Skill 或直接貼上色彩變數、字體階層、間距尺度、斷點規則。
- 技術與響應式要求：純靜態或要不要接表單、手機優先還是桌面優先、要不要支援暗色模式。
把這五個區塊填滿，第一輪產出的完成度通常就有七成以上，後面幾輪只剩微調。少寫任何一區，模型就要靠猜測補上，而猜測就是返工的來源。一個小提醒：素材對照表這區最容易被忽略，很多人只說「素材都在 assets 裡」，沒有指明哪個檔配哪個區塊，結果模型自己分配，常常把 Hero 影片放到頁尾。
網站檔案上傳 GitHub 與部署到正式網域
網站在本地做好之後，要讓全世界看得到，流程是先把專案檔推上 GitHub 做版本控制，再接 Netlify 做快速預覽部署，確認沒問題後才搬到正式主機綁正式網域。新手建議先走 Netlify 練手感，正式上線再切到付費主機。
- GitHub 版本控制：先 git init、commit、push，把整個專案推上去。GitHub 同時是版本控制與部署來源。
- Netlify 預覽部署：連動 GitHub 儲存庫可自動重新部署，適合反覆預覽調整 [來源：〈Get started with Netlify〉〈https://docs.netlify.com/get-started/〉2026-06]。
- 正式主機：推薦 hosting.com 或其他 WordPress 友善主機，正式網域部署再切過來。
- DNS 與 SSL：網域 DNS 指向與 SSL 憑證要設好，網站才會顯示安全鎖頭且能被搜尋引擎收錄。
把檔案推上 GitHub 之前，記得檢查有沒有把 API key 或帳密一起 commit 進去，這種低級錯誤很常見。Git 完全沒用過的人，可以從 如何從零架設網站指南 裡的版本控制段落開始。Netlify 連動 GitHub 之後，每次 push 都會自動重新部署，這對反覆調整的人來說非常省事，相關細節也能對照 虛擬主機類型比較。
正式網域這一步，主機的選擇會影響後續好不好維護。hosting.com 主機建站教學 跟 hosting.com 主機實測評價 可以幫你判斷這條路適不適合你。來源提到的 hosting.com 新用戶網域優惠屬商業促銷條件，以官網方案為準，不要把促銷價當成常態成本。想比較其他主機的話，WordPress 主機推薦評測 是不錯的起點。
網域申請跟 DNS 設定是新手最容易卡的地方。網域申請購買全攻略 跟 網域挑選與設定指南 能幫你把流程走順，DNS 網域指向設定教學 則是指向這一步的實作參考。SSL 憑證不要省，SSL 憑證安裝與 SEO 影響 講了為什麼它對收錄與信任度都有影響。部署完之後，務必用手機與電腦各開一次確認響應式，也順手用 WordPress 提交 Google 收錄 的思路把網站提交給搜尋引擎，加快被索引的速度。
部署後驗收：按影響程度分三層處理
網站推上正式網域之後，很多錯誤要等到真實環境才會浮現，例如 SSL 憑證沒裝好、圖片路徑在正式網址破圖、手機版選單打不開。與其把所有檢查項混成一張平鋪清單，更實用的做法是按「影響程度」分層：能讓整站不能用的排在最前面先解，影響體驗的純粹打磨的留到最後。這樣即使時間有限，也能優先排除會讓訪客立刻跳出的致命問題。
| 層級 | 檢查項 | 不通過的後果 | 最低驗收門檻 |
|---|---|---|---|
| P0 阻斷級 | SSL 憑證與網域綁定 | 瀏覽器跳出「不安全」警告，多數訪客直接離開 | 網址列有鎖頭，憑證有效且涵蓋你的網域 |
| P0 阻斷級 | 表單送出 | 客戶收不到詢問，網站等於沒有轉換入口 | 實際填一筆測試資料，後端有收到、感謝頁有跳出 |
| P1 體驗級 | 破圖與死連結 | 專業感打折，內部連結斷裂拖累 SEO 爬蟲 | 每頁捲一次，圖片載入、內部連結都連得到 |
| P1 體驗級 | 手機實機測試 | 過半流量來自行動裝置，手機版壞掉等於流失多數訪客 | 拿真實手機開一次，選單、按鈕、表單觸控範圍正常 |
| P1 體驗級 | 速度體驗 | 載入慢直接拉高跳出率，也影響行動版排序 | 模擬慢速 4G 開首頁，Hero 動畫不卡到讓人想關掉 |
| P2 收錄級 | 搜尋引擎可見 | 站做好了卻不被收錄，等於沒有自然流量 | 到 Google Search Console 提交 Sitemap，確認無 noindex 擋住 |
成本多少、能做到哪、能不能拿來接案
整套流程要花多少錢，多數人的疑問其實是「會不會很貴」。工具成本主要落在 Claude 訂閱與網域主機，軟體費一年約落在數千元台幣區間就能跑完整套（此為概估，含訂閱、網域與主機，實際以官方方案為準）。真正貴的一直是時間，以及接案時要算進報價的審查與修改時間。把工具費當成主要成本，是低估了這條路的真實投入。
成本結構概算
| 項目 | 類型 | 說明 |
|---|---|---|
| Claude 訂閱 | 固定年費 | 依官方方案，架站重度使用者建議選用量較高的方案 [來源：〈Pricing〉〈https://www.anthropic.com/pricing〉2026-06] |
| 網域年費 | 每年 | 視網域後綴而定，部分主機方案會附贈首年網域，Bluehost 主機與網域方案 是一例 |
| 主機費 | 每月或每年 | 正式上線建議付費主機，網站架設費用完整解析 可參考 |
| 素材工具 | 視用量 | Flow 等動畫工具視方案計費，多數可先用免費額度試 |
能勝任的專案類型很明確：形象官網、作品集、Landing Page、一頁式活動頁、部落格前端。這幾類都屬於前端為主的網站，正好是 Claude Code 最擅長的範圍。想往品牌官網走的人，可以對照 品牌官網設計全攻略 跟 品牌官網架設實戰指南，把質感標準拉高。做作品集的人則看 作品集網站製作教學 跟 作品集網站平台推薦。
現階段的限制也要誠實講：需要複雜會員系統、購物車金流、即時資料庫互動的網站，Claude Code 產出的前端檔案只是起點，後端還是要走 WordPress 架站完整攻略 或傳統開發。原因在於這類需求牽涉到資料庫設計、權限、資安，靠前端檔案硬扛會留下大量漏洞。想知道整體費用拆解，WordPress 架站費用拆解 跟 自架網站費用分析 寫得比較細。
拿來接案的可行性是高的，但有條件。Claude Code 適合接形象官網、作品集、活動頁這類專案，報價時要把真人審查與修改的時間算進去，不要用「AI 自動生成所以很便宜」的邏輯壓價。要釐清 Claude、Claude Code 與其他工作模式的差別，可以參考 Claude、Claude Code 怎麼分工，避免把不同工具的角色搞混。給客戶交付前一定要經過真人調整，AI 直出的成品還不到可直接交付的成熟度。報價行情可以對照 網頁設計報價行情，常見錯誤則看 自架網站常見錯誤 提前避開。
這套流程能不能拿來賺錢，取決於你願不願意把素材準備、設計系統、審查這幾個環節做到位。把這些做好，你的產出會跟只靠對話生成的競爭者拉開差距；只靠模型本身，產出多半停在原型階段，改不動也交付不出去。勝負的分水嶺一直都在 Prompt 結構、Skills 設定與素材準備這三件事上，模型版本反而是次要變數。想把 Claude 融入團隊日常協作，可以看 Claude Cowork 怎麼用，了解多人共用的另一種情境。想再往深走，Vibe Coding 網頁設計實戰 跟 AI 工具總整理推薦 是不錯的延伸。
接案報價的時間成本拆解
接案時最容易虧本的地方，是只把模型生成的時間算進報價，漏掉前置與後置的人工。一個形象官網專案從接觸到交付，真正的時間分配大致如下，報價時要把每一項都估進去，否則做越多賠越多。
| 階段 | 工作內容 | 佔比概估 |
|---|---|---|
| 需求與素材收集 | 與客戶確認目標、收集文案圖檔、釐清品牌調性 | 約三成 |
| 設計系統與大綱 | 寫 Skill、定色彩字體、排出頁面架構 | 約兩成 |
| 模型組裝與預覽 | 跑 Claude Code、逐頁預覽、第一輪微調 | 約一成半 |
| 響應式與內容校對 | 手機版調整、文字校對、連結檢查 | 約兩成 |
| 部署與來回修改 | 上正式網域、客戶回饋後的修改輪次 | 約一成半 |
從這張表看得出來，模型組裝只佔整體時間的一小段，絕大多數時間花在需求溝通、素材整理與審查修改。用「AI 自動生成」當壓價理由，等於忽略了前面四成的準備與後面三成的審查，這正是新手接案最容易漏算的隱形成本。把這張表當成報價底稿，每一項都換算成時薪，價格才會合理。
進階技巧：讓產出更接近專業等級
跑順基本流程之後，有幾個進階技巧能把產出從「能用」推向「專業」。這些做法的共同點，是把模型原本要靠猜測的地方，改由你提供明確規格，降低變異、提升一致性。
用範例檔鎖定視覺風格
口頭描述風格很容易失準，模型對「簡約」「現代」「專業」的解讀跟你不一定一致。比較穩的做法是準備一到兩個你欣賞的參考網站，把它們的截圖或連結附在 Prompt 裡，請 Claude「參考這個版面的留白比例與字級層級，套用我的品牌色」。用具體範例取代形容詞，模型抓到的方向會準很多。要留意的是參考只取結構與節奏，配色與標誌仍要用自己的，避免做出跟參考站太像的成品。
分階段交付，避免一次全改
很多人習慣一次列十幾條修改意見給模型，結果模型為了同時滿足所有要求，反而把原本沒問題的地方也改壞。比較可控的做法是分階段：先處理版面結構，確認沒問題再調配色，最後才動字級與間距。每一階段只給一類回饋，模型能更精準地執行，也方便你回溯是哪一輪引入了問題。搭配 Git 的 commit 紀錄，每一階段都是一個可還原的節點，改壞了隨時退回。
行動版優先的思考順序
根據 Statista 的資料，2026 年第一季全球網站流量有 52.27% 來自行動裝置（不含平板），桌機已經不是預設的瀏覽情境 [來源：〈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]。換算下來，手機版做壞等於讓過半的訪客拿到壞掉的體驗，這正是行動版優先會成為排序與轉換基本盤的原因。建議在 Prompt 裡就明確要求「手機版優先設計，桌面版再往上擴展」，並把斷點規則寫死。模型先做手機版，能避免它從桌面版縮放出問題版面，這是單欄擴展成多欄比多欄縮成單欄好處理的原因。
行動版優先還有一個延伸好處：強迫你先想清楚資訊優先順序。手機螢幕小，每個區塊都要爭取出現的資格，自然會逼你刪掉裝飾性內容，留下真正傳達訊息的東西。這種「被迫精煉」的過程，對網站的轉換力反而有正面幫助。
疑難排解：架站過程最常見的卡關點
把幾個高頻出現的問題整理成對照表，遇到狀況時可以先按這張表自查，多數能在不求助他人的情況下解決。每一項都附上成因與對應做法，避免你反覆試錯。
| 症狀 | 常見成因 | 對應做法 |
|---|---|---|
| 配色跟品牌對不上 | 只用色名描述，沒給 HEX | 把完整色碼寫進 Prompt 或 Skill |
| 手機版版面錯位 | 桌面版優先，斷點沒寫 | 改行動版優先，明確指定斷點數值 |
| Hero 影片載入很慢 | 檔案太大又全裝置播放 | 壓到 2MB 內，手機版改海報圖 |
| 同一網站出現多種圓角 | 設計系統沒寫進 Skill | 把圓角與間距變數統一寫死 |
| 表單送出沒反應 | 純靜態檔沒接後端 | 接第三方表單服務或改用 CMS |
| 正式網址破圖 | 圖片路徑用絕對本機路徑 | 改成相對路徑或上線前的根路徑 |
| 搜尋引擎收錄不到 | 殘留 noindex 或沒提交 | 檢查 meta 標籤並提交 Sitemap |
這張表裡的問題，有八成以上都能靠「把規格講清楚」預防。模型本身很少是瓶頸，模糊的輸入才是。養成在 Prompt 裡寫死數值與路徑的習慣，卡關的次數會大幅下降。
常見問題 FAQ
Claude Code 可以做出完整可上線的網站嗎？
可以。它產出的是可直接部署的 HTML/CSS/JS 前端檔案，推上主機就能運作，但複雜後端功能仍需另行處理。
完全不會寫程式能用 Claude Code 架站嗎？
能。只要素材與大綱備好，搭配 Skills 設定，非工程師也能在一個下午跑完設計到預覽部署的流程。
Claude Code 架站需要哪些工具搭配？
VS Code、Claude Code 命令列工具、Git 與 GitHub 帳號，加上 Flow 動畫素材與一份素材清單，就是最小可運作組合。
Flow 動畫怎麼放進 Claude Code 網站？
先把素材轉成 MP4 或 GIF 存進專案的素材目錄，接著在給 Claude 的指令裡寫清楚每支影片要落在哪個區塊，最後記得量一下載入時間，太重就壓解析度。
做好的網站怎麼部署到正式網域？
判斷點在於流量與維護需求：只是給客戶看預覽、或純靜態形象頁，停在 Netlify 接 GitHub 自動部署即可；需要穩定營運、接表單後端或未來擴充，才值得搬到付費主機綁正式網域。搬移時把 DNS 指向設好、掛上 SSL，站就會帶著安全鎖頭上線。
用 Claude Code 架站大概要花多少錢？
訂閱加網域加主機，一年大概落在數千元台幣這個量級，實際以官方方案報價為準。工具費其實不高，真正吃掉成本的是你審查與來回修改的時間。
Claude Code 做的網站可以拿來接案嗎？
可以，適合形象官網、作品集、活動頁這類前端專案，但報價要算入真人審查與修改時間，交付前一定要人工調整。
Claude Code 做的網站 SEO 會比傳統架站差嗎？
不會。SEO 表現取決於內容品質、載入速度、行動版體驗與結構化資料，這些前端檔案都能做到。只要素材與文案到位，產出的是乾淨的靜態 HTML，對搜尋引擎收錄反而友善。真正要留意的是 Hero 動畫別拖垮載入速度，以及部署後記得提交 Sitemap。
第一次跑這套流程要花多少時間？
第一次連環境安裝、Skill 撰寫、素材整理一起算，大概需要一到兩個完整工作天。跑順之後，一個形象官網從零到預覽版可以壓到一個下午。時間主要花在素材準備與審查修改，模型組裝本身只佔一小段。
如果你還在猶豫這條路適不適合自己，可以先從一個一頁式作品集開始試水，網頁設計自學路線圖 跟 品牌網站關鍵建議 能幫你把下一步想清楚。跑順一兩個專案之後，你大概會摸出自己的備料清單與審查節奏，到那時候架站的瓶頸多半落在素材與審查這兩件事有沒有排進流程，技術反而是最容易解的一段。