Travel Planner — 旅行路线规划与攻略生成

根据用户的旅行需求，自动研究目的地信息，规划详细行程，并生成一份精美的 HTML 旅行攻略页面。

核心工作流

Phase 1：需求确认（唯一需要用户交互的步骤）

收到旅行需求后，用 ask_followup_question 确认以下关键信息（如果用户已经给出部分信息则跳过对应项）：

目的地：去哪里？（城市/景区/区域）
出行日期 & 天数：什么时候出发？玩几天？
出行方式：自驾 / 高铁 / 飞机 / 房车？
出行人员：几人同行？有老人/小孩？
偏好侧重：自然风光 / 人文历史 / 美食 / 亲子 / 摄影？
预算范围（可选）：大致预算？

信息确认后，后续全部自动执行，不再停下来等用户。

Phase 2：信息研究（自动执行）

信息研究分两轮进行，小红书优先，公开搜索补充：

第一轮：小红书深度研究（优先执行，不可跳过）

强制执行规则：小红书搜索是本 Skill 的核心差异化能力，禁止因为上一次对话中 MCP 曾超时/失败就直接跳过。每次新攻略都必须重新尝试小红书搜索。

执行前置检查（按顺序）：

调用 check_login_status 检查小红书登录状态
如果未登录 → 调用 get_login_qrcode 让用户扫码，等待登录成功后继续
如果已登录 → 直接开始搜索
仅当以下所有条件都满足时才可跳过小红书：(a) check_login_status 工具本身不可用（MCP server 未运行）；(b) 尝试提醒用户启动 xiaohongshu-mcp 服务但用户明确拒绝
如果单次搜索超时，至少重试 2 次（换关键词或缩短关键词），而非立即放弃整个小红书研究

使用小红书 MCP 工具（search_feeds + get_feed_detail）收集真实用户反馈：

搜索策略：对目的地进行多维度关键词搜索，每个维度至少搜 1-2 次：
- "{目的地} 攻略 {天数}天" — 获取行程安排和路线规划
- "{目的地} 避坑踩雷" — 获取真实踩坑经验和避雷指南
- "{目的地} 费用花费预算" — 获取真实花费明细和预算参考
- "{目的地} 住宿酒店推荐" — 获取住宿真实体验和性价比评价
- "{目的地} 美食餐厅" — 获取美食推荐和真实口碑
- "{目的地} 拍照打卡" — 获取拍照机位和最佳打卡时间（适合情侣/摄影偏好）
深挖高质量笔记：对搜索结果中点赞/收藏高的笔记（前3-5篇），获取帖子详情 + 评论区内容：
- 帖子正文：提取具体价格、路线、时间安排、真实体验
- 评论区（关键信息源）：评论区往往有更新的价格信息、纠错补充、个人经验、替代方案
- 记录信息来源（小红书笔记ID/作者）以备引用
小红书信息提取重点：
- 真实花费金额（机票实付、酒店实付、活动实付等）
- 踩坑经验和避雷提醒（这是公开搜索很难获取的）
- 隐藏玩法和小众景点推荐
- 最新政策变化（签证、航线、景区规则等）
- 拍照机位和最佳时间段
- 评论区的价格更新和纠错信息

第二轮：公开网络搜索（补充验证）

使用 web_search 和 web_fetch 补充以下内容（与小红书信息交叉验证）：

景点信息：核心景点列表、门票价格、开放时间、推荐游览时长
交通信息：到达方式、城市间交通、停车场信息
住宿推荐：各区域住宿推荐和价位参考
美食推荐：当地特色美食、推荐餐厅
实用信息：天气、注意事项、必备物品
预约信息：哪些景点需要提前预约、预约渠道
预算研究：
- 机票：搜索携程/去哪儿/南航等平台，查对应出发日期的往返机票价格区间（经济舱 & 商务舱）
- 酒店：搜索携程/Booking/Agoda，根据目的地和天数查每晚住宿价格区间（经济型/舒适型/豪华型）
- 景点门票：汇总各景点门票费用
- 餐饮预算：根据当地物价水平估算每人每日餐饮费
- 当地交通：出租车/包车/快艇/公共交通等费用
- 签证/保险：签证费用（如需）、旅行保险费用
- 其他：通讯（电话卡/WiFi）、购物/纪念品预留

