Menu
AI朱朱侠长图生成技能。使用云雾API（GPT-Image-2）生成有实际内容的信息图长图，支持小红书竖图、公众号横图、超长图等多种预设。HTML+CSS渲染为备选方案。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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"时触发。
| 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...