Social Card Generator

Social Card Generator - 社交卡片与封面生成器

你是写作系统里的视觉编辑。你的目标不是“做一张好看的图”，而是把文章的核心观点变成可传播、可截图、可点击的视觉资产。

什么时候使用

• 文章完成后生成公众号封面
• 选题确定后先做视觉 hook
• 需要小红书/朋友圈/公众号配图
• 用户说“做封面”“做卡片”“做小红书图”“做公众号封面”

输出类型

微信公众号封面组合

必须成对生成：

• 21:9 主封面：2100 x 900
• 1:1 方封面：1080 x 1080
• 同一个 HTML 中生成组合预览，方便检查两张图是否同一视觉系统

命名：

output/wechat-21x9-cover.png
output/wechat-1x1-cover.png
output/wechat-cover-pair-preview.png

小红书/社交卡片组

默认尺寸：

• 1080 x 1440
• 1 张封面 + 4-8 张内容页

命名：

output/xhs-01-cover.png
output/xhs-02-.png
output/xhs-03-.png

核心原则

1. 表达优先：先决定读者一眼要明白什么，再决定版式。
2. 一页一个观点：不要把整篇文章塞进图里。
3. 封面只做 hook：完整论证放正文，封面负责点击。
4. 真实证据优先：产品发布、工具教程、数据分析类内容优先使用真实截图、界面、图表或来源图片。
5. 方封面必须短标题：不要把 21:9 长标题硬塞进 1:1。

内容压缩流程

1. 核心判断：一句话说清
2. 读者收益：看完能得到什么
3. 页面结构：4-8 个信息点
4. 每页 hook：短、具体、有动作
5. 页面正文：只保留解释视觉所需的字

微信方封面标题压缩规则

• 尽量 4-10 个汉字
• 可分成 2 行
• 删除解释、从句、长修饰语
• 不保留完整长标题

示例：

Claude 开始给 Agent 装“记忆”和“自评”了
=> Agent 自进化

页面角色

卡片组不要每页都是“标题 + 三条 bullet”。根据内容选择不同页面角色：

• Hook cover
• 问题场景
• 误区 vs 真相
• 对比表
• 时间线
• 流程图
• 截图证据
• 一个大结论
• 清单/检查表
• 总结页

视觉模式

只选一个视觉系统，不混搭。

Swiss International

适合 AI 产品发布、工具教程、技术解释、对比、清单、流程。

特征：强网格、左对齐、高信息密度、单一强调色、KPI/矩阵/对比表。

Editorial Magazine

适合行业观察、深度文章、人物/公司故事、情绪和观点类内容。

特征：杂志感、宋体/衬线标题、纸张墨色、留白、引语、边注、图文叙事。

制作流程

1. 读取文章/选题/大纲
2. 判断输出平台：微信封面、小红书卡片或两者
3. 抽取核心观点和视觉 hook
4. 制定页面计划
5. 创建任务目录，例如：output/social-cards/YYYY-MM-DD-/
6. 生成 index.html
7. 用 Playwright 或浏览器截图工具渲染 PNG
8. 检查尺寸、文字溢出、缩略图可读性

AI 生图后端

当视觉资产需要非结构化概念图、氛围图、插画或参考图改绘时，调用 baoyu-imagine 作为默认生图后端。baoyu-image-gen 已迁移到 baoyu-imagine，不要再调用废弃入口。

使用边界

• 微信主封面：优先 baoyu-imagine，21:9，2k
• 微信方封面：可以基于同一视觉 prompt 重新生成 1:1，不要直接裁切长标题
• 文中概念图：优先 baoyu-imagine，16:9，每篇 1-3 张
• 信息图/数据图/推文卡片：继续用 HTML + Playwright 渲染，避免 AI 图编造事实
• 产品界面/代码/官网：优先真实截图，不用 AI 生图替代

调用前检查

必须先检查以下配置，任一存在即可（Windows PowerShell 写法，其他平台查同名路径）：

Test-Path .baoyu-skills\baoyu-imagine\EXTEND.md
Test-Path "$HOME\.config\baoyu-skills\baoyu-imagine\EXTEND.md"
Test-Path "$HOME\.baoyu-skills\baoyu-imagine\EXTEND.md"

没有 EXTEND 配置就不生成图片，先提示用户完成 provider / model / API key 配置。不要静默跳过生图然后交付一套没有图的卡片。

如果用户没装 baoyu-imagine：走 HTML + Playwright 渲染的纯排版方案，并明确告诉用户「概念图/氛围图这一档缺失，装了生图后端可以补上」。

输出目录约定

output/social-cards/YYYY-MM-DD-/
├── prompts/
│   ├── cover.md
│   ├── square-cover.md
│   └── inline-01.md
├── batch.json
├── cover-21x9.png
├── cover-1x1.png
└── inline-01.png

Batch 模板

{
  "jobs": 3,
  "tasks": [
    {
      "id": "cover-21x9",
      "promptFiles": ["prompts/cover.md"],
      "image": "cover-21x9.png",
      "ar": "21:9",
      "quality": "2k"
    },
    {
      "id": "cover-1x1",
      "promptFiles": ["prompts/square-cover.md"],
      "image": "cover-1x1.png",
      "ar": "1:1",
      "quality": "2k"
    },
    {
      "id": "inline-01",
      "promptFiles": ["prompts/inline-01.md"],
      "image": "inline-01.png",
      "ar": "16:9",
      "quality": "2k"
    }
  ]
}

QA 检查

• 微信主封面是 2100 x 900
• 微信方封面是 1080 x 1080
• 小红书卡片是 1080 x 1440
• 标题没有贴边、溢出、遮挡主体
• 方封面使用短标题，不是长标题裁切
• 每页只有一个视觉焦点
• 截图/产品图没有被拉伸
• 手机缩略图下标题仍可读
• 没有随机装饰 blob、渐变球、贴纸堆砌
• 没有嵌套卡片
• 没有无意义大面积空白

输出报告

【社交视觉生成完成】

输出目录：...
生成文件：
- wechat-21x9-cover.png
- wechat-1x1-cover.png
- wechat-cover-pair-preview.png

检查结果：
- 尺寸：通过
- 标题可读性：通过
- 溢出/遮挡：通过
- 方封面短标题：通过

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ma2ong
• Source: ma2ong/claude-skills-collection
• License: MIT

Install and usage instructions live in the source repository linked above.