跳到主要内容
VibeStacks
工具条目备选

Lovable

在浏览器里用对话生成完整的 Web 应用:React + TypeScript 代码、Supabase 后端、与 GitHub 双向同步。

最后审阅

适合

  • 想在几小时内做出能点、能分享的原型来验证想法
  • 不想先处理项目结构、数据库和部署的个人项目起步阶段
  • 需要把原型交给开发者继续做(代码可以通过 GitHub 接出来)

不适合

  • 已有代码库上的日常开发
  • 需求超出 React + Supabase 默认路线的项目
  • 需要精细控制架构、测试和代码质量的长期项目

Lovable 是我们选的应用生成器代表。描述你要做什么,它会生成一个完整的 Web 应用并帮你上线;需要数据库、登录、文件存储时,通过对话接入 Supabase 即可。

为什么是备选而不是首选

这个网站的读者会一点代码。对你来说,生成器最好的用法是验证想法,而不是长期开发:

  • 它替你做了所有决定。 项目结构、依赖、部署路线都是默认的,这正是它快的原因。当需求超出默认路线,绕过它会比自己写更费劲。
  • 审阅成本高。 一次对话可能改动很多文件,在浏览器里很难像在 IDE 里那样逐个 diff 审阅。

它做对了的地方

  • 代码是你的。 输出是标准的 React + TypeScript,可以与你自己的 GitHub 仓库双向同步:在 Lovable 里的改动会推送到仓库,本地的改动也会同步回去。
  • 后端开箱即用。 Supabase 提供 Postgres 数据库、身份认证、文件存储和边缘函数,都通过对话配置。

推荐的用法

  1. 用纪念品里的简报写第一条提示词,把范围控制在一个核心流程。
  2. 原型能用之后,立刻连接 GitHub。
  3. 决定认真做时,把仓库 clone 到本地,补上 AGENTS.md,换到 Cursor 或 Pi 继续开发。
纪念品

带走给你的 AI

把这份 lovable-brief.md 放进项目,或直接粘贴给 AI 编程助手。

lovable-brief.md
# Lovable 首条提示词简报

做一个 <产品一句话描述>,给 <目标用户> 用。

## 只做这一个核心流程
1. 用户 <第一步>
2. 用户 <第二步>
3. 用户看到 <结果>

## 数据
- 需要保存:<实体与字段,例如“任务:标题、截止日期、是否完成”>
- 需要登录吗:<是 / 否>;如果是,用邮箱登录,每个用户只能看到自己的数据

## 界面
- 风格:<一种视觉风格,或粘贴风格博物馆的 AI Prompt>
- 必须支持手机屏幕

## 暂时不要做
- 支付、多语言、管理后台、通知

完成后列出你创建的页面、数据表和尚未实现的部分。
  • 工具条目首选

    Cursor

    基于 VS Code 的 AI IDE:补全、对话、Agent 和代码在同一个窗口,改动以 diff 呈现。

  • 工具条目首选

    Pi

    极简、可自我扩展的终端编程 Agent:只给原语,不替你决定工作流。