Week 6 — 做出你真正的产品
Sign in
Week 6 — 做出你真正的产品
从「我也能做这个」走到一个别人会用的 URL。

Adventure 8

Adventure II — 整条主线
我们走到哪了
01
W1 — LLM 就是一个下一个词预测器
02
W2 — 拆开看里面 — tokens、attention、transformer
03
W3 — Prompt engineering — sampling + 五种套路
04
W4 — Agents — 给 LLM 工具
05
W5 — MCP — 把工具标准化
06
W6(今天)— 做出一个真实的东西。

Adventure 8

今天的收获
3 小时之后你会的事
今天结束的时候,你能:
写一份真的能用的一页 PRD
用 wireframe 让烂点子死在纸上,而不是死在代码里
做一个一天的 spike ,在你 all-in 之前先把最高风险那块跑通
选一个靠谱的 stack,不要纠结
把一个真实的 URL 上线,deploy pipeline 整套跑通
规划一个你真的会做完的、跨几个月的项目

Adventure 8

约定 — 三条底线
1
上线 > 打磨
今天有一个空 URL > 永远没有的完美 URL
2
PRD 写在纸上,不是装在脑子里
你写不出来,就说明你没搞懂
3
挑一个真实的问题
不是「面向所有人的 AI 导师」,而是「给你弟弟妹妹用的某个东西」

Adventure 8

热身
正式开始之前 — 先校准一下
下水之前先想三个问题:
有什么东西你希望它存在、但其实还不存在?
用你自己的话说,「demo」和「product」差在哪里?
如果你必须在 4 周内上线一个东西 — 你的想法里要砍掉哪些?

和旁边的人聊一下。没有标准答案 — 先让脑子转起来。

Adventure 8

干掉大多数项目的那道坎
一个 demo 在你自己的电脑上、用你测过的那几个输入,能跑通。
一个 product 要能服务 其他人,在 他们的设备上,处理 你完全没想过的输入。.

90% 的「差一点就上线」的项目,都死在这道坎里。

Adventure 8

Demo vs Product

Demo
Product
用户
你自己
陌生人
输入
你测过的那几个
你能想到的任何东西
错误
「算了重启一下」
真实用户会怪到你头上
成本
免费或者忽略不计
API calls × 用户数 = $$$
速度
你什么时候有空什么时候搞
永远在跑。bug 凌晨两点也会冒出来。
隐私
只有你自己的数据
你手里捏着别人的数据
上手
你自己当然会用
第一次来的人 8 秒就放弃

Adventure 8

真实用户出现后,会变的 7 件事
1
异常路径突然很重要
用户什么都不输入怎么办?
2
成本突然很重要
API × 用户数
3
隐私突然很重要
你手里捏着谁的数据?
4
上手体验突然很重要
空状态本身就是你的产品
5
可靠性突然很重要
挂 2 小时 = 出大事
6
沟通渠道突然很重要
用户在哪里报 bug?
7
速度突然很重要
慢 = 用户跑路

Adventure 8

Knowledge Check 1
你上线了一个 demo,10 个朋友开始用。
你上线了一个 AI 作业助手的 demo,10 个朋友开始用。
先猜一下:上一页那 7 件事里,哪一件 最有可能在第一周就咬你一口?

没有标准答案。把你的推理说出来,和旁边的人讨论 — 然后我们一起聊。

Adventure 8

一页 PRD
一个 PRD (Product Requirements Document)是一种纪律 — 写清楚你在做什么,不是怎么做。 What 和 why。

如果你写不进一页纸,说明你还没真的搞懂这个问题。
在你碰任何代码之前,PRD 是你能写出的最有用的东西。

Adventure 8

PRD 模板
5 个段落的模板

Adventure 8

PRD 示例
PRD 示例 — QuizDrill
Problem
9 年级学生考一次小测,就再也不复习了。一周后,内容全忘光。
Solution
一个 web app,把课堂小测变成手机上的 flashcards,用间隔复习的方式让你重做。
User Journey
  1. 学生上传一张小测照片(或粘贴题目)
  1. App 用 LLM 提取题目,问出正确答案
  1. App 在 14 天里反复刷题,按正确率拉开复习间隔
In Scope ✅ / Out of Scope ❌
  • ✅ 照片 OCR、手机友好的 flashcards、间隔复习
  • ❌ 分享小测(留到 v2)
  • ❌ 老师 dashboard(留到 v3)
  • ❌ 填空题(先只做选择题)