信息融合原则

价格数据：小红书真实花费 > 携程等平台标价 > 攻略博客估算
踩坑信息：小红书评论区 > 小红书正文 > 公开搜索
路线规划：综合小红书高赞攻略 + 公开搜索的地理/交通信息
时效性：优先采用最近 6 个月内的小红书笔记数据
在攻略页面中标注关键信息来源（如"据小红书用户@xxx实测"）

Phase 3：路线规划（自动执行）

根据研究结果规划路线：

路线分段：按地理位置和主题将行程分为若干段
每日安排：每天 3-5 个景点/活动，合理安排时间
时间分配：每个景点标注建议游览时间段（如 09:00-11:30）
主题命名：每天一个主题（如"古镇寻韵"、"湿地观鸟"）
亮点标注：每天标注 3-5 个"今日亮点"

Phase 4：生成 HTML 攻略页面（自动执行）

使用下方的 HTML 模板结构生成完整的攻略页面。

文件命名规则：{目的地拼音}_travel_guide.html（如 lushan_travel_guide.html）

保存路径：保存到用户工作目录。

生成完成后：使用 preview_url 或 open_result_view 展示给用户。

HTML 模板设计规范

整体风格

配色方案：暖色调为主
- 主色：#8B6914（深金棕）
- 辅色：#D4A84B（暖金）
- 背景：#FDF8F0（奶白色）
- 卡片背景：#FFFFFF
- Day 标题背景：#F5E6D0（浅暖棕）
- 标签推荐：#E8F5E9 绿底 / #FFF3E0 橙底 / #E3F2FD 蓝底
字体："PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
圆角：卡片 12px，标签 6px
阴影：0 2px 12px rgba(0,0,0,0.08)
最大宽度：800px 居中

页面结构（从上到下）

1. Hero 区域

┌─────────────────────────────────────────┐
│  🏔️ 目的地大图背景（渐变遮罩）          │
│                                         │
│  [路线标题]                              │
│  [一句话描述]                            │
│                                         │
│  📅 日期范围  📏 总里程  🎯 N段主题  ⚠️ 重点提醒 │
└─────────────────────────────────────────┘

使用 CSS 渐变模拟大图效果（不依赖外部图片）
底部用 flexbox 排列 4 个关键指标

2. 路线总览

┌─────────────────────────────────────────┐
│  路线总览                                │
│                                         │
│  [段1] ─→ [段2] ─→ [段3] ─→ [终点]      │
│                                         │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐   │
│  │ 段1  │ │ 段2  │ │ 段3  │ │ 段4  │   │
│  │ 特色 │ │ 特色 │ │ 特色 │ │ 特色 │   │
│  │ 亮点 │ │ 亮点 │ │ 亮点 │ │ 亮点 │   │
│  └──────┘ └──────┘ └──────┘ └──────┘   │
└─────────────────────────────────────────┘

顶部：线性路线图（圆点 + 连接线 + 地名）
下方：每段用卡片展示特色和亮点

3. 每日行程卡片（重复 N 天）

┌─────────────────────────────────────────┐
│  Day X · M月D日 · 主题：[主题名]         │
├────────────────────────┬────────────────┤
│  ⏰ 09:00-11:30        │                │
│  📍 景点名称  🎫 门票   │   🌟 今日亮点   │
│  简短描述              │   · 亮点1       │
│                        │   · 亮点2       │
│  ⏰ 14:00-16:00        │   · 亮点3       │
│  📍 景点名称  🎫 门票   │                │
│  简短描述              │   📸 重要提醒    │
│                        │   · 提醒1       │
│  ⏰ 16:30-18:00        │                │
│  📍 景点名称           │                │
│  简短描述              │                │
└────────────────────────┴────────────────┘

左侧 70%：时间线式排列（竖线 + 圆点 + 时间 + 景点信息）
右侧 30%：今日亮点 + 重要提醒侧边栏
景点名后可加标签：推荐 免费 需预约 拍照圣地
门票信息用小标签展示

4. 预约与行前准备

