告别人手写代码！Open Lovable：用聊天的方式生成一个现代化网站

墨舟
200 阅读4分钟

大家好，我是墨舟！

Lovable 大家应该都比较熟悉了，它是一个用对话/聊天来写软件的平台。你可以用自然语言描述要做的产品或功能，Lovable会自动生成可运行的应用。非常适合想快速验证想法的个人创作者或产品设计。 当然这不是今天的主角，今天的主角是它的开源平替：open-lovable

什么是 Open Lovable？

Open Lovable 是一个开源的 AI 驱动网站生成工具，来自知名团队 Firecrawl。它的核心理念非常简单粗暴：

用自然语言与 AI 对话，就能生成你想要的任何网站！

你可以：

  • 🔗 直接输入一个网站 URL，AI 会分析并生成一个现代化的 React 版本
  • 🔍 搜索相关网站并获取预览，选择喜欢的进行克隆
  • 💬 通过自然语言描述你的需求，AI 会一步步帮你实现
  • ✏️ 生成后还能继续对话修改，想要什么改什么

简单来说，就是用 ChatGPT 的方式开发网站！

快速安装、使用

想要立刻体验？跟着下面步骤操作：

步骤 1：准备工作

确保你的电脑已经安装：

  • Node.js 18+
  • pnpm (或 npm/yarn)
  • Git

步骤 2：克隆项目

git clone https://github.com/firecrawl/open-lovable.git
cd open-lovable
pnpm install

步骤 3：配置环境变量

创建 .env.local 文件，添加以下关键配置：

# AI 模型 API（至少选择一个）
ANTHROPIC_API_KEY=你的_anthropic_密钥    # 推荐，质量最高
OPENAI_API_KEY=你的_openai_密钥
GEMINI_API_KEY=你的_gemini_密钥
GROQ_API_KEY=你的_groq_密钥           # 速度快，便宜

# 网站抓取
FIRECRAWL_API_KEY=你的_firecrawl_密钥

# 沙盒环境（选择一个）
# Vercel 沙盒（推荐）
SANDBOX_PROVIDER=vercel
VERCEL_OIDC_TOKEN=你的_vercel_token

# 或 E2B 沙盒
# SANDBOX_PROVIDER=e2b
# E2B_API_KEY=你的_e2b_密钥

获取密钥攻略：

我用的AI模型是智谱4.6的，也兼容Anthropic。沙盒环境使用的是Vercel的。不想用网站抓取能力的可以不用配置FIRECRAWL_API_KEY，这是我的极简配置：

SANDBOX_PROVIDER=vercel
VERCEL_OIDC_TOKEN="xxx"

# 智谱baseUrl
ANTHROPIC_BASE_URL=https://open.bigmodel.cn/api/anthropic/v1
# 智谱后台的apiKey
ANTHROPIC_API_KEY=xxx

关于Vercel的沙盒，可以免费试用。开发模式可以这样, ：

先安装vercel

npm install -g vercel

获取token：

vercel link
// 然后
vercel env pull

这样就会自动往.env.local 文件中写入VERCEL_OIDC_TOKEN了

步骤 4：启动项目

pnpm dev

然后打开浏览器访问 http://localhost:3000，首页是这样的

如果不用网站抓取能力的话，可以直接到这个生成页面：http://localhost:3000/generation。 进来之后，沙盒会自动加载，如下图所示就说明沙盒环境也准备好了

实际效果

接下来我们来测试下生成的效果怎么样，我让它：写一个列表组件，新闻资讯列表、瀑布流卡片形式、支持按类别筛选。看看效果吧

生成的效果还是不错的，这里用的是智谱4.6的模型，如果换成sonnet 4.5的那还会更出色。还可以查看代码：

当然，也可以把整个代码以zip模式下载到本地。是一个完整的项目，可以直接安装依赖就可以跑起来了

谁适合用 Open Lovable？

✅ 非常适合：

  1. 创业团队：快速验证产品 idea，做出 MVP
  2. 设计师：把稿子变成可交互的原型
  3. 产品经理：快速搭建产品演示页面
  4. 非技术背景的用户：做个个人网站、学习项目
  5. 前端开发者：提高原型开发效率

❌ 不太适合：

  1. 超复杂的业务系统（如 ERP、CRM）
  2. 对性能有极致要求的应用
  3. 需要深度后端集成的项目
  4. 特殊行业合规要求（如金融、医疗）

结语

Open Lovable 代表了软件开发的新范式：从「写代码」到「聊需求」。

它不是要取代程序员，而是：

  • 降低技术门槛，让更多人能实现自己的想法
  • 提高开发效率，把重复劳动交给 AI
  • 释放创造力，专注于产品创新

正如它的 slogan 所说：「Chat with AI to build React apps instantly.」

在 AI 时代，会提需求比会写代码更重要。Open Lovable 让每个人都能成为创造者。

你还在等什么？快去试试吧！

avatar
文章
阅读
粉丝