Claude 是很多人拿來寫文案、整理資料的 AI 助理，但它也很會寫網頁。在對話裡描述你要的頁面，旁邊就會出現一個可以點、可以滑的預覽，改一句話，畫面就跟著變。
這種「邊聊邊看」的體驗，讓很多人第一次覺得自己也能做網站。不過從預覽畫面到正式網站，中間還有網域、主機、表單、SEO 這些步驟。這篇說明用 Claude 做網站的兩個入口、實際流程、目前的限制，以及上線前要檢查的項目。
用 Claude 做網站的兩個入口
入口一：對話裡的 Artifacts
在 Claude 的對話中請它做網頁，它會產生一個 Artifact：在對話旁邊顯示的獨立內容，可以直接預覽、操作。適合用來做首頁雛型、活動頁、小工具，或是把想法變成看得到的畫面。
依 Claude 說明中心的介紹，Free、Pro、Max 方案的使用者可以把對話中的 Artifact「發佈」成公開連結，任何拿到連結的人都能打開，不需要 Claude 帳號；Team 和 Enterprise 方案則是分享給組織內的成員。說明頁也提醒，取消發佈後就不能再重新發佈，如果頁面有儲存資料，資料也會一起刪除。
入口二：Claude Code
Claude Code 是 Anthropic 的程式代理工具。官方文件的說法是：它會讀取你的專案、編輯檔案、執行指令，並整合你的開發工具。可以在終端機、程式編輯器、桌面 App 和瀏覽器上使用。
跟對話裡的 Artifact 不同，Claude Code 處理的是一整個網站專案：好幾個頁面、圖片資料夾、設定檔都在裡面。你說「新增一個服務介紹頁，風格跟首頁一樣」，它會自己找到相關檔案、做出修改、再檢查結果。依 Claude 官方方案頁（2026 年 10 月查詢），Claude Code 包含在 Pro（每月 20 美元起）以上的付費方案，免費方案沒有。
| Artifacts | Claude Code | |
|---|---|---|
| 做出來的是 | 單一頁面或小工具 | 完整的網站專案 |
| 怎麼看結果 | 對話旁直接預覽 | 在自己的電腦或雲端執行預覽 |
| 怎麼分享 | 發佈成公開連結 | 要另外部署到主機 |
| 需要的方案 | 免費方案即可使用 | Pro 以上付費方案 |
| 適合 | 雛型、活動頁、想法驗證 | 多頁網站、需要長期修改的專案 |
用 Claude 做網站的流程
1. 整理需求和素材
先把品牌資料整理成一份文件：做什麼、賣給誰、跟別人差在哪、網站要讓客人做什麼。再準備正確的電話、地址、價格、營業時間，以及手邊有的照片和標誌。資料越完整，Claude 越不需要自己猜。
可以直接上傳現有的簡介、DM 或舊網站內容，請 Claude 先整理成網站架構，確認後再開始做畫面。不知道從哪裡開始，可以參考〈第一次做網站要準備什麼？〉。
2. 先做首頁雛型
請 Claude 在對話裡做出首頁的 Artifact，用手機和電腦各看一次。這個階段只調整方向：配色、字的大小、區塊順序、第一眼要說什麼。細節先不要花太多時間，因為後面還會改。
3. 擴充頁面和內容
首頁方向確定後，再展開其他頁面。如果網站超過一頁，或之後會一直修改，建議改用 Claude Code 管理成一個專案，每一頁的檔案分開，修改時比較不會互相影響。
4. 部署到主機並綁定網域
Artifact 的公開連結適合分享雛型，但說明中心並沒有提到可以綁定自己的網域。要做成正式的品牌網站，通常要把程式碼部署到主機或靜態網站託管服務，再把自己的網域指過去。這一步牽涉到 DNS 設定，第一次做的人最容易卡住，可以請 Claude Code 一步步帶你操作，但每一個要輸入帳號密碼或付款的步驟，都要自己確認。
5. 上線前檢查
網站放上去之後，用下一節的清單逐項檢查一次。
目前的限制
Claude 能做出好看的網頁，但下面這幾件事要先有心理準備：
- 事實可能有錯：Claude 寫的文案很通順，但價格、年資、服務範圍可能是它補上的，一定要逐字核對。Google 搜尋中心對 AI 內容的說明也提到，發佈前要人工查核，包括標題、描述和圖片替代文字。
- 沒有內建的網站後台：做出來的是程式碼，不是一個有後台的網站。之後要改內容，得再請 Claude 改程式碼，或自己學會改。
- 對話太長會忘記前面的設定：一個對話裡來回修改太多次，前面講好的顏色或規則可能被忽略。Claude Code 可以把專案規則寫在一個說明檔裡，每次開始時自動讀取，能減少這個問題。
- 表單和資料要另外處理：純前端的網頁不會自己寄信或存資料，表單要接上第三方服務。
- 改到主機上的東西不一定能復原：Claude Code 的官方文件說明，它改檔案之前會先存檔點，改壞了可以退回；但對資料庫、部署這類遠端系統的操作，不在可以退回的範圍內。
上線前一定要檢查的 8 件事
| 項目 | 怎麼檢查 |
|---|---|
| 內容正確 | 電話、地址、價格、營業時間逐字核對 |
| 手機版 | 用自己的手機實際滑一次每一頁 |
| 連結與按鈕 | 每個按鈕都點一次，確認連到對的地方 |
| 表單 | 實際送出一筆，確認收得到通知 |
| SSL | 網址是 https，瀏覽器沒有出現不安全警告 |
| SEO 設定 | 每一頁都有自己的標題和描述 |
| 分享預覽 | 貼到 LINE、Facebook，看預覽圖和標題 |
| 流量追蹤 | 裝好 GA4，確認數據有進來 |
這 8 件是最基本的，完整的上線檢查可以對照〈網站上線前檢查清單〉。
品牌官網要不要自己用 Claude 做？
適合自己用 Claude 做的情況：想先做出雛型跟團隊或客戶溝通、活動頁或作品集這類內容不常變動的網站、本身對網頁有一點概念，而且有時間自己研究部署。
比較適合找人規劃的情況：網站是主要的接單或銷售管道、很多人需要一起更新內容、需要預約或購物這類功能，或是你沒有時間處理上線後的維護。
basedot 也用 AI 協助做網站，從釐清商業目標開始，AI 用來加速版面、文案初稿和圖片處理，判斷和檢查由人負責。網站上線後有中文後台，也可以接上 Claude、ChatGPT 這類 AI 助理，用對話換圖、上文章，做法可以參考〈網站後台接 AI 是什麼？〉。時程上，一頁式網站約 1～2 週、形象官網約 2～4 週、電商網站約 1～2 個月，有 AI 協作可以再縮短。
用 Claude 做網站常見問題
免費版 Claude 可以做網站嗎？
可以在對話裡做出網頁的 Artifact，並發佈成公開連結。要用 Claude Code 管理完整的網站專案，需要付費方案。
Claude 和 ChatGPT 做網站，哪個比較好？
兩者都能寫出網頁程式碼和文案，差別主要在操作方式和各自提供的工具，而且功能更新很快。建議用同一份需求分別試做一次首頁，看哪一個比較符合你的習慣。ChatGPT 的做法整理在〈用 ChatGPT 做網站〉。
不會寫程式，可以用 Claude Code 嗎？
可以開始，Claude Code 會在你同意後幫你執行大部分操作。但它在你的電腦上讀寫檔案、執行指令，建議先在一個獨立的資料夾裡練習，不要一開始就讓它處理重要的檔案，也不要隨意允許它執行你看不懂的指令。
用 Claude 做的網站，之後可以請別人接手嗎？
可以。Claude Code 做的是一般的網站程式碼，懂網頁的人都看得懂。接手前把專案放在自己的帳號下，網域也登記在自己名下，換人時就不會卡住。
結論：Claude 讓網頁變得好做，上線還是要按部就班
用 Claude 做網站，最快的路是先在對話裡做出首頁雛型，確認方向後，再用 Claude Code 擴充成完整的專案，最後部署到主機並綁定網域。
它能大幅縮短做出第一版的時間，但內容核對、表單、SEO 設定和上線後的維護，還是需要有人負責。把這些步驟走完，AI 做的網站才真正能接住客人。
有架設網站的需求，歡迎跟 basedot 網頁設計聯繫。
