Menü
小红书封面图和配图生成 — 读取纯文本输出（H titre + 正文 + Hashtag），生成 3:4 竖版 PNG 图片
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | rednote-image |
| description | 小红书封面图和配图生成 — 读取纯文本输出（H titre + 正文 + Hashtag），生成 3:4 竖版 PNG 图片 |
| triggers | ["做封面","生成配图","小红书图片"] |
小红书图片生成模块。根据标题 + 正文 + Hashtag 生成封面图和内容页图（3:4 竖版，1080×1440px）。
输入： 纯文本（标题 / 正文 / Hashtag），图片输出到 ~/.hermes/research/imgs/
node scripts/render_html_to_png.js <input.html> <output.png> 1080 1440font-family: 'WenQuanYi Zen Hei', 'WenQuanYi Zen Hei Sharp', 'DejaVu Sans', sans-serif;
-webkit-font-smoothing: antialiased;
系统可用中文字体：文泉驿 WenQuanYi Zen Hei（首选）、文泉驿点阵 WenQuanYi Zen Hei Sharp。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1080px; height: 1440px; font-family: 'WenQuanYi Zen Hei', 'WenQuanYi Zen Hei Sharp', 'DejaVu Sans', sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: #E8F4FC; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 0 80px; }
.title-block { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.line { display: block; font-weight: 900; line-height: 1.1; text-align: center; }
.l1 { font-size: 177px; color: #f97316; letter-spacing: 4px; }
.l2 { font-size: 109px; color: #1e1b4b; letter-spacing: 3px; }
.l2 .h { color: #f97316; }
.l3 { font-size: 95px; color: #1e1b4b; letter-spacing: 3px; }
.l3 .h { color: #f97316; }
.teaser { font-size: 64px; font-weight: 900; color: #1e1b4b; margin-top: 54px; letter-spacing: 2px; }
</style></head><body>
<div class="center">
<div class="title-block">
<div class="line l1">OpenClaw</div>
<div class="line l2">已经<span class="h">过气</span>了？！</div>
<div class="line l3"><span class="h">Hermes</span>崛起！</div>
</div>
<div class="teaser">点我看完整横评 →</div>
</div>
</body></html>
| 元素 | 规范 |
|---|---|
| 小标题 | font-size:22px; font-weight:bold; color:#e55c00; + 底部 border-bottom: 2px solid #f5c89a; padding-bottom:6px; margin-bottom:12px; |
| 正文 | font-size:17px; line-height:1.9; margin:14px 0; 段落间距宽松 |
| 列表 | font-size:17px; font-weight:bold; 全文不加粗，关键词用 strong style="color:#e55c00;font-weight:bold;" 橙色高亮；不用 ul/li |
| 结尾 | 分隔线 <hr style="border:none;border-top:2px solid #f5c89a;margin:24px 0 12px;"> + <p style="font-size:12px;color:#999;">来源：XXX</p> |
| 配图 | width:640px; border-radius:10px; display:block; + 图注 <p style="font-size:13px;color:#666;text-align:center;margin-top:6px;">图注文字</p> |
每张内容页最多包含 2 个对比维度，每个维度一张表格。
| 用途 | 颜色 |
|---|---|
| 背景 | #E8F4FC |
| 深色文字 | #1e1b4b |
| 高亮/★ | #f97316 |
| 第一列标签 | #64748b |
| 表头背景 | #1e1b4b |
| 表格卡片背景 | #ffffff |
| 行分隔线 | #e2e8f0 |
| 紫色标签 | #7c3aed |
SKILL_DIR="$HOME/.hermes/skills/rednote-skills/rednote-image"
OUT_DIR="$HOME/.hermes/research/imgs"
mkdir -p "$OUT_DIR"
# 封面
node "$SKILL_DIR/scripts/render_html_to_png.js" \
"/tmp/cover.html" \
"$OUT_DIR/Cover.png" 1080 1440
# 内容页
node "$SKILL_DIR/scripts/render_html_to_png.js" \
"/tmp/content_page.html" \
"$OUT_DIR/Page1.png" 1080 1440
必须验证文件：
ls -lh $OUT_DIR/
图片发送格式：一个 message 里每张图单独一行（不在同一个 code block 里），示例：
**封面**
MEDIA:/path/to/Cover.png
**Page 1**
MEDIA:/path/to/Page1.png
**Page 2**
MEDIA:/path/to/Page2.png
~/.hermes/research/imgs/小红书封面图生成 — 根据标题生成3:4竖版封面PNG，含设计原则和打分体系
小红书内容页生成 — 根据正文生成多张3:4竖版内容页PNG
小红书图文发布总调度 — 调用 rednote-writer-title 写标题，rednote-cover 做封面，rednote-writer-body 写正文，rednote-pages 做内容页，交付完整图文帖子
小红书标题生成 — 从素材中提炼爆款标题，3个备选，每个≤20字，含七维评估框架
小红书正文写作 — 开头公式、结尾闭环、情绪化写作，按确认标题定制内容