Travel Plan Viz

Name: Travel Plan Viz
Author: zexuanw958-svg

zexuanw958-svg/travel-plan-viz

1 installs
313 repo stars
Updated August 4, 2026
zexuanw958-svg/travel-plan-viz

Helps with productivity & planning tasks.

About

travel-plan-viz is a Claude Code skill for productivity & planning. It helps developers move faster with AI-assisted coding.

travel-plan-viz
Productivity & Planning
AI-coding skill

Travel Plan Viz by the numbers

1 all-time installs (skills.sh)
Ranked #2,476 of 3,282 Productivity & Planning skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/zexuanw958-svg/travel-plan-viz --skill travel-plan-viz

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/zexuanw958-svg/travel-plan-viz.svg)](https://skillselion.com/skills/zexuanw958-svg/travel-plan-viz)

Installs	1
repo stars	★ 313
Last updated	August 4, 2026
Repository	zexuanw958-svg/travel-plan-viz ↗

What it does

Helps with productivity & planning tasks.

Files

SKILL.mdMarkdownGitHub ↗

旅行计划可视化

把一趟旅行变成单文件 HTML 页面：交互地图、每日时间轴、出发前订票提醒。机械逻辑用自带引擎（assets/map.js、assets/reminders.js），美学交给设计步骤（frontend-design / huashu-design，或内置准则兜底）。

第一步：判断模式

用户只给了目的地+天数（如"香港 4 天 3 晚"）→ 模式 A（从零规划）。
用户已提供行程（文字或旧 HTML 文件）→ 模式 B（解析已有计划）。

模式 A：从零规划

1. 读 references/research-guide.md，联网调研目的地。 2. 在对话里用 markdown 提出详实逐日计划（早/中/晚、景点、交通、住宿）。 3. 与用户来回迭代，直到用户明确确认。 4. 进入"调研补全 + 生成"。

模式 B：已有计划

1. 解析用户给的行程（若是旧 HTML，从中提取结构化数据）。 2. 顺手提建议（Agent 增值，但别硬来）：把用户的计划对照"完善行程"的维度（行前须知/天气应对、提前订票项、点到点交通、节奏与缓冲、当地必吃、片区住宿是否合理等）快速体检，在对话里给最多 3–4 条具体、可选的优化建议。原则：

只挑真实存在的缺口；计划本就完整就直说"挺完整"，不要硬凑、不要说教、不要替用户重排行程。
一句点出问题 + 一句给方向即可，简洁；建议默认口头给，保持 HTML 成品干净（用户想把建议也放进页面再加）。
这是我们区别于"纯提示词转 HTML"的地方——发挥 Agent 的判断力，但点到为止。

3. 进入"调研补全 + 生成"（生成不被建议阻塞；采纳哪些由用户定）。

调研补全 + 生成

1. 按 references/research-guide.md 联网补全：坐标、真实图片 URL、评分、点评、营业时间/休息日、门票参考价、需提前订项及 leadDays；行前须知（天气/台风/穿搭/支付/App/购票时机）、点到点交通（方式/票价/耗时）、时令限定活动、每餐必点菜+参考价；航班给 3-5 个待选班次、酒店按片区+价位推荐、并准备免责声明与全程贴士。排程体现天气/季节逻辑（户外排凉爽时段）。不查实时票价。 2. 组织成 assets/page-contract.md 里定义的 trip 数据结构。 3. 用设计步骤生成风格化 HTML：优先调用专业设计 skill——frontend-design 或 huashu-design（花叔Design），任一已安装即用；两者都没有时，按 references/design-guidelines.md 的内置美学准则自己出。无论哪种方式都要严格遵守 assets/page-contract.md 的区块与约束：

内联 assets/map.js、assets/reminders.js 内容到 HTML（保证单文件）。
页顶清单用 computeReminders + renderChecklistHTML。
展示行前须知区块；航班区展示待选班次（已预订的高亮），酒店区按片区+价位展示，附近显著展示免责声明。
时间轴卡片展示营业时间/门票参考价/交通/时令活动等可选字段；展示每日餐饮（必点菜+价）、当日与全程贴士、单日二选一方案（若有）。
地图用 initTravelMap，引入 Leaflet CDN 的 CSS/JS。
时间轴上 needsBooking 项插入 reminderBadgeHTML(leadDays)。
每趟行程用不同配色。

4. 保存为 <行程名>-旅行计划.html 到工作目录。 5. 告诉用户：之后可把该 HTML 文件丢回来，说"把第三天的 X 挪到第四天"，会在原结构上修改。

不做

实时票价/机票价格、代订票、多语言 UI、后端。全程静态单文件。

// Leaflet 地图引擎。纯函数（buildNavLink/routeCoordinates）可单元测试；
// initTravelMap 需浏览器 + Leaflet (L)。浏览器与 Node 双用。

// HTML 转义，防止 XSS
function escapeHTML(s) {
  return String(s)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

// 生成跳转手机地图导航的通用 geo 链接
function buildNavLink(lat, lng, label) {
  return 'geo:' + lat + ',' + lng + '?q=' + lat + ',' + lng + '(' + encodeURIComponent(label) + ')';
}

// 从有序点位提取 [lat,lng] 数组，用于连线
function routeCoordinates(points) {
  return points.map(function (p) { return [p.lat, p.lng]; });
}

// 初始化地图：编号 divIcon 标记、按序虚线路线、点击弹出 名称+时间+导航链接。
// elementId: 容器 id；points: [{lat, lng, name, time}]（按行程顺序）
function initTravelMap(elementId, points) {
  var map = L.map(elementId);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
    maxZoom: 19,
  }).addTo(map);

  points.forEach(function (p, i) {
    var icon = L.divIcon({
      className: 'route-pin',
      html: '<span class="route-pin__num">' + (i + 1) + '</span>',
      iconSize: [28, 28],
      iconAnchor: [14, 14],
    });
    L.marker([p.lat, p.lng], { icon: icon }).addTo(map).bindPopup(
      '<b>' + (i + 1) + '. ' + escapeHTML(p.name) + '</b><br>'
      + (p.time ? escapeHTML(p.time) + '<br>' : '')
      + '<a href="' + buildNavLink(p.lat, p.lng, p.name) + '">导航</a>'
    );
  });

  var coords = routeCoordinates(points);
  if (coords.length > 1) {
    L.polyline(coords, { dashArray: '6 8', weight: 2 }).addTo(map);
  }
  map.fitBounds(coords.length ? coords : [[0, 0]], { padding: [30, 30] });
  return map;
}

