第一单元 点赞墙产品
第3课 信息架构：五区线框
把分区画清：标题、提交区、我发出的、我收到的、管理入口。
空壳也要有骨架：选人、输入、我发出的、待审、可见——五块摆上就有「墙」的感觉。
线框图是给未来的自己看的地图。
先看见结构，再谈真的存数据。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 能画出/列出五大分区。
- 能说明每区服务哪个任务。
- 能指出管理入口在哪。
三、弄懂这件事
这一课就这几小步：
1．分区
空壳也要有骨架：打开就能看见几大分区。
至少包括：标题、选人加输入加提交、我发出的、我收到的、管理员区。
五块摆上，就有「墙」的感觉，而不是一张白纸。
2．对应任务
每个分区都要对应任务，不能只是好看的框。
提交区服务发送；列表服务查看；管理区服务审核。
对应关系写清，后面接本机提交和真表才不乱。
3．给 AI 的说法
对氛围编程工具里的 AI 下单要收窄：按分区生成空壳即可。
不要一次要求做完审核逻辑和全班表。
先看见结构，再谈真的存数据。
点一点就明白
点下面的按钮，看屏幕上发生了什么。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
点赞结构图
列出五大分区名。
做对了会怎样五大分区名写齐全，其中必须有管理或审核区。
做不出来怎么办标题、提交、我发出的、我收到的、管理。
每区写服务的任务一词。
做对了会怎样任务句里有清楚的动词，如提交、查看、通过。
做不出来怎么办三个动词可先写：提交、查看、通过。
做成一页结构说明（可线框）。
做对了会怎样分区名和按钮文字别人一看就懂。
做不出来怎么办每个区先画方框并写上标题，再往里填控件。
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
show/l03.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
下面整段是给 AI 的提示词示例：写清目标、范围和怎样算做成；请整段使用，不要只丢半句。工具嵌在下方。本课文件是 show/l03.html。
做单个 HTML，标题「我为你点赞·结构」。 用线框或分区卡片画出五个区：标题、提交、我发出的、我收到的、管理。 每个区下面写一句用途（完整句子）。不要真逻辑、不要服务器。适合投影。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
结构图和最终页面分区对不上。
漏掉审核入口。
七、带走这几句
- 先把分区结构摆稳，再写提交和审核逻辑。
- 分区和字段名要稳定，后面接接口才对得上。
八、打勾再往下
- 五区齐全。
- 管理入口标出。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
「我发出的」主要给？
结构图作用？
空壳阶段？