關於 Relume
About
Relume 是什麼
Relume 是一款 AI 網頁設計工具，專門處理網站進入視覺設計之前的那個階段。你用一段文字描述專案，它就會產生一份網站地圖，列出需要的頁面、每頁的線框稿、搭配的樣式指南，以及暫代用的文案。接著你把整套內容以可編輯元素的形式送到 Webflow 或 Figma。它的用意，是取代那段卡在客戶需求與實際開發之間、總是拖得很久的規劃工作。
這款工具分成兩半。AI Site Builder 負責生成，把一份書面需求變成頁面結構與內容。Relume Library 是另一半：一整套數量龐大的現成區塊，全部遵循 Finsweet 的 Client-First 類別命名慣例，讓不同設計師、不同專案之間的結構保持一致。
Relume 適合在 Webflow 或 Figma 工作的代理商、自由接案設計師與內部團隊。它不幫你套版，也不代管網站。它把骨架搭好，剩下的由你在原本慣用的工具裡完成。如果你的工作流程完全不在 Webflow 與 Figma 之中，效益會明顯下滑。
開始使用
- 在 relume.io 註冊帳號並開啟專案，可以從空白需求開始，也能選用已發布的元件組。
- 寫一段描述網站、用途與目標對象的文字，讓 AI 產生一份頁面網站地圖。
- 調整網站地圖，從 Relume Library 把區塊拖到各頁面，並編輯暫代文案。
- 產生或挑選一份涵蓋色彩、字體與間距的樣式指南，再把全部內容匯出到 Webflow 或 Figma。
產品資訊
快速了解 Relume 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- Webflow 代理商：網站地圖與線框稿的匯出能縮短多頁客戶網站的規劃階段，但套版與上線仍得在 Webflow 完成。
- 自由接案設計師：免費方案就能做一、兩個專案，適合在付費解鎖無限生成前先試跑流程。
- 企業內部行銷團隊：自己維護 Webflow 網站的人，不必等設計師排程，就能先做出新頁面的結構。
任務
- 把需求變成網站地圖：描述專案後幾分鐘內就能拿到頁面清單，不必逐頁手繪。
- 快速做出線框稿：把資料庫裡的區塊拖進頁面，在進入視覺設計前先得到可點擊的結構。
- 草擬暫代文案：生成文字讓人們有具體對象可以討論，加快客戶第一輪回饋的速度。
情境
- 同時啟動多個客戶網站、需要一致區塊結構的代理商。
- 想先給客戶看線框稿、再決定是否投入數天做完整設計的獨立設計師。
- 採用 Client-First 命名、希望每個新專案都從同一套元件出發的團隊。
主要功能
AI 生成網站地圖與線框稿
Relume 同時扮演 AI 網站地圖產生器與線框稿工具，一次就能完成。你寫一段描述網站的文字，它會回傳一份推薦頁面的網站地圖，以及每一頁的線框稿。結構裡帶的是真實區塊，不是空白方框，因此你能在前期就判斷版面，不必等到套版之後。
現成區塊資料庫
資料庫收錄了數量龐大的響應式元件，依頁面類型分門別類，涵蓋主視覺區、價格表、客戶評價、頁尾等。每個區塊都採用 Finsweet 的 Client-First 類別命名，因此不論是一人還是十人參與，結構都能維持一致。
匯出到 Webflow 與 Figma
專案完成後，你把它以原生、可編輯的元素送到 Webflow 或 Figma。這讓 Relume 成為實用的 Webflow 線框稿工具，而 Figma 外掛則會把線框稿與設計指南匯入成可編輯圖層。在 Webflow 裡，匯出會在一次匯入中建立頁面、區塊與文案，線框稿因此變成可用的成品，而不只是靜態圖片。
樣式指南產生器
Relume 具備樣式指南產生器的角色，會訂出與生成頁面相符的色彩、字體與間距規則，讓每個區塊都從共同的視覺基準出發。請把它當作基準，而不是已完成的設計系統。
AI 撰寫的暫代文案
工具會用生成的文字填滿區塊，讓線框稿讀起來像真實頁面。這些文字本來就該被替換，把它當成最終內容會出問題。
匯出 React
Relume 能把元件輸出成 React 程式碼，讓流程延伸到設計工具之外。這對希望生成結構直接餵進前端開發的團隊特別合用。
優缺點
優點
- 縮短前置規劃階段，幾分鐘內就能把書面需求變成網站地圖與線框稿。
- Relume Library 提供數量龐大且一致的區塊，全部採用 Client-First 命名。
- 匯出 Webflow 會建立真實頁面與區塊，讓線框稿成為可用的起點。
- 免費方案讓你在付費解鎖無限生成前先試跑流程。
缺點
- 它搭的是結構而非樣式，設計與上線仍得在 Webflow 或 Figma 完成。
- 若你的技術組合不是 Webflow、Figma 或 React，效益會打折，因為匯出目標有限。
- 生成的文案與樣式指南都只是草稿，每個專案在上線前仍需人工審閱。
常見問題
Relume 會從一段文字生成網站地圖、線框稿、樣式指南與暫代文案，再匯出到 Webflow 或 Figma。它處理的是規劃階段，不是最終設計，也不負責代管。
相關內容
探索與 Relume 相關的工具、技能與文章。
Relume 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。