第 1 课：认识 AI 产品与“可交付”开发

1. 这一节解决什么问题

普通人最容易把“AI 写出一个页面”误认为“产品完成”。这一节把作品、产品和可交付服务分开，并建立全课程共同的判断方法：有人有真实问题，你能用一个可运行的数字方案解决，且能说明范围、验证结果和交付方式。

2. 学完要拿到什么结果

• 一张“AI 产品结果地图”。
• 一个只用一句话表达的云南大蒜网站目标。
• 你的第一个项目文件夹、README 和 Git 检查点。
• 能解释浏览器、前端、表单服务、域名和部署各自做什么。

3. 对应的开源对标及链接

• easy-vibe 学习路径：参考从原型、前端、后端到部署的分阶段路线，按 CC BY-NC-SA 4.0 署名改编教学思想。
• AI Vibe Coding 101：参考用完整项目学习而不是先背语法的方式。
• Web Dev For Beginners：参考以小任务解释 Web 基础和 Git 的零基础表达。

4. 完整图文课程正文

4.1 产品不是代码数量

把 AI 产品看成四层：证据层回答“谁真的需要”；体验层回答“用户怎么完成任务”；技术层回答“页面和数据怎么运行”；交付层回答“谁部署、谁维护、怎么验收”。只做技术层会得到演示；四层闭环才是产品。

flowchart TD
  E[证据：买家需要可信规格与快速询价] --> X[体验：浏览产品并提交 RFQ]
  X --> T[技术：双语页面 + 表单服务 + SEO]
  T --> D[交付：域名、部署、验收、维护说明]

4.2 本项目的最小闭环

海外采购者从搜索或链接进入英文首页，查看大蒜类别、规格、包装、产地与质量控制；不要求立即下单，而是填写数量、目的港、包装和联系方式。网站把询盘送到供应方邮箱，同时提示提交成功。供应方在后台邮箱里拿到结构化信息，再人工报价。

这比“做一个很漂亮的农业官网”更可验证，因为入口、行动和结果都明确。首页浏览量不是本课程的核心验收，一条由测试邮箱收到、字段完整且可追踪来源的 RFQ 才是。

4.3 只学够用的 Web 基础

• HTML 是页面的内容骨架，例如标题、导航、表单字段。
• CSS 控制颜色、间距、字体和手机布局。
• JavaScript 处理语言切换、菜单、表单提交和状态反馈。
• React 把导航、产品卡、表单等拆成可复用组件。
• 路由把 /en/products/fresh-white-garlic 映射到产品详情页。
• 表单服务接收浏览器提交并转发邮件；密钥不能写死在公开代码里。
• 部署把本地构建产物放到能被公网访问的服务器；域名是易记入口，DNS 把域名指向部署平台。
• Git 像项目的可恢复存档；每个可运行里程碑保存一次。

4.4 AI 在项目里的岗位

AI 可以做需求整理、代码草拟、错误解释、测试清单和文案检查，但不能替你确认企业资质、供应能力、价格、证书和客户评价。人负责证据、取舍、密钥和最终发布；AI 负责在明确约束下加速实现。

5. 零基础用户能够执行的操作步骤

1. 在当前电脑创建一个学习目录，例如 ai-product-course-work。
2. 在目录中创建 README.md，写下项目名称、目标用户、要完成的动作、明确不做的内容。
3. 安装 Git 后在终端运行 git init。若不熟悉终端，可在 TRAE 左侧“源代码管理”点击“初始化仓库”。
4. 新建 evidence/、product/、design/、website/、delivery/ 五个子目录。
5. 把本节结果地图写入 product/result-map.md。
6. 检查没有密码或真实客户隐私后，创建第一个提交，提交说明写 docs: 建立课程项目与结果地图。

6. 可直接复制给 TRAE 或其他 AI 的提示词

你是产品教练，不要先写代码。请把下面的想法整理成“证据、体验、技术、交付”四层结果地图。
目标用户：海外大蒜批发采购者。
目标动作：查看可核验的产品与供应信息后提交 RFQ 询盘。
约束：课程示范企业不是现实企业；不得编造资质、产能、客户、销量或交期；所有未知商业信息标为“示例数据，发布前需企业确认”。
输出：1）一句话产品目标；2）四层表格；3）最小可演示闭环；4）五条不可交付边界；5）人工必须核实的事实清单。

7. 云南大蒜项目中的具体示范

一句话目标：帮助有云南大蒜采购意向的海外 B2B 买家，在 5 分钟内看懂可供品类、拟议规格和合作流程，并提交字段完整的 RFQ。

明确不做：在线付款、库存同步、虚构证书下载、买家账户系统、自动报价。这样可以把第一版控制在能验证询盘的范围内。

8. 可填写模板

使用产品定位卡前先填写这张最小表：

云南大蒜完整填写示例已在模板文件中提供。

9. 常见错误

• 先让 AI 选择十几个框架，却说不清用户要完成什么。
• 把“页面能打开”当成“询盘链路有效”。
• 在案例中随手写“年产十万吨”“出口二十国”等没有证据的数字。
• 第一次提交就要求登录、支付、CRM、自动翻译和复杂后台。
• 不保存 Git 检查点，出错后只能整站重做。

10. 排错方法

用四问定位：用户是谁不清楚，回证据层；页面动作不清楚，回体验层；运行报错，查技术层；上线、域名、收信或交接失败，查交付层。把错误原文复制到 errors.md，记录“刚做了什么—预期—实际—完整报错—已尝试”，不要只对 AI 说“不能用”。

11. 完成标准

• 能用一句话说清目标用户、场景、动作和价值。

• 四层结果地图都有可观察产物。

• 至少写出 5 个第一版不做项。

• 所有未知企业事实都标为示例或需确认。

• 项目目录已初始化 Git，并完成首个提交。

12. 本节成果如何进入下一节

下一节不再讨论“我想做一个站”，而是验证“哪些买家问题值得先解决”。把目标用户、场景和不可做边界带入个人资源盘点与需求证据收集，任何没有证据支持的功能都不能进入 PRD。

---

上一节：用每周漏斗决定下一步
下一节：第 2 课：从个人资源到可验证需求