前言：
看到别人一个漂亮的页面想照着做一个，传统做法通常并不轻松。
先开开发者工具研究布局，再判断哪些该拆成 Header、Footer 和独立组件，然后一点点写 JSX、CSS，反复调字体、间距、按钮和响应式。哪怕只想做个原型，真正耗时的往往也不是业务逻辑，而是前面这堆“先把页面搭出来”的活。
Open-Lovable 想砍掉的，正是这一段。
它能读取公开网页的内容，再让 AI 分析页面结构、样式与布局，随后在一个隔离沙箱里生成 React 项目。生成之后不仅能直接预览，还可以把完整代码下载到本地，用 VS Code 接着改。
这篇会在 Windows 上部署 Open-Lovable，配好 E2B、Firecrawl 和 AI 模型所需的 API，再拿一个公开网站首页实测，看它到底能还原到什么程度，最后把生成的项目下载下来在本地重新跑一遍。
有一点要先说清楚：这类工具更适合学习页面结构、做原型、生成自己有权使用的设计初稿 ，并不意味着原站的动态功能、后台逻辑和内容版权也会被一起搬过来。
收尾时再用 cpolar 给本地 3000 端口加一个公网入口，并补上访问认证。
这样一来，Open-Lovable 就不只是本机的开发工具，而能变成一套可以远程使用的 AI 页面原型工作台。
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
接着进入到项目里
cd open-lovable
接着装依赖，官方默认用 npm，
但我这边 npm 装失败了，所以改用 pnpm；没装 pnpm 的可以先用下面这条命令装一下。
npm install -g pnpm
接着我们来用pnpm安装，过程可能会需要几分钟，取决于你的网络情况。
pnpm install
装完后用 VS Code 打开 open-lovable 目录，找到 env.example 打开，把里面的内容全选复制。
在新建一个名为env.local的文件，把刚才复制的内容粘贴进去。
第一项是 E2B 的 API 密钥，它提供一个沙盒，用来做隔离的代码执行环境，
第二项是 Firecrawl 的 API 密钥，这是一款 AI 网络爬虫工具，能高效自动抓取网站内容
这两项缺一不可，可以去各自官网领一个免费的 API 密钥。
ctrl+S保存下来，回到刚才的终端上来启动开发服务器
pnpm run dev
打开浏览器访问localhost:3000，就能看到我们进入到open-lovable的页面啦！是不是非常简洁美观？
3 简单使用open-lovable
我们拿 Firecrawl 官网首页来试刀！复制它的链接。
粘贴，选择好你刚才填写的AI模型，开始！
看，它开始疯狂运转了！正在分析页面结构、抓取样式、理解布局……
这个过程就像一位临摹名画的画师，只不过这位画师画得更快、也更准！
家人们，请看！一个几乎一模一样的firecrawl首页，就这样被我们克隆出来了！
虽然动态效果和登录态还缺着，但整页的静态布局与样式基本复刻到位！
我们点击右上角这个图标，我们就可以看到刚才在沙盒当中克隆的站点了。
这要是让我自己手写，我这辈子都搞不定！现在，只需要几秒钟！这就是科技的力量啊！
接着我们点击下载，稍等一会就可以把刚才生成好的项目代码下载到本地上了，
然后我们打开文件件，找到刚才下载的压缩包，解压。
完成后在vscode当中打开这个文件夹，就能看到这个网页生成的代码了。
里边有各种各样的组件，footer、header等等。
HTML结构、CSS样式，全都有！它甚至把组件都给你拆分好了，这结构，清晰得就像我梳理好的代码逻辑一样！太优雅了！
到时候你就可以自己在里面修修改改，形成自己的项目了
接下来我们试试在本地运行一下，接着我们在vscode打开终端，安装依赖
pnpm install
然后输入这行命令来启动项目，
pnpm run dev
启动完成以后会生成一个带端口的地址，我们打开浏览器粘贴这行地址，能看到我们成功访问了刚才克隆的站点
4 介绍以及安装cpolar
不过眼下我们只能在本地局域网里访问刚部署好的 open-lovable。想在不同网络环境下也能用手机、平板、电脑远程访问，该怎么办？答案是 cpolar 内网穿透，既不需要公网 IP，也不用劳师动众地备一台云服务器。
cpolar 是一款支持 TCP/UDP 的内网穿透工具，能把本地服务轻松发布到互联网上。开发调试、团队协作还是远程办公，cpolar 都能提供稳定的网络连接。
访问cpolar官网：点击免费使用注册一个账号，并下载最新版本的cpolar。
登录成功后，点击下载Cpolar到本地并安装（一路默认安装即可）本教程选择下载Windows版本。
cpolar安装成功后，在浏览器上访问localhost:9200，使用cpolar账号登录，登录后即可看到Cpolar web 配置界面，接下来在web管理界面配置即可。
5 使用cpolar配置open-lovable固定公网地址
登录cpolar web UI管理界面后，点击左侧仪表盘的隧道管理——创建隧道：
- 隧道名称：可自定义，本例使用了:myclone，注意不要与已有的隧道名称重复
- 协议：http
- 本地地址：3000
- 域名类型：随机域名
- 地区：选择China Top
点击创建：
创建成功后，打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了两个公网地址，接下来就可以在其他电脑或者移动端设备（异地）上，使用任意一个地址在浏览器中访问即可。
现在我们任意打开一个链接，都能完美访问！
不过你会发现，Open-lovable 本身不带登录验证，等于任何人都能在公网上访问你的实例。自己的 API 密钥被人随便用，资源白白烧掉，这显然不行。
别担心，cpolar还有设置密码验证功能，这样你就不必担心自己的api秘钥泄漏了！
回到cpolar隧道列表，找到需要修改的隧道点击编辑，
点击高级，在这个auth里面直接填写你想要的用户名，冒号后面写密码，可以按照我这个格式直接抄哈。
点击更新，完成后我们再去在线隧道列表打开新链接，
能看到我们为这个网址成功创建了一个用户名和密码，这样只有我们自己能登录进去，安全多了！
结尾
真跑完一遍之后，Open-Lovable 最值得期待的地方，并不是“从此不用写前端了”。
它更像是把建页面的起跑线往前挪了一大截。
以前看到一个想参考的页面，需要自己先分析布局，再从空白项目开始搭组件；现在可以先让 Open-Lovable 根据公开页面生成一版 React 初稿，然后把更多时间放到代码整理、交互逻辑和后续改造上。
原文测试也能看出它的边界。
页面主体布局和视觉样式可以被较快还原，但一些动态效果、登录状态以及真正依赖后台的功能并不会自动完整生成。因此它更适合拿来做视觉参考、原型验证和前端结构起稿 ，而不是把“输入网址”等同于“完整复制一个网站”。
生成后的代码能够下载到本地，这一点反而很重要。
因为最终项目仍然可以在 VS Code 中继续修改，组件怎么拆、样式怎么调整、交互逻辑如何补齐，都还掌握在开发者自己手里。
通过cpolar增加公网入口以后，还可以从其他设备远程使用 Open-Lovable。由于这个应用本身没有完整的登录体系，公开到公网时最好增加访问认证，同时保护好 E2B、Firecrawl 和模型 API Key。
所以 Open-Lovable 真正改变的，并不是“复制网站”这件事。
而是把原本：
先研究半天页面，再从第一个组件开始写
变成：
先让 AI 搭一版能够运行的前端骨架，再决定哪些地方值得自己继续做。
评论0