1. 引言
😂 两岁半的儿子痴迷各种 "交通工具 " (高铁 ＞ 地铁 ＞ 公交车 ＞ 汽车 ＞ 电动车)，不知道是不是每个男孩子都这样啊？一到周末就问哪里？坐几号线？新脑子就是 "好用"，记得坐过线的颜色、上下车的站点名称 (包括换乘站)。有时问我这个老父亲，X号线是什么颜色啊，我自己都不记得，还得打开高德看看 🤣。
🤔 某天突发奇想，要不要打印一份 "深圳地铁的线路图 " 给他，看了下官网，发现是这样的 "网格图"：
😳 em... 专业是挺专业，就是看起来费劲，我一个大人看都迷糊，更何况是小朋友。又搜了一圈，发现下面这个样式还可以，就是要素有点多了 (如：复杂的颜色)：
😏 要不让 AI 来生成一个？其实也不难，核心就两步「采集站点信息 + 页面生成 」，用到的工具「Cursor + playwright」。
2. 数据采集
直接写 Prompt (提示词) 让 AI 自动去采集：
发送后可以看到，AI 先是规划了一下任务，然后就开始吭哧吭哧干活了：
利用 playwright MCP 唤起浏览器，自动访问深圳地铁官网，找线路数据的接口，数据获取解析一条龙。采集生成的json文件：
站点信息全采集到了，但数据还需要处理下，接着让AI再做下数据清洗 (key用英文，改名称，排序等)：
👏 处理后的数据基本符合我的要求~
3. 页面生成
直接把上面的图片丢给AI，简单写下 Prompt：
生成效果：
🤣 UI ≈ 零还原 ，不过算是搭了个架子，接着就是反复 "截图 + Prompt改改" 调样式了 (部分撕逼截图)：
最终生成的样式：
👏 非常 Nice ，不过我是需要打印出来的，打印预览 ，发现竟然要 8张纸 (一页只显示了2个)，让AI尝试优化后，最少还需要 6张，而且显示不是很好：
🤔 算了，让AI改下页面，直接点击生成 A4 尺寸的图片 (😄发微信直接打印)，又是 Battle 时间：
最终效果：
点击下载生成的图片放在文尾，需要的读者可 自行长按复制 。😆 没写一行代码，边工作边跟AI聊天，一早上搞完 (大部分时间都在等AI生成代码，然后验证)，AI编程能力恐怖如斯！😄 期待儿子今晚看到这个线路图的反应~
