Relume

几句话生成站点地图与线框图，直出Webflow和Figma

核心功能

Relume切入的是建站中最耗时的前期环节：输入几句公司介绍，AI先产出完整站点地图，一键把每个页面展开成线框图，区块用的是库里1500多个真实组件而非灰盒子，文案也是贴合行业的真句子。组件同时提供Webflow、Figma与React三套，Webflow版遵循Finsweet Client-First命名。独立设计师与建站代理商用得最多。

功能亮点

先结构后视觉

从站点地图倒推页面，避免上来就抠像素

拒绝乱数假文

线框里填的是行业相关真文案，客户看得懂

Client-First命名

Webflow组件类名规范统一，粘过去不炸样式

每月组件日

每月第一个周一固定上新一批组件

适用场景

• 客户提案阶段现场出站点结构
• 落地页与官网线框图批量产出
• Webflow项目复用标准化组件
• React项目取现成Tailwind区块

安装配置

浏览器访问 relume.io 注册，主应用在 library.relume.io；建议安装 Relume 官方 Chrome 扩展以启用 Class Sync 与一键粘贴到 Webflow；Figma 用户安装 Relume Library Figma Kit；React 组件基于 Tailwind CSS 与 Shadcn UI 直接复制使用。

使用方法

bash

1) 在Site Builder新建项目，用几句话描述公司业务与目标受众
2) AI生成站点地图，手动增删页面、调整层级，也可粘贴现有网址导入结构
3) 确认结构后点一键生成线框图，每页自动铺好导航、Hero、功能区、案例、FAQ、页脚
4) 逐个区块换成组件库里更合适的版本，或重新生成该区块文案
5) 在Style Guide Builder里定色彩、字体与间距，形成全站风格基线
6) 导出：Figma走插件同步；Webflow用Chrome扩展复制区块后Ctrl+V粘进画布，Class Sync自动复用已有类名
7) 需要代码就复制React或HTML版本，接进自有前端工程

关键指标

尚未核验对标产品，此处只列本工具自身指标，不做对比结论。

指标Relume

价格免费增值

开源否

上手难度进阶

优点

把站点地图到线框图压缩到几分钟，前期返工成本大幅下降
线框自带贴合行业的真实文案，客户评审时不用靠想象
同一套组件覆盖Webflow、Figma、React三条产线
Class Sync能避免粘贴组件时产生重复类名

缺点

强绑Webflow生态，真正上线通常还得再买Webflow订阅
免费与入门档只允许1个项目，多客户并行必须升到Pro
Team档最少3个席位起售，两人小工作室不划算
Safari下无法复制组件，只能用Chrome、Firefox或Edge