← 嗨翻人工智能 · 全部案例

教学案例 ｜ 一次人机协作的完整迭代记录

一个页面的九次迭代

这一页记录 江阴·兴港社区研学读本（johnonlife.com/xg）从零到现在的全过程：每一次改动的触发是什么、做了什么决定、哪些判断后来被证明是错的、以及错在哪里。它原本只是一份社区调查报告，最终变成了一份面向上海张江研学家长的读本——中间最关键的一次修订，是把一条画反了的街道改回来。

看迭代过程 ↘ 看那次关键纠错 打开读本正文
9次迭代
2026-10-10 至 2026-10-11，两天内完成
14章
当前章节数（初版为 7 章）
1处事实纠错
利中街走向错误，影响社区四至判断
5张手绘 SVG
区位三级图 + 街区图 + 交通示意

01 / 关于本页

为什么要把变更历史单独做成一页

一个"看起来还行"的成品页面，最容易掩盖的恰恰是它怎么变成这样的。对教学而言，过程比结果更有价值：学生需要看到哪些判断是靠得住的、哪些是靠不住的、出错之后怎么收场。

所以这一页刻意保留了完整的迭代痕迹，包括那次犯错与更正。全页事实均可回溯到政府公开信息、统计公报与官方通告；未能核实的，一律标注为"示意"或"以实际为准"。

阅读建议：先读 02 时间线（看过程），再读 03 关键纠错（看教训），最后读 05 教学要点（看方法）。如果只给孩子讲一件事，就讲 03。

02 / 迭代时间线

九次迭代，逐条复盘

时间线按实际发生顺序排列。蓝色节点为常规演进，红色节点为纠正错误的修订。

03 / 关键纠错

一条画反的街道，和它牵出的连锁错误

这是整个案例中最值得讲的一段。错误不在排版、不在配色，而在事实；而且它不是凭空编造的，是"照着一段看起来很可靠的文字"画的。

错误是怎么发生的

社区简介原文写着：社区"东接利港社区，西临西奚墅村，南至利中街，北靠滨江西路"。这句话来自官方渠道，读起来毫无问题。v0.3 的地图就是照它画的：把利中街画成社区南边一条东西向的横路。

但检索政府通告后发现：利港街道四条主要街道的起止点明确写着——兴港路（利康路—利南街）、利中街（利康路—利南街）。既然起止于两条东西向道路之间，那利中街本身必定是南北走向，不可能成为东西向的南界。一句话里的矛盾，只有把道路拓扑摆在一起时才看得出来。

连锁后果

原判断南界＝利中街（东西向）；北界＝滨江西路；图中只有 2 条道路
实际拓扑西界兴港路（南北向）、东界利中街（南北向）、北界利康路（东西向）、南界利南街（东西向）
交叉验证兴港新村官方地址为"兴港路×利康路交叉口东南角"，与"西界兴港路、北界利康路"完全吻合，形成互证
滨江西路位于利康路以北、更靠近长江，并非社区直接北界
处理方式地图按通告拓扑重绘；正文保留原文表述 + 加"修订说明"框说明差异，不静默覆盖

三条可迁移的教训

教训一

文字描述 ≠ 空间拓扑

一段话里每个词都对，拼起来仍可能不成立。凡是把文字转换成图形（地图、流程图、结构图）的地方，都必须找一份独立于文字的结构性数据源来交叉验证——本例用的是政府通告里的道路起止点。

教训二

官方来源也可能只是"口径"

社区简介的"南至利中街"未必是错，它可能沿用的是旧地名或未更新的表述。正确做法是双轨呈现：保留原文，同时标注校正依据，让读者自己判断。静默改写会抹掉线索，也可能引入新的错误。

教训三

不确定就标"示意"

地图上每一个无法核实的要素（如"利港公园"的相对方位）都明确标注"示意方位"，并在图边注明"非严格按比例"。把不确定性写在图上，比画得很像却不准要负责得多。

方法论

它的逆向用法

这个错误反过来也是一个可用的教学工具：让学生先读那段社区简介，自己画出地图，再给他们看政府通告里的道路起止点，问"哪里对不上"。制造一次可控的认知冲突，比直接讲正确答案记得牢。

04 / 数据来源

信息从哪来，可信度怎么分

全页事实按可信度分为三级，教学中可以让学生练习"给信息分级"。