if (typeof module !== 'undefined' && module.exports) {
  module.exports = {
    buildNavLink: buildNavLink,
    routeCoordinates: routeCoordinates,
    initTravelMap: initTravelMap,
  };
}

页面内容契约（给设计步骤）

生成 HTML 时，设计步骤（frontend-design / huashu-design / 内置美学准则，见 SKILL.md）负责布局与美学，但必须包含以下区块与数据结构，并接入 map.js / reminders.js 两个引擎脚本（用 <script> 内联到单文件 HTML）。

输入数据结构

const trip = {
  title: "香港 4 天 3 晚",
  startDate: "2026-07-15",           // ISO，用于提醒日期计算
  colorScheme: "<每趟行程不同，由设计步骤决定>",

  // 行前须知（按出发日期/季节定制）
  preTrip: {
    weather: {
      summary: "7 月平均 31°C / 26°C，午后 3–6 点常有短时强雷暴，上午与晚上多晴",
      typhoon: "7–9 月为台风季，出发前 3 天起关注香港天文台预警（8 号风球以上交通景点关闭）"
    },
    packing: "短袖短裤 + 轻薄防晒衣 + 防滑凉鞋 + 晴雨两用伞；室内空调极冷，务必带一件长袖外套",
    payment: "推荐电子八达通（Apple/华为钱包可加，内地卡可充值），另备 500–800 港币现金给传统茶餐厅/红色小巴",
    apps: ["MTR Mobile（港铁）", "香港天文台（天气）", "景点官方 App（如迪士尼查排队）"],
    ticketTip: "热门景点门票建议提前 3–7 天网上购买，避免现场排队"
  },

  // 航班：已预订高亮；未预订时给 3-5 个待选班次供自行核实
  flights: {
    booked: [ { label, code, time } ],
    candidates: [ { label, code, time, note } ]   // note 写机型/直飞或经停/大致价位区间
  },

  // 酒店：综合各景点位置，按"片区 + 价位"推荐
  hotelAreas: [
    {
      area: "尖沙咀",
      reason: "靠近星光大道、天星小轮，地铁交通便利",
      options: [
        { tier: "经济", name: "...", priceRange: "约 ¥500/晚", note: "..." },
        { tier: "中档", name: "...", priceRange: "约 ¥1000/晚", note: "..." },
        { tier: "高端", name: "...", priceRange: "约 ¥2000/晚", note: "..." }
      ]
    }
  ],

  disclaimer: "本页全部信息（天气、航班、酒店、餐厅、景点、门票、价格、营业时间、评分、活动等）均为 AI 基于公开资料整理的参考建议，可能不准确或已过时，不保证与实时情况一致；请务必在官方渠道 / 订票订房 / 地图等 App 上核实后再做决定或前往。",

  // 全程通用避坑贴士
  tips: [
    "户外活动尽量排在上午 9 点前与晚上 7 点后，下午雷暴时段安排室内（商场/博物馆/乐园）",
    "热门餐厅避开 12–13 点、18–20 点高峰；非高峰几乎不排队",
    "如遇台风预警（8 号风球以上），公共交通与景点会关闭，留酒店休息"
  ],

  reminders: [ { item: "迪士尼乐园门票", leadDays: 7 } ],  // 喂给 computeReminders

  days: [
    {
      date: "2026-07-15",
      weekday: "周二",
      theme: "港岛经典 · 都市印象",        // 当日主题（可选）
      tips: ["上午先排户外，午后转室内避雷暴"],   // 当日小贴士（可选）
      alternatives: [                          // 单日二选一（可选）
        { label: "方案A 香港迪士尼", summary: "暑期皮克斯限定，成人约 ¥580 起，港铁迪士尼线直达" },
        { label: "方案B 海洋公园",   summary: "水上乐园重开，联票约 ¥800，南港岛线海洋公园站直达" }
      ],
      slots: [   // 早/中/晚
        {
          period: "morning|noon|evening",
          name: "维多利亚港",
          time: "09:00–12:00",            // 可为单点或时间段
          lat: 22.293, lng: 114.169,
          photo: "https://...缩略图URL",
          rating: 4.7,
          review: "一句话点评",
          openingHours: "全天开放",        // 可选
          closedDays: "周一休",            // 可选，无则省略
          ticketPrice: "免费 / 缆车套票约 ¥88",  // 可选，参考价（非实时）
          transport: { mode: "天星小轮", fare: "约 ¥3", duration: "约 10 分钟" }, // 可选：如何到达本点
          seasonal: "暑期限定灯光秀（6/12–8/31）",  // 可选：时令活动
          needsBooking: false,
          leadDays: 0
        }
      ],
      dining: [   // 当日餐饮（替代旧的 meals.food）；每餐可带必点菜 + 参考价
        {
          meal: "午餐",
          place: "九记牛腩",
          hours: "12:30–22:30，周日休",
          dishes: [ { name: "清汤牛腩面", price: "¥68" }, { name: "咖喱牛腩面", price: "¥72" } ]
        }
      ]
    }
  ]
};

