微信聊天截图生成器 (WeChat Screenshot Generator) v1.0

高保真微信聊天截图自动生成工具。基于 Puppeteer + HTML/CSS 渲染，输出 Retina 级 (3x) PNG 图片。

效果预览

┌─ 微信聊天界面 ─────────────────────────┐
│  14:22          ○ 5G  |□| 78%  ▮      │  ← 状态栏
│  ← 423                 张总      ⋮    │  ← 导航栏
│────────────────────────────────────────│
│         9月3日 下午2:15                 │  ← 时间分隔线
│  [头像] 你好，是做软件开发的吗           │  ← 白色气泡(对方)
│  [头像] 老王介绍的                      │
│          是的张总，您这边是想做什么系统？ │  ← 绿色气泡(自己)
│          价格我按实际工作量核的          │
│  [头像] 行吧，看着是挺细的              │
│  [头像] 合同明天签？                    │
│          好                             │
├────────────────────────────────────────┤
│  🎤 │ 输入消息            😊  ＋  │    │  ← 输入栏
└────────────────────────────────────────┘

功能特性

使用场景

• 公众号文章配图 — 客户案例、需求沟通、售后好评等对话场景
• 产品介绍 — 展示产品功能对话、用户反馈
• 营销素材 — 朋友圈截图、裂变对话
• 教程演示 — 操作步骤对话展示
• 数据对比 — 上线前后效果对比图

快速开始

1. 环境准备

# 安装依赖 (项目根目录执行)
bash /path/to/skill/scripts/setup.sh

2. 准备头像

# 生成示例头像 (文字头像 + 纯色背景)
python3 /path/to/skill/assets/make-avatars.py \
  --output ./images \
  --avatars '{"boss":{"text":"张总","bg":"#4A90D9"},"tech":{"text":"技","bg":"#34C759"}}'

3. 编写对话配置

创建 chat-config.js：

module.exports = {
  // 输出目录
  outputDir: './images',

  // 状态栏时间
  statusTime: '14:22',

  // 导航栏标题 (对方名称)
  chatName: '张总',

  // 头像文件路径 (自动转 base64)
  avatars: {
    left: './images/boss.png',   // 对方头像
    right: './images/tech.png',  // 自己头像
  },

  // 对话消息
  messages: [
    { time: '9月3日 下午2:15', side: 'left',  text: '你好，这个需求能做吗？' },
    { side: 'right', text: '可以的，您具体什么需求？' },
    { side: 'left',  text: '想做个进销存系统' },
    { side: 'right', text: '没问题，我给您出方案' },
  ],

  // 可选高级配置
  platform: 'ios',          // 'ios' | 'android'
  deviceScale: 3,           // Retina 倍数
  statusBarColor: '#EDEDED', // 状态栏背景色
  navBarColor: '#EDEDED',   // 导航栏背景色
  chatBgColor: '#EDEDED',   // 聊天背景色
  bubbleRightColor: '#95EC69', // 右侧气泡颜色 (自己的消息)
  bubbleLeftColor: '#FFFFFF',  // 左侧气泡颜色 (对方的消息)
  badgeCount: '423',        // 未读消息数
};

4. 生成截图

node /path/to/skill/assets/generate-screenshots.js \
  --config ./chat-config.js \
  --output ./images

完整工作流程

第一步：分析对话内容

理解用户需要的对话场景，提取以下信息：
- 参与方：几个人在对话？各自叫什么？
- 对话阶段：初次接触 → 需求沟通 → 报价 → 确认
- 关键信息：时间、价格、数据对比等视觉重点
- 聊天风格：正式沟通 vs. 轻松聊天

第二步：准备头像

使用 make-avatars.py 生成或提供头像图片（PNG，建议 120x120 以上）。

头像生成参数：

python3 make-avatars.py \
  --output ./images \
  --avatars '{"zhang":{"text":"张总","bg":"#4A90D9","fg":"#FFFFFF"},"tech":{"text":"技","bg":"#34C759","fg":"#FFFFFF"}}' \
  --size 200 \
  --shape circle

第三步：编写对话配置

创建 JS 配置文件。支持以下完整配置项：

