如何將 Claude artifact 變成網站

簡介

許多人正在使用 Claude 製作網站。當你提出要求時，Claude 會以 artifact 的形式回傳網站：一個可以直接在聊天視窗中預覽的單一檔案。但當你拿到那個 artifact 之後，接下來該怎麼做就不太明朗了。你還得把它部署到某個地方、連結網域、讓它在手機上正常顯示，並想辦法之後還能繼續編輯。

Claude 為 artifact 提供了「Publish」按鈕，但成品會放在 claude.site 的網址上，外層還包著 Anthropic 的介面。用來分享 demo 是沒問題，但作為企業會實際使用的網站就不適合了。

在本指南中，我將示範如何使用一款名為 Repaint 的全新 AI 工具，把 Claude artifact 變成一個真正、已發布的網站。它可以從你的 artifact 開始，發布網站，並透過與 AI 對話進行編輯。

為什麼發布 Claude artifact 這麼困難

Claude 能生成程式碼，但它不是完整的網站建構工具。當你問如何把它發布到自己的網域時，它會引導你到其他平台。它通常會推薦像 GitHub、Netlify、Vercel 這類開發工具，或建議你在傳統的網站建構工具中重建。兩者都不算理想。

開發工具的好處是可以直接執行 Claude 生成的程式碼，缺點是每次變更都需要編輯特定的程式碼檔案。對於不會寫程式的人來說，這代表為了用 AI 做簡單的修改，必須不斷把檔案放進部署的程式碼中再拿出來。

大多數人為了避免程式碼的複雜性，會使用 WordPress、Wix 或 Webflow 這類網站建構工具。這些平台能讓發布變更更順暢。問題是它們無法執行 Claude artifact，所以你得手動把所有東西重建一遍。之後要修改也只能全部手動處理。

這就是為什麼你應該使用像 Repaint 這樣的 AI 網站建構工具。它兼具執行自訂程式碼的彈性，以及在同一個地方編輯與發布的便利性。

什麼是 Repaint？

Repaint 是一個用來建立網站的 AI 平台。它採用與 Claude 相同、以對話為核心的工作流程。你可以用自然語言要求變更、檢視結果，並持續調整直到網站看起來符合期待。

但 Repaint 是完整的網站平台，不只是生成程式碼的地方。這代表它能處理 Claude artifact 發布功能無法處理、實際運營網站所需的各個環節：

• 它會把你的網站當作一般網站發布，外層不會包覆 Anthropic 的介面。
• 它讓你可以連結自訂網域，網站就能放在你真正的 URL 上。
• 它讓網站可以持續用 AI 編輯，方便你日後修改。
• 它能協助管理 SEO 細節，例如頁面標題、描述以及網站結構。
• 它可以從單一 artifact 擴充成多頁面的網站。

這就是分享一個 artifact 與擁有一個能長期管理的網站之間的差別。

第一步：從 Claude 匯入程式碼

Claude 製作網站時，會把所有內容放在一個可以於聊天中預覽的單一檔案裡。預設 artifact 為 HTML，但你也可以要求改用 React/TSX。無論哪種，artifact 面板上方都有一個複製按鈕。

開始前，先打開你的 Claude artifact 並複製程式碼。接著前往 Repaint 程式碼匯入工具，把程式碼貼上。這會啟動網站建置流程。Repaint 會根據你的程式碼建立一個完整的網站，讓你可以發布並持續編輯。

如果你還沒在 Claude 製作 artifact，建議要求 React。它比較接近 Repaint 使用的格式，能降低細微設計細節在轉換時遺失的機會。HTML 也行得通，只是任何問題之後都得透過與 Repaint 對話來修正。

第二步：規劃 Repaint 要建置的內容

貼上程式碼後，Repaint 會在建置網站前先問幾個問題。這讓你有機會決定是要完全照用 Claude 版本、把它當作參考靈感，或擴充成包含更多頁面的大型網站。

規劃內容

Claude artifact 永遠都是單一檔案，所以通常變成單頁網站，連結會捲動到不同區塊，而非開啟新頁面。但大多數企業需要的不只是一頁網站。如果你的 artifact 是單頁的，可以考慮讓 Repaint 把它做成多個頁面。

