Open-Lovable深度测评：AI克隆网站工具真实效果

坦白讲，当听到“几秒克隆任意网站”这种说法时，多数前端开发者第一反应会是警惕——历史上有不少类似工具翻车，实际生成的代码要么难以阅读，要么完全无法处理动态内容。

Open-Lovable 是 MendableAI 团队推出的开源项目，它的定位略有不同：不只是“克隆网页”，而是在 AI 对话框架下，输入一个 URL，AI 会分析页面结构、样式和布局，生成一套 React 应用的代码。实际效果取决于目标页面的复杂度——静态页面的克隆结果相对可控，动态内容丰富的页面往往需要大量手动调优。

技术栈方面，项目使用 E2B 沙箱执行代码，Firecrawl 抓取页面内容，支持多种 AI 模型。本地部署不算复杂，Node.js 环境配合 pnpm 安装依赖，启动后就是一个本地服务。而 cpolar 解决的是那个老问题：如何让外部设备访问到本地运行的服务。

1 关于【Open-Lovable】：不止是克隆

Open Lovable 由 MendableAI 团队开发，是一个开源项目。最吸引人的特性是：你只需与 AI 对话，就能快速生成一个完整的 React 应用。无论是学习、快速原型验证，还是实际项目开发，Open Lovable 都能胜任。

• 核心功能：
  • 将任意网页克隆为 React 应用
  • 支持多种 AI 模型（如 Anthropic Claude、OpenAI GPT-5）
  • 集成 E2B 沙箱与 Firecrawl 抓取引擎
• 特点：
  • 自然语言生成
  • 网页克隆
  • 灵活模型选择
  • 安全执行环境
  • 开源免费，MIT 许可证

2 Windows 部署安装 Open-Lovable

前置条件：需要 Git、Node.js 以及 VS Code。

打开终端，先克隆仓库：

git clone https://github.com/mendableai/open-lovable.git

接着进入项目目录：

cd open-lovable

下一步安装项目依赖。官方推荐用 npm，但我试了 npm 会失败，所以改用 pnpm。如果没有 pnpm，先用下面命令安装：

npm install -g pnpm

然后用 pnpm 安装依赖，过程可能需要几分钟，取决于网络状况：

pnpm install

完成后打开 VS Code，进入 open-lovable 文件夹，找到 env.example 文件，全选并复制里面的内容：

新建一个名为 env.local 的文件，把复制的内容粘贴进去：

第一个是 E2B 的 API Key，E2B 提供一个隔离的沙盒环境用于代码执行：

第二个是 Firecrawl 的 API Key，这是一款 AI 网络爬虫工具，能高效自动抓取网站内容：

这两个是必填项，可以到官网申请免费 API Key。

下面四个 AI 模型任选其一即可。这些密钥用于后续操作中安全执行代码、抓取网页和调用 AI 接口。我这里填写了最后一个 Groq 的 API Key。注意申请免费 Key 时需要自行准备魔法环境。

按 Ctrl+S 保存，回到终端启动开发服务器：

pnpm run dev

打开浏览器访问 localhost:3000，就能看到 Open-Lovable 的界面，简洁美观。

3 简单使用 Open-Lovable

以克隆 Firecrawl 官网首页为例，先复制链接：

粘贴链接，选择刚才填写的 AI 模型，开始克隆：

可以看到它正在全力工作——分析页面结构、抓取样式、理解布局：

这个过程好比一位顶级画师在临摹名作，只不过我们的画师速度更快、还原度更高。

请看结果！一个几乎一模一样的 Firecrawl 首页被成功克隆：

虽然缺少部分动态效果和登录信息，但整个静态布局和样式已经完美复刻：

点击右上角的图标，可以查看沙盒中克隆的站点：

如果让我手写，这辈子都搞不定！而现在只需要几秒钟——这就是技术的力量。

接着点击下载，稍等片刻即可将生成的代码下载到本地：

打开文件夹，找到下载的压缩包并解压：

在 VS Code 中打开解压后的文件夹，就能看到生成的网页代码。

里面包含各种组件，比如 footer、header 等：

HTML 结构、CSS 样式一应俱全，甚至连组件都帮你拆分好了。结构清晰，就像我梳理好的代码逻辑一样——太优雅了！

接下来你就可以在里面修修改改，形成自己的项目。

我们再试试在本地运行。在 VS Code 中打开终端，安装依赖：

pnpm install

然后启动项目：

pnpm run dev

启动完成后会生成一个带端口的地址，打开浏览器粘贴该地址，就能成功访问刚才克隆的站点。

4 介绍与安装 cpolar

目前只能在本地局域网内访问部署好的 Open-Lovable。如果想在外部网络环境（比如不在同一局域网时）用手机、平板、电脑远程访问，该怎么办？使用 cpolar 内网穿透工具即可实现。无需公网 IP，也不用准备云服务器。

cpolar 是一款支持 TCP/UDP 协议的内网穿透工具，能轻松将本地服务发布到互联网。无论是开发调试、团队协作还是远程办公，cpolar 都能提供稳定的网络连接。

访问 cpolar 官网，点击“免费使用”注册账号，并下载最新版本的 cpolar。

登录成功后，下载 cpolar 到本地并安装（一路默认即可）。本教程选择下载 Windows 版本。

安装成功后，在浏览器访问 localhost:9200，使用 cpolar 账号登录。登录后即可看到 cpolar Web 配置界面，接下来在 Web 管理界面进行配置。

5 使用 cpolar 配置 Open-Lovable 固定公网地址

登录 cpolar Web UI 管理界面后，点击左侧仪表盘的“隧道管理”——“创建隧道”：

• 隧道名称：可自定义，本例使用 myclone，注意不要与已有隧道名称重复
• 协议：http
• 本地地址：3000
• 域名类型：随机域名
• 地区：选择 China Top

点击“创建”：

创建成功后，打开左侧“在线隧道列表”，可以看到刚刚创建的隧道生成了两个公网地址。接下来可以在其他电脑或移动设备（异地）上，使用任意一个地址在浏览器中访问。

现在任意打开一个链接，都能完美访问！

但问题来了：Open-Lovable 本身不带登录验证，导致任何人都能通过公网访问你的服务，API Key 可能被滥用，资源被浪费。怎么办？

别担心，cpolar 提供了密码验证功能，能有效防止 API Key 泄露。

回到 cpolar 隧道列表，找到需要修改的隧道，点击“编辑”：

点击“高级”，在 auth 字段中直接填写用户名和密码，格式为 用户名:密码，按这个格式填写即可。

点击“更新”，完成后再次打开在线隧道列表中的新链接：

可以看到网址已成功添加了用户名和密码验证，只有你能登录，安全性大大提升。

结尾

客观地说，Open-Lovable 在“快速获取页面 React 代码骨架”方面确实有用，特别是做竞品分析或参考页面结构时，直接克隆比从零写起高效很多。但如果你把它当成“复制网站”，难免会失望——生成的代码需要手动调整的地方不少，动态效果和交互逻辑基本得靠自己补全。

实际体验下来，对于有前端基础的人来说，这个工具更像一个起步模板生成器，而不是即拿即用的成品。cpolar 打通了访问通道，配置好后能在外部网络访问本地服务，对远程演示或协作场景有一定价值。

总的来说，这个工具可以放进工具箱备用，但不要对“几秒克隆任何网站”抱太高期待——它更像是辅助起步的工具，而非替代手写代码的方案。

来源：互联网