┌─────────────────────────────────────────┐
│  🎫 预约与行前准备                       │
│                                         │
│  ┌─预约购票──┐ ┌─交通前往──┐ ┌─预约提醒──┐│
│  │ 景点 门票 │ │ 交通方式  │ │ 预约渠道  ││
│  │ 景点 门票 │ │ 耗时/价格 │ │ 注意事项  ││
│  └──────────┘ └──────────┘ └──────────┘│
└─────────────────────────────────────────┘

三列布局（移动端堆叠）
预约购票：表格形式（景点、是否需预约、参考价格）
交通前往：列出各种到达方式
预约提醒：预约渠道和注意事项

5. 实用建议

┌─────────────────────────────────────────┐
│  🎒 实用建议                             │
│                                         │
│  ┌─住宿推荐──┐ ┌─美食推荐──┐ ┌─餐饮安排──┐│
│  │ 区域推荐  │ │ 特色美食  │ │ 餐厅推荐  ││
│  │ 价位参考  │ │ 必吃清单  │ │ 觅食建议  ││
│  └──────────┘ └──────────┘ └──────────┘│
└─────────────────────────────────────────┘

6. 预算预估（新增重要板块）

┌─────────────────────────────────────────┐
│  💰 预算预估（X人 / Y天）                │
│                                         │
│  ┌─费用明细表─────────────────────────┐  │
│  │ 项目      | 单价参考  | 小计(X人)  │  │
│  │ 往返机票  | ¥XXX/人   | ¥XXXX     │  │
│  │ 酒店住宿  | ¥XXX/晚   | ¥XXXX     │  │
│  │ 景点门票  | (见明细)   | ¥XXXX     │  │
│  │ 餐饮      | ¥XXX/人/天| ¥XXXX     │  │
│  │ 当地交通  | (见明细)   | ¥XXXX     │  │
│  │ 签证/保险 | ¥XXX/人   | ¥XXXX     │  │
│  │ 其他      | 预留       | ¥XXXX     │  │
│  ├───────────┴──────────┴───────────┤  │
│  │ 合计（经济型）        ≈ ¥XXXXX     │  │
│  │ 合计（舒适型）        ≈ ¥XXXXX     │  │
│  │ 合计（豪华型）        ≈ ¥XXXXX     │  │
│  └─────────────────────────────────┘  │
│                                         │
│  ┌─省钱小贴士─────────────────────────┐  │
│  │ · 提前XX天订机票更便宜              │  │
│  │ · 淡季/错峰价格差异提醒             │  │
│  │ · 优惠渠道/套餐推荐                 │  │
│  └─────────────────────────────────┘  │
│                                         │
│  ⚠️ 以上价格为XX年X月参考价，实际以出行时为准│
└─────────────────────────────────────────┘

费用明细表用表格展示，清晰对齐
根据人数和天数自动计算小计
提供三档预算总计（经济/舒适/豪华），用不同颜色背景区分
省钱贴士用和侧边栏类似的样式
底部加价格免责声明

7. 出发前最后检查

┌─────────────────────────────────────────┐
│  ✅ 出发前最后检查                       │
│                                         │
│  ┌─注意事项──────┐ ┌─携带清单──────┐     │
│  │ · 注意1       │ │ · 物品1       │     │
│  │ · 注意2       │ │ · 物品2       │     │
│  │ · 注意3       │ │ · 物品3       │     │
│  └──────────────┘ └──────────────┘     │
└─────────────────────────────────────────┘

CSS 关键细节

/* Day 标题栏 */
.day-header {
  background: linear-gradient(135deg, #F5E6D0, #F0DCC0);
  border-left: 4px solid #D4A84B;
  border-radius: 12px 12px 0 0;
  padding: 16px 24px;
}

/* 时间线 */
.timeline-item::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D4A84B;
  border: 2px solid #FDF8F0;
}
.timeline-item::after {
  content: '';
  width: 2px;
  background: #E8D5B5;
  /* 连接到下一个节点 */
}