你也可以趁這個時機加入更多內容。Claude artifact 通常不會包含像部落格文章這類大量頁面。將 artifact 匯入 Repaint 時，你可以擴大範圍，把所有想要的內容都納入。

任何新頁面都會配合你既有的風格。

規劃風格

預設情況下，Repaint 會沿用你原始的風格。也就是會保留相同的外觀：色彩、版面、字型與間距。

但你不必非得沿用原本的風格。如果不滿意，可以請 Repaint 為你的網站重新設計。Repaint 可以：

• 盡可能還原原本的樣子
• 模仿你喜歡的另一個網站的風格
• 為你的內容打造自訂風格
• 從 Repaint 風格庫 中挑選
• 由它替你決定

不必想太多。如果不喜歡結果，之後隨時可以請它做出新的版本。

檢視計畫

在生成任何內容之前，Repaint 會明確列出即將建置的內容：哪些頁面、什麼內容、什麼風格。仔細檢閱並做最後調整。修改計畫遠比重新生成整個網站來得快。

確認之後，Repaint 就會開始建立你的新網站！

第三步：生成你的網站

確認計畫後，Repaint 便開始建置你的網站。你會看到進度訊息，追蹤每個頁面的處理情況。簡單的首頁可能需要一兩分鐘；頁面較多的大型網站則可能花更久。

Repaint 並不是單純把你貼上的程式碼直接託管。它會將 Claude artifact 作為素材來源，再依照你的計畫建置網站。如果你要求完全還原，它會盡量貼近原始版本；如果你要求更多頁面或不同風格，它會把 artifact 當作起點。

生成過程中有時細節會在轉換時遺失。若 artifact 是 HTML，這種情況更常發生，因為 React 較接近 Repaint 使用的格式。如果有重要細節遺失，可以在下一步進行修正。

第四步：用 AI 編輯你的網站

Repaint 生成第一個版本後，你會在螢幕右側看到它。現在你可以像在 Claude 中一樣進行修改。輸入想要變更的內容，Repaint 會更新網站，然後你檢視結果。

舉例來說，你可以請 Repaint：

• 新增一個頁面
• 變更色彩或字型
• 加入聯絡表單
• 生成圖片
• 重寫文字

你可以持續調整，直到網站準備好發布為止。

第五步：發布你的網站

當網站準備就緒時，點擊 發布 按鈕。Repaint 會把網站放上線，並給你一個可分享給任何人的網址。網址看起來大概像這樣：https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

到了這一步，你的成品就成了網際網路上一個真正的網站。你可以在手機上打開它、傳給別人，或在真實的瀏覽器中測試。它也不會像已發布的 artifact 那樣被 Anthropic 的介面包覆。

你也不需要匯出程式碼或把檔案部署到其他地方。從現在起，Repaint 就是你編輯與發布網站的地方。日後若想修改，可以請 Repaint 更新網站，再用同一個按鈕發布新版本。

第六步：連結你的網域

當你準備使用自己的網址時，前往 網站設定 > 網域，並點擊 連結自訂網域。這需要付費方案。定價詳情可參閱這裡。

你的網域是在 Claude 與 Repaint 之外的平台上管理的，它是在 GoDaddy、Namecheap 或 Cloudflare 這類網域服務商註冊的。你不需要把它搬到別處，只要在網域服務商那邊更新設定，讓網域指向你的 Repaint 網站即可。

如果你以前沒有做過這件事，不用擔心。請 Repaint 帶你逐步完成，它會明確告訴你每一步該怎麼做。

變更生效可能需要幾個小時。一旦 Repaint 顯示你的網域已驗證，你的網站就正式在你自己的網域上上線了。

結語

Claude 讓人能輕鬆在 artifact 中建立網站的第一版，但要讓它以真正的網站形式上線並維護下去仍然不容易。Repaint 讓你能把那個 artifact 變成可以發布、連結網域，並持續用 AI 編輯的真正網站。Repaint 讓「把 Claude artifact 變成已發布的網站」比以往任何時候都更容易。

