菜单
AI朱朱侠长图生成技能。使用云雾API（GPT-Image-2）生成有实际内容的信息图长图，支持小红书竖图、公众号横图、超长图等多种预设。HTML+CSS渲染为备选方案。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | ai-ggbond-long-image-generator |
| description | AI朱朱侠长图生成技能。使用云雾API（GPT-Image-2）生成有实际内容的信息图长图，支持小红书竖图、公众号横图、超长图等多种预设。HTML+CSS渲染为备选方案。 |
| version | 1.1.0 |
| tags | ["image","infographic","long-image","social-media","design"] |
| author | AI朱朱侠 |
| triggers | ["长图生成","信息图","小红书图","公众号图","竖版图","横版图"] |
使用 GPT-Image-2 (云雾API) 生成有实际内容的高质量信息图长图，支持多种社交平台尺寸预设。
PIL 生成的图片只有占位符色块和文字，没有实际视觉内容。用户明确要求"用云雾API的GPT-Image-2来生成长图，不能直接用PIL"。
重要：必须使用 AI 图片生成（GPT-Image-2），不能用 PIL 画占位图。PIL 脚本仅用于快速原型测试。
bash ~/.hermes/skills/ai-ggbond-long-image-generator/scripts/setup_yunwu.sh 你的完整API_KEY
python3 ~/.hermes/skills/ai-ggbond-long-image-generator/scripts/test_yunwu_api.py
# 小红书竖图
python3 ~/.hermes/skills/ai-ggbond-long-image-generator/scripts/generate_long_image.py \
--prompt "AI工具使用指南" --preset xiaohongshu --output /tmp/test.png
# 超长图（4倍高度）
python3 ~/.hermes/skills/ai-ggbond-long-image-generator/scripts/generate_long_image.py \
--prompt "完整教程" --preset super_long_medium --output /tmp/long.png
主背景：#0F1419（深蓝黑）
卡片背景：#1A2332（深蓝灰）
主文字：#FFFFFF（纯白）
次文字：#8B95A5（灰蓝）
强调色1：#00D4FF（霓虹蓝）
强调色2：#FF6B35（活力橙）
强调色3：#00E676（科技绿）
主背景：#F8F9FA（浅灰白）
卡片背景：#FFFFFF（纯白）
主文字：#1A1A2E（深蓝黑）
次文字：#6C757D（中灰）
强调色1：#0066FF（经典蓝）
强调色2：#FF4757（珊瑚红）
1. 内容类型：数据报告 / 教程步骤 / 观点卡片 / 清单列表 / 对比分析
2. 平台目标：小红书 / 公众号 / 朋友圈 / Instagram / 通用
3. 尺寸选择：使用预设或自定义
4. 风格偏好：深色科技 / 浅色清新 / 品牌定制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 基础重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 画布容器 */
.canvas {
width: {WIDTH}px;
height: {HEIGHT}px;
background: {BG_COLOR};
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
position: relative;
overflow: hidden;
}
/* 内容区域 */
.content {
padding: {PADDING}px;
height: 100%;
display: flex;
flex-direction: column;
}
/* 模块化组件 */
.header { /* 头部区域 */ }
.section { /* 内容区块 */ }
.footer { /* 底部区域 */ }
.card { /* 卡片容器 */ }
.badge { /* 标签徽章 */ }
.divider { /* 分隔线 */ }
</style>
</head>
<body>
<div class="canvas">
<div class="content">
<!-- 内容结构 -->
</div>
</div>
</body>
</html>
# 使用 playwright 截图
from playwright.sync_api import sync_playwright
def render_html_to_image(html_path, output_path, width, height):
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={'width': width, 'height': height})
page.goto(f'file://{html_path}')
page.screenshot(path=output_path, full_page=True)
browser.close()
┌─────────────────────────┐
│ [LOGO] [标题] │ ← 头部（品牌+标题）
├─────────────────────────┤
│ ┌─────────────────────┐│
│ │ 核心数据/图表 ││ ← 主数据区
│ └─────────────────────┘│
│ ┌──────┐ ┌──────┐ │
│ │指标1 │ │指标2 │ │ ← 指标卡片
│ └──────┘ └──────┘ │
│ ┌─────────────────────┐│
│ │ 详细说明/要点 ││ ← 正文区
│ └─────────────────────┘│
│ [来源] [日期] │ ← 底部（元信息）
└─────────────────────────┘
┌─────────────────────────┐
│ [步骤标题] │ ← 大标题
│ [副标题/说明] │
├─────────────────────────┤
│ ① ──────────────────── │
│ [步骤1标题] │ ← 步骤1
│ [步骤1说明] │
│ ② ──────────────────── │
│ [步骤2标题] │ ← 步骤2
│ [步骤2说明] │
│ ③ ──────────────────── │
│ [步骤3标题] │ ← 步骤3
│ [步骤3说明] │
├─────────────────────────┤
│ [小贴士/总结] │ ← 底部总结
└─────────────────────────┘
┌─────────────────────────┐
│ ┌─────────────────────┐│
│ │ ││
│ │ "金句/核心观点" ││ ← 引用框
│ │ ││
│ └─────────────────────┘│
│ │
│ [论述要点1] │ ← 正文
│ [论述要点2] │
│ [论述要点3] │
│ │
│ ── 作者/来源 ── │ ← 署名
└─────────────────────────┘
┌─────────────────────────┐
│ [对比标题] │
├──────────┬──────────────┤
│ [方案A] │ [方案B] │ ← 对比标题
├──────────┼──────────────┤
│ ✓ 优点1 │ ✓ 优点1 │
│ ✓ 优点2 │ ✓ 优点2 │ ← 优缺点
│ ✗ 缺点1 │ ✗ 缺点1 │
├──────────┴──────────────┤
│ [结论/建议] │ ← 总结
└─────────────────────────┘
详细配置见 references/yunwu-api-config.md
Agent 无法自动设置 API Key（安全机制会截断长密钥）。当发现 image_gen.api_key 为空或无效时：
hermes config set image_gen.api_key 完整的key
hermes config set image_gen.base_url https://yunwu.ai/v1
hermes config set image_gen.model gpt-image-2
config.yaml 有安全写保护，必须用 CLI：
hermes config set image_gen.provider openai
hermes config set image_gen.model gpt-image-2
hermes config set image_gen.base_url https://yunwu.ai/v1
hermes config set image_gen.api_key 你的实际key
image_generate 工具读取 config.yaml 的 image_gen.api_key，不是环境变量~/.ai-ggbond-skills/.env 的 YUNWU_API_KEY，位置不同provider 必须设为 openai，不能是 custom# 单张生成
python scripts/render_gpt.py --prompt "AI工具使用指南" --preset xiaohongshu --output output.png
# 超长图（自动分段）
python scripts/render_gpt.py --prompt "完整教程" --preset super_long_medium --output long.png
# 自定义尺寸
python scripts/render_gpt.py --prompt "内容" --width 1080 --height 5400 --output custom.png
# 超长图渲染示例
python scripts/render_long.py --html input.html --output output.png --preset super_long_medium
python scripts/render_long.py --html input.html --output output.png --height 7200 --force-segment
# 轻量版渲染示例
python scripts/render_lightweight.py --preset super_long_medium --output output.png
python scripts/render_lightweight.py --width 1080 --height 7200 --output output.png
| 场景 | 推荐脚本 | 原因 |
|---|---|---|
| 有实际内容的长图 | render_gpt.py | GPT-Image-2 生成真实内容 ⭐首选 |
| 超长图（> 3000px） | render_gpt.py + 分段 | AI 分段生成 + 拼接 |
| HTML 精确还原 | render.py / render_long.py | 需要 Playwright 环境 |
| 快速占位/测试 | render_lightweight.py | 仅用于尺寸测试，不含实际内容 |
| API Key 无法设置时 | 独立工具包 | 打包脚本让用户手动运行，见 references/standalone-toolkit-pattern.md |
绝对不要用 PIL 生成空壳图片给用户看！
render_lightweight.py 只是用来测试尺寸和渲染流水线的，它生成的是没有任何实际内容的占位图。用户需要的是有真实文字、图表、设计的信息图。
正确流程：
references/yunwu-api-config.md）如果 API Key 过期（401 错误），立即告知用户，不要用 PIL 空壳替代。
| 状态码 | 含义 | 处理 |
|---|---|---|
| 200 | 成功 | 保存图片 |
| 401 | 无效令牌（过期/错误） | 要求用户到 https://yunwu.ai 重新生成 key |
| 403 | 有效 key 但无模型权限 | 检查云雾后台模型权限，换模型或升级套餐 |
| 429 | 限流（频繁失败触发） | 等待 120 秒后重试 |
长 API Key（56字符）在 execute_code 中可能只收到 13 字符。不要硬编码 key，从 config.yaml 读取：
import yaml
with open('/Users/admin/.hermes/profiles/gongcheng/config.yaml') as f:
api_key = yaml.safe_load(f)['image_gen']['api_key']
详见 references/yunwu-api-config.md。
当图片高度超过 3000px 时，直接渲染可能遇到：
┌─────────────────────┐
│ 原始 HTML │
└─────────────────────┘
↓
┌─────────────────────┐
│ 分段渲染（2000px） │
│ 片段1: 0-2000px │
│ 片段2: 1900-3900px │ ← 100px 重叠
│ 片段3: 3800-5400px │
└─────────────────────┘
↓
┌─────────────────────┐
│ 智能拼接（去重叠） │
└─────────────────────┘
↓
┌─────────────────────┐
│ 最终超长图输出 │
└─────────────────────┘
# 使用预设
python scripts/render_long.py --html input.html --output output.png --preset super_long_medium
# 自定义尺寸
python scripts/render_long.py --html input.html --output output.png --width 1080 --height 5400
# 强制分段渲染（即使高度 < 3000px）
python scripts/render_long.py --html input.html --output output.png --height 2500 --force-segment
# 自定义分段参数
python scripts/render_long.py --html input.html --output output.png --height 7200 \
--segment-height 2500 --overlap 150 --scale 2
# 列出所有超长图预设
python scripts/render_long.py --list-presets
| 参数 | 默认值 | 说明 |
|---|---|---|
| --segment-height | 2000 | 每段渲染高度（px） |
| --overlap | 100 | 重叠区域（px），用于平滑拼接 |
| --scale | 2 | 清晰度倍数（2x = Retina） |
| --force-segment | false | 强制分段渲染 |
分段高度选择
重叠区域
清晰度
HTML 设计优化
position: fixedloading="eager"font-display: block# 1. 生成 HTML
python scripts/quick_gen.py --template steps \
--title "AI工具完整使用指南" \
--subtitle "从入门到精通" \
--steps '[{"title":"选择工具","desc":"..."},{"title":"安装配置","desc":"..."},{"title":"基础使用","desc":"..."},{"title":"进阶技巧","desc":"..."},{"title":"高级功能","desc":"..."},{"title":"实战案例","desc":"..."},{"title":"常见问题","desc":"..."},{"title":"总结","desc":"..."}]' \
--output tutorial.html
# 2. 渲染超长图
python scripts/render_long.py --html tutorial.html --output tutorial.png --preset 4x
# 1. 准备 HTML（自定义内容）
# 2. 渲染极限长图
python scripts/render_long.py --html report.html --output report.png --preset super_long_xl
# 验证 image_gen 配置存在且 key 有效
cat ~/.hermes/config.yaml | grep -A 5 "image_gen:"
如果 key 为空或返回 401，要求用户提供新 key。
内容: "{用户提供的文字内容}"
尺寸: "{预设名称或自定义宽×高}"
风格: "{deep_tech/light/brand:{颜色}}"
模板: "{A/B/C/D/auto}"
# 单张生成
python scripts/render_gpt.py --prompt "内容描述" --preset xiaohongshu --output output.png
# 超长图（自动分段）
python scripts/render_gpt.py --prompt "内容描述" --preset super_long_medium --output long.png
✅ 长图已生成
📁 文件位置：{path}
📐 尺寸：{width} × {height} px
🎨 风格：{style}
用户：帮我生成一张小红书竖图，内容是「AI工具推荐TOP5」
AI：好的，使用模板C（观点卡片），尺寸1080×1440，深色科技风格...
用户：公众号封面图，标题「2024年最值得关注的AI产品」
AI：好的，使用公众号封面横图900×383，浅色清新风格...
用户：自定义尺寸 1200×800，做一张对比图
AI：好的，使用模板D（对比分析图），自定义尺寸1200×800...
AI朱朱侠文章写作技能。从AI Native超级个体视角撰写微信公众号文章，涵盖AI产品拆解、场景解决方案、效率提升实战、产品方法论、行业观察、个人品牌故事。当用户说"写一篇关于XXX的文章""分析一下XXX产品""聊聊XXX""写我的故事""品牌故事"时使用。
GBrain 记忆层在 Hermes 环境下的安装、配置与内容灌入。当用户提到"brain""gbrain""灌内容""记忆层""知识库搭建"时触发。桥接 gbrain 上游技能（RESOLVER/signal-detector/brain-ops）与飞哥的 Hermes agent 生态。
检索、筛选并解读 GitHub Trending 热门开源项目，输出适合飞哥的 AI Native、开发者工具、Agent、MCP、LLM 应用趋势洞察。Use when 用户提到 GitHub Trending、热门开源项目、趋势仓库、AI 项目发现、开发者工具发现、开源项目选题、公众号选题、副业机会或需要从 GitHub 热榜找人脉/商机。
推送文章到微信公众号（草稿箱）。支持 Markdown/HTML 输入，自动图片上传（正文内联 + 封面），主题样式，API 模式（推荐）和 Chrome CDP 模式（备用）。
GPT Image 2女性肖像海报生成系统。生成具有摄影感、电影感、情绪感的高质量女性肖像海报，同时避免安全审核问题。支持云雾API直接对接。
发布内容到 X (Twitter)。支持短帖(文字+图片+视频)、引用转发、长文(X Articles/Markdown)、帖子串(Thread)。对接 ai-ggbond-article-writer 和 ai-ggbond-x-followings-feed。当用户说"发到X""发推""tweet""publish to X"时触发。