大家好，我是何三，独立开发者
你有没有想过，跟 AI 聊几分钟天，就能拿到一个可以直接上线跑的 React 应用？
不是那种「帮我写个按钮」的代码片段，是整个项目——有路由、有状态管理、有 API 调用、有样式，git clone 就能跑的那种。
Firecrawl 团队开源了一个叫 Open Lovable 的项目，28k Stars，做的就是这件事。
我当晚就爬起来装上了。
说实话，我一开始是不信的
这些年见过的「AI 生成应用」demo 太多了。
要么是生成一个静态页面，点不了；要么是生成了但代码跑不起来；要么跑起来了但你一改 prompt，它就把之前的东西全忘了。
所以看到 Open Lovable 的 GitHub 页面时，我第一反应是：又一个玩具。
但 28.1k Stars 摆在那，不是刷的。
而且你看看它的描述——"Clone and recreate any website as a modern React app in seconds"。克隆任何网站，变成 React 应用，几秒完成。
如果这是真的，那前端开发的玩法就彻底变了。
我当时心想：行吧，装一个试试，反正也就几分钟的事。
结果这一试，就没停下来。
它到底怎么工作的？
说人话版本是这样的：
你打开一个聊天界面，告诉 AI 你想要什么——比如「帮我做一个 Todo App，要能添加、删除、标记完成，UI 用 Tailwind，数据存在 localStorage」。
AI 就开始干活了。生成组件、写样式、搭路由、调逻辑，全部自动完成。而且它不是只给你看代码，而是直接在沙箱里跑起来，你马上就能看到效果。
不满意？继续聊，让它改。
背后支撑它的有几个关键东西：
Firecrawl —— 这是 Firecrawl 团队自己的产品，一个网页抓取引擎。它的作用是：你说「我想要一个像 XXX 那样的网站」，Firecrawl 就去抓那个网站的结构和样式，AI 基于这个参考来生成。
多 AI 提供商支持 —— Gemini、Anthropic、OpenAI、Groq，你随便选，哪个用着顺手就用哪个。不是绑死一家。
沙箱执行 —— 生成的代码在沙箱里运行，Vercel 或 E2B 都行。你不会把本地环境搞乱。
说白了，它的流程就是：
你说需求 → AI 理解 → 生成代码 → 沙箱运行 → 你验收 → 不满意再改
整个链路是通的，不是那种生成一段代码就完事的半成品。
当时我看到这个流程，脑子里只有一个想法：
这玩意儿是冲着「让非前端也能做前端」来的。
装上去试了一下
安装过程比我想象的简单。
git clone https://github.com/firecrawl/open-lovable.git
cd open-lovable
pnpm install
然后配一下 .env.local。你要配的主要是两样东西：
一是 Firecrawl API Key（必填），去 firecrawl.dev 注册就能拿到。 二是 AI 的 API Key，Gemini 的免费额度挺多，我用的就是它。
FIRECRAWL_API_KEY=your_firecrawl_api_key
GEMINI_API_KEY=your_gemini_api_key
然后 pnpm dev 启动，打开 localhost:3000。
界面很干净，就一个聊天框。
我输入的第一条消息是：
"创建一个 landing page，介绍一个 AI 写作工具。要有导航栏、英雄区、功能展示三列卡片、底部 footer。配色用蓝白灰。"
大概等了十几秒，AI 开始输出了。
先是文字描述，然后开始生成文件——我能在侧边栏看到它正在创建组件、写样式文件。然后沙箱启动了，页面直接渲染出来。
说实话，效果比我预期的好。
导航栏响应式的，英雄区有大标题和 CTA 按钮，三列卡片布局规整，footer 也像模像样。虽然谈不上什么设计感，但作为一个 MVP，已经能看了。
我又试了更复杂的：「克隆 Hacker News 的首页」。
它用 Firecrawl 抓了 HN 的页面结构，然后生成了一套 React 组件。生成的结果在布局上确实有 HN 的味道——顶部导航、标题列表、分页——样式是 Tailwind 重写的，不是直接把 HN 的 CSS 搬过来。
这其实就是很多人想要的功能：看到一个网站，想要一个差不多的，不用从零开始。
坑也踩了几个
说点不好听的。
第一，复杂交互搞不定。我让它做一个「拖拽排序的看板」，它生成了，但拖拽的时候有 bug，卡片会卡住。我描述了 bug，它修了，但修完又引入了新的样式问题。来回三轮才勉强能用。
第二，Firecrawl 抓复杂页面有时候不准。一些重度 JS 渲染的 SPA 页面，抓回来的结构和实际看到的差挺多。这个不怪它，SPA 抓取本来就是个难题。
第三，长对话会漂。聊了十几轮之后，AI 开始忘事儿——我之前说要用蓝色主题，后面它生成了个红色按钮。你得提醒它。
但这些坑，说实话，都在意料之中。
这不是一个「取代前端工程师」的产品。它是一个让想法快速变成原型的工具。
我的观点是：你如果拿它去生成生产级的电商网站，肯定不行。但你如果有个想法想快速验证，或者想搭个 side project 的 MVP，它是目前我看到的最顺手的工具之一。
真正让我决定写这篇文章的原因
不是因为它能生成代码——能生成代码的工具太多了。
而是它背后代表了一个趋势：从「写代码」到「描述代码」的迁移。
你看看 Open Lovable 的 stack：Firecrawl（抓取）+ AI（生成）+ Vercel（沙箱）。三个东西，没一个是传统意义上的「开发工具」。
但它做的事情，是一个传统开发者团队要干好几天的活——搭项目、写组件、调样式、部署预览。
AI 编程的下一个阶段，不是帮你写代码，而是帮你跳过写代码这个步骤。
这句话我想了很久，觉得用它来形容 Open Lovable 最贴切。
你不需要知道 React 的 hooks 怎么用，不需要了解 Tailwind 的 class 有哪些，不需要配置 webpack 或 Vite。你只需要说人话，告诉 AI 你想要什么。
28k Stars 说明了一件事：大家苦前端开发久矣——不是前端难，是搭项目太烦了。
同类工具怎么看
目前市面上类似的「AI 生成应用」工具有几个。Open Lovable 最大的优势是开源 + 自部署。你不受任何平台的限制，想用哪个 AI 就用哪个，数据完全在自己手里。
而且它是 Lovable.dev 的开源版——Lovable 是一个付费产品，Open Lovable 免费给了你差不多的能力。
如果你也想试试
几个小建议，帮你少踩坑：
- 先用 Gemini 的免费额度试水，上手零成本。觉得好用再换 Anthropic 或 OpenAI。
- 从简单的页面开始，比如 landing page、个人博客、工具类页面。不要一上来就搞电商。
- 对话时描述要具体。「做一个好看的个人主页」太模糊了，要说「深色主题、左侧头像右侧简介、底部放社交媒体链接」。
- 生成的代码可以 git clone 下来继续改，不是黑盒。你随时可以打开编辑器手动调整。
- 如果你要克隆网站，选结构清晰的站点，比如 Hacker News、Dribbble 的列表页，效果比克隆复杂 SPA 好很多。
说回开头那个问题：跟 AI 聊几分钟天，真的能拿到一个可以跑的 React 应用吗？
答案是：能。而且比你想象的好。
它不是来替代你的。它是来帮你把那些「不想写但又不得不写」的样板代码、原型页面、side project 给干掉的。
我把 GitHub 地址放这了，你自己去试试：
https://github.com/firecrawl/open-lovable
装完花不了十分钟，但你对「AI 能做什么」的认知，可能会被刷新一次。
你现在最想用 AI 帮你生成什么？评论区聊聊，我挑几个有意思的想法帮你们试。
本文使用 MGO 编辑并发布
关注"何三笔记"，回复"mgo" 免费下载使用
