旅行路书生成器

输入目的地+天数+人数，输出一部可分享的杂志级 HTML 路书。输入目的地+天数+人数，输出一部可分享的杂志级 HTML 路书。

触发条件

当用户请求以下任一场景时，加载此 skill：

为一次旅行制作路书/行程规划
规划多日游行程（含交通、住宿、景点）
生成可分享的 HTML 旅行攻略
更新/修改现有路书中的行程信息
提到"路书"、"旅行规划"、"行程安排"、"几日游"等关键词

执行流程

Phase 0: 需求确认（1分钟）

向用户确认以下参数：

| 参数 | 必填 | 默认值 | 说明 | |------|------|--------|------| | 目的地 | 是 | — | 如「大理+丽江」「成都+九寨沟」 | | 出行日期 | 是 | — | 如「5.1-5.6」，需明确具体日期 | | 天数 | 是 | — | 自动从日期推算 | | 出发城市 | 否 | 北京 | 影响机票/高铁信息 | | 人数 | 否 | 1 | 影响预算分摊（住宿、包车人均） | | 品牌名 | 否 | 我的路书 | 路书的品牌标识，用户可自定义 | | 输出路径 | 否 | 当前工作区 | HTML 文件保存位置 |

确认后还需用户逐步提供：

每日核心景点和交通方式
已订酒店信息（名称、价格、日期）
已订机票/高铁信息（航班号、时间）
门票信息（价格、渠道、预约要求）

Phase 1: 行程架构

日程规划：按天拆分，每天一个独立 section（day-section）
景点排序：考虑地理动线，减少回头路
住宿分配：根据下一日景点位置选择住宿区域
交通衔接：城际交通（飞机/高铁）+ 当地交通（包车/打车/公交）
输出：向用户展示行程大纲表格，确认后进入 Phase 2

Phase 2: 内容填充

按天编写每日内容。每天包含以下模块（按优先级）：

必须模块：

transport-card：城际交通卡片（飞机/高铁，含航班号、时间、价格）
tl-table：行动动线表格（精确到分钟，含时间/行动/费用三列）
info-grid：信息卡片网格（门票/时长/交通/体力要求等 3-4 张）
tip-box：住宿信息卡片（酒店名称、价格、入住/退房日期）

可选模块（按需添加）：

scene-hero：景点封面大图（aspect-ratio: 21/9）
prose：散文描写段落（增加可读性和文学感）
route-visual：路线时间轴（适合自驾/徒步线路）
culture-block：历史文化延伸（金色调背景块）
food-row：美食推荐（3列卡片）
section-divider：分隔符（上下午分隔）

汇总模块（放在所有日程之后）：

ticket-table：门票汇总表（日期/景点/套票内容/价格/渠道/预约要求）
budget-table：预算表（分项列出，多人出行需标注"÷N人"分摊）
packing-grid：行前准备清单（证件/衣物/电子/个人用品 4类）

Phase 3: 封面图获取

图片优先级（P0 规则）：

Pixabay 真实实景图（首选）：用 search_pixabay_images 搜索景点名关键词
Unsplash 通用风景图：作为兜底，用 url('https://images.unsplash.com/...') 格式
AI 生成图（最后手段）：仅当前两者均无合适图时使用 image_gen

每日至少一张 scene-hero 封面图，Hero 首屏必须有全屏大图。

Phase 4: HTML 集成

使用 references/template.html 作为 HTML 壳子模板。

关键替换点：

{{BRAND_NAME}} → 品牌名（如「我的路书」「XX旅行社」）
{{TRIP_TITLE}} → 路书标题（如「滇南秘境」「川西高原」）
{{TRIP_SUBTITLE}} → 副标题（如「大理 · 丽江 — 苍山洱海的五日漫游」）
{{DATE_RANGE}} → 日期范围（如「10.1 — 10.5」）
{{DAY_COUNT}} → 天数
{{ROUTE_TEXT}} → 路线文字（如「上海 → 大理 → 丽江 → 上海」）
{{HERO_BG_URL}} → Hero 背景图 URL
{{OVERVIEW_NODES}} → 行程总览时间线节点 HTML
{{DAY_SECTIONS}} → 所有每日 section 的完整 HTML
{{SUMMARY_SECTIONS}} → 门票+预算+行前清单 HTML
{{FOOTER_QUOTE}} → 页脚金句

