👋 我是 Migo · 你的旅行领航员 —— 候鸟天生会规划路线、掐准时间

🗺️ Migo · 旅行领航

travel-plan-viz

把一趟旅行变成一个美观、可离线、手机优先的单文件 HTML 页面

交互地图 · 每日时间轴 · 出发前订票提醒 · 行前须知 · 待选航班 · 片区价位酒店

一个 Claude Code / Codex 通用 Skill（也可适配其他 Agent）

✨ 特点 · 🚀 安装 · 🏗️ 原理 · ⭐ Star

中文 · English

⭐ Star History

🌏 中文

这是什么

travel-plan-viz 是一个 Claude Code / Codex 通用 Skill（也可适配其他 Agent）。你只要说一句"帮我做香港 4 天 3 晚的旅行计划"，它就会联网调研、排好行程、生成一个精美的单文件 HTML 网页——手机上随时打开、离线可看、整页可截图存相册。

灵感来自社区的 "vibe coding 旅游攻略" 玩法，升级为一个正式、可复用、把易错逻辑固化下来的 Skill。

✨ 特点

🏗️ 工作原理

混合架构——易错的机械逻辑固化为可复用引擎，视觉表现每次交给"设计步骤"重新生成：

• assets/map.js：Leaflet 地图引擎（编号标记、路线、导航深链）
• assets/reminders.js：提醒引擎（截止日期计算、清单/徽标渲染）
• assets/page-contract.md：内容契约，告诉设计步骤每个区块要哪些数据
• references/research-guide.md：联网调研指南（坐标/图片/营业时间/天气/交通…，含图片必须校验可加载、票价不查实时）
• references/design-guidelines.md：内置美学准则（无外部设计 skill 时的兜底）

设计步骤可插拔、无硬依赖：如果你装了 frontend-design 或 huashu-design（花叔Design）这类设计 skill，会自动调用、效果更佳；都没装也能用内置美学准则出一份像样的页面。所以本 skill 可独立安装，不强制先装别的。

🚀 安装（跨 Agent）

把 skill 链接到对应 Agent 的 skills 目录：

# 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，把 travel-plan-viz/SKILL.md 当作指令喂给它即可。完整适配方法与「通用适配提示词」见 travel-plan-viz/references/porting-to-other-agents.md。

💬 用法

在 Claude Code / Codex 里直接说：

帮我做香港 4 天 3 晚的旅行计划          # 模式 A：从零规划

这是我的行程<贴上文字/HTML>，帮我做成网页   # 模式 B：已有计划

生成后，把 HTML 文件丢回给 Claude 还能继续改，例如："第三天太赶，把 X 挪到第四天"。

🖼️ 样例

samples/ 目录下有现成产物，浏览器直接打开：

• chengdu-4d3n-real.html —— 成都 4 天 3 晚（模式 A：只给目的地+天数，从零规划，含都江堰/青城山一日 + 二选一方案）
• hongkong-4d3n-real.html —— 香港 4 天 3 晚（真实联网数据）
• shenzhen-3d2n-real.html —— 深圳 3 天 2 晚（只给天数，从零生成）
• tokyo-5d4n-real.html —— 东京 5 天 4 晚（模式 B：粗略计划 + Agent 建议后生成）

📁 项目结构

travel-plan-viz/
  SKILL.md              # 工作流编排：判断模式 → 调研 → 生成
  assets/
    map.js              # Leaflet 地图引擎（已单测）
    reminders.js        # 提醒引擎（已单测）
    page-contract.md    # 给设计步骤的内容契约
  references/
    research-guide.md   # 联网调研指南
    design-guidelines.md # 内置美学准则（无外部设计 skill 时兜底）
    porting-to-other-agents.md # 跨 Agent 适配指南 + 通用提示词
samples/                # 生成的示例页面
test/                   # 引擎单元测试（node --test）
docs/superpowers/       # 设计文档与实现计划

🧪 测试

node --test test/*.test.js

⚠️ 免责声明

页面中所有信息（天气、航班、酒店、餐厅、门票、价格、营业时间、评分、活动等）均为 AI 基于公开资料整理的参考建议，可能不准确或已过时，请务必在官方渠道核实后再预订或前往。

📄 许可证

MIT —— 随意使用、修改、商用，保留版权声明即可。欢迎 issue / PR。

🌐 English

What is this

travel-plan-viz is a Claude Code / Codex Skill (and portable to other agents). Just say "plan me a 4-day Hong Kong trip" and it will research online, build the itinerary, and generate a polished single-file HTML page — mobile-first, openable offline, screenshot-friendly.

Inspired by the community "vibe-coding travel guide" trick, turned into a proper, reusable Skill that hard-codes the error-prone bits.

✨ Features

🏗️ How it works

A hybrid architecture — error-prone mechanics are baked into reusable engines, while the visual design is regenerated each time by a "design step":

• assets/map.js — Leaflet engine (numbered markers, route, navigation deep links)
• assets/reminders.js — reminder engine (deadline math, checklist/badge rendering)
• assets/page-contract.md — content contract telling the design step what each block needs
• references/research-guide.md — web-research guide (coords/photos/hours/weather/transport…, images must be verified loadable, no realtime pricing)
• references/design-guidelines.md — built-in aesthetic guidelines (fallback when no external design skill is present)

The design step is pluggable, with no hard dependency: if you have a design skill like frontend-design or huashu-design, it's used automatically for better results; without any, the built-in guidelines still produce a presentable page. So this skill installs standalone — no need to install anything else first.

🚀 Install (cross-agent)

Link the skill into your agent's skills directory:

# 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

Using another agent? This skill is platform-agnostic — it's just an instruction file plus two vanilla-JS engines. For agents without a skills mechanism, feed travel-plan-viz/SKILL.md as instructions. Full porting steps and a ready-to-paste adaptation prompt: travel-plan-viz/references/porting-to-other-agents.md.

💬 Usage

In Claude Code or Codex, just say:

Plan me a 4-day, 3-night trip to Hong Kong       # Mode A: plan from scratch

Here is my itinerary <paste text/HTML>, make a page   # Mode B: existing plan

After it's generated, hand the HTML back to Claude to keep editing, e.g. "Day 3 is too packed, move X to Day 4."

🖼️ Samples

Ready-made outputs in samples/, open them in a browser:

• chengdu-4d3n-real.html — Chengdu, 4D3N (Mode A: planned from just destination + days; Dujiangyan/Mt. Qingcheng day trip + either-or options)
• hongkong-4d3n-real.html — Hong Kong, 4D3N (real researched data)
• shenzhen-3d2n-real.html — Shenzhen, 3D2N (generated from days only)
• tokyo-5d4n-real.html — Tokyo, 5D4N (Mode B: rough plan + agent suggestions)

📁 Structure

travel-plan-viz/
  SKILL.md              # workflow: detect mode → research → generate
  assets/
    map.js              # Leaflet engine (unit-tested)
    reminders.js        # reminder engine (unit-tested)
    page-contract.md    # content contract for the design step
  references/
    research-guide.md   # web-research guide
    design-guidelines.md # built-in aesthetics (fallback w/o external design skill)
    porting-to-other-agents.md # cross-agent porting guide + adaptation prompt
samples/                # generated example pages
test/                   # engine unit tests (node --test)
docs/superpowers/       # design specs & implementation plans

🧪 Tests

node --test test/*.test.js

⚠️ Disclaimer

All in