VisNote 图片生成器

此技能通过结合 AI 智能与 Playwright 驱动的浏览器自动化，实现小红书风格图片的自动生成。AI 会分析用户请求，从实时模板注册表中选择合适的模板，并协调整个图片生成流程。

何时使用此技能

在以下情况使用该技能：

• 用户请求生成小红书风格的图片
• 用户提供内容描述（标题、标签、正文等）
• 用户提及模板类型（避坑、干货、OOTD 等）或特定关键词
• 制作社交媒体封面图或内容视觉素材
• 自动化批量生成内容图片以支持内容创作

AI 工作流

0. 前置条件检查（必做）

在处理任何用户请求前，请执行以下检查：

1. 检查 config.json 中的 API KEY：

   cat config.json

• 若文件不存在，或 apikey 字段为空：立即停止，并向用户提示：

     ⚠️ 需要先在 config.json 中设置 apikey 才能使用图片生成功能。

     请按以下步骤设置：
     1. 访问 VisNote 个人主页获取 API Key：https://vis-note.netlify.app/profile，复制 API Key
     2. 复制项目根目录的 example-config.json 文件，并重命名为 config.json
     3. 将复制的 API Key 填入 config.json 的 "your_api_key_here" 位置

     设置完成后，再次尝试生成图片。

• 若文件存在且 apikey 已设置：进入下一步

1. 分析用户请求

从用户请求中提取以下信息：

• 内容类型：避坑/干货/教程，OOTD/探店，语录/情感，故事/对话 等
• 文本内容：标题、副标题、正文、标签、作者提及等
• 关键词：可映射到模板类别的具体术语
• 格式偏好：封面风格、对比风格、清单风格等
• 输出路径（可选）：若用户明确指定自定义输出路径，则使用；否则生成带时间戳的文件名

2. 获取模板注册表 API 数据

从 API 获取模板列表：

GET /api/open/templates

缓存策略（重要）：

首次请求（本对话中）： 必须从 API 获取最新的模板列表。

同一对话中的后续请求：

• 若用户提出“换个模板”、“再生成一张”等跟进请求 → 复用本次对话中已获取的模板列表
• 若用户提出全新的主题或内容请求 → 重新从 API 获取最新模板列表

缓存复用示例：

• “换个模板” → 使用缓存的模板列表
• “再生成一张” → 使用缓存的模板列表
• “换个风格” → 使用缓存的模板列表
• “用其他模板试试” → 使用缓存的模板列表

缓存失效示例（需重新获取）：

• “生成一张关于xxx的新封面”（新主题）→ 重新获取模板列表
• “帮我做一个关于yyy的图”（新内容）→ 重新获取模板列表
• 用户开启完全新的生成任务 → 重新获取模板列表

可选查询参数：

• keyword：按模板名称/描述/标签搜索（如 ?keyword=封面，?keyword=正文）

curl 示例：

# 获取所有模板
curl "https://vis-note.netlify.app/api/open/templates"

# 搜索封面类模板
curl "https://vis-note.netlify.app/api/open/templates?keyword=封面"

响应结构：

{
  "success": true,
  "data": [
    {
      "id": "yellow",
      "name": "高对比大字报",
      "desc": "适合：避坑/干货/教程",
      "image": "https://...",
      "tags": ["封面"],
      "value": {
        "title": "示例标题",
        "subtitle": "示例副标题",
        "tag": "标签",
        "color": "#EAB308"
      }
    }
  ]
}

模板对象字段说明：

• id：唯一标识符（用于 --template 参数）
• name：模板显示名称
• desc：用途说明（如“适合：避坑/干货/教程”）
• tags：分类标签（免费, VIP, 封面, 图片）
• value：模板默认数据结构，包含所有可用字段（用于 --data 参数）

关键注意事项：

• 必须在运行时调用此 API 获取最新模板配置，不得硬编码模板信息。
• 应用缓存策略：在同一次对话中，对后续请求复用模板列表，避免重复调用 API。

3. 选择合适的模板

根据模板注册表数组进行分析，并基于以下逻辑选择：

模板选择逻辑

1. 直接 ID 匹配：若用户指定模板 ID（如“使用 yellow 模板”），则查找 id 字段匹配的模板并直接使用
2. 标签优先选择：

