第一单元 点赞墙产品
第4课 完成：空壳 MVP v0
单元成果：可打开的空壳——分区齐全，按钮可先不干活。
第一版毕业：打开就是一堵空壳墙，五区都在，能讲清范围。
还不能真存也没关系——结构对了，才配进入本机提交后，「我发出的」条数 +1。
演示时诚实说：这是 v0，下一步才接通。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 打开可见分区。
- 有标题与空状态文案。
- 能 20 秒讲清下一版要做什么。
三、弄懂这件事
这一课就这几小步：
1．v0 标准
第一版毕业标准很清楚：分区在、文案在，打开就是一堵空壳墙。
这一步还不必真提交到表里，但要能讲清范围。
演示时诚实说：这是 v0，下一步才接通。
2．空状态
列表为空时不要空白吓人，要写人话。
例如空列表写「还没有赞」，同学一看就懂。
空状态也是产品的一部分，不是可有可无的装饰。
3．衔接下单元
下一单元进入本机定向提交，做成 v1。
结构对了，才配接「发出→我发出的 +1」。
今天把空壳讲圆，后面接通才省事。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
v0 空壳
按结构图生成 my-wall/index.html。
做对了会怎样预览里五个分区都看得见，不是只有标题。
做不出来怎么办对照上一节的分区和字段，保持名字一致。
补空状态文案。
做对了会怎样两个列表在空的时候也有提示文案。
做不出来怎么办空列表提示可写成：还没有赞，快来发一条。
写一句 v1 目标。
做对了会怎样你写到：提交成功后对应列表会多一条。
做不出来怎么办先在本机预览里提交一条，跑通再谈发布。
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
my-wall/index.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
下面整段是给 AI 的提示词示例：写清目标、范围和怎样算做成；请整段使用，不要只丢半句。工具嵌在下方。本课文件是 my-wall/index.html。
做「我为你点赞」v0 空壳单页（纯前端）： 要有：标题、接收人下拉、赞语文字框、提交按钮、「我发出的」「我收到的」（空状态也要有提示文案）、管理入口占位。 按钮可暂时没有真实逻辑。不要服务器、不要登录。 做成后五个区都看得见，空列表也有人话提示。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
v0 就接复杂登录导致做不完。
分区名和下节不一致。
七、带走这几句
- v0 的目标：结构能演示，空状态也说得清。
- 列表为空时的提示也是产品，别留一片空白。
八、打勾再往下
- 空壳可打开。
- 写下 v1 目标。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
v0 成功更看？
空状态文案？
下一单元？