前言：
前端开发中，经常会遇到这样的情况：客户给出一个参考网站，希望新页面在布局、节奏和视觉层级上接近它。真正开始制作时，却要先分析导航、首屏、卡片、按钮和响应式结构，再逐个编写组件和样式。
如果只是为了验证设计方向或制作早期原型，从零还原整个页面会占用大量时间。Open-Lovable提供了另一种处理方式：输入目标网页地址，由抓取工具读取页面结构，再调用大模型生成对应的React应用。
它生成的不只是静态截图，而是可以继续编辑的前端项目。Header、Footer和内容区域会被拆分成组件，生成后还能下载源码，在VS Code中继续修改文案、配色、交互和业务逻辑。
本文会在Windows中准备Git、Node.js和pnpm，完成Open-Lovable项目部署，再配置E2B、Firecrawl和大模型API，实际测试网页分析、页面生成、项目下载与本地运行流程。
最后再使用 cpolar 将本地3000端口映射到公网，并增加访问验证。这样生成中的原型页面可以临时提供给客户或团队成员查看，不必每次修改后都重新打包和部署。
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，还有vscode！
我们首先打开终端先把 仓库克隆下来
git clone https://github.com/mendableai/open-lovable.git
接着进入到项目里
cd open-lovable
下一步是安装项目依赖，正常官方是用npm来安装，
但是我用npm失败了，所以我这里使用pnpm来安装，没有pnpm的可以使用这行命令安装一下。
npm install -g pnpm
接着我们来用pnpm安装，过程可能会需要几分钟，取决于你的网络情况。
pnpm install
完成后我们打开vscode，打开open-lovable的文件夹，找到这个env.example打开，全选复制里面的内容
在新建一个名为env.local的文件，把刚才复制的内容粘贴进去。
第一个是需要E2B的api秘钥，它是一个沙盒，来提供隔离的代码执行环境，
第二个Firecrawl的api秘钥，它是一款AI网络爬虫工具，可以高效地自动抓取网站内容
这两个是必须有的，大家可以去他们的官网领取一个免费的api秘钥
下面四个ai模型任选其一就行，这些密钥用于后面操作的时候安全执行代码、抓取网页和调用 AI 接口。 我这里是填写了最后一个Groq的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是不自带登录验证的，导致现在任何人都能在公网上访问我们自己的Open-lovable。这也太没安全感了，谁都能用我们的api秘钥了，资源都被浪费了这怎么办呢？
别担心，cpolar还有设置密码验证功能，这样你就不必担心自己的api秘钥泄漏了！
回到cpolar隧道列表，找到需要修改的隧道点击编辑，
点击高级，在这个auth里面直接填写你想要的用户名，冒号后面写密码，可以按照我这个格式直接抄哈。
点击更新，完成后我们再去在线隧道列表打开新链接，
能看到我们为这个网址成功创建了一个用户名和密码，这样只有我们自己能登录进去，安全多了！
结尾
完成整个流程后，Open-Lovable更适合作为网页分析和前端原型工具。它可以快速生成页面骨架和视觉结构，让开发者先看到结果，再决定哪些部分保留、重写或继续完善。
生成效果通常更接近页面的静态布局，登录状态、复杂动画、后端接口和真实业务逻辑不一定能够完整复现。因此下载项目后，仍然需要检查组件结构、依赖关系、响应式表现和代码质量。
这类工具适合学习页面布局、制作内部原型、重建自有网站，或在获得授权的情况下迁移旧项目。不能因为技术上能够抓取页面，就直接复制他人的品牌标识、文案、图片、代码或完整商业页面并公开使用。
通过 cpolar 映射3000端口后，生成页面可以在其他设备上预览。随机地址适合短期评审，固定地址更适合持续协作，但Open-Lovable本身包含多个第三方API配置，不应直接裸露在公网。
公网开放前应启用访问验证，并妥善保护E2B、Firecrawl和模型API Key。示例账号密码不能用于正式环境，已经进入代码仓库或截图中的密钥也应立即撤销并重新生成。
Open-Lovable负责把网页参考快速转成可编辑的React原型，cpolar负责补上远程预览入口。合理使用时，它节省的是结构分析和初稿搭建时间，而不是绕过原创设计、版权授权和正式开发过程。
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/2402_86350387/article/details/163131991