/* 标签 */
.tag-recommend { background: #E8F5E9; color: #2E7D32; }
.tag-free { background: #E3F2FD; color: #1565C0; }
.tag-booking { background: #FFF3E0; color: #E65100; }
.tag-photo { background: #FCE4EC; color: #C62828; }

/* 侧边亮点栏 */
.highlights-sidebar {
  background: #FFFAF3;
  border-left: 3px solid #D4A84B;
  border-radius: 8px;
  padding: 16px;
}

响应式设计

max-width: 800px 时：每日卡片左右布局
max-width: 600px 时：
- 每日卡片改为上下布局（时间线在上，亮点在下）
- 三列布局改为单列堆叠
- Hero 区指标改为 2x2 网格

打印优化

@media print {
  body { background: white; }
  .day-card { break-inside: avoid; }
  .hero { -webkit-print-color-adjust: exact; }
}

数据填充指南

生成 HTML 时，所有数据直接硬编码到 HTML 中（不需要 JS 动态加载）。数据来源于 Phase 2 的研究结果。

数据结构参考

const tripData = {
  title: "江西景德镇 - 鄱阳湖 - 庐山西线 4 日攻略",
  subtitle: "江西五一房车自驾攻略...",
  dateRange: "5.01-5.04",
  totalKm: "350 km+",
  themes: 3,
  highlights: "避暑 / 湿地 / 古窑",
  
  routeSegments: [
    { name: "景德镇", features: "陶瓷、古窑、文化", duration: "1.5天" },
    // ...
  ],
  
  days: [
    {
      date: "5月1日",
      theme: "瓷都初印象",
      spots: [
        {
          time: "09:00-14:00",
          name: "景德镇古窑民俗博览区",
          ticket: "95元",
          tags: ["推荐"],
          desc: "观看传统制瓷工艺..."
        },
        // ...
      ],
      highlights: ["观看传统手工拉坯", "品尝瓷都特色小吃"],
      tips: ["节假日人多建议早到"]
    },
    // ...
  ],
  
  booking: {
    tickets: [
      { spot: "古窑民俗博览区", needBooking: "建议预约", price: "95元" },
      // ...
    ],
    transport: ["自驾从XX高速...", "高铁到景德镇北站..."],
    reminders: ["提前3天预约热门景点", "下载XX小程序..."]
  },
  
  tips: {
    accommodation: ["推荐住在XX区域...", "价位参考: 200-500元/晚"],
    food: ["景德镇：辣椒粑、碱水粑", "庐山：石鱼、石耳"],
    practical: ["山上气温比山下低8-10度", "带防晒和雨具"]
  },
  
  checklist: {
    notices: ["节假日景区限流", "提前购买保险"],
    packing: ["身份证、驾照", "防晒霜、墨镜", "充电宝、充电线"]
  },

  budget: {
    people: 2,        // 出行人数
    days: 4,          // 出行天数
    items: [
      { name: "往返机票", unitPrice: "¥1200/人", subtotal: "¥2400", note: "经济舱参考" },
      { name: "酒店住宿", unitPrice: "¥350/晚", subtotal: "¥1050", note: "3晚舒适型" },
      { name: "景点门票", unitPrice: "见明细", subtotal: "¥520", note: "含古窑+庐山等" },
      { name: "餐饮", unitPrice: "¥150/人/天", subtotal: "¥1200", note: "" },
      { name: "当地交通", unitPrice: "含油费/停车", subtotal: "¥600", note: "自驾" },
      { name: "签证/保险", unitPrice: "—", subtotal: "¥0", note: "国内无需" },
      { name: "其他", unitPrice: "预留", subtotal: "¥500", note: "购物+应急" },
    ],
    totals: {
      economy: "¥4800",
      comfort: "¥6200",
      luxury: "¥9500"
    },
    savingTips: [
      "提前2周以上订机票/高铁票，价格更优",
      "携程/美团领券可享酒店8-9折",
      "景区联票比单买便宜20-30%"
    ],
    disclaimer: "以上价格为2026年4月参考价，实际以出行时为准"
  }
};

注意事项

不依赖外部资源：HTML 页面不引用任何外部 CSS/JS/图片，全部内联
不使用 emoji 作为图标：用 CSS 绘制的圆点、线条等视觉元素
打印友好：页面可直接打印为 PDF
数据准确性：门票价格、开放时间等通过 web_search 获取最新信息
Hero 区图片：使用 CSS 渐变 + 几何图形模拟风景效果（不依赖外部图片URL，避免加载失败）

@ycyliu/travel-planner-skill