| name | creating-zodiac-posters |
| description | Creates social media zodiac posters by generating HTML from Markdown design specs and capturing screenshots. Use when the user wants to create zodiac-themed vertical posters (1080x1440), design Chinese copywriting images, produce zodiac personality or horoscope content, or batch generate cover and content page sets. |
星座海报生成器 v4.0
生成适用于社交媒体的星座主题竖版海报(1080×1440px,3:4比例)。
⚠️ 截图工具使用要求(必须遵守!)
🚫 禁止事项
❌ 绝对禁止使用 MCP Playwright 工具进行截图!
| 禁止操作 | 问题 |
|---|
mcp__playwright__browser_take_screenshot | 输出 16:10 横版图片 |
mcp__playwright__browser_navigate + 截图 | viewport 不正确 |
| 任何 MCP Playwright 截图操作 | 无法保证 1080x1440 尺寸 |
✅ 正确做法
必须使用独立 Python 截图工具(skills/_shared/scripts/poster_screenshot.py)
通过 Bash 工具调用:
单文件截图:
python3 /Users/panyuhang/我的项目/编程/脚本/小红书封面生成/skills/_shared/scripts/poster_screenshot.py \
/tmp/cover.html \
/Users/panyuhang/我的项目/编程/脚本/小红书封面生成/output/2026/01/04/射手座-主题/cover.png
批量截图(一套图多页):
python3 /Users/panyuhang/我的项目/编程/脚本/小红书封面生成/skills/_shared/scripts/poster_screenshot.py \
--batch /tmp/poster_html/ /path/to/output/
工具特性:
- 固定 viewport 1080x1440(无需手动设置)
- 自动等待字体加载(2秒)
- 自动截取
.poster 元素
- headless 模式运行,不抢占浏览器
- 支持
--json 输出便于解析结果
模板系统 v4.0
使用 Markdown 设计规范文档定义模板样式,AI 根据规范生成 HTML。
当前模板
| 模板 | ID | 重点色 | 说明 |
|---|
| 编辑暖调 | editorial-warm | #C15F3C | 编辑杂志风格,居中对称,温和内敛 |
| 动态编辑 | editorial-dynamic | #C15F3C | 动态编辑风,非对称布局,视觉张力强 |
| 极简暖调 | minimal-warm | #C8725A | 极简居中布局,大留白,适合封面 |
模板选择指南
| 主题类型 | 推荐模板 | 推荐装饰 |
|---|
| 每日运势 | editorial-dynamic | 大字号日期背景 + 圆形装饰 |
| 年运势/月运势 | editorial-dynamic | 大字号背景 + 圆形装饰 |
| 自由/孤独/情感 | editorial-dynamic | 大留白 + 放大淡色图标 |
| 性格/兴奋点 | editorial-dynamic | 斜线装饰 + 色块副标题 |
| 规则/清单/指南 | editorial-dynamic | 左侧竖线 + 编号列表 |
| 职业/方向/选择 | editorial-dynamic | 箭头装饰 + 关键词标签组 |
| 配对/对比/常规 | editorial-warm | 居中布局 + 引用块 |
套图生成规则(必须遵守)
⚠️ 核心规则:正文段落数 = 内容页数量
正文内容中的每一段(以空行 \n\n 分隔)必须对应一张内容页。每套图固定包含:封面 + 内容页 + 总结页。
| 正文段落数 | 生成页面 | 总图片数 |
|---|
| 3段 | 1封面 + 3内容页 + 1总结页 | 5张 |
| 4段 | 1封面 + 4内容页 + 1总结页 | 6张 |
| 5段 | 1封面 + 5内容页 + 1总结页 | 7张 |
| 6段 | 1封面 + 6内容页 + 1总结页 | 8张 |
| N段 | 1封面 + N内容页 + 1总结页 | N+2张 |
正文段落解析示例
输入正文(5段):
2026对双子座来说,像是七年蛰伏后的正式上场。
天王星回到命宫,速度感终于回来了,那种久违的轻盈和果断,会重新成为你的底色。
过去几年学会的稳定和坚持,不会白费。2026开始,目标更清晰,行动更果断。
这一年适合做减法。减少无意义的社交,把精力留给真正值得的人和事。
贵人会在意想不到的地方出现。保持开放,2026的机会往往藏在看似随意的连接里。
生成结果(7张图):
01_cover.html/png → 封面
02_page.html/png → 第1段内容
03_page.html/png → 第2段内容
04_page.html/png → 第3段内容
05_page.html/png → 第4段内容
06_page.html/png → 第5段内容
07_end.html/png → 总结页
解析正文段落的代码逻辑
paragraphs = [p.strip() for p in content.split('\n\n') if p.strip()]
num_pages = len(paragraphs)
每张内容页的内容
每张内容页包含:
- 关键词/小标题:从该段落提取2-4字核心词
- 正文:该段落的完整内容(可拆分为多行显示)
- 页码:02, 03, 04... (封面是01)
⚠️ 核心规则:同一套图必须使用统一风格和布局
一条记录生成的封面 + 所有内容页必须使用同一种风格包 + 同一种布局变体,保持视觉一致性。
| 规则 | 说明 |
|---|
| 风格包锁定 | 生成套图前先确定一种风格包(经典强调/简约边框/杂志双线/艺术镂空) |
| 布局变体锁定 | 生成套图前先确定一种布局变体(A/B/C/D/E),所有内容页使用相同布局 |
| 关键词样式统一 | 所有内容页的关键词必须使用同一种样式 |
| 装饰元素统一 | 封面和内容页使用同一体系的装饰元素 |
❌ 禁止事项:
- 禁止同一套图混用不同风格包(如page-01用经典强调,page-02用杂志双线)
- 禁止同一套图混用不同布局变体(如page-02用变体A,page-03用变体B)
- 禁止封面和内容页使用完全不同的装饰元素
- 禁止每页随机选择关键词样式或布局变体
详细的风格变体定义请参考模板文档 TEMPLATE.md 中的"风格变体定义"部分。
布局锁定执行流程(必须遵守)
步骤 1:生成封面前确定双锁定
在生成第一张图(封面)之前,必须先确定:
- 风格包:随机选择 1 种(经典强调/简约边框/杂志双线/艺术镂空)
- 布局变体:随机选择 1 种(A/B/C/D/E)
⚠️ 重要:每套新套图必须随机选择不同的风格包和布局变体!
批量生成多条记录时,确保每条记录使用不同的风格组合,避免视觉重复。
随机选择公式:
风格包编号 = (记录索引 % 4) + 1
布局变体编号 = (记录索引 % 5) + 1
或使用时间戳:
风格包编号 = (当前时间戳 % 4) + 1
布局变体编号 = (当前时间戳 % 5) + 1
风格包对应表:
| 编号 | 风格包 |
|---|
| 1 | 经典强调 |
| 2 | 简约边框 |
| 3 | 杂志双线 |
| 4 | 艺术镂空 |
布局变体对应表:
| 编号 | 布局变体 |
|---|
| 1 | A(色块标题居中式) |
| 2 | B(杂志章节式) |
| 3 | C(数字序号引导式) |
| 4 | D(引用突出式) |
| 5 | E(分栏对比式) |
布局变体参考建议(仅供参考,随机优先):
| 内容类型 | 建议布局 | 原因 |
|---|
| 年运势/月运势 | B | PART标签适合分章节展示 |
| 每日运势 | A | 简洁明了,突出单日主题 |
| 情感/心理/感悟 | D | 大引号适合金句和感悟 |
| 多话题 | E | 左标签右内容,清晰分类 |
| 清单/指南/规则 | C | 数字引导适合列表内容 |
确定后记录为套图配置(在脑中或第一条注释中):
套图配置:
- 风格包:简约边框 ← 随机选择(编号2)
- 布局变体:B(杂志章节式)← 随机选择(编号2)
步骤 2:封面添加双锁定注释
封面 HTML 必须包含完整的双锁定标记:
步骤 3:每张内容页继承锁定配置
生成每张内容页时:
- 先读取封面的
[STYLE LOCK] 和 [LAYOUT LOCK] 注释
- 使用完全相同的风格包和布局变体
- 在内容页 HTML 中添加相同的双锁定注释
⚠️ 绝对禁止:
- 禁止每页随机选择布局变体
- 禁止根据内容长度切换布局
- 禁止混用不同风格包的装饰元素
布局变体快速参考
| 变体 | 名称 | 特征 | 关键CSS类 |
|---|
| A | 色块标题居中式 | 居中对称,色块标题 | .main-a, .title-block |
| B | 杂志章节式 | 左对齐,PART标签 | .main-b, .part-label |
| C | 数字序号引导式 | 大淡色数字背景 | .main-c, .big-number |
| D | 引用突出式 | 大引号开头 | .main-d, .big-quote |
| E | 分栏对比式 | 左侧标签+右侧内容 | .main-e, .left-column |
⚠️ 一旦根据内容类型选定布局,整套图必须统一使用该布局!
内容类型规则
每日运势类(必须遵守)
当内容为每日运势类型时,封面必须包含以下元素:
| 必含元素 | 格式要求 | 字号要求 | 示例 |
|---|
| 日期 + 星座 | 必须在同一行显示 | 48-56px,加粗 | 12月31日 · 射手座 |
⚠️ 重要:日期+星座是封面的视觉焦点,必须一眼可见!
日期+星座样式规范:
.date-zodiac {
font-size: 48-56px;
font-weight: 600;
color: #2D2D2D;
letter-spacing: 4-6px;
text-align: center;
}
封面布局示例:
┌─────────────────────────────────┐
│ [星座图标] │
│ │
│ 12月31日 · 射手座 │ ← 日期+星座同一行(48-56px 加粗)
│ ───────── │
│ 主标题 │
│ 副标题 │
│ 「引用金句」 │
│ ─────────────────────────── 01 │
└─────────────────────────────────┘
日期+星座格式选项:
12月31日 · 射手座(推荐,最清晰)
12.31 ♐ 射手座
DEC.31 · SAGITTARIUS
12/31 射手座每日运势
周运势/月运势类
封面必须包含:
| 必含元素 | 示例 |
|---|
| 时间范围 | 12月末、1月第一周、2025年1月 |
| 星座名称 | 射手座 |
年运势类
封面必须包含:
| 必含元素 | 示例 |
|---|
| 年份 | 2025(建议作为大字号背景装饰) |
| 星座名称 | 射手座 |
性格/情感/指南类
封面建议包含:
| 建议元素 | 示例 |
|---|
| 星座名称 | 头部标签或副标题 |
| 主题分类 | 暧昧期指南、回避型人格 |
模板规范文件
assets/templates/editorial-warm/TEMPLATE.md # 编辑暖调规范
assets/templates/editorial-dynamic/TEMPLATE.md # 动态编辑规范
assets/templates/editorial-dynamic/examples/ # 动态编辑示例
生成流程
步骤 0:读取飞书记录的模板字段(必须!)
⚠️ 在生成海报前,必须先确定使用哪种模板风格!
- 从飞书记录中获取"模板"字段值
- 根据映射表确定模板 ID(参见"模板字段值映射")
- 如果字段为空,默认使用
editorial-warm
映射示例:
- 字段值
动态编辑风 → 模板 ID editorial-dynamic
- 字段值
编辑暖调 → 模板 ID editorial-warm
- 字段值
极简暖调 → 模板 ID minimal-warm
步骤 1:读取设计规范
根据步骤 0 确定的模板 ID,读取对应的设计规范:
读取 assets/templates/{模板ID}/TEMPLATE.md
重要:必须使用正确的模板规范!不同模板的设计差异显著。
步骤 1.5:确定并记录双锁定配置(关键!)
⚠️ 在生成任何页面之前,必须先确定并记录套图配置!
- 确定风格包:从 4 种中选择 1 种(经典强调/简约边框/杂志双线/艺术镂空)
- 确定布局变体:根据内容类型智能选择(参见"布局锁定执行流程"中的推荐表)
- 记录配置:将配置牢记,后续所有页面必须使用相同配置
配置示例:
本套图配置:
- 风格包 = 经典强调
- 布局变体 = B(杂志章节式)← 因为这是"年运势"内容
- 装饰元素 = 圆形装饰 + 年份背景字
⚠️ 从封面到最后一张内容页,必须严格使用上述配置,不得中途更换!
步骤 2:AI 智能处理
- 分析内容长度 → 决定字号调整
- 识别关键词 → 决定重点色标记
- 根据规范生成 HTML → 包含完整 CSS 样式
步骤 3:替换内容变量
封面变量:
{{header_tag}} → 头部标签(如"射手座 · 回避型")
{{keyword}} → 关键词(如"暧昧期指南")
{{line1}} → 主标题
{{line2}} → 副标题(支持高亮)
{{desc}} → 底部描述
{{zodiac_symbol}} → 星座符号 SVG
内容页变量:
{{keyword}} → 分类标签
{{mini_title}} → 小标题
{{body_text}} → 正文(支持高亮)
{{quote_text}} → 引用块文字
{{zodiac_symbol}} → 星座符号 SVG
步骤 4:保存并截图
output/{YYYY}/{MM}/{DD}/{zodiac}-{title}-{YYMMDD}/cover.html
output/{YYYY}/{MM}/{DD}/{zodiac}-{title}-{YYMMDD}/page-01.html
...
python3 /Users/panyuhang/我的项目/编程/脚本/小红书封面生成/skills/_shared/scripts/poster_screenshot.py \
/path/to/cover.html \
/path/to/output/cover.png
python3 /Users/panyuhang/我的项目/编程/脚本/小红书封面生成/skills/_shared/scripts/poster_screenshot.py \
--batch /path/to/html_dir/ /path/to/output/
⚠️ 截图工具特性:
- 自动设置 viewport 为 1080x1440
- 自动截取
.poster 元素
- 自动等待字体加载 2 秒
- 批量模式复用浏览器实例,速度更快
- 使用
--json 参数可输出 JSON 格式结果
⚠️ 防止深色模式影响(必须遵守):
生成的 HTML 必须在 CSS 开头包含以下样式,强制使用浅色模式:
:root, html, body {
color-scheme: light only;
background: #FAF6F1;
}
如果不添加此样式,系统深色模式会导致背景变成深灰色而非暖杏色。
AI 智能处理指南
1. 智能排版(根据内容调整字号)
封面标题:根据文字长度动态调整字号
| 情况 | 处理方式 |
|---|
| 标题 ≤4 字 | 使用大字号(96-110px) |
| 标题 5-8 字 | 使用中等字号(72-96px) |
| 标题 >8 字 | 使用较小字号(56-72px) |
内容页正文:根据内容长度调整字号
| 情况 | 处理方式 |
|---|
| 内容 ≤150 字 | 大字号(40-44px),行高 2.0 |
| 内容 150-300 字 | 中等字号(36-40px),行高 1.9 |
| 内容 >300 字 | 较小字号(32-36px),行高 1.8 |
2. 行尾排版规则(必须遵守!)
🚫 禁止标点符号作为每行的结尾!
海报文字排版时,每行结尾必须是文字,不能是标点符号。这是小红书海报的视觉规范。
| ❌ 错误示例 | ✅ 正确示例 |
|---|
射手表面上看起来, | 射手表面上看起来 |
不在乎任何人。 | 不在乎任何人 |
其实心里早就—— | 其实心里早就 |
给你留了位置! | 给你留了位置 |
换行处理规则:
- 逗号(,):将逗号前的内容作为一行,逗号删除或移到下一行开头
- 句号(。):将句号前的内容作为一行,句号删除
- 破折号(——):将破折号前的内容作为一行,破折号移到下一行开头
- 感叹号/问号:将符号前的内容作为一行,符号删除
HTML 换行示例:
<p class="content">
射手表面上看起来,<br/>
不在乎任何人。
</p>
<p class="content">
射手表面上看起来<br/>
不在乎任何人
</p>
长句拆分示例:
原文:射手表面上看起来不在乎任何人,其实心里早就给你留了位置——只是嘴硬不说。
<p class="content">
射手表面上看起来<br/>
<span class="accent">不在乎</span>任何人<br/><br/>
其实心里早就<br/>
给你<span class="accent">留了位置</span><br/>
——只是嘴硬不说
</p>
注意:破折号可以作为下一行的开头,起到视觉引导作用。
3. 重点色标记(智能高亮)
使用模板的 accent 重点色(#C4653A)进行智能高亮。
⚠️ 核心架构:AI 生成时标注,脚本只解析
智能高亮的"智能"发生在内容生成阶段,而不是渲染阶段。
┌─────────────────────────────────────────────────┐
│ AI 生成内容时 │
│ 根据语义理解,用【】标记需要高亮的词 │
│ 例如:【双子座】做【决定】来不及【想】 │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ 飞书记录存储 │
│ 标题字段:【双子座】做【决定】\n来不及【想】 │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ 生成脚本 │
│ 只负责解析【】标记,转换为 SVG tspan 高亮 │
│ 不做任何语义判断 │
└─────────────────────────────────────────────────┘
高亮标记语法
使用中文方括号 【词】 标记需要高亮的词汇。
| 标记 | 含义 | 渲染结果 |
|---|
【词】 | 高亮词 | <tspan fill="#C4653A">词</tspan> |
| 普通文字 | 不高亮 | <tspan fill="#3D3835">文字</tspan> |
AI 生成内容时的高亮规则(优先级从高到低)
| 优先级 | 类型 | 说明 | 标记示例 |
|---|
| 1 | 星座名称 | 标题/正文中的星座名必须高亮 | 【双子座】做决定 |
| 2 | 核心动词 | 表达行为/状态的关键动词 | 来不及【想】 |
| 3 | 核心名词 | 主题相关的关键名词 | 做【决定】 |
| 4 | 情感形容词 | 描述情感/状态的形容词 | 【全凭】感觉 |
| 5 | 数字/程度词 | 数字、百分比、程度副词 | 【100%】、【永远】 |
封面标题格式
双行标题结构:
第一行:星座名 + 主题词(智能高亮,用【】标记)
第二行:核心形容词/描述词(整行 accent 色,无需标记)
标题字段存储格式示例:
| 主题 | 标题字段内容 |
|---|
| 双子座做决定 | 【双子座】做【决定】\n来不及【想】 |
| 双子座选择 | 【双子座】【选择】\n【全凭】感觉 |
| 双子座的内心 | 【双子座】的【内心】\n【充满】拉扯 |
| 双子座的热情 | 【双子座】的【热情】\n一点就【燃】 |
| 双子座的选择 | 【双子座】的【选择】\n【回到】【直觉】 |
高亮原则:
- 每行高亮 2-4 个词
- 高亮词之间有语义呼应(对比/递进/因果)
- 避免连续高亮(中间要有普通色间隔)
- 星座名必须高亮
正文内容高亮规则
每段正文高亮 2-3 个关键词,形成语义呼应对:
示例段落(存储格式):
别人还在列清单分析利弊的时候
我已经做完了
不是冲动 是【直觉】比【脑子】快
高亮词:"直觉" 和 "脑子" 形成对比呼应
语义呼应类型:
| 类型 | 说明 | 示例 |
|---|
| 对比 | 两个词形成对比 | 【直觉】 vs 【脑子】 |
| 递进 | 层层递进的关系 | 【想】 → 【做】 → 【冲】 |
| 因果 | 原因和结果 | 因为【感觉】 所以【选择】 |
| 转折 | 前后反差 | 表面【冷】 内心【热】 |
生成脚本解析规则
脚本只需解析【】标记,不做语义判断:
import re
def parse_highlight_marks(text: str) -> list:
"""
解析【】标记,返回 [(text, is_highlight), ...] 列表
"""
result = []
pattern = r'【([^】]+)】'
last_end = 0
for match in re.finditer(pattern, text):
if match.start() > last_end:
result.append((text[last_end:match.start()], False))
result.append((match.group(1), True))
last_end = match.end()
if last_end < len(text):
result.append((text[last_end:], False))
return result
SVG 渲染结果:
<text>
<tspan fill="#C4653A">双子座</tspan>
<tspan fill="#3D3835">做</tspan>
<tspan fill="#C4653A">决定</tspan>
<tspan fill="#3D3835">来不及</tspan>
<tspan fill="#C4653A">想</tspan>
</text>
飞书多维表格字段
| 字段 | 类型 | 说明 |
|---|
| 星座 | 单选 | 12星座 |
| 模板 | 单选 | 模板中文名(编辑暖调) |
| 标题 | 文本 | 海报主标题 |
| 副标题 | 文本 | 海报副标题 |
| 正文内容 | 长文本 | 内容页正文 |
| 用途 | 单选 | 封面/长文案 |
| 已生成 | 复选框 | 状态标记 |
| 已发布 | 复选框 | 发布状态 |
模板字段值映射
⚠️ 生成海报前必须读取"模板"字段,使用对应模板风格!
| 字段值(中文) | 模板 ID | 模板规范文件 |
|---|
| 编辑暖调 | editorial-warm | assets/templates/editorial-warm/TEMPLATE.md |
| 动态编辑风 | editorial-dynamic | assets/templates/editorial-dynamic/TEMPLATE.md |
| 极简暖调 | minimal-warm | assets/templates/minimal-warm/TEMPLATE.md |
模板风格差异对比:
| 对比项 | editorial-warm | editorial-dynamic |
|---|
| 布局 | 居中对称 | 非对称,视觉张力 |
| 装饰 | 简约(仅线条) | 7 种装饰元素 |
| 色块 | 无 | 色块标签、渐变色带 |
| 变体 | 固定 | 4 种布局变体 (A/B/C/D) |
| 背景装饰 | 无 | 大字号淡色背景(如 2026) |
输出位置
/Users/panyuhang/我的项目/编程/脚本/小红书封面生成/output/{YYYY}/{MM}/{DD}/
├── 射手座-标题-241227-1430-cover.png # 封面
├── 射手座-标题-241227-1430-long.png # 内容页
└── ...
星座符号
从 templates.json 的 zodiac_symbols 获取 SVG 路径:
| 星座 | ID | 符号 |
|---|
| 白羊座 | aries | ♈ |
| 金牛座 | taurus | ♉ |
| 双子座 | gemini | ♊ |
| 巨蟹座 | cancer | ♋ |
| 狮子座 | leo | ♌ |
| 处女座 | virgo | ♍ |
| 天秤座 | libra | ♎ |
| 天蝎座 | scorpio | ♏ |
| 射手座 | sagittarius | ♐ |
| 摩羯座 | capricorn | ♑ |
| 水瓶座 | aquarius | ♒ |
| 双鱼座 | pisces | ♓ |
核心文件
| 文件 | 说明 |
|---|
assets/templates.json | 模板配置(含重点色、星座符号) |
assets/templates/*.md | Markdown 设计规范文档 |
assets/previews/*/ | 模板预览图片 |
版本历史
- v4.0: Markdown 设计规范模式,单一模板
- v3.1: AI 智能排版 + 重点色标记
- v3.0: 模板套装模式,12种预设模板
- v2.0: 四维度配置(配色×风格×字体×用途)
- v1.0: 基础海报生成