Open Lovable：给个网址，AI 把任意网站克隆成 React 应用

你一定有过这种瞬间——刷到一个惊艳的落地页、后台界面或作品集，心想「这交互我要是能复刻就好了」。但真动手：从零搭脚手架、对着 F12 抄类名、接数据、调响应式、修兼容……三天过去还在和 CSS 较劲。收藏夹越攒越多，真正复刻出来的，一个都没有。

Firecrawl 团队把「克隆任意网站 → 重写成 React 应用」这件听起来很硬核的事，做成了开源项目 Open Lovable：你扔给它一个网址，它把整页扒下来、用 LLM 重写成可运行的现代 React，还能在沙箱里直接跑——改点什么都用大白话说就行。上线一年多，GitHub 上已经 28.5k star。

一、它是什么

Open Lovable 是 Firecrawl 团队的开源项目（仓库 firecrawl/open-lovable，TypeScript 编写，MIT 协议）。截至 2026 年 9 月，GitHub 上 28,550 star、5.4k fork。它不是套壳聊天机器人，而是一条完整的「克隆流水线」：抓取、重建、运行、对话，四件事一口气做完。

二、它是怎么把网站「克隆」出来的

01 抓取 · Firecrawl 把任意网址变成 LLM-ready 的干净数据，自动处理 JS 渲染、反爬、代理，不用你操心。

02 重建 · LLM 按页面结构和你的需求生成现代 React 组件，默认 Tailwind 样式，组件化拆分，不是一坨面条代码。

03 运行 · 代码丢进 Vercel 或 E2B 沙箱，浏览器里实时预览，不用本地配一堆环境。

04 对话 · 「把导航栏改成深色」「加个购物车」——一句话，AI 改完热更新，所见即所得。

三、三步跑起来

Step 1 · 克隆安装

1
2
3

git clone https://github.com/firecrawl/open-lovable.git
cd open-lovable
pnpm install   # 或 npm install / yarn install

Step 2 · 配置 .env.local

1
2
3
4
5
6
7
8

# 必填：Firecrawl key（注册即送免费额度）
FIRECRAWL_API_KEY=your_firecrawl_api_key

# 选一家 LLM，以下任选其一
GEMINI_API_KEY=...        # 或 ANTHROPIC / OPENAI / GROQ

# 沙箱二选一（默认 Vercel）
SANDBOX_PROVIDER=vercel   # 或 e2b

Step 3 · 开干

1
2

pnpm dev   # 打开 http://localhost:3000
# 贴个网址，看它现场给你造一个 React 应用

四、适合谁 / 不适合谁

适合：想快速复刻参考站点练手的 React 学习者；给客户做原型、要「先长这样」的演示页的前端外包；想研究「抓取 → 生成 → 沙箱」这条 AI 工程管线的开发者。

不适合：想要像素级 1:1 还原生产代码的——它生成的是「结构近似的现代 React 重写」，不是原站源码的翻译；也不适合直接把别人家的站克隆了就上线，页面设计可能有版权，克隆结果请只用于学习参考或自己的项目。