travel-plan-viz

name travel-plan-viz description 把旅行行程做成美观、离线可读、手机优先的单文件 HTML（交互地图+每日时间轴+出发前订票提醒）。两种用法——只给目的地和天数让它帮你规划，或丢一份现成计划让它直接出页面。触发：旅行计划可视化、做旅行攻略网页、行程 HTML、travel plan visualization。 旅行计划可视化 把一趟旅行变成单文件 HTML 页面：交互地图、每日时间轴、出发前订票提醒。机械逻辑用自带引擎（ assets/map.js 、 assets/reminders.js ），美学交给设计步骤（ frontend-design / huashu-design ，或内置准则兜底）。 第一步：判断模式 用户 只给了目的地+天数 （如"香港 4 天 3 晚"）→ 模式 A（从零规划）。 用户 已提供行程 （文字或旧 HTML 文件）→ 模式 B（解析已有计划）。 模式 A：从零规划 读 references/research-guide.md ，联网调研目的地。 在对话里用 markdown 提出详实逐日计划（早/中/晚、景点、交通、住宿）。 与用户来回迭代，直到用户明确确认。 进入"调研补全 + 生成"。 模式 B：已有计划 解析用户给的行程。 若是本 skill 生成的旧 HTML ：直接解析其中 <script id="trip-data" type="application/json"> 的完整 trip JSON（数据与呈现分离，别去反解析渲染后的 DOM——必丢字段）；旧版页面没有这块时才从 DOM/文本提取。 顺手提建议（Agent 增值，但别硬来） ：把用户的计划对照"完善行程"的维度（行前须知/天气应对、提前订票项、点到点交通、节奏与缓冲、当地必吃、片区住宿是否合理等）快速体检，在 对话里 给 最多 3–4 条 具体、可选的优化建议。原则： 只挑 真实存在的缺口 ；计划本就完整就直说"挺完整"， 不要硬凑、不要说教、不要替用户重排行程 。 一句点出问题 + 一句给方向即可，简洁；建议默认口头给，保持 HTML 成品干净（用户想把建议也放进页面再加）。 这是我们区别于"纯提示词转 HTML"的地方——发挥 Agent 的判断力，但点到为止。 进入"调研补全 + 生成"（生成不被建议阻塞；采纳哪些由用户定）。 调研补全 + 生成 先判断第三方 skill 适配 （详见 references/research-guide.md 「第三方 skill 适配」节）：若当前 Agent 可调用用户 已装 的官方旅行 skill / MCP（飞猪、高德、腾讯地图、滴滴等）， 优先用它们拿对应数据 ——高德地理编码拿精确坐标（ 注意：高德/腾讯返回 GCJ-02 坐标，写入 trip 前必须用 map.js 的 gcj02ToWgs84 转成 WGS-84 ，否则在 OSM 地图上偏移几百米）、路线规划增强点到点交通、天气查询、生成专属地图/导航/叫车的行动链接；飞猪拿实时航班/酒店/门票及预订链接。把用到的来源登记进 trip.dataSources ，行动链接写入对应节点的 actionLink （ 链接只用官方返回的，绝不手拼 ）。 没有这些 skill 就全部走下面的静态调研 ，成品不缺区块。数据实时性/真实性由对方官方 skill 负责，本 skill 不背书、措辞中性。 按 references/research-guide.md 联网补全（官方 skill 未覆盖的部分）：坐标、真实图片 URL、评分、点评、营业时间/休息日、门票参考价、需提前订项及 leadDays ； 行前须知 （天气/台风/穿搭/支付/App/购票时机）、 点到点交通 （方式/票价/耗时）、 时令限定活动 、每餐 必点菜+参考价 ；航班给 3-5 个 待选班次 、酒店按 片区+价位 推荐、并准备 免责声明 与全程 贴士 。排程体现 天气/季节逻辑 （户外排凉爽时段）。 本 skill 自身不查实时票价 （实时数据只来自上面用户已装的官方 skill）。 组织成 assets/page-contract.md 里定义的 trip 数据结构（含可选的 dataSources 与节点 actionLink ）。 用 设计步骤 生成风格化 HTML： 优先 调用专业设计 skill—— frontend-design 或 huashu-design （花叔Design），任一已安装即用； 两者都没有 时，按 references/design-guidelines.md 的内置美学准则自己出。无论哪种方式都要严格遵守 assets/page-contract.md 的区块与约束： 内联 assets/map.js 、 assets/reminders.js 内容到 HTML（保证单文件）。 完整 trip 对象以 <script id="trip-data" type="application/json"> 内嵌进页面（后续迭代修改的数据源）。 页顶清单用 computeReminders + renderChecklistHTML 。 展示行前须知区块；航班区展示待选班次（已预订的高亮），酒店区按片区+价位展示，附近显著展示免责声明。 时间轴卡片展示营业时间/门票参考价/交通/时令活动等可选字段；展示每日餐饮（必点菜+价）、当日与全程贴士、单日二选一方案（若有）。 地图用 initTravelMap ，引入 Leaflet CDN 的 CSS/JS。 时间轴上 needsBooking 项插入 reminderBadgeHTML(leadDays) 。 可选适配元素 ：节点带 actionLink 时渲染「去预订/导航/叫车」按钮（缺则不渲染、不手拼）； dataSources 非空时中性注明数据来源。 每趟行程用不同配色。 保存为 <行程名>-旅行计划.html 到工作目录。 机械校验（必做） ：跑 node <skill目录>/assets/validate.js <生成的.html> ——校验 trip 必填字段、坐标越界/离群、必需区块标记、trip-data 内嵌。有 ERROR 必须修复后重跑至通过；WARNING 逐条人工判断。 告诉用户：之后可把该 HTML 文件丢回来，说"把第三天的 X 挪到第四天"，会在原结构上修改（直接改内嵌的 trip-data JSON 再重渲染）。 不做 本 skill 自身 不做：实时票价/机票价格查询、代订票、多语言 UI、后端。全程静态单文件。 注意边界：用户若另装了官方旅行 skill（飞猪/高德/腾讯地图/滴滴等），实时数据与「预订/导航/叫车」链接 由其提供、责任在其 ——本 skill 只适配呈现，并不改变上面「自身不做」的范围（仍不自查实时价、不代订）。