旅行碎片变成可点击的故事地图

来源与验证说明

• 类型：Cogine 原创实验；2026-10-11。
• 依据：OpenClaw workspace 文件产物与浏览器查看能力；这个具体故事流程由本项目设计。
• 验证状态：提供虚构输入和可检查的产物约定；不把示例页面当成 OpenClaw 端到端实测。
• 与旧旅行规划案例的区别：整理已经发生的旅行，输出可交互的纪念物，而非生成出发前行程。

前置条件与成本

能读写当前工作目录的 Agent 和普通浏览器即可先做文字版。照片是可选项；无照片时用自己生成的简单图形，不虚构实拍照片。模型调用成本按自己的服务计费；初版不需要地图 API 或定位权限。

快速体验版（先跑一轮）

下面全部是虚构练习数据。地点间的线条只表示故事顺序，不表示真实经纬度或路线。

请把下面旅行碎片做成一个可在浏览器打开的单文件 story-map.html。
输入：
1. 海边栈道｜上午｜风很大，我们把咖啡杯抱得很紧。照片说明：两只纸杯。
2. 巷口书店｜午后｜找到一本封面掉色的旧书。照片说明：木书架。
3. 山顶观景台｜傍晚｜没看到日落，但看到了云的另一面。照片说明：一片云。

页面要求：
- 标题“没有日落，也很好的一天”，标注这些是虚构演示素材。
- 左侧三个地点按钮；点击后右侧切换该地点的时间、原文、照片说明。
- 用 SVG 做抽象路线图，明确写“故事顺序示意”，不要猜经纬度。
- 没有真实照片就显示图形占位，并注明“示意”。
- 键盘也能选地点，当前地点要有明显状态。
- 所有样式与脚本放在文件内，不加载第三方地图、字体或跟踪脚本。
- 完成后给出文件位置，打开页面并实际点三个地点检查文字是否切换。
仅使用本次输入；不要读取我的相册或上传素材。

成功标准与失败排查

打开或下载静态参考样例。这是 Cogine 手写的离线页面，用来展示最小产物与交互要求；不代表 OpenClaw 已执行本提示词。

• 三个按钮能切换内容，键盘可操作。
• 文本与输入一致，示意图和真实照片的身份明确。
• 断网后仍能打开页面，不依赖外部 CDN。
• 页面不切换：检查按钮事件和浏览器控制台，把具体报错交给 Agent 修复。
• 想用真实地图：先由用户提供地点坐标与地图服务，再单独增加；不要从照片里猜地点。
• 不支持文件工具：先输出 HTML 代码，手动保存并打开，也可验证最小产物。

延伸玩法

同一结构可以做城市散步、展览观后记、孩子的自然观察册。使用真实照片时先选择可以公开的素材；对外发布前检查地理位置和人物信息。

引用来源

• OpenClaw Agent workspace
• OpenClaw Browser