Phase 5: 质量校验

完整性检查：每天必须有 tl-table（动线表）+ info-grid + tip-box（住宿）
一致性检查：日期/酒店/航班号/价格在各处引用一致
预算算术：验证加总正确，多人分摊逻辑正确
封面图加载：检查所有图片 URL 可访问
响应式：768px 以下布局正常
预览：使用 preview_url 展示最终效果

设计规范（硬性要求）

视觉体系

基调：杂志风、人文质感。不是千篇一律的旅游攻略模板
浅色：--parchment: #f6f1eb（温暖纸张色）、--gold: #b8860b、--teal: #2e6b62
字体：Noto Serif SC（标题） + Noto Sans SC（正文） + Playfair Display（数字/英文装饰）
图标：允许使用 emoji（旅行场景适合视觉活泼），与 10min-domain-expert 的纯 SVG 风格不同
圆角：10-12px

核心布局组件

| 组件 | 用途 | 关键 CSS | |------|------|---------| | .hero | 首屏全屏封面 | 100vh, 背景图 Ken Burns 动画 | | .overview | 行程总览时间线 | 深色背景, flex 横向节点 | | .day-section | 每日内容区 | 滚动淡入动画 | | .scene-hero | 景点封面图 | aspect-ratio: 21/9, 渐变遮罩 | | .tl-table | 行动动线表格 | 时间金色, 交通青色, 标签高亮 | | .info-grid | 信息卡片网格 | auto-fit minmax(200px) | | .route-visual | 路线时间轴 | 左侧竖线 + 圆点节点 | | .transport-card | 交通卡片 | 图标+路线+时间+价格 | | .tip-box | 提示/住宿框 | 左侧3px色条 | | .culture-block | 文化延伸块 | 金色调背景, 大字水印 | | .budget-table | 预算表 | 金色价格, 加粗合计行 | | .ticket-table | 门票汇总表 | 同 budget-table 风格 | | .packing-grid | 行前清单 | 4列网格, 圆圈打钩 |

动线表格标签系统

| 标签 | CSS类 | 颜色 | 用途 | |------|-------|------|------| | 5A景区 | .hl-5a | 琥珀色 | 国家5A级景点 | | 免费 | .hl-free | 绿色 | 无需购票 | | 必打卡/核心/震撼 | .hl-star | 红色 | 核心亮点 | | 高铁 | .hl-train | 蓝色 | 铁路交通 | | 飞行 | .hl-plane | 紫色 | 航空交通 | | 门票/索道 | .hl-ticket | 粉色 | 需要票务 |

交互

滚动淡入动画（IntersectionObserver）
Hero 首屏视差效果
时间线节点点击跳转
响应式（768px 折叠适配）

行程更新协议

用户在旅行规划过程中会频繁调整行程。收到更新指令时：

识别变更范围：影响哪些天、哪些模块
联动检查：住宿变更→检查是否影响相邻天的交通；景点变更→检查门票汇总和预算
同步更新：所有引用点（动线表、信息卡片、门票表、预算表）必须一致
备份：重大变更前将旧文件备份为 *-backup-MMDD.html
部署：如有 GitHub Pages 仓库，同步更新并推送

预算计算规则

| 项目 | 分摊规则 | |------|---------| | 机票 | 每人各付，不分摊 | | 高铁 | 每人各付，不分摊 | | 门票 | 每人各付，不分摊 | | 住宿 | 按房间总价 ÷ 人数 | | 包车 | 车辆总价 ÷ 人数 | | 餐饮 | 人均估算（每天¥100-150） | | 特产 | 个人消费，估算区间 |

人均合计 = 个人固定支出 + 分摊支出

举例脱敏规则（P0 级）

路书中默认使用用户真实行程信息（这是给自己和同行者看的）。但如果路书要公开发布（如 GitHub Pages），需确认用户是否需要脱敏处理。

输出产物

单个 HTML 文件，CSS/JS 全部内联，零外部依赖（字体除外）
通过 preview_url 展示最终效果
可选部署至 GitHub Pages