必须包含的区块（顺序可由美学微调，内容不可缺）

1. 页顶：行程标题 + 出发前待办清单。清单用 reminders.js 的 computeReminders(trip.startDate, trip.reminders) 再 renderChecklistHTML(...) 生成。 2. 行前须知区块：展示 preTrip 全部——天气与台风提醒、穿搭、支付、必备 App、购票时机。突出"日期/季节定制"。 3. 航班区：flights.booked 高亮标"已预订"；flights.candidates 列表展示 3-5 个待选班次，每项标"待选 · 请自行核实预订"并显示 note。 4. 酒店区（片区 + 价位）：遍历 hotelAreas，每片区显示 area + reason，其下按 经济/中档/高端 列出 options（名称 + priceRange + note）。 5. 免责声明：在航班/酒店区域附近显著展示 trip.disclaimer 全文。 6. 交互地图：<div id="map">，调用 initTravelMap('map', points)，points 为所有 slot 按行程顺序汇总的 {lat,lng,name,time}。引入 Leaflet CSS/JS（CDN）。 7. 每日时间轴：按天分组，显示当日 weekday/theme；早/中/晚分段，每个 slot 卡片含 photo、rating、review，并展示存在的可选字段（openingHours、closedDays、ticketPrice、transport 的方式/票价/耗时、seasonal）；needsBooking 为 true 时插入 reminderBadgeHTML(leadDays)。当日若有 tips、alternatives（二选一卡片）也要展示。 8. 每日餐饮：展示当日 dining，每餐含 place、hours 与必点菜（dishes 的名称 + price）。 9. 全程实用贴士：展示 trip.tips 列表。

硬性约束

