Travel Route Map — 旅游攻略路线图生成
概述
本 Skill 将一条旅游路线的文字描述，转化为一张可视化的攻略路线图。核心流程：解析路线 → 搜索景点配图 → 规划布局 → 填充 HTML 模板 → 截图导出 PNG。
工作流程
Step 1: 解析路线信息
从用户输入中提取以下要素：
- 天数与夜数：如"5天4晚"
- 起止城市：起点和终点
- 途经景点列表：按顺序排列
- 交通方式：自驾/高铁/飞机/徒步
- 出行季节：春/夏/秋/冬（未指定则默认秋季）
- 风格偏好：见下方风格选择（未指定则默认水彩风）
信息不全时最多问 2 个关键问题，其余用合理默认值填充。
Step 2: 搜索景点配图
为每个景点搜索真实风景照片作为配图。
关键词构造规则：
"{景点名} {季节词} 风景"
"{景点名} 航拍"
季节词：春→春景/花开，夏→夏景/避暑，秋→秋景/秋色，冬→冬景/雪景。
图片筛选优先级：
1. 主体是该景点标志性景观
2. 横构图、光线好、主体清晰
3. 无水印、无文字叠加
4. 短边分辨率 ≥ 500px
兜底策略： 搜不到或下载失败的景点，用渐变色块 + 对应 emoji 占位。
> 详细搜索和筛选规则见 references/image-search-guide.md。
Step 3: 规划景点坐标
根据景点地理大致方位分配画布坐标（0~1 比例值）。
布局原则：
- 起点放画布底部或左下角
- 终点按实际方位放顶部/对应侧边
- 相邻景点保持间距，标签不重叠
- 没把握的方位参考 references/geo-layout-guide.md
Step 4: 选择风格模板
| 风格 ID | 风格名 | 视觉特征 |
|---|---|---|
watercolor |
水彩手绘风 | 水彩蓝天白云山脉森林、黄色虚线路线、毛笔笔触标题、圆角照片、枫叶装饰 |
vintage |
复古旅行风 | 牛皮纸底色、棕色山脉剪影、老照片风格（白边+sepia滤镜+手写标题）、邮戳装饰、宋体/楷体、行程单卡片 |
flat |
扁平插画风 | 纯色块底图、简洁线条、无衬线字体、矩形照片 |
当前已实现水彩风和复古旅行风两种竖版模板，扁平风为基础版。
模板路径：
assets/templates/{风格}/{比例}.html
比例：vertical-2x3（竖版小红书）、square-1x1（方版朋友圈）、wide-16x9（横版详情页）。
配色规则： 根据风格 × 季节组合选择配色，完整配色表见 references/style-palettes.md。
风格选择建议：
- 自然风景/草原/山野路线 → 水彩手绘风
- 人文古迹/古镇/历史路线 → 复古旅行风
- 城市/现代/简约需求 → 扁平插画风
Step 5: 渲染 HTML 并截图
- 将路线数据注入对应风格的 HTML 模板（模板中用
{{变量名}}占位） - 将搜索到的图片下载到本地临时目录，填入模板的
src路径 - 用 Playwright 打开 HTML 文件，设置视口为目标分辨率（默认 2048px 宽）
- 等待字体和图片全部加载完成后截图，保存为 PNG
> 截图脚本见 scripts/render_screenshot.py。
Step 6: 质量检查
生成后检查以下项：
- 文字是否溢出标签或被遮挡
- 路线是否连通、箭头方向是否正确
- 景点配图是否全部加载成功
- 标签之间是否重叠
- 整体配色是否统一
有问题则微调后重新截图。
数据结构模板
渲染前的中间数据结构：
{
"title_days": "5天4晚",
"title_route": "北京+乌兰布统",
"title_sub": "自驾路线攻略",
"slogan_top": "穿越草原与森林 遇见最美的秋天",
"slogan_left": "一路向北 去看金色的秋天",
"slogan_bottom": "山河辽阔 自驾正当时",
"tags_text": "草原 森林 湖泊 公路 秋色 自驾 旅行",
"style": "watercolor",
"season": "autumn",
"start": {"name": "北京市", "x": 0.32, "y": 0.88, "icon": "★", "label_side": "right", "note": ""},
"stops": [
{"name": "达里湖", "x": 0.18, "y": 0.36, "image": "local/path.jpg", "side": "left", "activity": ""},
{"name": "蛤蟆坝", "x": 0.2, "y": 0.45, "image": "local/path.jpg", "side": "left", "activity": ""}
],
"route_path_d": "M 340,1360 Q ...",
"highlights": ["经典环线", "秋色精华", "5天4晚深度自驾"],
"has_compass": true,
"transfer_notes": [],
"day_badges": []
}
复古旅行风额外字段：
- postmarks_html: 邮戳装饰（2-3个）
- itinerary_html: 右下角行程单（按天列出）
- flight_path_html: 飞机航线（如往返飞机）
- 图片使用老照片风格：白边+底部手写体标题+sepia滤镜+轻微旋转
资源说明
scripts/render_screenshot.py— Playwright 截图导出脚本scripts/process_images.py— 图片下载、裁切、圆角处理脚本references/style-palettes.md— 各风格 × 各季节配色参数references/geo-layout-guide.md— 常见旅游路线方位速查references/image-search-guide.md— 图片搜索关键词和筛选规则assets/templates/watercolor/vertical-2x3.html— 水彩手绘风竖版模板（含蓝天白云山脉森林湖泊河流+地图轮廓）assets/templates/vintage/vertical-2x3.html— 复古旅行风竖版模板（牛皮纸+老照片+邮戳+行程单）assets/templates/flat/vertical-2x3.html— 扁平插画风竖版模板（基础版）
四层结构规范
所有模板严格遵循四层 z-index 分层：
1. z-index: 0 — 地图底图（SVG 自然元素 + 地图轮廓）
2. z-index: 1 — 景点配图（真实搜索照片）
3. z-index: 2 — 路线和途经点（SVG 路线 + 标记点 + 标签）
4. z-index: 4 — 标题、广告语、装饰元素