A 级 · 官方权威《2024 年江阴市国民经济和社会发展统计公报》（江阴市统计局）、江阴市政府《主要街道通告》、江阴临港经济开发区政务服务网、江阴市政府铁路调图公告。
用于：所有城市与街道数据、道路走向、高铁车次。
B 级 · 公开报道地方党媒与主流媒体报道（如长江岸线整治、利港湿地修复、社区妇女议事活动）。
用于：社区治理细节、生态整治过程。已尽量交叉比对。
C 级 · 商业平台地图/票务/列车查询类平台（门牌与交叉口关系、景点地址、票价）。
用于：辅助定位与价格参考，一律标注"以实际为准"。
需要如实告诉学生的一点：社区人口存在年份口径差异（住宅楼 76 幢 / 83 幢，常住人口 6300 人 / 7800 人）。这不是错误，是不同时点的统计差异，页面已原样保留并加注说明，而不是偷偷选一个数字。

05 / 教学要点

从这一页能拆出的六条方法

方法 01

先问"给谁看"，再问"写什么"

v2.0 的全部改动都源于一句受众描述："面向上海张江的研学家长"。定位从"资料汇编"变成"决策辅助"后，内容清单自然变了——要交通、要行程、要问答、要"孩子能学到什么"。受众变了，信息结构必须重排，而不是加几段。

方法 02

由大到小的漏斗结构

江阴市 → 利港街道 → 兴港社区 → 研学课堂 → 出行 → 问答。读者每往下一层，心智负担都在下降。讲一个陌生的小地方，先把它放进读者已知的坐标系（这里是"高铁 1 小时 13 分"）。

方法 03

把不确定性显式化

"示意方位""非按比例""以 12306 当日为准""以景区公告为准""需提前预约"——这些标注不是免责套话，而是内容质量的一部分。敢标不确定的内容，才值得信它标确定的部分。

方法 04

渲染出来再看一遍

v1.2 与 v2.1 的问题（文字被裁、虚线穿字、箭头压字）在代码层面全都"正确"，只有渲染后才暴露。凡是图形输出，截图检查是必经工序，不是可选项。

方法 05

改之前先确认不会破坏现状

部署前先读 nginx 配置确认文档根、先确认 /xg 目录不存在；发布后用 curl 实测状态码与内容关键字。对线上环境的每一次写入，都应该先做只读探查。

方法 06

保留痕迹，包括错误

正文保留社区简介原表述、本页完整记录那次画反街道的经过。把错误留在文档里，它就从"失误"变成了"材料"。这也是这一页存在的理由。

06 / 复现

如果要重做一遍

本页是纯静态单文件 HTML，无构建、无依赖，可直接在浏览器打开。线上部署只需一条 scp。

# 1) 本地渲染自检（无头 Chrome 截图，检查布局与 SVG）
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new --disable-gpu --no-sandbox --hide-scrollbars \
  --screenshot=/tmp/xg.png --window-size=1200,14000 \
  --virtual-time-budget=8000 "file:///path/to/index.html"

# 2) 部署（nginx 文档根 /opt/johnonlife.com，/xg 目录）
scp index.html johnonlife.com:/opt/johnonlife.com/xg/index.html

# 3) 线上校验：状态码 + 关键内容是否就位
curl -s -o /dev/null -w "%{http_code}\n" https://johnonlife.com/xg/
curl -sk https://johnonlife.com/xg/ | grep -c "兴港社区"
关键约束：页面为自包含内联样式，不依赖 site.css，因此本地与线上渲染一致；站点公共资源（/chengmu-seal.png、/favicon.png）走绝对路径引用。第二张 SVG 的滤镜 id 必须与地图 SVG 区分（rough/rough2 vs rough3），否则同页内会互相干扰。
单文件 · 无构建 内联设计令牌 SVG 手绘滤镜 nginx 静态托管 强制 HTTPS

07 / 当前状态

它现在是一个能用的读本，也是一个能讲的案例

页面现为 13 章、约 55 KB，面向上海张江研学家长，主体仍是江阴市利港街道兴港社区（兴港居委）。内容涵盖江阴城市背景、利港街道与长江生态湿地、社区概况与人口、村改居历史、网格化治理、荣誉民生，以及四堂研学课、出行行程与家长问答。

而作为教学案例，它留下的是另外三样东西：一次可复盘的事实纠错、一套可迁移的内容重构方法、以及一段没有被擦掉的迭代痕迹。