travel-visual-generator

本 Skill 提供三项核心能力，标准工作流为依次执行：

1. 旅游攻略 → HTML 页面：根据行程信息生成美观的 HTML 攻略页面
2. HTML → 长图截图：将 HTML 页面截取为完整长图 PNG
3. 手绘风旅游插画生成：调用 image_gen 工具，生成小红书日记风格水彩插画

能力零：生成旅游攻略 HTML 页面

何时执行

用户提供旅游目的地、时间、行程要点后，先生成 HTML 再截图。没有 HTML 就没有长图。

HTML 设计规范

生成的 HTML 需满足以下要求：

视觉风格：

• 整体色调：#c0392b（红色主色）+ 米白背景 #f5f0eb
• 字体：系统中文字体（PingFang SC / Helvetica Neue）
• 卡片圆角：16px，阴影：0 2px 12px rgba(0,0,0,0.07)

必须包含的模块：

1. Hero 顶部Banner       ← 渐变红色背景，标题+标签行
2. 顶部 sticky 导航栏    ← 各章节锚点快速跳转
3. 行程总览 Grid          ← 每天一张卡片，日期+主题+描述
4. 每日详情（Day Card）   ← 左边框色区分城市，时间线格式
5. 景点/过早/美食分区     ← 带彩色高亮角标的食物卡片
6. 饮品推荐               ← 横向卡片排列
7. 出发前清单（Checklist）← 可打印勾选样式
8. 费用预算表             ← 表格 + 底部总计高亮框

食物卡片高亮规则：

• .hl-red（红色）：出了当地就没有、濒临消失的稀缺美食
• .hl-orange（橙色）：老字号经典必吃
• .hl-green（绿色）：随处可得、日常款
• 每张卡片右上角有 .hl-corner 角标说明推荐等级

时间线格式（Day Card 内）：

<ul class="timeline">
  <li>
    <span class="time">09:00</span>
    <div class="content">
      <strong>景点/活动名称</strong>
      <div class="tip">💡 详细说明、地址、价格、注意事项</div>
    </div>
  </li>
</ul>

关键 CSS 类说明