单个 .html 文件，手机优先、可离线（图片为在线 URL，离线时可截图存档）。
响应式（手机和桌面都要好看，不能只做窄列）：手机端单列；桌面端（约 ≥768px）主容器加宽到 约 880–960px 居中，卡片列表（航班 / 酒店 / 行前须知 / 餐饮 / 景点）改用多列网格、地图区更宽，别在大屏上留成一条窄列两边大片空白。必须包含相应的 @media 断点。
map.js 与 reminders.js 的内容必须内联进 HTML（不外链本地文件），保证单文件自包含。
每趟行程用不同配色以便区分。
图片严禁变形：图片容器固定尺寸/比例，<img> 用 object-fit: cover + display:block（推荐绝对定位 inset:0 填满容器），只裁切不拉伸。
所有联网信息（含天气、餐厅、景点、评分，不止航班/酒店）尽量基于公开资料给真实可信信息，但全部为参考、可能不准或过时，必须展示覆盖全部信息的免责声明（第 5 区块）引导用户核实。
排程应体现天气/季节逻辑：把户外项目放在凉爽时段（上午、傍晚），午后高温/雷暴时段安排室内（仅在该目的地确有此类天气特征时）。
escapeHTML 函数在 map.js 与 reminders.js 中各自定义一份，属故意重复——两个文件须各自独立（Node require 与浏览器内联均不依赖另一方），维护时请勿合并去重。

// 出发前提醒：截止日期计算 + 渲染。浏览器与 Node 双用。

// startDateISO: 'YYYY-MM-DD'；items: [{item, leadDays}]
// 返回按 deadline 升序的 [{item, leadDays, deadline}]，deadline 为 'YYYY-MM-DD'
// 用 UTC 做日期运算，避免本地时区导致的偏移。
function computeReminders(startDateISO, items) {
  return items
    .map(function (it) {
      var d = new Date(startDateISO + 'T00:00:00Z');
      d.setUTCDate(d.getUTCDate() - it.leadDays);
      return { item: it.item, leadDays: it.leadDays, deadline: d.toISOString().slice(0, 10) };
    })
    .sort(function (a, b) {
      return a.deadline < b.deadline ? -1 : a.deadline > b.deadline ? 1 : 0;
    });
}

