--- title: '30 分钟搭 5 个 AI 应用(ChatGPT + Lovable 教程)' video_id: dLxz6zDGzUQ url: https://youtu.be/dLxz6zDGzUQ title_en: "Building 5 AI Apps In 30 Minutes (ChatGPT + Lovable Tutorial)" channel: Tina Huang published: 2025-07-25 duration: "30:32" topics: - AI 编程与建站 - Agent 工程 noted: 2026-07-08 value: A views: '18.54万' --- [![封面](https://i.ytimg.com/vi/dLxz6zDGzUQ/maxresdefault.jpg)](https://youtu.be/dLxz6zDGzUQ) > Tina Huang · 30:32 · 发布 2025-07-25 · 18.54 万次观看(截至抓取) · [观看原视频](https://youtu.be/dLxz6zDGzUQ) > 🔥 观众最高回放 [09:09](https://youtu.be/dLxz6zDGzUQ?t=549) — Everything Calculator 项目从 ChatGPT metaprompt → Lovable 实施 + Supabase 接入的完整 demo 段,本视频核心示范。 ## 主旨 用一个 30 分钟的视频给出 vibe coding 落地的两套心智框架("tiny ferrets carry dangerous code" + implementing/debugging 二分),再走 5 个跨形态(网页 / 内部工具 / 移动 App / 仪表盘 / agent)AI 应用的同款"ChatGPT 出 PRP → Lovable 实现"流水线。每个应用分 3 个 level 递进复杂度,展示从零代码到轻量代码的扩展路径。 ## 核心论点 1. **vibe coding 真正缺的不是工具,而是开发框架**——两个心智模型("tiny ferrets carry dangerous code" + 二分模式)用来规范"想清楚再动手"和"实现 / 调试切换" [00:56](https://youtu.be/dLxz6zDGzUQ?t=56)。([[#1-框架-1tiny-ferrets-carry-dangerous-code-0056|→ 详解1]]) 2. **ChatGPT 的价值是"生成 PRP",不是"生成代码"**——metaprompt 一步步问用户需求,产出可喂给 Lovable 的 product requirements prompt(PRP),用文档化代替"边写边想" [01:23](https://youtu.be/dLxz6zDGzUQ?t=83)。([[#2-框架-2永远在-implementing-或-debugging-二选一-0302|→ 详解2]]) 3. **每个 AI 应用都可以"三段式"递进**——level 1 跑通核心功能、level 2 加数据 / 集成 / 用户系统、level 3 加 AI 智能层 [03:44](https://youtu.be/dLxz6zDGzUQ?t=224)。(→ 详解3-7) 4. **现有框架优先于"让 AI 重新发明"**——AI 训练数据里已经有 React / Tailwind / Supabase / Stripe / Plaid 这类现成工具,先指明再让 AI 拼装,比让它从零造轮子更稳 [02:14](https://youtu.be/dLxz6zDGzUQ?t=134)。([[#2-框架-2永远在-implementing-或-debugging-二选一-0302|→ 详解2]]) ## 知识点详解 ### 1. 框架 1:tiny ferrets carry dangerous code [00:56](https://youtu.be/dLxz6zDGzUQ?t=56) Tina 把 vibe coding 的工程纪律压缩成 5 字母助记:Thinking / Frameworks / Checkpoints / Debugging / Context。这套框架的核心警告是 **"dangerous"**——AI 辅助编码会泄露 API key、丢失没版本控制的工作、写出你看不懂的代码,所以要"按规矩来"。 - **Thinking**:动手前先写 PRP(产品需求提示),把目标用户、客户体验、核心功能、文案、风格、技术栈都列清——花在"想清楚"上的时间越多,后面对话越省事 [01:23](https://youtu.be/dLxz6zDGzUQ?t=83) - **Frameworks**:你想要的轮子很可能已有现成包,AI 也受过这些包的训练——直接告诉 AI "用 React + Tailwind + Supabase" 比让它自由发挥更可控 [02:14](https://youtu.be/dLxz6zDGzUQ?t=134) - **Checkpoints**:始终用版本控制,Lovable 自带但 GitHub 是金标准 [02:30](https://youtu.be/dLxz6zDGzUQ?t=150) - **Debugging**:AI 修 bug 不会自己看错误信息——必须**把详细错误信息粘贴进对话**,耐心且方法论地修 - **Context**:遇到错误就多给上下文——截图、mockup、示例,越具体结果越好 ### 2. 框架 2:永远在 implementing 或 debugging 二选一 [03:02](https://youtu.be/dLxz6zDGzUQ?t=182) 第二个心智框架更短:**AI 辅助编码时你永远只处于两个模式之一——实现一个功能,或者调试一个错误**。这两个模式对"喂给 AI 的东西"有不同要求。 **Implementing 模式**:提供 context、点名 framework、做 incremental changes [03:08](https://youtu.be/dLxz6zDGzUQ?t=188)——也就是一次只加一个 feature,跑通再加下一个。 **Debugging 模式**:理解代码库结构(用 Lovable 内置的 code viewer 看清文件分布)、提供完整错误信息、加截图上下文。 关键启示:**实现到一半发现错误,先回 implementing 模式把"没想清楚的部分"想清楚,再切回 debugging 模式**。混在一起做,AI 会越帮越乱。 ### 3. 流水线范式:ChatGPT metaprompt → PRP → Lovable [01:23](https://youtu.be/dLxz6zDGzUQ?t=83) 5 个项目共用一套 3 步流水线: 1. **ChatGPT metaprompt**:把"你是一个 friendly AI product strategist,一次问一个问题,引导我输出 product requirements prompt"这个**meta 提示词**丢给 ChatGPT,让它陪你一步步想清楚需求(目标用户 / 旅程 / 核心功能 / 平台) 2. **PRP 落地**:ChatGPT 输出结构化 PRP(产品名 + 用户旅程 + 核心 features + 建议 stack)——比如 Everything Calculator 给了 React + Vite + Tailwind 前端、Supabase 后端、shadcn UI 3. **Lovable 实施**:把 PRP 整段粘贴进 Lovable,加 Supabase 集成,切到 build 模式;遇到问题就开 chat mode 让 Lovable 描述代码结构、定位错误 **这套流水线的核心是"想清楚"前置于"写代码"**——PRP 不是给开发者看的文档,是给 AI 看的"唯一信息源"。PRP 写得越清楚,Lovable 跑得越准。 ### 4. Project 1:Everything Calculator [03:44](https://youtu.be/dLxz6zDGzUQ?t=224) **类型**:web app。 **核心创意**:把"任何事都能折算成计算"——净资产、储蓄、房贷、租金、健身卡、报价——做成"用户描述需求,AI 即时生成计算器"。 **三 level 递进**: - Level 1:用户描述计算器,AI 即时生成 - Level 2:多计算器 + 社区市场(浏览 / 收藏 / 评分 + 用户登录) - Level 3:社交化(分享链接 / QR 码 / 嵌入第三方网站 + 创作者粉丝体系) **示范价值**:这是 5 个项目里唯一展开**完整 metaprompt → PRP → Lovable 流程**的——后面 4 个项目都是"过流程不复述",所以本项目是看完整方法论的关键段。 ### 5. Project 2:Freelancer Toolkit [11:52](https://youtu.be/dLxz6zDGzUQ?t=712) **类型**:internal tool。 **核心痛点**:freelancer 的行政工作(写 proposal / 开 invoice / 跟回款)极花时间。 **三 level 递进**: - Level 1:文档生成(从表单生成 proposal / 合同 / invoice) - Level 2:客户管理(存所有文档 + 客户历史 + 跟踪 invoice 状态 + Stripe 支付链接 [12:48](https://youtu.be/dLxz6zDGzUQ?t=768)) - Level 3:智能助理(分析所有数据 + AI 提建议 + 欠款自动催收 + Gmail API + 日历同步) **亮点**:把 Stripe 集成作为"一键接入"——用 Lovable 调 Stripe,几行对话就能给 invoice 加支付链接,比传统开发省几天。 ### 6. Project 3:Sketch Buddy(移动 App) [16:34](https://youtu.be/dLxz6zDGzUQ?t=994) **类型**:mobile app(用 median.co 把 Lovable 项目转 mobile 形态 [19:05](https://youtu.be/dLxz6zDGzUQ?t=1145))。 **核心痛点**:看 YouTube 教程学画画但缺针对自己作品的反馈。 **三 level 递进**: - Level 1:画作上传 + AI 反馈 + 教程链接 - Level 2:进度追踪(存历史画作 + 技能评估 + 目标设定 + 成就系统) - Level 3:实时语音 + 视频交互(直接对着当前作品给反馈,标注到 canvas 上) **技术挑战**:需要 OpenAI Vision API + Web Speech API + Canvas API 多个集成,debug 时间最长。 ### 7. Project 4:Spend Buddy(仪表盘) [20:41](https://youtu.be/dLxz6zDGzUQ?t=1241) **类型**:dashboard(对最常见的"个人理财"做加法)。 **核心人群**:"自控力差、讨厌电子表格、记性差"——所以产品定位成"ADHD 友好、cozy gamified"。 **三 level 递进**: - Level 1:流水分析(上传 PDF/图片,AI 自动读流水 + 分类 + 给建议) - Level 2:实时追踪(Plaid 接入 [22:58](https://youtu.be/dLxz6zDGzUQ?t=1378) + 实时数据 + 可视化 + push 提醒) - Level 3:AI 教练(每天通过 WhatsApp 发消费小结 + 对话式理财建议) **亮点**:push 通知作为"教育用户"的入口,引导他们一步步连银行账户,避免一上来就要求授权所有权限——这是产品设计层面的洞察。 ### 8. Project 5:Brain Dash(任务管理 AI Agent) [25:09](https://youtu.be/dLxz6zDGzUQ?t=1509) **类型**:full-blown AI agent(6 组件齐备:模型 / 工具 / 记忆与知识 / 音视频 / guardrails / 编排 [26:04](https://youtu.be/dLxz6zDGzUQ?t=1564))。 **核心痛点**:"P 人"——to-do list 写了不做,需要 AI 根据"此刻精力 / 心情 / 日程"动态给优先级。 **三 level 递进**: - Level 1:智能任务清单(支持文字 + 语音输入,AI 分类 + 标优先级 [26:21](https://youtu.be/dLxz6zDGzUQ?t=1581)) - Level 2:加健康数据(Apple HealthKit / 步数 / 心情打卡 / 能量曲线分析) - Level 3:完整生产力教练(实时对话 + 日历接入 + 自动 time block) **特别提示**:Lovable 有专门的 "AI agent workstream",对 agent / 编排类项目有专门优化——选 Lovable 跑 agent 比从零起工具栈更省事。 ## 可执行步骤 - [ ] 复制 Tina 的 metaprompt(见 description 链接),用它做一次自己的产品需求梳理 - [ ] 选最小的一个想法(从 level 1 起步),按 ChatGPT→PRP→Lovable 流水线跑一次 - [ ] 跑通后立刻连 GitHub(Lovable 一键集成),建立 checkpoint - [ ] 每次加新 feature 切到 implementing 模式;遇到 bug 切到 debugging 模式——不要混 - [ ] debug 时把完整错误信息 + 截图丢给 AI;别只说"坏了" - [ ] 想要"AI 智能层"时(level 3)再考虑 OpenAI API,不要一开始就把所有 level 一起塞给 Lovable ## 关联 - 印证:Meta prompt —— 已定义为"反向逼用户回答需求的提示词模板",本片给出一个具体 metaprompt("You are a friendly AI product strategist..."),展示它引导出 PRP 的完整对话流,ChatGPT 一次问一个问题把模糊需求逼成清晰规格 - 印证:PRP (产品需求 prompt) —— 已定义为"喂给编码工具的产品规格说明书",本片展示从 metaprompt 输出到 Lovable 直接粘贴的端到端流程,并强调"PRP 写得越清楚 Lovable 跑得越准"——本片是 PRP 在 vibe coding 场景的完整落地 - 互补:TFCDC 框架 —— 已定义为"AI 编码工程 5 字母顺序纪律",本片把 Thinking / Frameworks / Checkpoints / Debugging / Context 落到 5 个 demo 的具体动作:每个项目先写 PRP(Thinking)→ 用 React/Vite/Tailwind(Frameworks)→ Lovable 自带 version control(Checkpoints)→ 交替 implementing/debugging 模式(Debugging)→ 反复给 LLM context(Context) - 印证:[[Vibe Coding]] —— 已定义为"让 AI 写代码不读代码的用法",本片展示 Tina 的"vibe coding 升级版":用 metaprompt 把想法结构化、再交给 Lovable 实现,让零代码用户也能搭可上线 AI App,把"vibe coding = 周末小项目"扩到"能跑业务" ## 一手来源与延伸 - Tina 公开的 metaprompt(可直接复制跑):https://docs.google.com/document/d/1TXrA80VfzEUKY5TTKfQiGTU7AA3t24uxKysT_G1GENo/edit?usp=sharing - Lovable 官网(本期主推工具,带 affiliate `TINA20YT`):https://lovable.dev/ - Tina 的 AI Agent Bootcamp(视频中插):https://www.lonelyoctopus.com/ai-agent-bootcamp - Tina 的 Tina Huang SQL for data science interviews 课程(affiliate):https://365datascience.com/learn-sql-for-data-science-interviews/ ## 术语 - tiny ferrets carry dangerous code(Tina 助记框架):Thinking / Frameworks / Checkpoints / Debugging / Context,vibe coding 的 5 步纪律 - PRP(product requirements prompt):Tina 把传统 PRD 改造后的"喂给 AI 的产品需求文档",由 ChatGPT 用 metaprompt 引导产出 - vibe coding(AI 辅助编程):用自然语言让 AI 生成代码、不需要逐行手写的开发范式 - Lovable(AI 应用搭建平台):本期主推工具,可把 ChatGPT 输出的 PRP 直接粘贴成可运行 web app - Supabase(后端服务):开源的 BaaS,提供数据库 / 认证 / edge functions - edge functions(边缘函数):Supabase 提供的"在边缘跑的小函数",常用于调外部 API(Stripe / Gmail / OpenAI) - Plaid(美国银行数据聚合 API):把多家银行的交易数据统一拉取的中间层,常用于理财 App - Stripe(支付平台):本期 Project 2 用来给 invoice 加支付链接 - median.co(Lovable → Mobile 转换工具):把 Lovable 项目转成 iOS/Android app - Level 1/2/3(渐进式功能递进):Tina 给所有 5 个项目套的统一扩展节奏——最小功能 → 加数据/集成 → 加 AI 智能层 - Implementing / Debugging(Tina 二分模式):vibe coding 永远只处于这两种模式之一,各自对 AI 喂入的内容有不同要求 ## 金句 > **"The best way of doing this is coming with a PRD, a product requirements document. Or actually what is more fashionable these days, we call it a PRP, which is a product requirements prompt, which you'll be inputting into your AI assisted coding tool."** > —— [01:24](https://youtu.be/dLxz6zDGzUQ?t=84) > 为什么值得记:把"文档驱动开发"和"AI 时代 prompt 驱动开发"打通——PRP 不是文档格式升级,是为 AI 重写的需求表达。 > **"When in doubt, always try to add more context. More context, more specific, more desirable results."** > —— [02:44](https://youtu.be/dLxz6zDGzUQ?t=164) > 为什么值得记:本片反复强调的反直觉原则——AI 时代"信息越多越好",不是"信息越精炼越好"。 ## 立场与利益 - 与利益同向(待印证):Lovable "一键搭 5 个 AI App" 的效果性主张——description 头部 `TINA20YT` 优惠码 + 视频里反复出现 Lovable 名,与博主 affiliate 强绑定。**Lovable 跑大项目时的实际限制(代码量 / 集成数量 / 调试深度)需查官方文档 + 独立 benchmark,不要只信 demo 流畅度**;另对 AI Agent Bootcamp 招生引导的"学完就能搭"承诺保留一份怀疑。 - 利益中性:两个心智框架(tiny ferrets / implementing-debugging)与 ChatGPT metaprompt 设计——这些是工程方法论,无变现关联,按内容采信。 - 与利益反向(可信度最高):Tina 在 Project 3 (Sketch Buddy) 明确说"这个项目 debug 时间最长" [16:34](https://youtu.be/dLxz6zDGzUQ?t=994)——直接承认 Lovable 在多 API 集成下不一定能"开箱即用",与 sponsor 利益反向,反而证明 demo 不全是剧本。 利益证据:description 头部 lovable.dev 优惠码 + 365 Data Science / StrataScratch affiliate 课程链接,以及 video 里"Tina Huang AI Agent Bootcamp"招生。 ## 价值定位 - **适合谁**:已经基本掌握 prompt / ChatGPT 基础用法,想从"写 prompt"过渡到"搭可运行 AI 应用"的人;尤其对 Lovable / Supabase 生态没接触过、想一次看 5 个 demo 的人 - **解决什么**:给一个 vibe coding 的"完整闭环"——从想清楚(PRP)到搭起来(Lovable)到管起来(GitHub)——的具体步骤 - **认知 vs 实操**:中等偏实操——前 3 分钟是认知框架,后 27 分钟是 5 个 demo 的工程流 - **与已有笔记重叠**:vault 内 tina-huang 频道此前无笔记,无可比;与"通用 vibe coding / Lovable 入门"主题笔记可能重叠(命中才写,暂无) ## 自检问题 1. Tina 提出的"tiny ferrets carry dangerous code"框架的 5 字母分别代表什么?为什么"dangerous"是这个助记的关键字? **答案**:Thinking / Frameworks / Checkpoints / Debugging / Context。"dangerous"警告 vibe coding 会泄露 API key、丢工作、写看不懂的代码,所以要按规矩来。锚点:详解1。 2. Tina 提出的第二个心智框架是什么?implementing 模式和 debugging 模式对"喂给 AI 的东西"有什么不同要求? **答案**:永远只处于 implementing 或 debugging 二选一。Implementing:提供 context、点名 framework、做 incremental changes。Debugging:理解代码库结构、提供错误信息、加截图。锚点:详解2。 3. ChatGPT metaprompt 在流水线里扮演什么角色?为什么 Tina 说"PRP 是给 AI 看的,不是给开发者看的"? **答案**:metaprompt 让 ChatGPT 一步步问用户需求,产出可喂给 Lovable 的 product requirements prompt。PRP 是给 AI 的"唯一信息源",写得越清楚 Lovable 跑得越准。锚点:详解3。 4. Tina 给 5 个项目套的统一"三段式"是什么?分别对应什么? **答案**:level 1 跑通核心功能 / level 2 加数据 / 集成 / 用户系统 / level 3 加 AI 智能层。所有 5 个项目都按这个节奏递进。锚点:详解4-8。 5. Project 4 (Spend Buddy) 的产品设计洞察是什么?为什么 Tina 说"push 通知是教育用户的入口"? **答案**:针对"自控力差、讨厌电子表格、记性差"人群——push 通知作为引导入口,一步步让用户连银行账户,避免一上来就要求所有授权。这是对"过度权限请求"的产品反思。锚点:详解7。