📚 喵喵的笔记库

人人都是AI程序员

13分钟阅读

《人人都是AI程序员：TRAE+Cursor 从0到1全栈实战》详细读书笔记

Author: 吴振耀（安仔）、张斌（Captain） Published: 2025 | Category: 技术/AI编程/全栈开发 Core Thesis: Vibe Coding（氛围编程）让非技术人员也能通过AI工具（TRAE、Cursor）构建完整全栈应用，拆掉技术之墙，让创意变为现实。 Reading Date: 2026-05-14 Tags: AI编程 VibeCoding Cursor TRAE 全栈开发

一、全书概览

一句话总结

以Vibe Coding理念为核心，系统教授如何使用AI编程工具（TRAE、Cursor）配合免费/低成本工具链（Figma、Vercel、Supabase）从零构建并发布全栈应用。

全书结构

| 章节 | 主题 | 一句话概括 | |------|------|------------| | 心态篇 | 独立开发者的哲学 | 破除技术恐惧，建立AI协作心态 | | 提示工程 | AI协作的提示词精髓 | 如何高效地与AI"对话编程" | | UI设计 | Figma设计到代码 | 从视觉设计到前端实现 | | 前端开发 | AI驱动的前端构建 | 用Cursor/TRAE写前端代码 | | 后端开发 | 数据库与API | Supabase后端搭建 | | 实战1 | 习惯追踪器 | 第一个全栈项目实战 | | 实战2 | AI图像生成平台 | 商业级项目实战 | | 部署上线 | Vercel部署与发布 | 从本地到线上 | | 支付集成 | 商业化闭环 | 支付功能接入 |

二、逐章要点

心态篇：独立开发者的哲学

核心观点

AI时代最大的变化不是技术进步，而是"技术门槛"的消失——只要你能清晰地描述需求，AI就能帮你实现。

关键认知转换

| 旧认知 | 新认知 | |--------|--------| | 必须学会写代码才能做产品 | 必须学会描述需求才能做产品 | | 技术是创业的最大障碍 | 想法和执行力才是 | | 全栈需要5-10年学习 | AI工具让全栈开发平民化 | | 先学后做 | 边做边学 |

"节俭全栈"理念

  • 用免费或极低成本的专业级工具
  • 不追求完美架构，追求"能跑起来"
  • 快速验证 → 迭代优化 → 规模化

行动清单

  • [ ] 放下"我不是程序员"的心理障碍
  • [ ] 用一句话描述你想做的产品

提示工程：AI协作的核心

核心观点

与AI编程协作的质量，取决于你描述需求的精确度和结构化程度。

提示工程四原则

| 原则 | 说明 | 示例 | |------|------|------| | 上下文充足 | 提供足够的背景信息 | "这是一个习惯追踪App，使用Next.js+Supabase" | | 目标明确 | 说清楚想要什么 | "创建一个登录页面，支持邮箱和Google登录" | | 约束清晰 | 说明限制条件 | "只使用Tailwind CSS，不用第三方UI库" | | 分步推进 | 复杂任务拆成小步骤 | 先做UI骨架 → 再加交互 → 最后接入API |

提示词模板

[角色] 你是一个全栈开发专家
[背景] 我正在开发一个{项目描述}
[目标] 请帮我{具体任务}
[约束] 技术栈：{具体技术}
       风格：{设计要求}
[输出] 请提供完整代码 + 简要说明

行动清单

  • [ ] 建立自己的提示词模板库
  • [ ] 每次AI输出后先审查再使用

UI设计：Figma到代码

核心观点

好的UI不是"设计出来的"，是"参考出来的"——找到喜欢的参考，用Figma调整，再让AI转为代码。

工具链

| 工具 | 用途 | 成本 | |------|------|------| | Figma | UI设计 | 免费 | | Cursor | AI代码编辑器 | 免费基础版 | | TRAE | 字节跳动AI IDE | 免费 | | v0.dev | AI生成UI组件 | 免费额度 |

设计→代码流程

  1. 在Figma中完成设计稿（或找到模板修改）
  2. 用Cursor的Composer功能读取设计稿
  3. AI自动生成对应的前端代码
  4. 手动调整细节

行动清单

  • [ ] 注册Figma并尝试一个简单的页面设计
  • [ ] 用Cursor的Composer功能将设计转为代码

前端开发：AI驱动

核心观点

AI编程不是"让AI替你写所有代码"，而是"你负责架构决策，AI负责代码实现"。

推荐技术栈

| 层面 | 选择 | 理由 | |------|------|------| | 框架 | Next.js | SSR + 全栈能力 | | 样式 | Tailwind CSS | 原子化、AI友好 | | 组件 | shadcn/ui | 可定制、代码可见 | | 部署 | Vercel | Next.js原生支持 |

AI编程最佳实践

  • 先搭骨架，再填血肉：先让AI生成页面结构，再逐个功能完善
  • 小步快跑：每次只让AI做一个功能点
  • 代码审查：AI生成的代码一定要读一遍，理解逻辑
  • 版本控制：每完成一个功能就git commit

行动清单

  • [ ] 用Cursor创建一个Next.js项目
  • [ ] 用AI生成一个简单的Landing Page

后端开发：Supabase

核心观点

Supabase是"开箱即用的后端"——数据库、认证、存储、实时订阅一站搞定。

Supabase核心功能

| 功能 | 说明 | 替代方案 | |------|------|----------| | PostgreSQL | 托管数据库 | Firebase | | Auth | 用户认证系统 | Auth0 | | Storage | 文件存储 | AWS S3 | | Realtime | 实时数据订阅 | Pusher | | Edge Functions | 无服务器函数 | Lambda |