function escapeHTML(s) {
  return String(s)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

function renderChecklistHTML(reminders) {
  var lis = reminders.map(function (r) {
    return '<li class="todo-item">'
      + '<input type="checkbox"> '
      + '<span class="todo-deadline">' + r.deadline + '前</span> '
      + '<span class="todo-text">' + escapeHTML(r.item) + '（建议提前' + r.leadDays + '天）</span>'
      + '</li>';
  }).join('');
  return '<ul class="pretrip-todo">' + lis + '</ul>';
}

function reminderBadgeHTML(leadDays) {
  return '<span class="reminder-badge">⚠️ 建议提前' + leadDays + '天订</span>';
}

if (typeof module !== 'undefined' && module.exports) {
  module.exports = {
    computeReminders: computeReminders,
    renderChecklistHTML: renderChecklistHTML,
    reminderBadgeHTML: reminderBadgeHTML,
  };
}

跨 Agent 适配指南

本 skill 设计为平台无关：核心是一份指令文档（SKILL.md）+ 两个纯 JavaScript 引擎（浏览器/Node 双用）+ 几份参考文档。没有绑定任何单一厂商的专有能力。

它需要宿主 Agent 提供什么能力

能力	用途	没有怎么办
联网搜索 / 网页抓取	调研坐标、图片、天气、营业时间等	退化为模型已知信息（要标注可能过时）
写文件	输出 `.html`	直接把 HTML 文本返回给用户
读本仓库文件	读 assets/ 引擎与契约	把引擎内容粘进 prompt
跑浏览器/打开文件（可选）	验证页面效果	让用户自己打开
调用设计类 skill（可选）	更好的美学	用 `design-guidelines.md` 内置准则

三种宿主，三种装法

1. Claude Code —— 放进 skills 目录：

ln -sfn "<repo>/travel-plan-viz" ~/.claude/skills/travel-plan-viz

2. OpenAI Codex —— 同样有 skills 目录：

ln -sfn "<repo>/travel-plan-viz" ~/.codex/skills/travel-plan-viz

（若两端共用一份源，可只放一处真目录、另一处软链过去。）

3. 其他 Agent（无 skills 机制） —— 把 SKILL.md 的内容作为系统/任务指令喂给它，并保证它能读到 assets/、references/ 下的文件（或一并粘贴）。可直接用下面的「通用适配提示词」。

通用适配提示词（粘给任意 Agent）

你将扮演一个「旅行计划可视化」工具。请先阅读我提供的这套文件并严格遵循：
- SKILL.md：工作流（判断模式 → 联网调研 → 用设计步骤生成单文件 HTML）
- assets/page-contract.md：输出 HTML 必须包含的区块与 trip 数据结构
- assets/map.js、assets/reminders.js：必须原样内联进输出 HTML 的引擎（地图、提醒）
- references/research-guide.md：联网调研规范（图片用 Special:FilePath 且校验 200；不查实时票价；全覆盖免责声明）
- references/design-guidelines.md：没有专业设计 skill 时的内置美学准则

请用你自身的联网搜索、文件写入能力执行。若你没有某项能力（如不能联网），就用已知信息但在页面免责声明里说明，绝不编造可验证的事实（如不可加载的图片链接）。
开始前先用一句话复述你将如何执行，确认理解无误。

适配时最容易翻车的点

图片：必须用 https://commons.wikimedia.org/wiki/Special:FilePath/<文件名>?width=N 并校验返回 200，别让模型手拼哈希直链。
单文件自包含：map.js/reminders.js 内容要内联进 HTML，不要外链本地文件。
免责声明：覆盖全部联网信息（天气/餐厅/评分…），不只是机票酒店。
不查实时价：机票/门票只给参考区间。

联网调研指南

生成页面前，用你所在 Agent 的联网搜索 / 网页抓取工具补全数据（如 Claude Code 的 WebSearch/WebFetch、Codex 的联网能力等）。不查实时票价/机票价格（易过期出错）。

每个景点/酒店需采集

坐标（lat/lng）：搜索"<名称> 经纬度 / coordinates"，或从地图类结果取。
真实图片 URL（务必能加载）：
不要手拼 upload.wikimedia.org/.../thumb/X/XX/... 这种带哈希前缀的直链——哈希猜错就 400/404。
用稳健形式：https://commons.wikimedia.org/wiki/Special:FilePath/<URL编码的文件名>?width=600，它会自动重定向到正确缩略图，无需哈希。文件名取自该图在 Commons 的真实文件名。
每个图片 URL 都要 `curl -s -o /dev/null -w "%{http_code}" -L <url>` 验证返回 200 才用；非 200（文件不存在等）就换一张真实存在的图，实在没有就留空走 onerror 降级，绝不放已知打不开的链接。
评分：来自点评类来源的概览分（注明是概览，非实时）。
一句话点评：综合调研后用一句中文概括亮点。
营业时间 + 休息日（如"12:30–22:30，周日休"）：搜索"<名称> 营业时间 opening hours"。
门票参考价（如有）：给区间或单价，注明为参考、非实时。

行前须知（按出发日期/季节定制）

天气：搜索"<城市> <出发月份> 天气平均气温降雨"，给气温区间、降雨规律（如午后雷暴）、台风/极端天气季节提醒。
穿搭：据天气给具体建议（含室内空调偏冷等本地常识）。
支付：当地主流支付方式（如香港八达通）、是否需备现金。
必备 App：交通、天气、热门景点排队等。
购票时机：热门景点建议提前几天网上购票。

点到点交通

为关键行程点给出"如何到达"：方式（地铁/巴士/缆车/轮渡/步行）、参考票价、耗时。搜索"<A> 到 <B> 怎么走交通"。机场往返单独给（如机场快线 vs 巴士的价/时对比）。

时令限定活动

搜索"<城市> <出发月份> 活动 / 限定 / 展览"，标注起止日期；对应景点 slot 写入 seasonal。

天气驱动排程

若目的地该季节有明显午后高温/雷暴/严寒等特征：把户外项目排在凉爽时段（上午、傍晚），午后/极端时段安排室内（商场、博物馆、乐园），并在 tips 与当日 tips 中说明。

餐饮（每餐给必点菜 + 参考价）

每天给 1–2 餐具体推荐：餐厅名 + 营业时间/休息日 + 2–3 个必点菜及参考价。搜索"<城市> <区域> 必吃推荐招牌菜"。

每日当地美食

搜索"<城市> 必吃 / 当地特色美食"，每天给 1 条具体推荐。

航班（待选，不查实时价）

用户未预订时，给 3-5 个待选班次（不要只给一个，万一订不上有备选）。
搜索"<出发地>到<目的地> 航班航空公司"，给真实存在的航司+航班号+大致时刻；note 写机型/是否直飞/经停/大致价位区间（区间即可，不查实时价）。
已预订的（用户告知）单独高亮，标"已预订"。

酒店（按片区 + 价位推荐，不指定单一酒店）

先看本次行程各景点的地理分布，综合选 1-2 个建议住宿片区（如香港多落在尖沙咀/中环/铜锣湾），写明推荐理由（离哪些点近、交通如何）。
每个片区按 经济 / 中档 / 高端 三档各给 1 个真实存在的代表酒店：名称 + 大致每晚价位区间 + 一句话说明（位置/特点）。价位为区间参考，非实时房价。

免责声明（必给，覆盖全部信息）

所有联网整理的信息（天气、航班、酒店、餐厅、景点、门票、价格、营业时间、评分、活动等）都可能不准或已过时，不只是机票/酒店。页面必须给出覆盖全部信息的免责声明，提示用户到官方/订票订房/地图等 App 核实后再决定。尽量给真实可信信息，但不承诺与实时一致。

提前预订项与提前天数（喂给 reminders）

按经验 + 联网确认，标记需提前订的项目并给 leadDays：

类型	建议提前天数	说明
机票（国内）	30	越早越便宜
机票（国际）	45	含签证缓冲请另列
跨城高铁	15	放票后尽早
热门景点/限流（如长白山、故宫）	7	官方放票窗口
网红餐厅/演出	3	需预约
酒店（旺季）	30	旺季房紧

实际数值应结合目的地与季节联网核实后微调，并在对话里向用户说明依据。

Related skills

Grill MeHave an agent relentlessly pressure-test their plan or design until every decision branch is resolved and shared understanding is reached.691k196k

Grill With DocsPressure-test architecture decisions against their live codebase and living documentation before writing production code.585k196k

Lark CalendarLet their coding agents read, create, and manage events inside Lark (Feishu) Calendar directly from natural language instructions.493k

Lark ImLet their coding agent send instant notifications, post updates, and receive commands directly inside Lark (Feishu) workspaces.493k

Lark ContactLet their AI coding agents read and write contacts, send messages, and manage user data inside Lark (Feishu).493k

Lark AttendanceAutomatically fetch and report daily attendance data from Lark (Feishu) into their own tools or agents.493k

Productivity & Planningpm

Travel Plan Viz

About

Travel Plan Viz by the numbers

Add your badge

What it does

Files

旅行计划可视化

第一步：判断模式

模式 A：从零规划

模式 B：已有计划

调研补全 + 生成

不做

页面内容契约（给设计步骤）

输入数据结构

必须包含的区块（顺序可由美学微调，内容不可缺）

硬性约束

内置美学准则（无 frontend-design 时的兜底）

配色

排版与布局

细节

跨 Agent 适配指南

它需要宿主 Agent 提供什么能力

三种宿主，三种装法

通用适配提示词（粘给任意 Agent）

适配时最容易翻车的点

联网调研指南

每个景点/酒店需采集

行前须知（按出发日期/季节定制）

点到点交通

时令限定活动

天气驱动排程

餐饮（每餐给必点菜 + 参考价）

每日当地美食

航班（待选，不查实时价）

酒店（按片区 + 价位推荐，不指定单一酒店）

免责声明（必给，覆盖全部信息）

提前预订项与提前天数（喂给 reminders）

Related skills

About

Travel Plan Viz by the numbers

Add your badge

What it does

Files

旅行计划可视化

第一步：判断模式

模式 A：从零规划

模式 B：已有计划

调研补全 + 生成

不做

页面内容契约（给设计步骤）

输入数据结构

必须包含的区块（顺序可由美学微调，内容不可缺）

硬性约束

内置美学准则（无 frontend-design 时的兜底）

配色

排版与布局

细节

跨 Agent 适配指南

它需要宿主 Agent 提供什么能力

三种宿主，三种装法

通用适配提示词（粘给任意 Agent）

适配时最容易翻车的点

联网调研指南

每个景点/酒店需采集

行前须知（按出发日期/季节定制）

点到点交通

时令限定活动

天气驱动排程

餐饮（每餐给必点菜 + 参考价）

每日当地美食

航班（待选，不查实时价）

酒店（按片区 + 价位推荐，不指定单一酒店）

免责声明（必给，覆盖全部信息）

提前预订项与提前天数（喂给 reminders）

Related skills

This week in AI coding