旅游攻略生成器 - 一键生成精美旅游攻略HTML。当用户需要制定旅游计划、生成旅游攻略、规划行程时使用。支持:国内外城市(威海/青岛/大连/大理/厦门等)、情侣浪漫游、周末短途游、自驾游规划。自动搜索全网真实攻略、高德API计算路线距离用时、生成PC/移动端自适应精美HTML,包含每日详细行程、酒店推荐、美食推荐...
---
name: travel-guide-generator
description: 旅游攻略生成器 - 一键生成精美旅游攻略HTML。当用户需要制定旅游计划、生成旅游攻略、规划行程时使用。支持:国内外城市(威海/青岛/大连/大理/厦门等)、情侣浪漫游、周末短途游、自驾游规划。自动搜索全网真实攻略、高德API计算路线距离用时、生成PC/移动端自适应精美HTML,包含每日详细行程、酒店推荐、美食推荐、避坑指南、预算估算。支持中/英/日/韩/法/德/西等多语言输出。
---
# 旅游攻略生成器 | Travel Guide Generator | 旅行ガイド生成器 | 여행 가이드 생성기
自动生成精美、详细、浪漫的旅游攻略HTML文档。支持多语言输出。
## 多语言支持
本 skill 支持生成多种语言的旅游攻略HTML。所有模块文本(标题、按钮、标签、提示等)均会翻译为指定语言。
### 支持的语言
| 语言代码 | 语言 | 示例请求 |
|----------|------|----------|
| `zh-CN` | 简体中文(默认) | "帮我生成一个威海4天旅游攻略" |
| `en` | 英语 | "Generate a 4-day travel guide for Tokyo" |
| `ja` | 日语 | "東京の4日間旅行ガイドを作成して" |
| `ko` | 韩语 | "부산 4일 여행 가이드 만들어줘" |
| `fr` | 法语 | "Génère un guide de voyage de 4 jours à Paris" |
| `de` | 德语 | "Erstelle einen 4-Tage-Reiseführer für München" |
| `es` | 西班牙语 | "Genera una guía de viaje de 4 días para Barcelona" |
| `it` | 意大利语 | "Genera una guida di viaggio di 4 giorni per Roma" |
| `pt` | 葡萄牙语 | "Gere um guia de viagem de 4 dias para Lisboa" |
| `ru` | 俄语 | "Создай путеводитель на 4 дня по Москве" |
| `th` | 泰语 | "สร้างคู่มือเที่ยวโตเกียว 4 วัน" |
| `vi` | 越南语 | "Tạo hướng dẫn du lịch 4 ngày ở Đà Nẵng" |
| `ar` | 阿拉伯语 | "أنشئ دليلاً سياحياً لمدة 4 أيام في دبي" |
### 语言检测规则
1. **用户使用某种语言提问** → 自动使用该语言生成攻略
2. **用户明确指定语言** → 按指定语言生成(如"用英语生成"、"in English")
3. **未指定且使用中文** → 默认简体中文
### 多语言生成规范
- **HTML `<html lang="...">`** 标签设置为对应语言代码
- **所有面向用户的文本**全部翻译为目标语言,包括:
- 页面标题、Hero区域
- 导航标签(Day/交通/时间表/避坑/预算/Tips等)
- 交通信息卡片(高铁/飞机/推荐标注等)
- 路线条文字(距离、用时、交通方式)
- 景点名称、描述、价格标签
- 浪漫时刻提示
- 美食推荐(店名保留原文,描述翻译)
- 避坑清单(错误做法/正确做法)
- 预算估算(分类名称、总计)
- Tips标题和内容
- 酒店推荐区域
- 折叠提示文字
- **专有名词**(景点名、酒店名、店名)保留原文,可在括号中附注翻译
- **价格和数字**使用当地货币格式
- **CSS样式**不变,只改变文本内容
- 对于**阿拉伯语等RTL语言**,在HTML中添加 `dir="rtl"` 属性
### 示例
用户说:"Generate a 3-day romantic travel guide for Kyoto from Tokyo"
生成的HTML应:
- `<html lang="en">`
- 标题:"Kyoto 3-Day Romantic Getaway"
- 导航:"Day 1"、"Transport"、"Timeline"、"Tips"等
- 景点描述全英文
- 店名保留日文:"Nishiki Market(錦市場)"
- 价格显示:"¥1,500 JPY"
## 核心功能
1. **在线搜索真实攻略** - 搜索全网获取真实用户评价和推荐
2. **高德API路线计算** - 计算景点间距离、用时,突出显示路线衔接(无需地图显示)
3. **精美HTML生成** - 旅游氛围设计,PC/移动端自适应
4. **详细行程规划** - 每日路线、酒店、美食、避坑指南
5. **多语言输出** - 支持中/英/日/韩/法/德/西等13种语言
## 使用方法
### 基础用法
用户只需提供:
- **目的地**:如"威海"、"大理"
- **天数**:如"4天"
- **出发地**:如"北京"(可选)
- **风格偏好**:如"浪漫"、"休闲"(可选)
示例请求:
```
帮我生成一个威海4天旅游攻略,从北京出发,浪漫休闲风格
```
### 工作流程
1. **收集需求** - 确认目的地、天数、出发地、风格偏好
2. **搜索攻略** - 使用在线搜索工具搜索全网攻略
3. **查询交通** - 查询高铁/飞机真实班次和价格
4. **计算路线** - 使用高德API计算景点间距离和用时
5. **生成HTML** - 使用模板生成精美HTML文档
## 高德API配置
使用高德API需要key,配置方式:
1. 申请高德Web服务API key: https://lbs.amap.com/
2. 设置环境变量: `AMAP_KEY=your_key`
主要API接口:
- **路径规划**: `https://restapi.amap.com/v3/direction/driving` - 驾车路线
- **距离测量**: `https://restapi.amap.com/v3/distance` - 直线/驾车距离
- **POI搜索**: `https://restapi.amap.com/v3/place/text` - 景点搜索
## HTML模板结构
生成的HTML包含以下模块:
### 1. Hero区域
- 目的地标题
- 标签(天数、风格、交通方式)
- 渐变背景营造旅游氛围
### 2. 右侧快速导航(PC端)
- 固定在右侧,弱化显示(透明度0.4)
- 鼠标悬停时高亮
- 点击跳转到对应模块
- 自动高亮当前浏览区域
### 3. 可折叠模块
- **Day卡片**:点击Day头部可折叠/展开
- **其他模块**:点击标题可折叠/展开
- **默认状态**:全部展开
- 折叠图标:▼ 箭头指示状态
### 4. 交通信息卡片
- 高铁/飞机班次(真实数据)
- 价格对比
- 推荐标注
### 3. 酒店推荐
- 按住宿区域分类
- 价格区间
- 推荐理由
- 与行程衔接说明
### 4. 每日行程卡片
- Day标题和路线概览
- **[NEW] 酒店→景点路线**(第2天及以后):在路线条最前面,添加从前一晚酒店到当日首个景点的路线规划(距离+用时)
- 路线条(突出显示距离和用时)
- 景点详情(名称、价格、描述、**景点间交通提示**——从上一个地点到这里的交通方式+用时,显示在景点名称行右侧)
- 浪漫时刻提示
- 避坑指南
- 高德API标签(突出显示)
- **[NEW] 推荐酒店住宿地**(每日晚餐推荐下方,仅需要住宿时):推荐当晚住宿区域、价格区间、推荐理由、与次日行程衔接说明
### 5. 美食推荐
- 网格布局展示
- 店名、人均价格、推荐理由
- 来源标注(小红书/马蜂窝)
### 6. 避坑清单
- 编号列表
- 错误做法(删除线)
- 正确做法(绿色高亮)
### 7. 预算估算
- 分类明细
- 总计金额
### 8. 浪漫Tips
- 情侣专属建议
- 拍照、穿搭、氛围建议
## 脚本说明
### scripts/amap_route.py
计算两点间驾车距离和用时。
```python
python scripts/amap_route.py --origin "威海公园" --destination "火炬八街" --key YOUR_AMAP_KEY
```
输出示例:
```json
{
"distance": "8500",
"duration": "1200",
"distance_text": "8.5公里",
"duration_text": "20分钟"
}
```
### scripts/search_guide.py
搜索小红书/马蜂窝攻略内容。
```python
python scripts/search_guide.py --destination "威海" --query "避坑"
```
## 设计原则
1. **行程不紧张** - 每天安排2-3个核心景点,留足休息时间
2. **浪漫氛围** - 每个景点都有"浪漫时刻"提示
3. **路线合理** - 使用高德API计算,确保衔接顺畅
4. **真实准确** - 交通信息、价格、班次都要真实
5. **详细实用** - 美食推荐多,避坑指南详细
6. **美观大方** - HTML设计有旅游氛围,重点突出
7. **语言一致** - 全文语言风格统一,专有名词处理得当
## 移动端适配
HTML模板已内置响应式设计:
- 768px断点适配平板
- 375px断点适配小屏手机
- 触摸优化(44px最小点击区域)
- 横向滚动支持(表格、标签栏)
- **右侧导航**:屏幕宽度≤1024px时自动隐藏
## 参考资源
- HTML模板: `assets/template.html` - 完整HTML模板参考
- 设计规范: `references/design-spec.md` - 配色、字体、布局规范
- **[NEW] 每日行程卡片规范: `references/daily-itinerary-spec.md` - 酒店住宿推荐、酒店→景点路线条、**景点间交通提示**的详细HTML结构和CSS代码 - 酒店住宿推荐、酒店→景点路线条的详细HTML结构、CSS代码**
don't have the plugin yet? install it then click "run inline in claude" again.