YT 学习笔记

30 分钟搭 5 个 AI 应用(ChatGPT + Lovable 教程)

19分钟阅读下载 MD

封面

Tina Huang · 30:32 · 发布 2025-07-25 · 18.54 万次观看(截至抓取) · 观看原视频

🔥 观众最高回放 09:09 — 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。(→ 详解1)
  2. ChatGPT 的价值是”生成 PRP”,不是”生成代码”——metaprompt 一步步问用户需求,产出可喂给 Lovable 的 product requirements prompt(PRP),用文档化代替”边写边想” 01:23。(→ 详解2)
  3. 每个 AI 应用都可以”三段式”递进——level 1 跑通核心功能、level 2 加数据 / 集成 / 用户系统、level 3 加 AI 智能层 03:44。(→ 详解3-7)
  4. 现有框架优先于”让 AI 重新发明”——AI 训练数据里已经有 React / Tailwind / Supabase / Stripe / Plaid 这类现成工具,先指明再让 AI 拼装,比让它从零造轮子更稳 02:14。(→ 详解2)

知识点详解

1. 框架 1:tiny ferrets carry dangerous code 00:56

Tina 把 vibe coding 的工程纪律压缩成 5 字母助记:Thinking / Frameworks / Checkpoints / Debugging / Context。这套框架的核心警告是 “dangerous”——AI 辅助编码会泄露 API key、丢失没版本控制的工作、写出你看不懂的代码,所以要”按规矩来”。

  • Thinking:动手前先写 PRP(产品需求提示),把目标用户、客户体验、核心功能、文案、风格、技术栈都列清——花在”想清楚”上的时间越多,后面对话越省事 01:23
  • Frameworks:你想要的轮子很可能已有现成包,AI 也受过这些包的训练——直接告诉 AI “用 React + Tailwind + Supabase” 比让它自由发挥更可控 02:14
  • Checkpoints:始终用版本控制,Lovable 自带但 GitHub 是金标准 02:30
  • Debugging:AI 修 bug 不会自己看错误信息——必须把详细错误信息粘贴进对话,耐心且方法论地修
  • Context:遇到错误就多给上下文——截图、mockup、示例,越具体结果越好

2. 框架 2:永远在 implementing 或 debugging 二选一 03:02

第二个心智框架更短:AI 辅助编码时你永远只处于两个模式之一——实现一个功能,或者调试一个错误。这两个模式对”喂给 AI 的东西”有不同要求。

Implementing 模式:提供 context、点名 framework、做 incremental changes 03:08——也就是一次只加一个 feature,跑通再加下一个。

Debugging 模式:理解代码库结构(用 Lovable 内置的 code viewer 看清文件分布)、提供完整错误信息、加截图上下文。

关键启示:实现到一半发现错误,先回 implementing 模式把”没想清楚的部分”想清楚,再切回 debugging 模式。混在一起做,AI 会越帮越乱。

3. 流水线范式:ChatGPT metaprompt → PRP → Lovable 01:23

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

类型:web app。

核心创意:把”任何事都能折算成计算”——净资产、储蓄、房贷、租金、健身卡、报价——做成”用户描述需求,AI 即时生成计算器”。

三 level 递进:

  • Level 1:用户描述计算器,AI 即时生成
  • Level 2:多计算器 + 社区市场(浏览 / 收藏 / 评分 + 用户登录)
  • Level 3:社交化(分享链接 / QR 码 / 嵌入第三方网站 + 创作者粉丝体系)

示范价值:这是 5 个项目里唯一展开完整 metaprompt → PRP → Lovable 流程的——后面 4 个项目都是”过流程不复述”,所以本项目是看完整方法论的关键段。

5. Project 2:Freelancer Toolkit 11:52

类型:internal tool。

核心痛点:freelancer 的行政工作(写 proposal / 开 invoice / 跟回款)极花时间。

三 level 递进:

  • Level 1:文档生成(从表单生成 proposal / 合同 / invoice)
  • Level 2:客户管理(存所有文档 + 客户历史 + 跟踪 invoice 状态 + Stripe 支付链接 12:48)
  • Level 3:智能助理(分析所有数据 + AI 提建议 + 欠款自动催收 + Gmail API + 日历同步)

亮点:把 Stripe 集成作为”一键接入”——用 Lovable 调 Stripe,几行对话就能给 invoice 加支付链接,比传统开发省几天。

6. Project 3:Sketch Buddy(移动 App) 16:34

类型:mobile app(用 median.co 把 Lovable 项目转 mobile 形态 19:05)。

核心痛点:看 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

类型:dashboard(对最常见的”个人理财”做加法)。

核心人群:“自控力差、讨厌电子表格、记性差”——所以产品定位成”ADHD 友好、cozy gamified”。

三 level 递进:

  • Level 1:流水分析(上传 PDF/图片,AI 自动读流水 + 分类 + 给建议)
  • Level 2:实时追踪(Plaid 接入 22:58 + 实时数据 + 可视化 + push 提醒)
  • Level 3:AI 教练(每天通过 WhatsApp 发消费小结 + 对话式理财建议)

亮点:push 通知作为”教育用户”的入口,引导他们一步步连银行账户,避免一上来就要求授权所有权限——这是产品设计层面的洞察。

8. Project 5:Brain Dash(任务管理 AI Agent) 25:09

类型:full-blown AI agent(6 组件齐备:模型 / 工具 / 记忆与知识 / 音视频 / guardrails / 编排 26:04)。

核心痛点:“P 人”——to-do list 写了不做,需要 AI 根据”此刻精力 / 心情 / 日程”动态给优先级。

三 level 递进:

  • Level 1:智能任务清单(支持文字 + 语音输入,AI 分类 + 标优先级 26:21)
  • 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 = 周末小项目”扩到”能跑业务”

一手来源与延伸

术语

  • 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
为什么值得记:把”文档驱动开发”和”AI 时代 prompt 驱动开发”打通——PRP 不是文档格式升级,是为 AI 重写的需求表达。

“When in doubt, always try to add more context. More context, more specific, more desirable results.”
—— 02:44
为什么值得记:本片反复强调的反直觉原则——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——直接承认 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。

关系图谱

反向链接