- 封面/主图类：选择 tags 中包含 '封面' 的模板

- 正文/内容图类：选择不包含 '封面' 标签，或包含 '图片' 标签的模板

- 含主图的图片：选择 tags 中包含 '图片' 的模板

- 对比类内容：选择 desc 或 name 中包含 '对比' 关键词的模板

- 教程/步骤类内容：选择 desc 或 name 中包含 '步骤' 关键词的模板

1. 类别匹配：在 desc 字段中搜索与用户请求匹配的关键词，如 避坑、干货、OOTD、情感 等
2. 格式匹配：根据用户请求中的格式偏好（对比、封面、清单等）进行匹配
3. 内容匹配：针对工具/软件类内容（如 Chrome 插件等），优先选择 desc 中包含 工具/清单/测评 的模板
4. 兜底方案：默认使用 yellow 模板，确保高对比度可视性

基于标签的选择示例

场景一：生成封面 + 内容图

• 封面：使用 tags: ['封面'] 的模板（如 yellow、magazine、laser-holographic 等）
• 内容：使用不包含 '封面' 标签的模板（如 glass、memo、newspaper 等）

场景二：含主图的图片

• 使用 tags: ['图片'] 的模板（如 tape-polaroid、soft-glass-border 等）

场景三：对比/前后对比内容

• 查找 desc 或 name 中包含 '对比' 的模板（如 classic-before-after、polaroid-before-after）

场景四：教程/步骤类内容

• 查找 desc 或 name 中包含 '步骤' 的模板（如 single-image-step、double-row-step、sidebar-nav-step）

模板分析流程

技能：Visnote 图像生成器

版本：0.1.0

分块：2/4

对于注册表数组中的每个模板：

1. 读取 desc 字段以了解使用场景（格式："适合：类别1/类别2/类别3"）
2. 读取 tags 字段以理解分类（免费, VIP, 封面, 图片）
3. 读取 value 字段以了解数据结构和可用字段
4. 使用上述筛选逻辑匹配用户请求

4. 提取用户数据并合并模板默认值

关键点：模板的 value 对象是基础——它包含所有默认值，包括默认图片、颜色、文本等。始终从该完整对象开始，仅覆盖用户明确提供的内容。

数据提取规则

标题提取：

• 显式标题格式：标题是"xxx" 或 标题是'xxx'
• 引号内容：查找看起来像标题的引号内内容
• 若未指定：使用模板的 value.title（模板默认值）

副标题/正文文本提取：

• 检查模板的 value 是否包含 subtitle 或 bodyText 字段
• 若用户明确提供副标题/正文：使用用户值
• 若用户未明确提供但提及次要内容（如“OOTD 穿搭封面”）：

- 从描述中提取并填入对应字段

- 示例：“生成 OOTD 穿搭封面” → subtitle 可为 "穿搭分享 | 日常记录"

- 示例：“日常碎碎念” → bodyText 可为 "今天天气真好\n心情超级棒"

• 若无用户内容可用：使用模板的 value.subtitle 或 value.bodyText（模板默认值）

图像字段（关键）：

• 检查模板的 value 是否包含 image、image2 等字段
• 若用户未明确提供图像路径，始终保留模板默认图像
• 模板默认值确保在无用户图像时也能正常工作
• 示例：杂志模板有 image: '/images/jimeng-20260125.png' → 除非用户另有指定，否则保持不变

标签提取：

• 查找类别标签：干货, 教程, 避坑, 分享, 笔记, 生活, 日常, 等
• 必要时格式化为 "xxx分享"
• 若未指定：使用模板的 value.tag（模板默认值）

作者提取：

• 提取 @提及：@username 格式
• 若模板支持，设置为 author 字段
• 若未指定：若存在，使用模板的 value.author（模板默认值）

颜色提取：

• 查找十六进制颜色码：#RRGGBB 格式
• 若模板支持，设置为 color 字段
• 若未指定：若存在，使用模板的 value.color（模板默认值）

模板特定字段：

• 识别模板 value 对象中存在的所有字段
• 对每个字段：

- 若用户明确提供值：使用用户值

- 若用户未提供：使用模板默认值

• 示例：image、image2 用于对比风格；step 用于教程风格

合并策略

