看到喜欢的网站, 你还在从零手写 React?

你一定有过这种瞬间——刷到一个惊艳的落地页 / 后台 / 作品集, 心想"这交互我要是能复刻就好了"。

但真动手: 从零搭脚手架、对着 F12 抄类名、接数据、调响应式、修兼容……三天过去, 还在和 CSS 较劲。收藏夹越攒越多, 真正复刻出来的, 一个都没有。

open-lovable 的思路很暴力: 你扔给它一个网址, 它把整页扒下来、用 LLM 重写成可运行的现代 React, 还能在沙箱里直接跑——你用大白话就能改。

它到底是个啥

一句话: open-lovable = Firecrawl(抓取) + LLM(重建) + 沙箱(运行) 的组合拳。

给一个网址, Firecrawl 先把页面扒干净(文本 / 图片 / 链接 / 结构), LLM 再照着生成组件化的 React 代码, 最后丢进沙箱实时预览。你看到的不只是截图, 是真能跑、能改、能上线的代码。

它是怎么把网站"克隆"出来的

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

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

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

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

三步跑起来(真能复现)

Step 1 · 克隆安装

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

Step 2 · 配置 .env.local

`# 必填: Firecrawl key(注册即送免费额度)
FIRECRAWL_API_KEY=your_firecrawl_api_key

选一家 LLM: 以下任选

GEMINI_API_KEY=…        # 或 ANTHROPIC / OPENAI / GROQ

沙箱二选一(默认 Vercel)

SANDBOX_PROVIDER=vercel    # 或 e2b`

Step 3 · 开干

`pnpm dev   # 打开 http://localhost:3000

贴个网址, 看它现场给你造一个 React 应用`

一句大实话:**① 它不是"完全零成本"——抓取要 Firecrawl key(有免费额度), 重建要一家 LLM key; 但比起雇人 / 自己从零写, 便宜太多。

② 它是 Firecrawl 团队的示例应用(example app); 想直接用现成云产品可以看 Lovable.dev; 想本地自托管、改源码、接自己爬虫的, open-lovable 是绝佳起点。③ 适合谁**: 想快速复刻喜欢的网站学 React、做产品原型、搞私有化部署的开发者。