旅行路书生成器

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

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

触发条件

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

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

执行流程

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

向用户确认以下参数：

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

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

Phase 1: 行程架构

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

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

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

Phase 4: HTML 集成

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

关键替换点：

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

Phase 5: 质量校验

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

设计规范（硬性要求）

视觉体系

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

核心布局组件

动线表格标签系统

交互

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

行程更新协议

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

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

预算计算规则

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

举例脱敏规则（P0 级）

路书中默认使用用户真实行程信息（这是给自己和同行者看的）。

但如果路书要公开发布（如 GitHub Pages），需确认用户是否需要脱敏处理。

输出产物

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