1. 以模板默认值为基础：复制所选模板的完整 value 对象——这是你的基础，包含所有必需字段
2. 提取用户提供的值：识别用户明确希望覆盖的内容（标题、颜色等）
3. 智能填充缺失字段：若用户提及相关内容但未指定具体字段，智能分配：

- 示例：用户说“生成 OOTD 穿搭” + 已提供标题

→ 若模板有 subtitle，则填入 "穿搭分享 | 日常记录"

→ 若模板有 tag，则填入 "生活分享"

1. 用用户数据覆盖：替换用户明确提供的字段值
2. 保留所有模板默认值：绝不删除模板 value 中存在的字段——未指定字段使用模板默认值
3. 验证结构：确保最终数据对象与模板预期结构完全一致

5. 构建命令

使用正确的 JSON 转义构建命令：

node scripts/generate-image.mjs \
  --template <templateId> \
  --data '<json_data>' \
  --out <absolute-output-path>

参数要求

• --template：必填。使用所选模板的 id 字段
• --data：必填（若需覆盖默认值）。来自合并后数据对象的 JSON 字符串
• --out：可选。

- 若用户明确指定输出路径：使用用户提供的路径

- 若用户未指定路径：生成文件名为 visnote-YYYYMMDDHHmmss.png，其中 YYYYMMDDHHmmss 为当前时间戳格式

- 使用项目默认输出目录（如 ~/Downloads/）作为完整绝对路径

注意：API Key 会自动从 config.json 读取，无需作为参数传递。

JSON 构建

• 使用第 4 步合并后的数据对象
• 确保所有字段值与模板的 value 结构匹配
• 对 shell 命令进行正确转义：

- 将整个 JSON 包裹在单引号中

- 若内部存在单引号：转义为 \'

- 若存在换行符：转义为 \\n

- 若存在反斜杠：转义为 \\\\

示例：

--data '{"title":"我的标题","subtitle":"副标题","color":"#EF4444"}'

6. 执行并处理输出

执行构建好的命令：

1. 运行命令，并加入适当的错误处理
2. 验证成功：检查退出码和输出信息
3. 向用户反馈：

- 输出文件位置

- 使用的模板（名称和 ID）

- 相关状态信息

1. 错误处理：提供清晰、可操作的解释：

- 服务启动问题

- 模板未找到

- 缺少必填字段

- 文件权限问题

模板注册表 API

端点：GET /api/open/templates

基础 URL：https://vis-note.netlify.app

使用方式：

# 获取所有模板
curl "https://vis-note.netlify.app/api/open/templates"

# 按关键词搜索模板
curl "https://vis-note.netlify.app/api/open/templates?keyword=封面"

调用此 API 时采用缓存策略：

• 首次请求或新话题：始终获取最新的模板列表
• 后续请求（如“换个模板”、“再生成一张”等）：复用本次对话中已获取的模板列表

该 API 是以下内容的唯一来源：

• 所有可用模板及其 ID
• 模板描述和使用场景
• 每个模板的默认数据结构（通过 value 字段）
• 字段名称和格式
• 标签分类

切勿在响应中硬编码模板信息，因为：

• 模板可能被添加或移除
• 模板数据结构可能发生变化
• 描述内容可能更新
• value 对象中可能新增字段

缓存优势：

• 减少同一对话中的重复 API 调用
• 提升后续请求的响应速度
• 在性能与数据实时性之间取得平衡（新话题仍会获取最新数据）

示例 AI 处理流程

示例 1：工具/软件类内容

用户请求： “帮我生成一张 Chrome插件 的图片，标题是 一键下载微博文章”

AI 处理流程：

1. 分析请求：识别为工具/软件类内容 + 标题包含引号
2. 获取模板注册表：调用 GET /api/open/templates 获取所有模板
3. 选择模板：查找 desc 包含“工具/清单/测评”的模板 → academic-notes
4. 提取用户数据：

- 标题：“一键下载微博文章”（来自“标题是'...'”模式）

- 标签：提取“插件” → “插件分享”

1. 合并模板默认值：

{
  "title": "一键下载微博文章",  // 用户提供
  "bodyText": "核心知识点一\n避坑指南二\n保姆级教程三",  // 来自模板.value
  "tag": "插件分享",  // 提取并格式化
  "author": "@你的名字",  // 来自模板.value
  "color": "#F59E0B"  // 来自模板.value
}

