说句话就能把旅行攻略变成精美网页:travel-plan-viz 连离线都帮你考虑好了

前言

上次朋友想规划一趟香港 4 天 3 晚，查了三个小时攻略——小红书翻到眼花、地图上标了一堆收藏点、航班酒店切了五六个 App。最后全散落在不同地方，到了香港还得反复翻聊天记录找"那天中午吃什么来着"。

我就想，如果有个 Agent 能把"帮我做香港 4 天 3 晚的旅行计划"这句话，直接变成一个能离线看的地图 + 时间轴页面，该多爽。

还真有。

travel-plan-viz

zexuanw958-svg/travel-plan-viz，中文名叫 Migo · 旅行领航，是一个 Claude Code / Codex 通用的 Skill。你告诉它目的地和天数，它联网调研、排好行程，吐出一个单文件 HTML——手机上打开就能用，文字部分离线可读，地图和图片联网时自动加载、断网时优雅降级不会破图。

这玩意最让我拍大腿的是它的架构思路——容易出错的机械逻辑固化成 JS 引擎，视觉表现每次交给"设计步骤"重新生成。地图渲染、坐标纠偏、提醒倒推这些坑，它用 map.js、reminders.js、validate.js 三个纯 JS 引擎写死了，不靠 Agent "自己觉得做对了"。而页面的颜值部分则每次重新生成，如果你装了 frontend-design 或花叔设计这类 External Skill，它会自动调用做出更好的效果——没装也能用内置美学准则出一份像样的页面。

说几个我觉得最实用的能力

交互地图不是贴张图。 用的是 Leaflet + 免费瓦片（不需要 API key），每个景点按序编号，之间虚线串联路线，点击直接跳到手机导航——iOS 走 Apple Maps，Android 走 geo: 深链。更细节的是它自动处理了 GCJ-02 到 WGS-84 的坐标纠偏，从高德/腾讯拿来的坐标不会漂到隔壁街上去。

出发前提醒倒推得明明白白。 你只要给一个出发日期，它自动算出"出发前 N 天该订什么"——页顶一个待办清单，时间轴上对应景点还挂 ⚠️ 徽标。比如你 7 月 15 号出发，它会告诉你"7 月 8 号前订好迪士尼门票""7 月 10 号前确认机场快线"。

行前须知按季节定制。 7 月去香港？它会提醒你台风季、带伞、室内外温差大、八达通在哪买。12 月去东京？羽绒服、暖宝宝、Suica 卡攻略全安排上。不是那种复制粘贴的通用模板。

航班和酒店不是瞎编的。 没订机票时给 3-5 个真实候选班次，订不上有备选。酒店按景点位置推荐住宿片区，每个片区经济/中档/高端各给选项。如果你另装了飞猪、高德、滴滴这些官方 Skill，它还会调用它们补充实时数据和"去预订/导航/叫车"链接——没装也照常走联网调研，页面不缺任何区块。

生成完会自己检查。 这是我最喜欢的设计——validate.js 在生成后机械校验：字段有没有缺、坐标有没有越界、经纬度有没有写反、必需区块有没有漏。Errors 必须修，不靠 Agent "自觉"，靠契约。

可持续迭代。 整个行程数据以 JSON 内嵌在 HTML 里。生成后不满意，把 HTML 丢回给 Claude 说"第三天太赶，把海洋公园挪到第四天"——它改的是数据、重新渲染，不会丢字段。

怎么装

把它链接到 Agent 的 skills 目录就行，Claude Code 和 Codex 都支持：

• Claude Code:ln -sfn "$(pwd)/travel-plan-viz" ~/.claude/skills/travel-plan-viz
• OpenAI Codex:ln -sfn "$(pwd)/travel-plan-viz" ~/.codex/skills/travel-plan-viz

用其他 Agent？这 skill 平台无关——核心就是一份指令文件加三个纯 JS 引擎，没有 skills 机制的 Agent 直接把 SKILL.md 当提示词喂给它就行。完整适配指南在仓库的 references/porting-to-other-agents.md。

❝

来源：zexuanw958-svg/travel-plan-viz star：246许可：MIT语言：JavaScript作者：中国开发者，中文友好

能派上用场的地方

• 说走就走的旅行规划，一句话从零到完整行程网页
• 已经做好攻略但散落在笔记/表格里，丢给它直接出可视化页面
• 多人出游，生成一个网页丢到群里，所有人手机都能打开看
• 行程出来后反复调整——改数据不丢字段，迭代零成本

最后

说到底，travel-plan-viz 做了一件很聪明的事：它没有试图让 Agent "更聪明"，而是把容易出错的活从 Agent 手里抢过来，用写死的 JS 引擎兜底。地图坐标不会漂、提醒不会算错、生成完还有一道机械校验——246 个 star 不算多，但这个方向是对的。

同类工具

在这个细分品类里——「Agent Skill 一键生成带交互地图和离线能力的单文件 HTML 旅行页面」——travel-plan-viz 目前是唯一成体系的方案。市面上其他旅行相关 Agent Skill 各有侧重但功能不同：

MissiaL/travel-search-ru

一个旅行搜索 Skill，帮 Agent 搜航班、旅行团、短途游，带回真实价格和预订链接。支持 Claude Code、Cursor、Gemini CLI 等 30+ Agent。8⭐。

❝

travel-search-ru 做的是信息搜索——告诉你有什么航班、多少钱； travel-plan-viz 做的是产物生成——把整个行程变成一个可交互的网页。一个是输入层，一个是输出层，不互斥，甚至可以搭配用。

相关资源

• 📦 zexuanw958-svg/travel-plan-viz：https://github.com/zexuanw958-svg/travel-plan-viz
• 🌐 官方样例（在线打开即看）：https://github.com/zexuanw958-svg/travel-plan-viz/tree/main/samples
• 🔌 跨 Agent 适配指南：https://github.com/zexuanw958-svg/travel-plan-viz/blob/main/references/porting-to-other-agents.md
• 🔗 Star History 趋势图：https://star-history.com/#zexuanw958-svg/travel-plan-viz&Date

❝

⚠️ 页面中所有信息（天气、航班、酒店、餐厅、价格等）均为 AI 基于公开资料整理的参考建议，可能不准确或已过时，请务必在官方渠道核实后再预订或前往。生成的 HTML 文字行程虽可离线阅读，但地图和图片需联网加载。

💡 点个关注，带你一起围观最前沿的 Agent 工具生态！

💬 评论区聊聊：你最想让 Agent 帮你搞定旅行里的哪个环节？订票比价、行程规划、还是到了当地找隐藏美食？我优先帮你测评踩坑。