module.exports = {
  // ==== 基础配置 ====
  outputDir: './images',           // 图片输出目录
  chatName: '联系人名称',          // 导航栏显示的名称
  statusTime: '14:22',             // 状态栏时间

  // ==== 头像配置 (key 为 left/right，值为图片路径) ====
  avatars: {
    left: './images/avatar-left.png',
    right: './images/avatar-right.png',
  },

  // ==== 消息列表 (按时间顺序) ====
  messages: [
    // 带时间的消息 (会渲染时间分隔线)
    { time: '9月3日 下午2:15', side: 'left', text: '你好' },
    // 不带时间的连续消息
    { side: 'right', text: '您好，有什么可以帮您？' },
    // 支持 emoji
    { side: 'left', text: '这个功能很棒👍' },
    // 支持多行文本
    { side: 'right', text: '第一步：打开设置\n第二步：点击账号\n第三步：完成' },
  ],

  // ==== 外观配置 ====
  platform: 'ios',                 // 'ios' | 'android'
  deviceScale: 3,                  // Retina 倍数 (1, 2, 3)

  // 颜色配置
  statusBarColor: '#EDEDED',       // 状态栏背景色
  navBarColor: '#EDEDED',          // 导航栏背景色
  chatBgColor: '#EDEDED',          // 聊天区域背景色
  bubbleRightColor: '#95EC69',     // 右侧气泡颜色 (自己)
  bubbleLeftColor: '#FFFFFF',      // 左侧气泡颜色 (对方)
  textColor: '#1A1A1A',           // 文字颜色
  timeColor: '#B2B2B2',           // 时间文字颜色

  // 导航栏配置
  badgeCount: '423',               // 未读消息数 (留空不显示)
  showBackButton: true,            // 显示返回按钮

  // 输入栏配置
  showInputBar: true,              // 显示底部输入栏
  inputPlaceholder: '输入消息',    // 输入框占位文字

  // 电池与信号
  batteryPercent: 78,              // 电池百分比
  show5G: true,                    // 显示 5G 标识
};

第四步：生成截图

单张截图：

node /path/to/skill/assets/generate-screenshots.js \
  --config ./chat-config.js \
  --output ./images \
  --filename 'chat-screenshot.png'

批量截图（一个配置多个对话）：

// batch-config.js
module.exports = [
  {
    outputDir: './images',
    chatName: '张总',
    statusTime: '14:22',
    avatars: { left: './images/zhang.png', right: './images/me.png' },
    messages: [
      { time: '9月3日', side: 'left', text: '你好' },
      { side: 'right', text: '你好，有什么可以帮您？' },
    ],
    filename: 'scene-01-initial.png',
  },
  {
    outputDir: './images',
    chatName: '张总',
    statusTime: '20:15',
    avatars: { left: './images/zhang.png', right: './images/me.png' },
    messages: [
      { time: '9月8日', side: 'right', text: '方案做好了' },
      { side: 'left', text: '我看看' },
    ],
    filename: 'scene-02-proposal.png',
  },
];

node /path/to/skill/assets/generate-screenshots.js \
  --batch ./batch-config.js

第五步：生成数据对比图表

// chart-config.js
module.exports = {
  outputDir: './images',
  filename: 'data-comparison.png',
  title: '上线30天 · 数据对比',
  subtitle: '建材批发进销存系统 · 武汉汉南',
  theme: 'dark',  // 'dark' | 'light'
  metrics: [
    {
      label: '库存准确率',
      before: { value: '78%', width: 156 },
      after:  { value: '97.8%', width: 220 },
    },
    {
      label: '月盘点差异',
      before: { value: '37万元', width: 240 },
      after:  { value: '0.8万', width: 40 },
    },
    {
      label: '单笔入库耗时',
      before: { value: '8分钟', width: 170 },
      after:  { value: '3分钟', width: 64 },
    },
    {
      label: '库管员下班时间',
      before: { value: '晚8点', width: 190 },
      after:  { value: '6:30pm', width: 142 },
    },
  ],
};

node /path/to/skill/assets/generate-screenshots.js \
  --chart ./chart-config.js

高级用法

自定义颜色主题

// 暗色主题配置
{
  platform: 'ios',
  statusBarColor: '#1C1C1E',
  navBarColor: '#1C1C1E',
  chatBgColor: '#000000',
  bubbleRightColor: '#34C759',
  bubbleLeftColor: '#2C2C2E',
  textColor: '#FFFFFF',
  timeColor: '#8E8E93',
}

多设备样式对比

• iOS: 刘海屏状态栏 (28px)，圆角气泡，iOS 图标
• Android: 常规状态栏，5G/信号/WiFi/电量图标，Android 风格输入栏

架构说明

wechat-screenshot/
├── SKILL.md                          # 技能文档 (本文件)
├── assets/
│   ├── generate-screenshots.js       # 核心截图生成引擎 (HTML 内联渲染)
│   └── make-avatars.py               # 头像生成器 (Pillow)
├── references/
│   ├── chat-config-example.js        # 完整配置示例
│   └── usage-guide.md               # 使用指南
└── scripts/
    ├── setup.sh                      # 环境安装脚本
    └── screenshot.sh                 # 一键截图脚本

常见问题

Q: 截图看起来不够真实？

A: 尝试调整以下参数：
- 消息不要太多，每张截图 4-8 条最自然
- 对话要有来有回，不要全是单方说话
- 适当加入口语化内容，不要太正式
- 头像使用真实风格（风景/图案）而非自拍

Q: 如何让气泡对齐更真实？

A: 默认左侧为对方（白色），右侧为自己（绿色）。side: 'left' 和 side: 'right' 分别控制。

Q: 截图尺寸不对？

A: deviceScale 控制 Retina 倍数。3x = 1170px 宽 (390*3)，适合公众号使用。

Q: 中文文字渲染不清晰？

A: 确保系统中安装了中文字体，如 PingFang SC、Microsoft YaHei 等。

技术规格