如何用 AI 重新設計 Framer 網站

簡介

Framer 是一個設計自由度非常高的網站建置工具，深受想要打造頂尖網站、又不想寫程式碼的專業設計師喜愛。但這種設計自由是有代價的。大多數人都覺得它不好上手，因為它是為那些想要精準控制每個細節的專業人士而設計的。他們最近加入了一個能替你進行編輯的 AI 對話功能，但周邊的工具仍然是為設計師打造的。

大多數人其實更適合使用像 Repaint 這樣、為更廣泛受眾設計的 AI 平台。你透過描述想要的效果來編輯，而且你操作的是你真實的網站，而不是設計畫布。如果你已經有一個 Framer 網站，還可以自動遷移現有內容，不必從頭開始。

在本指南中，我將向你展示如何在 Repaint 上重新設計你的 Framer 網站。

為什麼要用 AI 重新設計 Framer 網站？

最大的差異在於編輯體驗。Framer 最初是一個專業設計工具，這仍然是它的核心。你在一個 2D 畫布上工作，選取元素、調整設定，並為每個螢幕尺寸加上覆寫設定。新的 AI 對話功能確實很強大，但它是在同一套系統內進行編輯。點擊任何東西仍然是選取它，而不是瀏覽網站。

Repaint 從一開始就是圍繞 AI 編輯打造的。你可以達到相同水準的設計品質，但完全透過對話完成。你輸入想要的效果，AI 就會完成設計工作，包括版面配置、間距和響應式設計。它撰寫的是真正的程式碼，而不是拼湊區塊，因此擁有開發人員才有的自由度。而且編輯器顯示的是你的即時網站，而不是畫布，讓你能像訪客一樣閱讀並點擊瀏覽。

AI 網站遷移的運作方式

Repaint 會像顧客一樣造訪你的線上 Framer 網站。它會讀取你的文字、下載你的圖片，並為每個頁面截圖以了解版面配置。接著根據這些素材重建你的網站。之後，你可以透過與 AI 對話來進行變更。它不需要存取你的 Framer 帳戶，Framer 上的任何東西也不會被修改。

開始使用也不代表要做出任何承諾。在你建置的同時，你的 Framer 網站會保持上線，訪客會繼續看到它，直到你把網域指向新網站為止。如果你做到一半就停下來，什麼都不會改變。

第一步：匯入您的內容

首先，你需要準備你線上 Framer 網站的網址：

1. 前往 AI 網站重新設計工具。
2. 貼上你的 Framer 網站網址並送出。
3. 建立一個 Repaint 帳戶。

任何公開的 Framer 網站都可以使用，無論是自訂網域還是免費的 framer.website 網址。如果掃描漏掉了什麼，你可以透過對話補充，或上傳檔案。

對於大型網站，通常最好先匯入主要頁面和幾個具代表性的 CMS 項目。Repaint 會根據你現有網站的規模來擬定計畫，所以第一輪未必會重建所有內容。等版面配置看起來沒問題後，剩下的部落格文章或作品集項目可以分批匯入。這也能避免在你檢視設計之前，就因為一次匯入太多而用掉免費方案的額度上限。

第二步：生成您的網站

Repaint 會就你的網站和想要的變更展開對話，然後根據你的指示和內容，建置新網站的第一個版本。你不需要在一開始就把每個決定都定案。Repaint 生成第一個版本後，你可以繼續透過對話來調整它。

選擇風格

Repaint 可以從許多不同來源取得設計方向，包括：

• 你目前的 Framer 設計
• 你喜歡的其他網站
• Repaint 生成的風格範例
• 你在 Facebook、Instagram 或 Google Business 上的內容
• PDF 或 PowerPoint 等檔案
• 對想要風格的描述

Repaint 可以結合這些來源，同時保留你的品牌色彩和標誌，讓網站依然感覺是你的業務。

審閱結果

小型企業網站的第一個版本通常只需幾分鐘就能生成。頁面或 CMS 項目較多的網站則需要更長時間。

第一個版本準備好後，你就能看到現有的 Framer 內容如何融入新的版面配置。有些細節需要調整是正常的，你可以透過對話進行修正。

第三步：進行調整

大部分的調整都是透過建立網站的同一場對話進行。你描述想要的改變，Repaint 就會呈現結果。如果它理解錯了，你可以說明應該要怎麼樣才對。

先確定整體結構和視覺風格會很有幫助，因為這些較大的決定會影響後續的一切。等基礎確立後，較小的細節就更容易處理。最後在電腦和手機上各檢查一次，可以抓出任何沒有正確適應的部分。

動畫值得特別花時間處理。動畫是 Framer 的招牌功能，而由於 Repaint 是根據完成頁面的截圖來運作，動態效果正是它唯一看不到的部分。捲動效果、懸停狀態，以及對你來說重要的轉場效果，都可以在對話中描述，Repaint 就會重現它們。Framer 表單可以替換成新的表單，把送出內容寄到你的電子郵件，第三方服務通常也能透過分享其嵌入碼或連結來重新連接。

審閱 SEO

保留 URL 比保留網站原本的建置方式更重要。搜尋排名是屬於個別頁面 URL 的，所以在搬遷網站時改變一個原本有效的 URL，可能會失去那個頁面已經累積的排名歷史。

一個實用的最後檢查是比對新舊網站的路徑。Repaint 可以重新建立任何不相符的部分。如果你曾在 Framer 的頁面設定中自訂過頁面標題和描述，這些也值得留意。我們的網站重新設計 SEO 指南說明了完整的流程。