1. 构建命令：

node scripts/generate-image.mjs \
  --template academic-notes \
  --data '{"title":"一键下载微博文章","bodyText":"核心知识点一\\n避坑指南二\\n保姆级教程三","tag":"插件分享","author":"@你的名字","color":"#F59E0B"}' \
  --out ~/Downloads/visnote-20260302143022.png

*备注：由于用户未指定输出路径，使用生成的时间戳文件名 visnote-20260302143022.png*

1. 执行命令：运行指令并将结果反馈给用户

示例 2：明确指定模板的教程类内容

用户请求： “使用 yellow 模板生成一张干货封面，标题是3秒抓住用户注意力”

AI 处理流程：

1. 分析请求：明确指定模板 ID + 类别 + 标题
2. 获取模板注册表：调用 GET /api/open/templates 获取所有模板
3. 选择模板：查找 id 为 "yellow" 的模板 → yellow
4. 提取用户数据：

- 标题：“3秒抓住用户注意力”

1. 合并模板默认值：

{
  "title": "3秒抓住用户注意力",  // 用户提供
  "subtitle": "3秒抓住用户注意力 | 涨粉秘籍",  // 来自模板.value
  "tag": "干货分享",  // 从“干货”提取
  "color": "#EAB308"  // 来自模板.value
}

1. 构建命令：

node scripts/generate-image.mjs \
  --template yellow \
  --data '{"title":"3秒抓住用户注意力","subtitle":"3秒抓住用户注意力 | 涨粉秘籍","tag":"干货分享","color":"#EAB308"}' \
  --out ~/Downloads/visnote-20260302143022.png

示例 3：对比类内容

用户请求： “生成一张装修前后对比图，标题装修改造”

AI 处理流程：

1. 分析请求：识别为对比类内容（前后对比）+ 标题
2. 获取模板注册表：调用 GET /api/open/templates 获取所有模板
3. 选择模板：查找 desc 包含“对比”或名称包含“对比”的模板 → classic-before-after
4. 提取用户数据：

- 标题：“装修改造”

1. 合并模板默认值：

{
  "title": "装修改造",  // 用户提供
  "subtitle": "3秒抓住用户注意力 | 涨粉秘籍",  // 来自模板.value
  "color": "#EF4444"  // 来自模板.value
}

1. 构建命令：

node scripts/generate-image.mjs \
  --template classic-before-after \
  --data '{"title":"装修改造","subtitle":"3秒抓住用户注意力 | 涨粉秘籍","color":"#EF4444"}' \
  --out ~/Downloads/visnote-20260302143022.png

示例 4：基于标签选择的批量生成

用户请求： “根据文档内容生成封面图和几张内容图，内容是关于小红书配图工具的”

AI 处理流程：

1. 分析请求：需要封面图 + 多张内容图，主题为小红书配图工具
2. 获取模板注册表：调用 GET /api/open/templates 获取所有模板
3. 选择模板：

- 封面图：查找 tags 包含 '封面' 的模板 → yellow（高对比度，醒目）

- 内容图：选择不包含“封面”标签、适合正文展示的模板 → glass（情绪磨砂玻璃风格，适合传播）

1. 生成封面图：

- 提取标题：“做小红书配图终于省心了”

- 提取标签：“实测分享”

- 合并 yellow 模板默认值

node scripts/generate-image.mjs \
  --template yellow \
  --data '{"title":"做小红书\n配图终于省心了","subtitle":"同一套模板搞定封面+正文","color":"#EAB308","tag":"实测分享"}' \
  --out ~/Downloads/visnote-20260302220201.png

1. 生成内容图（使用 glass 模板，颜色可变）：

- 图像 1（痛点）：“以前的痛点” + 关于问题的副标题

- 图像 2（新做法）：“新的做法” + 关于解决方案的副标题

- 图像 3（变化一）：“变化一” + 关于收益 1 的副标题

- 图像 4（变化二）：“变化二” + 关于收益 2 的副标题

- 图像 5（变化三）：“变化三” + 关于收益 3 的副标题

- 图像 6（建议）：“建议” + 关于技巧的副标题