Success Metric
学生在 14 天后重做时,得分 90% 以上。

Adventure 8

📘 概念卡
PRD
是什么:一页纸的文档,在写任何代码之前,先说清楚你在做什么、为什么做。
像什么:像是一栋房子的设计图。你不会在还没决定这是小平房还是大别墅之前就先浇混凝土。
为什么重要:写 PRD 会把你脑子里那些「其实还没想清楚」的部分逼出来。在纸上发现,比写了一周代码再发现强多了。

Adventure 8

练习 — 5 分钟
写一段你自己 PRD 的内容
挑你现在脑子里最具体的那个想法。
写 Section 1 — Problem。要具体:
  • 谁有这个问题?(能说出一个真人名字最好)
  • 真正的痛点是什么?
  • 为什么会痛?

如果你写不出一段干净的话,说明你现在还没有 idea — 你只有一种「感觉」。

Adventure 8

Wireframe — 把每一屏都画出来
一个 wireframe 就是把你产品的每一屏都画出来。框、标签、箭头。不上样式。不写代码。
工具:纸、白板、Excalidraw、Figma。用什么都行。
重点是:在写任何代码之前,你先画出 每一屏 。

Adventure 8

为什么 wireframe 能逼出烂点子
当你真的把这屏画出来,你会发现文字根本写不出来的东西:
「用户到底怎么开始一次使用?」
「照片拍完之后传到哪里去?」
「在他们还没加任何数据之前,这屏长什么样?」
「如果 LLM 看不懂这张照片怎么办?」

每一个「啊,我还没想过」,都是你写了 4 天代码之后才会撞上的问题。提前 20 分钟撞上,划算太多了。

Adventure 8

Empty state — 你最容易漏掉的那一屏
每一屏,都画 两个版本:
Empty State
第一次进来的用户 — 还没有任何数据

大多数 builder 直接漏掉这一屏。
Loaded State
用户已经有东西了

这一屏所有人都会去设计。
新用户第一眼看到的是 empty state。这一屏决定了他们是留下还是走人。

Adventure 8

📘 概念卡
Empty State
是什么:一个全新的用户、还没加任何数据时,这屏长什么样。
像什么:像是一家新开张那晚的餐厅。如果店里看起来「空空荡荡又乱糟糟」,没人会进去。
为什么重要:这一屏决定了新用户会不会留下来。大多数 builder 忘了设计它。你别忘。

Adventure 8

The Spike
一个 spike 是一个一天的实验,目的是 证明项目里风险最高的那块技术能跑通 ,在你真的 all-in 之前。
✅ 跑通了
绿灯 — 开始正式做
❌ 跑不通
你 1 天就知道了,而不是 1 个月之后

这是你能养成的最有价值的工程习惯,没有之一。

Adventure 8

怎么找出你的 spike
问自己: 有没有哪一件事,如果它跑不通,整个项目就完蛋?
举几个例子:
  • 「LLM 真的能稳定地读出一张手写小测照片上的题目吗?」
  • 「speech-to-text 对各种口音够准吗?」
  • 「模型给这些邮件分类,90% 以上能分对吗?」

如果你说不出你的 spike 是什么,说明项目本身还没拆清楚。

Adventure 8

Spike 跑完之后的三种判决
Spike 做完一天之后:
✅ 跑通了
绿灯 — 开始正式做
⚠️ 勉强能跑
把问题范围缩小到它能跑通为止?(比如「只支持打字的小测,不支持手写」?)
❌ 跑不通
转方向,或者换一个项目

没做 spike,你就不许正式开干。

Adventure 8

📘 概念卡
Spike
是什么:一个一天的实验,用来检验风险最高的那块技术能不能跑通。
像什么:像是打井之前先钻个测试孔。钻孔成本很低,等井都建好了才发现不行,代价就高得离谱。
为什么重要:大多数失败的项目,本来 1 天就能干掉。先做 spike。

Adventure 8

Knowledge Check 2
学校广播 podcast → 100 字摘要
你想做的东西是:「一个 AI,把我学校每天的广播 podcast 变成一份 100 字的文字摘要,我在手机上能看。」
翻页之前先猜:
  • 你的 spike 是什么?
  • 测试它的最小实验是什么?
  • 你会拿哪些输入去跑?

先自己想清楚。然后再和旁边的人聊。

Adventure 8