/* 日卡颜色：不同城市用不同边框色 */
.day-card          { border-left: 5px solid #e74c3c; }  /* 武汉-红 */
.day-card.green    { border-left: 5px solid #27ae60; }  /* 自然/神农架-绿 */
.day-card.blue     { border-left: 5px solid #2980b9; }  /* 郑州-蓝 */
.day-card.purple   { border-left: 5px solid #8e44ad; }  /* 返程-紫 */

/* 食物卡高亮 */
.food-card.hl-red    { background: linear-gradient(135deg,#fff5f5,#fff); border: 2px solid #e74c3c; }
.food-card.hl-orange { background: linear-gradient(135deg,#fff9f0,#fff); border: 2px solid #f39c12; }
.food-card.hl-green  { background: linear-gradient(135deg,#f0fff4,#fff); border: 2px solid #27ae60; }

/* 高亮角标 */
.hl-corner {
  position: absolute; top: -1px; right: -1px;
  background: <对应色>; color: white;
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 0 12px 0 10px;
}

信息采集清单

生成 HTML 前，需从用户输入或对话历史中提取：

能力一：HTML 长图截图

使用脚本

python3 ~/.workbuddy/skills/travel-visual-generator/scripts/screenshot_html.py \
  <html文件路径> \
  [输出PNG路径] \
  [--width 1200]

依赖说明

• 需要系统已安装 node 和 puppeteer
• 如果 puppeteer 未安装，先执行：npm install puppeteer（在 html 文件所在目录）
• 默认截图宽度 1200px，可通过 --width 调整

典型用法

# 基础用法（自动命名输出）
python3 ~/.workbuddy/skills/travel-visual-generator/scripts/screenshot_html.py \
  ./武汉郑州旅游攻略.html

# 指定输出路径和宽度
python3 ~/.workbuddy/skills/travel-visual-generator/scripts/screenshot_html.py \
  ./攻略.html ./攻略长图.png --width 1400

能力二：手绘风旅游插画

支持的画风

本技能支持四种画风，通过 --style 参数切换：

生成原则

• 默认风格为水彩牛皮纸风（--style watercolor）
• 单日行程图尺寸：1024x1536（竖版）
• 美食地图尺寸：1536x1024（横版）
• quality 始终设为 high

使用提示词生成脚本

运行脚本获得优化后的提示词，再传入 image_gen：

# 默认水彩风
python3 ~/.workbuddy/skills/travel-visual-generator/scripts/gen_travel_image.py \
  --day "Day1" \
  --date "4月29日" \
  --city "武汉" \
  --spots "黄鹤楼,长江轮渡,巴公房子,古德寺" \
  --foods "热干面,鲜鱼糊汤粉,蛋酒,面窝" \
  --theme "古迹+夜游+过早"

# 涂鸦手帐风
python3 ~/.workbuddy/skills/travel-visual-generator/scripts/gen_travel_image.py \
  --day "Day1" \
  --date "4月29日" \
  --city "武汉" \
  --spots "黄鹤楼,长江轮渡,巴公房子,古德寺" \
  --foods "热干面,鲜鱼糊汤粉,蛋酒,面窝" \
  --theme "古迹+夜游+过早" \
  --style doodle

# 剪贴簿拼贴风
python3 ~/.workbuddy/skills/travel-visual-generator/scripts/gen_travel_image.py \
  --day "Day1" \
  --date "4月29日" \
  --city "四姑娘山" \
  --spots "双桥沟,长坪沟,猫鼻梁" \
  --foods "酥油茶,牦牛肉火锅" \
  --theme "雪山徒步+藏式风情" \
  --style scrapbook

# 地图导览风
python3 ~/.workbuddy/skills/travel-visual-generator/scripts/gen_travel_image.py \
  --day "Day1" \
  --date "4月29日" \
  --city "首尔" \
  --spots "明洞步行街,HIKR GROUND,仁川机场" \
  --foods "豆芽卡" \
  --theme "Citywalk+购物+机场" \
  --style map-guide

脚本输出 JSON，其中 prompt 字段直接传入 image_gen 工具即可。

景点/美食元素库

详见 references/prompt_guide.md，包含：

• 武汉/神农架/郑州常用场景描述词
• 武汉特色美食精确描述词
• 配色方案和装饰元素建议

标准插画结构（每日行程图）

水彩风（watercolor）：

[顶部] 日期徽章 + 城市主题标题
[上半] 当日2-3个核心景点水彩插画
[下半] 当日必吃美食插画（每样带价格标签）
[点缀] 指南针/相机/花朵/纸胶带等装饰

涂鸦手帐风（doodle）：

[顶部] 手写大标题「{城市}之旅 go go go!!!」+ Day 编号 + 可爱动物角色排排站
[中上] 交通路线图：虚线箭头连接各站点，标注时间+交通工具（飞机/高铁/出租车均画成可爱动物驾驶版）
[中部] 景点手绘线稿简笔画，配简短文字说明和游玩时长
[下部] 美食清单（手写中文）
[点缀] 小星星✦、爱心♡、音符♪等涂鸦装饰散落四周

剪贴簿拼贴风（scrapbook）：

[顶部] 彩色手写渐变大标题「DAY1 {地点}·{主题}」+ 右上角签名/日期
[主体] 拍立得式照片框拼贴布局（每张照片有不同颜色的粗边框：蓝/粉/绿/黄）
       - 大照片：核心景点全景（左/中主要位置）
       - 中照片：次要景点或细节特写（嵌入空隙）
       - 小照片：美食/人物/纪念品（角落点缀）
[固定装饰] 红色图钉📌钉在照片四角、和纸胶带📎斜贴照片边缘
[手写标注] 中文手写字散布在照片周围，箭头→指向照片中的具体细节
[信息卡片] 小矩形标签卡片浮在照片旁（景点名称、海拔数据、Tips等）
[右侧栏] 垂直排列的信息面板（打卡清单/小贴士/备注）
[底部装饰] 彩色三角旗串🚩横跨底部 + 额外小照片/美食特写
[点缀] 小涂鸦（emoji表情、点赞手势👍、心形❤️、波浪线）散落

地图导览风（map-guide）：

[顶部栏] 蓝天白云渐变背景（占画面顶部 15-20%），白色云朵☁️漂浮
[大标题] 黄色描边粗体字「({城市})站」或「{城市}一日游」位于右上区域
[主画面] 米白/浅奶油底色，地图式空间布局
[路线] 虚线/点线弯曲箭头连接各个地点，模拟行进路线
[地点标记] 红色地图定位针📍标注每个位置
[地点展示] 每个节点包含：
  - 真实照片（拍立得风格或自然剪贴融入背景）
  - 粗体彩色标签框显示地点名称
  - 对话气泡/标签框内写游玩说明文字（蓝色气泡=推荐、绿色气泡= Tips）
[几何装饰] 彩色几何边框（黄/蓝/绿块状色块）勾勒画面边缘和分区
[点缀] 白色云朵图案、地图图标元素、箭头指示方向

完整套装工作流

当用户要求「出行攻略 + 每天一张图 + HTML长图」时，严格按以下顺序执行：

Step 0 — 生成 HTML 攻略页面（必须先做！）

• 从用户提供的行程信息中提取所有必要数据
• 按上方「设计规范」生成完整 HTML 文件，写入项目目录
• 包含：行程总览、每日时间线、过早/美食/饮品卡片、清单、预算

Step 1 — 截图长图

• 运行 screenshot_html.py 对刚生成的 HTML 文件截图
• 输出 {城市}旅游攻略_长图.png

Step 2 — 逐日生成手绘插画

• 对每一天分别运行 gen_travel_image.py 获取提示词
• 调用 image_gen 生成对应插画（每张 1024x1536，high quality）

Step 3 — 生成美食地图

• 单独生成一张横版（1536x1024）美食汇总插画
• 包含两城所有必吃美食，分区展示

Step 4 — 打包交付

• 用 deliver_attachments 将所有文件一次性交付
• 顺序：长图 → 美食地图 → Day1 → Day2 → ... → 最后一天

> ⚠️ 没有 HTML 就没有长图，Step 0 是所有后续步骤的前提，不可跳过。

注意事项

• HTML 截图依赖 node/puppeteer，在没有安装的环境中会失败；此时改为直接提供 HTML 文件给用户
• image_gen 每次只能生成一张图，多张图需逐个调用
• 提示词中的中文内容要用英文描述（如「黄鹤楼」写成 Yellow Crane Tower (黄鹤楼)），以提升生图质量
• 长图截图后用 open_result_view 展示，手绘图用 deliver_attachments 打包交付

自动更新

本技能支持自动检查和更新，有两种方式：

方式一：更新脚本（推荐）

# 检查是否有新版本
bash ~/.workbuddy/skills/travel-visual-generator/scripts/update.sh --check

# 执行更新（自动备份当前版本）
bash ~/.workbuddy/skills/travel-visual-generator/scripts/update.sh --apply

# 查看当前版本
bash ~/.workbuddy/skills/travel-visual-generator/scripts/update.sh --version

更新流程：检查远程版本 → 备份当前目录 → 下载新版本 zip → 解压覆盖 → 恢复 agent_created 标记 → 完成

方式二：knot-skill CLI

如果已安装 knot-skill CLI 工具：

knot-skill update --id 24532 --dir ~/.workbuddy/skills/travel-visual-generator

版本记录

更新须知

• 更新前会自动备份到 {技能目录}.bak.{时间戳}
• 更新后 agent_created: true 标记会自动保留
• 如更新覆盖了本地修改，可从备份目录恢复特定文件
• 如果 knot-skill CLI 不可用，脚本会自动回退到 zip 下载方式