第四步：發布

在你發布之前，新網站只是一個只有你能看到的私人草稿。點擊右上角的「發布」，Repaint 就會把它放上網際網路，網址結尾為免費的 sites.repaint.com。這是一個真實、能正常運作的網站，你可以在手機上開啟它，或分享給其他人徵求意見。

之後，每次你發布，最新的變更都會同步更新到同一個 Repaint 網址。這些更新只會影響新網站，永遠不會改變你的 Framer 網站。在你操作的期間，兩個網站會同時保持上線於不同的網址。訪客會繼續在你的主網域上看到 Framer 網站，直到你切換到新網站為止。

第五步：連接您的網域

最後一步是把你的網域指向 Repaint。Framer 在編輯器內就能銷售網域，所以你的網域可能是透過 Framer 註冊的，也可能是透過 GoDaddy、Namecheap 或 Cloudflare 等外部註冊商註冊的。無論哪種情況，網域都可以繼續留在原本的地方註冊。你只需要更新控制網站載入位置的記錄。

準備好連接網域時，Repaint 會提供你的服務商所需的確切 DNS 記錄和操作說明。它也能根據你網域的註冊位置，一步步帶你完成整個流程。連接自訂網域需要付費方案，目前的詳情可參閱定價頁面。

這項變更通常在大約 20 分鐘內生效，但偶爾可能需要更長時間。Repaint 可以確認新網站何時已在你的網域上線。切換完成後，你就可以取消該網站原本的 Framer 方案。如果網域是透過 Framer 註冊的，請保持網域續約有效。網域註冊與網站方案是分開計費的，取消其中一項不會影響另一項。

結語

Framer 能打造出漂亮的網站，但要讓網站保持更新，就意味著每次有變動都得操作一個專業設計工具。Repaint 會匯入你現有的內容，圍繞它重新設計網站，並讓你之後能透過對話進行變更。在你選擇切換網域之前，你的 Framer 網站都會保持上線。

常見問題

從 Framer 遷移需要多長時間？

匯入內容並生成第一個版本通常需要 3 到 10 分鐘。剩下的時間取決於 Framer 網站的規模，以及你想做多少變更。大多數小型企業網站都能在當天完成。

我可以保留目前的 Framer 設計嗎？

可以。Repaint 會以你線上的 Framer 網站作為視覺參考，並能重現大致相同的外觀。對於 Framer 網站來說，主要的落差通常在於動態效果。版面配置、色彩和字型都能很好地保留，但動畫必須先在對話中描述，Repaint 才能重現它們。如果你的設計高度依賴動態效果，第一個版本看起來會很像你的網站，但感覺上會比較靜態，直到你把動畫加回去為止。

Framer 的動畫和互動效果會遷移過來嗎？

部分會。Repaint 能推斷出明顯的互動效果，例如 FAQ 下拉選單、手機選單，以及按鈕的懸停狀態。但它是根據完成頁面的截圖來運作的，所以對動態效果的了解遠不如對版面配置的了解。自訂的捲動效果和轉場通常不會自動帶過來。你可以透過告訴 Repaint 原本的行為方式，來重新建立其中任何一個。

我可以遷移 Framer CMS 部落格或作品集嗎？

可以。Repaint 匯入 CMS 內容的方式與匯入頁面相同。部落格文章和作品集項目會連同文字和圖片一起帶過來，新網站也會有對應的文章和作品集版面。對於龐大的內容集合，最好先匯入幾個項目、確認版面配置，再分批帶入其餘內容。新的 URL 應該與舊的相符，以保護它們的搜尋排名歷史。

我的表單還能用嗎？

Repaint 可以把 Framer 表單替換成新的表單，將送出內容寄到你的電子郵件。連接到其他服務的表單則需要重新設定那個連接。大多數第三方表單工具都提供嵌入碼，你可以在對話中分享給 Repaint。

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

部分可以。Repaint 可以重建行銷頁面和視覺化的商店前台，但不處理結帳或付款。這些仍然需要像 Shopify 或 Stripe 這類專門的商務服務。如果你的商店使用可嵌入的小工具，將嵌入碼分享給 Repaint。

我的網域是透過 Framer 購買的，還能切換嗎？

可以。網站搬遷後，網域仍可繼續在 Framer 那裡註冊。它的 DNS 記錄會改變，指向 Repaint，同時網域續約保持有效。網站方案和網域註冊是分開計費的，所以你可以取消其中一項，同時保留另一項。

我現有的 Framer 網站會怎樣？

在你建置期間不會有任何變化。Repaint 建立的是一個獨立的網站，永遠不會改變 Framer 網站。舊網站會保持上線，直到網域指向其他地方為止。如果你決定不切換，它可以就這樣一直維持原狀。

從 Framer 換到 Repaint 要花多少錢？

匯入網站和編輯都是免費的。你也可以在不需要信用卡的情況下，發布到 Repaint 子網域。連接你自己的網域需要付費方案。方案起價為每月 $25，或每月 $20（按年計費）。

如果 AI 弄錯了怎麼辦？

Repaint 每次變更都會儲存網站的新版本。你可以請它退回上一步，或從版本歷史中還原到較早的版本。你嘗試的任何東西都不是永久性的。

之後我還需要保留 Framer 訂閱嗎？

不需要。新網站完全在 Repaint 上運作，由它為你管理主機。一旦你的網域指向新網站，舊網站的 Framer 方案就可以取消了。如果你用 Framer 建置其他網站，那些網站會保留各自的方案。