选一个「无聊」的 stack
Spike 一亮绿灯,就选 stack。 别纠结。无聊就是对的。
所谓「无聊的 stack」=
经过验证
已经有成千上万的产品在用
文档齐全
你会撞到的每一个 error,Stack Overflow 上都有答案
对个人开发者有免费额度
学习阶段不应该掏钱
deploy 简单
Push → 1-2 分钟之后就上线

Adventure 8

你的默认 stack
新手默认 stack
层
选什么
Frontend
纯 HTML/CSS/JS,或者一个 Next.js 页面
Backend
Cloudflare Pages Functions / Vercel Functions
LLM API
你用哪个顺手就选哪个(Claude 或 OpenAI)
Storage
一开始什么都不要。需要的时候再加 D1/KV。
Auth
v1 不要 auth。等用户开口要的时候,再加 magic link 或 Google 登录。
Deploy
GitHub → Cloudflare Pages,push 一下自动 deploy
整个 ai.ethanxi.com 用的就是这一套 stack。跑得很好。

Adventure 8

别纠结 — 上线
你的工程预算是有限的。
✅ 把预算花在
  • 用户真的能看到的功能
  • 把东西先跑通
  • 根据反馈去改
❌ 不要花在
  • 和 stack 的配置作斗争
  • 学一个你不熟的潮流框架
  • 过早优化

选一个你不熟的潮流框架,要花 2 周;选无聊那个,0 成本。无聊的那个赢。

Adventure 8

成本本身就是一个 feature
从 1 个用户涨到 100 个用户,你的 API 账单可能直接翻 100 倍。
规模
成本
1 个用户 × 每天 10 次调用 × $0.01
$0.10/day → 免费额度
100 个用户 × 每天 10 次调用 × $0.01
$10/day → $300/month
1,000 个用户 × ...
$3,000/month
盯紧这几件事:
  • 你是不是用了一个比需要的更贵的模型?
  • 重复的请求你 cache 了没?
  • 有没有 max_tokens 上限,防止一个用户一下烧掉 $100?

成本不是「工程细节」。成本本身就是一个 feature。

Adventure 8

先把空 URL 上线
这一招,区分了真正的 builder 和永远在规划的人:
在你写任何真正的产品代码之前:
01
创建 GitHub repo
5 分钟
02
把它接到 Cloudflare Pages
5 分钟
03
推一个 index.html 上面就写「Hello, world. Coming soon.」
1 分钟
04
在你还没东西可秀之前,先把真实的 URL 跑通

Adventure 8

为什么这招有用
大多数 builder 把 deployment 留到「等我做完了再说」。
结果 deployment 总是冒出意想不到的麻烦 偏偏发生在你已经精疲力尽、就差最后一步上线的时候。
如果你先上线一个空 URL,你就拥有了:
一个能发给别人的真实 URL
一条跑得通的 deploy pipeline
每一次 push → 1-2 分钟就上线
零 deploy 焦虑
所有「deploy 会不会很难?」的担心 = 没了
项目本身有了真实感
这件事比你以为的重要得多

等真正的产品准备好了,你 git push 一下,就上线了。

Adventure 8

动手 — 30 分钟
练习 — 现在就把它搭起来
01
新建一个 GitHub repo
随便取名
02
加一个一页的 index.html
写「Coming soon — [你的项目名]」
03
登录 Cloudflare Pages
04
连上 repo
05
Deploy
06
用手机打开那个真实的 URL

你现在拥有了一条 deploy pipeline。以后每个项目都用它。

Adventure 8

当真实的人出现之后
你压根没想到要处理的事:
用户什么都没输就点了 submit
会怎么样?
用户上传了一张 50MB 的照片
会崩吗?
用户在手机横屏下打开
布局会乱吗?
用户网很慢
页面会空白 8 秒吗?

每一件,如果你今天就知道,30 秒就能修。产品里到处都是这种坑。

Adventure 8

当别人的数据变成你的责任
现在你的系统里有别人的数据了。哪怕只是他们问的问题,也会暴露他们的信息。
认真对待:
  • 不要 log 任何你不希望被公开的东西
  • 除非你提前说过,否则别把他们的数据发给第三方
  • 用户要求的时候,允许他们删掉自己的数据
  • 如果用户是 13 岁以下:更小心(默认就走 COPPA-friendly)

你不是只是做了一个工具。你接下了「替别人保管数据」的责任。

Adventure 8

