如何用 AI 重建 Webflow 網站

簡介

Webflow 是一個功能強大的工具，能夠打造出色的網站，但它同時也以難以上手著稱。成千上萬的企業感覺被它困住了。

近來，AI 工具讓人們可以透過與 AI 對話來建立同樣出色的網站。如果你已經有一個 Webflow 網站，還可以自動重建它，不必從頭開始。

在本指南中，我將示範如何將 Webflow 網站遷移到一個名為 Repaint 的全新 AI 工具。

為什麼要重建 Webflow 網站？

AI 網站建構工具比 Webflow 容易使用得多。不需要學習複雜的視覺化編輯器，只要描述你想要的效果，它就會幫你實現。這讓你真正能夠持續更新網站，而不是把每次修改都當成一件高風險的事。

大多數人遲遲沒有切換的原因，是離開 Webflow 過去意味著必須從頭重建一切。AI 工具改變了這個局面。現在，你第一次可以把既有的內容帶走，移到更易用的平台，不必重頭來過，也不用花幾千美元請人代勞。

AI 網站遷移的運作方式

AI 遷移的原理是讀取你現有的網站，並在新平台上重建它。它會匯入你的內容、圖片和版面配置，再生成一個新版本，讓你透過與 AI 對話來編輯。滿意之後，只需轉移網域，大功告成。

如果你想完全複製原始網站，通常只能達到八成相似。AI 在轉換過程中難免會遺漏細節，動畫效果尤其難以完整移植。但它能遷移你的內容、重現版面配置，而且比任何範本都更接近原版。之後再請 AI 修改細節即可。

如果你的網站已經五年沒更新，感覺有些過時，這正是更換設計的好時機。Repaint 可以沿用你現有的內容，圍繞它打造一個全新的設計。

第一步：匯入你的內容

首先，前往 Repaint。在頂部欄位輸入你的 Webflow 網站網址，這樣就能啟動網站重建流程。Repaint 會掃描你的網站、下載圖片，並對每個頁面截圖，以便了解你的原始網站。

這項功能僅適用於公開的網站，因此你的 Webflow 網站必須已發布，即使是在免費的 Webflow 子網域（例如 xxxx-xxxx-xxxx.webflow.io）也沒關係。

Repaint 充分了解你的業務後，就會開始提問，協助規劃新網站。整個過程有引導，不需要提前準備任何資料。

第二步：規劃新網站

在開始建置之前，Repaint 會先提問，了解你的目標方向。通常需要 3 到 5 則訊息。把它想成一次簡短的訪談：Repaint 想知道要保留哪些頁面、是否需要重新整理結構，以及採用什麼風格。回答完畢後，它會列出一份計畫供你確認。

如果你還不確定要什麼，沒關係。你可以讓 Repaint 提出建議。不喜歡的話，隨時可以請它重來，不會被鎖定在第一版結果。

規劃內容

最簡單的做法是原封不動地搬過來：相同的頁面、相同的文字、相同的圖片。如果你現有的網站架構運作良好，只是想要更好用的管理工具，這就是最適合的方式。

但如果你的網站多年來越來越雜亂，這是整理的好機會。也許你有過時的部落格文章、舊活動的登陸頁，或是一些沒什麼意義的區塊。你可以告訴 Repaint 哪些頁面要保留、哪些可以略過，或是請它根據現有內容建議一個更精簡的架構。

如果你的 Webflow 網站使用了 CMS 集合，例如部落格、案例研究或作品集，這些也可以一起帶過來。CMS 頁面遵循重複性的範本，建議先匯入一兩個，確認版面配置看起來正確之後再繼續。此外，如果你的網站超過 20 個頁面，一次全部匯入很可能會用完免費方案的使用額度，屆時系統會提示你升級。對於大型網站，建議先從少量樣本開始，確認初始結果後再陸續匯入其餘頁面。

規劃風格

你的新網站外觀有幾種選擇：

• 重現原有風格
• 仿照另一個網站的風格
• 從 Repaint 的風格庫 挑選
• 要求自訂風格
• 讓 Repaint 決定

無論選擇哪種方式，你都可以進一步自訂結果。Repaint 能將你的品牌色彩和字型套用到任何風格，不會被你在這裡選擇的內容所侷限。

確認計畫

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

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

第三步：生成你的網站

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

在背景，Repaint 正根據你的內容和風格為新網站撰寫程式碼。完成後，它會對建置結果截圖，在呈現給你之前先確認有沒有明顯的問題。

第一個版本可能會有一些小瑕疵：按鈕文字難以閱讀、標誌太小，或是間距看起來不對。這很正常，你可以透過與 Repaint 對話來修正這些細節。

有一項功能可能無法無縫移植，那就是動畫。Webflow 擁有完善的動畫系統，而 AI 往往難以單憑截圖推斷動畫的運作方式。你需要透過描述來重新建立缺少的捲動效果、滑鼠懸停動畫或頁面轉場。Repaint 可以製作相同的動畫，只是不一定能自動移植。

第四步：進行調整

生成網站後，你可以透過與 Repaint 對話來進行修改。

首先評估整體視覺風格，例如色彩、字型和版面配置，這是整個網站的基礎。如果之後才決定更改，可能會影響整個網站，讓你之前做的細節調整付之一炬。

對整體風格滿意後，再來處理細節：確認文字正確、圖片位置恰當、連結正常運作，以及每個頁面的間距在視覺上都看起來整齊。