AI+Supabase工作流

  1. 用AI生成数据库Schema
  2. 用AI写RLS（Row Level Security）策略
  3. 用AI生成API调用代码
  4. 用AI写数据迁移脚本

行动清单

  • [ ] 注册Supabase免费版
  • [ ] 创建一个带认证的简单应用

实战项目1：习惯追踪器

核心观点

通过一个完整的习惯追踪App，将前面学到的所有知识串联起来。

项目结构

| 功能 | 技术实现 | |------|----------| | 用户注册/登录 | Supabase Auth | | 习惯CRUD | Supabase数据库 | | 每日打卡 | 前端日历组件 | | 数据统计 | Chart.js / Recharts | | 响应式设计 | Tailwind CSS |

关键步骤

  1. 设计数据模型（习惯表、打卡记录表）
  2. 搭建认证流程
  3. 实现习惯的增删改查
  4. 实现打卡和连续天数统计
  5. 部署到Vercel

行动清单

  • [ ] 跟随教程完成习惯追踪器
  • [ ] 尝试添加自己的创新功能

实战项目2：AI图像生成平台

核心观点

商业级项目实战——集成AI图像生成API、用户积分系统、支付功能。

核心功能模块

| 模块 | 说明 | |------|------| | AI图像生成 | 调用Stability AI / DALL-E API | | 用户积分 | 每个用户有限定生成次数 | | 支付集成 | Stripe / LemonSqueezy | | 图片画廊 | 展示社区作品 | | 提示词模板 | 预设高质量提示词 |

商业化要点

  • 免费增值模式：基础功能免费，高级功能付费
  • 积分制：控制API调用成本
  • 社区驱动：用户分享作品形成飞轮

行动清单

  • [ ] 理解免费增值模式的成本结构
  • [ ] 思考自己的AI产品如何定价

部署与商业化

核心观点

部署不是终点，而是起点——上线后的用户反馈才是产品迭代的真正驱动力。

部署流程

  1. 代码推送到GitHub
  2. Vercel连接仓库自动部署
  3. 配置环境变量和域名
  4. 监控错误和性能

行动清单

  • [ ] 完成第一次部署上线
  • [ ] 配置自定义域名
  • [ ] 设置错误监控

三、关键概念速查

| 概念 | 定义 | 一句话理解 | |------|------|------------| | Vibe Coding | 氛围编程，通过自然语言与AI协作编程 | 不写代码，说代码 | | 节俭全栈 | 用免费/低成本工具搭建全栈应用 | 创业不需要烧钱 | | Composer | Cursor的AI代码生成功能 | AI帮你写代码的核心工具 | | Supabase | 开源的Firebase替代品 | PostgreSQL + Auth + Storage一体化 | | TRAE | 字节跳动的AI IDE | 中文AI编程的新选择 |

四、核心框架/模型

Vibe Coding工作流

创意/需求 → 用自然语言描述 → AI生成代码 → 人工审查 → 测试 → 部署
     ↑                                                        |
     └──────────── 根据用户反馈迭代 ←──────────────────────────┘

节俭全栈技术栈

前端：Next.js + Tailwind CSS + shadcn/ui
       ↓
AI编程：Cursor / TRAE
       ↓
后端：Supabase（数据库+认证+存储）
       ↓
部署：Vercel（免费额度）
       ↓
支付：LemonSqueezy / Stripe

五、金句摘录

"拆掉技术之墙，让每一个好的创意都能在AI时代开花结果。" "AI时代，最值钱的不是写代码的能力，而是描述需求的能力。" "节俭全栈不是凑合，是用最少的资源做最对的事。"

六、行动清单

每天

  • [ ] 用AI编程工具解决一个小问题
  • [ ] 积累一个有效的提示词模板

每周

  • [ ] 完成一个小功能的开发（从设计到部署）
  • [ ] 回顾AI生成的代码，学习其中的模式

每月

  • [ ] 完成一个完整项目的从0到1
  • [ ] 分享项目获取用户反馈

七、社区评价

来源：京东、豆瓣综合

正面评价

  • 实战导向：两个完整项目手把手教学，不做纸上谈兵
  • 工具普惠：推荐的工具链基本免费，降低入门成本
  • 内容新颖：市面上少有的Vibe Coding系统教程

不同声音

  • 版本更新快：AI工具迭代迅速，书中部分操作可能已过时
  • 深度有限：对有经验的开发者来说过于基础
  • 依赖工具：过度依赖Cursor/TRAE，底层原理讲解不足

八、争议与批评

| 批评点 | 来源 | 核心论据 | 是否成立 | |--------|------|----------|----------| | 过度乐观 | 技术社区 | AI编程还不能处理复杂架构 | 部分（简单项目足够） | | 工具绑定 | 读者 | 过于依赖特定工具 | 是（但降低了学习成本） | | 内容过时 | 技术博客 | AI工具更新太快 | 部分（核心理念不过时） |

我的判断

  • 哪些批评有道理：确实依赖特定工具版本，需要读者灵活变通
  • 哪些批评不成立：Vibe Coding的理念是通用的，工具会变但方法不变

九、一句话总结

一本面向非技术人群的AI全栈开发实战手册，以Vibe Coding理念为核心，用免费工具链（Cursor/TRAE + Next.js + Supabase + Vercel）让任何人都能从零构建并发布自己的数字产品。

笔记生成：2026-05-14 by 喵喵 🐈

关系图谱