用户一多,成本就来了
规模
现实
1 个用户 × 每天 10 次 API 调用 × $0.01
$0.10/day → 免费额度 ✅
100 个用户 × 每天 10 次 API 调用 × $0.01
$10/day → $300/month 💸
1,000 个用户 × ...
$3,000/month 🚨

demo 现在「免费」,不代表成本就不用管了。盯紧那个乘数。

Adventure 8

怎么挑一个跨几个月的项目
最好的项目同时满足 三个条件:
1
一个你真的有的问题
或者你认识的某一个具体的人有的问题 — 这样动力是真的
2
小到第 4 周就能端到端跑一遍 demo
进展看得见
3
够无聊,你不会过度沉迷
你能先上线一个不太行的 v1,然后慢慢改

Adventure 8

不要挑什么
❌ 别挑
为什么
「面向所有人的 AI 导师」
太宽了 — 没有具体用户
「比 Notion 更好的 Notion / 比 Claude 更好的 Claude」
太大 — 在跟十亿美元级别的产品打架
「我自己永远不会用的东西」
第 3 周你就会动力清零
「我能想到最有野心的那个 idea」
野心干掉的第一个项目,比烂点子还多

Adventure 8

怎么坚持下去
每周给一个人 demo 一次
爸妈、朋友、同学都行。光是「给别人看」这件事,就会逼出责任感。
每周上线一个小改进
再小也行。重点是连续。
每次开工写 3 行日志
回头读老日志,是巨大的动力来源。
允许自己先发一个不那么好的 v1
完美主义干掉的项目,比烂点子还多。

Adventure 8

什么时候停
一个项目算做完了,是当:
  • 你对现在有的东西已经满意了,哪怕还可以加更多
  • 你已经学到了你本来想学的东西
  • 再加新功能开始有 工作 的感觉,而不是玩

然后发一个 v1 公告, 开始下一个。一直在做下一个的 builder,胜过那些永远在打磨同一个的人。

Adventure 8

Capstone — 最后一次动手
你的 7 步 Capstone
01
挑一个问题
写在纸上
02
写一页 PRD
03
把每一屏都 wireframe 出来
Empty 和 loaded 两种状态都要画
04
找出你的 spike
「如果这一块跑不通,整个项目就死了:___」
05
把 spike 做掉
1 天、1 个脚本、5 个真实输入
06
把 deploy 接好
空 URL → 真实在线的 URL
07
告诉一个人你在做什么
这个世界上每一个产品,都是这么开始的。你现在也知道怎么开始了。

Adventure 8

告诉一个人
说出来这件事,会把你绑进去。
  • 告诉爸妈、朋友、同学
  • 把那个空 URL 分享出去
  • 「我在做 X。它会做 Y。大概 Z 的时候能用。」

你会立刻感觉到自己的动力变了。

Adventure 8

动手 — 现在
现在就开始你的 spike
剩下的课堂时间里:
01
挑出你的 spike
02
写脚本
03
拿 5 个真实输入去跑
04
判决:上 / 转向 / 砍掉

别等了。现在。

Adventure 8

Adventure II — 完结
你现在能做的事
六周之前,「AI」对你来说就是一个聊天框。现在:
  • ✅ 你能解释 LLM 是怎么生成词的 — 解释到数学层面
  • ✅ 你能读一个 prompt,然后预判它会不会有效
  • ✅ 你能在纸上设计一个 agent 系统,并且预判它会在哪里失败
  • ✅ 你能在 10 分钟内,把一个新的 MCP server 接进 Claude Code
  • ✅ 你能写一份真的能用的 PRD
  • ✅ 你能用一条 deploy pipeline,把一个真实的 URL 上线
  • ✅ 你能规划一个跨几个月的项目 — 而且有真正的机会做完它
Adventure 到此结束。你真正的工作,才刚刚开始。

Adventure 8

Adventure II 之后,下一步是什么
目前还没有 Adventure III — 因为下一步,是 你自己的.
如果你想要一条有结构的路:
Workshop:How to Build a Website
自然的延伸 — 把 deploy 这条链路深挖一遍
Adventure I(AI Agents)
另一条独立的线 — 在你自己的服务器上做一个真实的助手
你自己的项目
看 Slide 38。真正的成长就在这里。

不管你选哪个: 这个月,做出一个东西来。 空 URL 这一招真的有用。告诉一个人。然后一直走下去。

你可以的。

Adventure 8