把刘备的一生做成可播放的地图？这个 Skill 让 AI 帮你搞定

你有没有想过：刘备这一生，到底走了多远？

课本上写的是这样的：161 年出生在涿郡，194 年接掌徐州，201 年屯兵新野，214 年进入成都，221 年称帝，223 年病逝于白帝城。

这些信息单独看都没问题，但读完之后，脑子里还是缺一个直观印象——他为什么不停换落脚点？从华北到中原，从荆州到益州，一次次迁徙背后到底意味着什么？

如果把这些事件放回真实地图，沿着时间顺序一段一段播放，也许就能从"空间"这个角度，重新看懂一个人。

今天分享的这个项目，就是干这个的——它叫 LifeTrace（人生经纬），一个基于高德地图的 Skill，能把一个人的一生，做成一幅可以播放的足迹地图。

痛点：只有时间轴，没有空间感

传统的人物传记，几乎都是围绕"时间"展开的：

161 年：出生于涿郡
184 年：参与镇压黄巾军
194 年：接掌徐州
201 年：屯兵新野
214 年：领益州牧
221 年：成都称帝
223 年：白帝城托孤

这种纵向时间轴足够清晰，但缺少空间关系。

"从涿郡到徐州"意味着什么？"从中原辗转到新野"有多远？"进入益州"为什么成了刘备人生的转折点？"夷陵战败后退到白帝城"，在空间上又是一次怎样的回撤？

这些内容，光靠一条时间轴很难建立直觉。而一张地图，天然能把人的经历组织成三个维度：

什么时候发生
   +
在哪里发生
   +
发生了什么

当时间轴和地图叠加在一起，人物经历就不再是一堆孤立的事件，而会变成一条连续的人生路径。

怎么实现：一个人物一个数据文件，AI 帮你生成

LifeTrace 的核心思路特别直白：把人一辈子整理成"时间 — 地点 — 事件"的数据，扔给 AI，它会自动在真实高德地图上把轨迹画出来、还能播放。

你不需要会高德地图 API，也不需要改一堆前端代码。你只需要提供时间、地点和故事，Agent 会按照 Skill 里定义好的流程，自动完成资料整理、地址转坐标、生成页面、本地预览整套动作。

在刘备这个案例里，做出来的效果是：

播放完整人生轨迹：从出生地开始，按年份依次点亮地点；
暂停 / 继续播放，还能调整播放速度；
点击地图上的节点，看对应年份的事件；
点击底部时间轴，跳转到任意一年；
按人生阶段筛选事件（青年、闯荡、立业……）；
右侧还有人物画廊，展示桃园结义、三顾茅庐、白帝托孤这些核心故事图。

整个页面分四块：左边是人物标题和事件信息，中间是高德地图和动态轨迹，右边是人物画廊，底部是完整时间轴和播放控制。地图不是装饰背景，而是整个叙事的中心。

为什么能做到"换个人也一键生成"？

如果只做一个刘备网页，你想换成自己，通常得：Fork 仓库 → 找到数据文件 → 手动替换年份和地点 → 查经纬度 → 改人物名 → 换图 → 重新构建……

累不累？累。

LifeTrace 把它封装成 Skill 之后，就完全不一样了。对 Agent 说一句"请安装 xx，我想制作一张自己的人生地图，下面是我的人生经历"，它就自动帮你干完上面所有事。

因为它的底层思路是：网页交付的是"一个结果"，Skill 交付的是"持续生成结果的能力"。

数据用 JSON 或 CSV 就行，一个人物一个文件。比如刘备的事件是这样一段段记的：

{
  "person": { "name": "刘备", "dynasty": "东汉末年", "title": "昭烈帝" },
  "events": [
    { "year": 161, "place": "涿郡", "event": "刘备出生于涿郡", "confidence": "confirmed" },
    { "year": 194, "place": "徐州", "event": "接掌徐州", "confidence": "confirmed" }
  ]
}

然后一句命令就生成页面：

node life-trace.mjs build liu-bei.json demo.html

想换成别人？换一份数据文件，重新 build 一次就行。支持历史人物，也支持导入普通人的 JSON / CSV 数据，生成自己的数字人生地图。

解决什么问题

一句话总结：把"读文字传记"变成"看一张会动的人生地图"，让空间也能讲故事。

历史人物、偶像、家人、自己，都能做——不只是刘备；
不用会地图 API，不用改前端代码，喂数据就行；
地图跟时间轴、人物故事、人生阶段全部联动，像看纪录片一样；
生成的是单文件 HTML，本地双击就能预览，也能直接部署到静态托管，不用长期维护服务器。

怎么装（真的超简单）

项目地址：**https://github.com/LucianaiB2004/life-trace-amap**（MIT 开源协议，项目基于高德开放平台，目前 10 个 star）

第一步：准备一个高德 Key

注册登录高德开放平台（console.amap.com）；
在"应用管理"里创建一个应用；
添加一个"Web 端"的 Key，记下来。

第二步：装 Skill

对任意 AI 助手说一句：

请安装：https://github.com/LucianaiB2004/life-trace-amap。
我想制作一张自己的人生地图。
下面是我的人生经历。

第三步：配置 Key 并预览

Key 通过环境变量传入，不会写进任何文件（这样公开仓库也不会泄漏）：

export AMAP_KEY="你的高德 Web JS API Key"
export AMAP_SECURITY_KEY="对应的安全密钥"
node life-trace.mjs serve demo.html

浏览器打开就能看到刘备的人生轨迹在地图上播放了。

想真正看懂一个历史人物，或者想把自己这一路走来的地方，做成一张能回放的、看得见的地图——这个 Skill 值得一试。

它不会让你马上变成编程高手，但至少能让你把"读人物"这件事，变得像看纪录片一样直观。