1. 重要提示：生成多张图片时，请在每次请求间等待 10–15 秒，以避免 Next.js 服务器超时

AI 处理注意事项

Skill: Visnote Image Creator

版本：0.1.0

分块：4/4

通用开发规范

1. 采用缓存策略 - 在对话中复用模板列表以应对后续请求；针对新主题则获取最新数据
2. 始终读取模板注册表 - 不要假设模板结构
3. 使用绝对路径 作为 --out 参数的值
4. 正确转义 JSON 数据 - 在 shell 中使用单引号，内部引号和换行符需进行转义
5. 默认使用免费模板 - 除非用户明确需要 VIP 功能或指定 VIP 模板
6. 从用户请求中提取 @author 提及信息
7. 在标题中保留换行符，适当使用 \\n 表示
8. 关键词匹配需谨慎 - 综合考虑内容类型、格式和用户意图
9. 处理边界情况 - 若无明确匹配，则默认使用 yellow 模板
10. 执行前验证命令语法，特别是 JSON 转义
11. 尊重模板默认值 - 仅覆盖用户显式提供的字段
12. 使用标签实现智能选择：

- 封面类：选择 tags 中包含 '封面' 的模板

- 带图片类：选择 tags 中包含 '图片' 的模板

- 内容主体类：选择不包含 '封面' 标签的模板

- 对比类：在 desc 或 name 中查找 '对比'

- 教程/步骤类：在 desc 或 name 中查找 '步骤'

1. 批量生成提示：若需生成多张图片，建议每次请求间等待 10–15 秒，避免触发 Next.js 服务器超时

执行前提条件

重要：需配置 API Key

本技能要求在 config.json 中设置 API Key，否则图像生成将失败。

配置 API Key

首次设置：

# 在项目根目录创建或编辑 config.json
cat > config.json << 'EOF'
{
  "apikey": "your_api_key_here"
}
EOF

验证配置：

cat config.json

请确认文件存在且 apikey 字段包含有效的 API Key。

获取 API Key 的方式：

• 访问 VisNote 用户主页：https://vis-note.netlify.app/profile
• 复制生成的 API Key

API Key 验证流程

在生成任何图像前，脚本会调用 ${server}/api/open/check 接口进行验证。以下检查将被执行：

1. API Key 存在性

- 错误提示："API Key 不存在"

- 解决方案：检查 config.json 中的 API Key，或前往用户主页重新获取

1. 会员状态检查

- 错误提示："您还不是会员"

- 解决方案：订阅 VIP 会员服务

1. 会员有效期检查

- 错误提示："您的会员已过期"

- 解决方案：续订 VIP 会员服务

1. 可用额度检查

- 错误提示："生图额度已用完"

- 解决方案：购买额外额度，或等待额度重置

注：所有验证错误将立即中断图像生成过程，并显示清晰错误信息。

其他依赖项

• 安装 Playwright 依赖：

npm install playwright
npx playwright install chromium

• 确保 VisNote API 端点可访问：

- 模板列表接口：${server}/api/open/templates

- API Key 验证接口：${server}/api/open/check

常见问题排查

API Key 不存在

错误提示： "API Key 不存在"

• 检查项目根目录是否存在 config.json：cat config.json
• 确认 apikey 字段已填写有效密钥
• 从以下地址获取新密钥：https://vis-note.netlify.app/profile

非 VIP 会员

错误提示： "您还不是会员"

• 访问 VisNote 平台订阅 VIP 会员服务
• 图像生成功能需 VIP 会员权限

VIP 会员已过期

错误提示： "您的会员已过期"

• 续订 VIP 会员服务
• 可在用户个人主页查看会员到期时间

额度不足

错误提示： "生图额度已用完"

• 购买额外额度
• 若适用，可等待额度重置
• 在账户仪表盘中查看当前可用额度

缺少 #render 元素

• 确认 /editor 路由存在
• 检查页面是否包含必要元素
• 验证模板 ID 是否有效

下载失败

• 检查浏览器下载权限设置
• 确保输出目录存在且具有写入权限
• 确认 Next.js 服务器正常响应

模板未找到

• 核对模板 ID 拼写是否正确
• 调用模板接口确认可用模板列表：${server}/api/open/templates
• 确保模板 ID 在模板注册表中存在