用AI给宝贝儿子定制一个深圳地铁线路图

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编程能力恐怖如斯！ 期待儿子今晚看到这个线路图的反应~