檢視 SEO

如果你的 Webflow 網站有搜尋流量，遷移過程中值得特別留意 SEO。Google 排名的對象是個別頁面，而非整個網站。你網站上的每個頁面都累積了自己的排名，而那個排名與特定的 URL 綁定在一起。如果遷移到新平台後那些 URL 改變或消失，Google 會將它們視為沒有歷史記錄的新頁面，你也會因此損失這些頁面帶來的流量。

請 Repaint 比對舊網站與新網站，確認所有頁面的 URL 與在 Webflow 上時相同。如果有任何 URL 發生改變，你需要設定從舊 URL 到新 URL 的重新導向，讓 Google 能追蹤到正確的位置。Repaint 可以協助你完成這項工作。

網站看起來不錯、內容也確認無誤後，就可以準備發布了。

第五步：發布

準備好之後，點擊右上角的「發布」按鈕。這與 Webflow 的發布方式相同。你的網站會在一個 Repaint URL 上線，可以分享給任何人。網址格式大概像這樣：https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

這樣你的網站就正式上網了，可以在手機上瀏覽、傳給朋友，或是分享到社群媒體。

此時，你有兩個網站同時在線：一個在 Repaint，一個在 Webflow。你的網域目前仍指向 Webflow 網站，所以訪客看到的還沒有任何變化。當你準備好切換時，就可以轉移網域，讓它指向新網站。

第六步：轉移你的網域

準備上線時，你需要將網域指向 Repaint。前往「網站設定 > 網域」，點擊「連結自訂網域」。這需要付費方案，定價詳情請參閱這裡。

你的網域與 Webflow 是分開的，它是在 GoDaddy、Namecheap 或 Cloudflare 等網域服務商處註冊的。你不需要將網域移到別處，只需在你的網域服務商那裡更新設定，讓網域指向 Repaint 而非 Webflow。如果網站是由別人幫你架設的，在開始這個步驟之前，請確認你有網域服務商的登入權限。

如果你以前沒有做過這件事，不用擔心。請 Repaint 一步一步帶你完成，它會告訴你確切的操作步驟。

變更生效可能需要幾個小時。一旦 Repaint 顯示你的網域已驗證，就代表正式上線了。之後你可以隨時取消 Webflow 方案。

結語

多年來，從 Webflow 遷移意味著從頭重建，或是花錢請人代勞。現在情況不同了。你可以將內容帶入 Repaint，幾分鐘內就能得到一個可運作的網站，並且自行管理，不需要學習複雜的工具。如果你一直因為覺得太麻煩而遲遲沒有重建，現在是個好時機。

常見問題

Webflow 遷移需要多長時間？

規劃網站、匯入內容和生成新網站通常需要 3 到 15 分鐘。之後，從完成到發布的時間取決於需要調整的幅度，以及是否還有更多內容要匯入。大多數網站最多在幾個小時內就能完成遷移。

網站在手機上的顯示效果會一樣嗎？

Repaint 在建置網站時會自動讓它適應不同的螢幕尺寸。大多數情況下你不需要擔心這個問題，但如果發現任何顯示異常，可以請 Repaint 針對特定裝置尺寸進行調整。

遷移後表單還能正常運作嗎？

可以。Repaint 可以建立聯絡表單，將訊息寄到你的收件匣。如果你使用的是 Typeform 或 Google Forms 等自訂嵌入，Repaint 會嘗試自動連結，但你可能需要將嵌入程式碼提供給 Repaint。

遷移過程中，我的 Webflow 網站會怎樣？

遷移過程中，你的 Webflow 網站完全不受影響，兩者是分開的。你只是在 Repaint 中建立一個新網站。待你對新網站滿意後，再將網域指向新網站。如果你決定保留 Webflow 網站，也不需要做任何事。

可以遷移有電商功能的 Webflow 網站嗎？

部分可以。Repaint 可以建立電商網站，但不包含結帳流程或金流處理。如果你需要銷售商品，必須串接 Shopify 或 Stripe 等第三方服務。如果你的商店使用可嵌入的小工具，將嵌入程式碼提供給 Repaint，它就能整合進去。

可以只遷移一個頁面試試看嗎？

可以。你可以只匯入一個頁面來試試看，這是評估 Repaint 是否適合你業務的好方法。滿意結果後，再請 Repaint 建立網站其餘的部分。

從 Webflow 遷移到 Repaint 需要多少費用？

生成網站和開始編輯是免費的。免費方案的主要限制包括：使用量有上限、無法新增自訂網域，且網站會顯示 Repaint 標誌。付費方案起價為每月 20 美元（按年計費）或每月 25 美元（按月計費），包含更多使用量、自訂網域支援，並移除 Repaint 標誌。

如果 AI 犯了錯，可以復原個別變更嗎？

可以。每次更新時，Repaint 都會儲存你網站的每個版本。你可以請 Repaint 退回上一步，它會還原到先前的版本。如果想回到某個特定的時間點，也可以手動還原任意一個先前的版本。

Repaint 如何處理 Webflow 的自訂程式碼或第三方嵌入？

Repaint 可以執行來自 Webflow 網站的自訂程式碼或嵌入內容。它會在第一次嘗試時自動遷移所有內容，但有時會遺漏某些部分。如果發生這種情況，將嵌入程式碼貼到對話中，Repaint 就會從那裡接手處理。