常見問題

為什麼不直接用 Claude 內建的 artifact 發布功能？

可以，但成品會放在 Claude 託管的沙箱中，外層包著 Anthropic 的介面，而且無法放到你自己的網域上。用來分享 demo 沒問題，但大多數企業想要的真正網站並不適合這樣。Repaint 提供的是一個一般網站，擁有你自己的網域、自己的品牌，而且周圍不會有 Anthropic 的介面。

用 Repaint 把 Claude artifact 變成網站要多久？

如果你的 artifact 已經完成，應該只需要幾分鐘。分享程式碼、規劃網站和生成網站通常需要 2 到 5 分鐘。之後完成發布的時間，取決於你做多少調整。

用 Repaint 發布要多少費用？

把程式碼匯入 Repaint、生成網站、進行編輯與發布都是免費的。免費方案的主要限制是使用量受限、無法使用自訂網域，而且網站上會顯示 Repaint 徽章。付費方案起價為每月 20 美元（按年計費）或每月 25 美元（按月計費）。包含更多使用量、自訂網域支援，並移除 Repaint 徽章。

為什麼不直接用 GitHub Pages、Netlify 或 Vercel？

可以，特別是你習慣管理程式碼的話。這些工具很擅長把檔案放到網路上，但每次有意義的變更都得回到程式碼裡處理，這代表你會不斷在 Claude、編輯器和託管工具之間複製檔案。

Repaint 不一樣，因為它是一個完整的網站平台，不只是用來提供檔案的地方。這代表你可以持續用 AI 編輯、在同一處發布變更、管理頁面、更新 SEO 設定、優化圖片、串接表單，以及使用自訂網域。它是為長期網站管理而設計的，不只是為了第一次部署。

我需要會寫程式才能修問題嗎？

不用。Repaint 是為不會寫程式的人設計的。把程式碼從 Claude 匯入後，你再也不必管理程式碼。如果有東西看起來不對，可以透過與 AI 對話來修正。懂程式碼能幫你更精確地表達需求，但並非必要。

網站會看起來和 Claude artifact 一模一樣嗎？

如果你請 Repaint 還原原本的樣子，它看起來應該幾乎一致。偶爾會有些細節在 Repaint 把程式碼轉換成自己的網站格式時遺失。如果 artifact 是 HTML，轉換問題會比較常見。如果發生這種狀況，你應該能在幾次對話內把所有問題修好。

如果 AI 出錯了怎麼辦？

當你進行更新時，Repaint 會儲存網站的每個版本。你可以請 Repaint 回到上一步，它會還原到先前的版本；或者，如果你想回到某個特定的時間點，也可以手動還原任意一個先前的版本。所以你可以放心做更動，不用擔心會搞壞網站。

匯入後表單和按鈕還能用嗎？

可以。原本的 Claude artifact 裡聯絡表單大概不會有作用，但當你把網站搬到 Repaint 之後，它可以把表單變成真正的聯絡表單，當你收到提交時會寄送電子郵件通知。按鈕若連到真正的頁面或區塊就可以正常使用。如果某個按鈕沒有指向任何地方，可以請 Repaint 幫你連結。

Repaint 能處理 Claude artifact 中的圖片、圖示與其他素材嗎？

Claude artifact 通常不會把圖片檔案存在裡面，而是連結到託管在他處的圖片。當你匯入程式碼時，Repaint 可以擷取這些圖片並保存副本，讓它們永久供新網站使用。如果你還需要新增圖片，Repaint 也可以生成圖片。

我可以加入 SEO 設定、分析工具和中繼資料嗎？

可以。你可以直接請 Repaint 加入自訂程式碼、分析工具和中繼資料。它能為你設定技術 SEO，也能加入其他平台的指令碼與嵌入。要加入 Google Analytics，只要把 GA ID 提供給它即可。

Repaint 會取代託管服務嗎？還是我還需要另外的主機？

Repaint 就是一個託管平台，它會執行你的網站。你不需要另外的託管平台，例如 GitHub Pages、Netlify、Vercel 或其他網站建構工具。