creating-zodiac-posters

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)  # 内容页数量

每张内容页的内容

每张内容页包含：

1. 关键词/小标题：从该段落提取2-4字核心词
2. 正文：该段落的完整内容（可拆分为多行显示）
3. 页码：02, 03, 04... (封面是01)

⚠️ 核心规则：同一套图必须使用统一风格和布局

一条记录生成的封面 + 所有内容页必须使用同一种风格包 + 同一种布局变体，保持视觉一致性。

规则	说明
风格包锁定	生成套图前先确定一种风格包（经典强调/简约边框/杂志双线/艺术镂空）
布局变体锁定	生成套图前先确定一种布局变体（A/B/C/D/E），所有内容页使用相同布局
关键词样式统一	所有内容页的关键词必须使用同一种样式
装饰元素统一	封面和内容页使用同一体系的装饰元素

❌ 禁止事项：

• 禁止同一套图混用不同风格包（如page-01用经典强调，page-02用杂志双线）
• 禁止同一套图混用不同布局变体（如page-02用变体A，page-03用变体B）
• 禁止封面和内容页使用完全不同的装饰元素
• 禁止每页随机选择关键词样式或布局变体

详细的风格变体定义请参考模板文档 TEMPLATE.md 中的"风格变体定义"部分。

布局锁定执行流程（必须遵守）

步骤 1：生成封面前确定双锁定

在生成第一张图（封面）之前，必须先确定：

1. 风格包：随机选择 1 种（经典强调/简约边框/杂志双线/艺术镂空）
2. 布局变体：随机选择 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 必须包含完整的双锁定标记：

<!-- [STYLE LOCK: 简约边框] [LAYOUT LOCK: B] -->
<!-- 本套图所有内容页必须使用此风格和布局 -->

步骤 3：每张内容页继承锁定配置

生成每张内容页时：

1. 先读取封面的 [STYLE LOCK] 和 [LAYOUT LOCK] 注释
2. 使用完全相同的风格包和布局变体
3. 在内容页 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：读取飞书记录的模板字段（必须！）

⚠️ 在生成海报前，必须先确定使用哪种模板风格！

1. 从飞书记录中获取"模板"字段值
2. 根据映射表确定模板 ID（参见"模板字段值映射"）
3. 如果字段为空，默认使用 editorial-warm

映射示例：

• 字段值 动态编辑风 → 模板 ID editorial-dynamic
• 字段值 编辑暖调 → 模板 ID editorial-warm
• 字段值 极简暖调 → 模板 ID minimal-warm

步骤 1：读取设计规范

根据步骤 0 确定的模板 ID，读取对应的设计规范：

读取 assets/templates/{模板ID}/TEMPLATE.md

重要：必须使用正确的模板规范！不同模板的设计差异显著。

步骤 1.5：确定并记录双锁定配置（关键！）

⚠️ 在生成任何页面之前，必须先确定并记录套图配置！

1. 确定风格包：从 4 种中选择 1 种（经典强调/简约边框/杂志双线/艺术镂空）
2. 确定布局变体：根据内容类型智能选择（参见"布局锁定执行流程"中的推荐表）
3. 记录配置：将配置牢记，后续所有页面必须使用相同配置

配置示例：

本套图配置：
- 风格包 = 经典强调
- 布局变体 = B（杂志章节式）← 因为这是"年运势"内容
- 装饰元素 = 圆形装饰 + 年份背景字

⚠️ 从封面到最后一张内容页，必须严格使用上述配置，不得中途更换！

步骤 2：AI 智能处理

1. 分析内容长度 → 决定字号调整
2. 识别关键词 → 决定重点色标记
3. 根据规范生成 HTML → 包含完整 CSS 样式

步骤 3：替换内容变量

封面变量：

• {{header_tag}} → 头部标签（如"射手座 · 回避型"）
• {{keyword}} → 关键词（如"暧昧期指南"）
• {{line1}} → 主标题
• {{line2}} → 副标题（支持高亮）
• {{desc}} → 底部描述
• {{zodiac_symbol}} → 星座符号 SVG

内容页变量：

• {{keyword}} → 分类标签
• {{mini_title}} → 小标题
• {{body_text}} → 正文（支持高亮）
• {{quote_text}} → 引用块文字
• {{zodiac_symbol}} → 星座符号 SVG

步骤 4：保存并截图

# 1. 保存 HTML 到 output 目录
output/{YYYY}/{MM}/{DD}/{zodiac}-{title}-{YYMMDD}/cover.html
output/{YYYY}/{MM}/{DD}/{zodiac}-{title}-{YYMMDD}/page-01.html
...

# 2. 使用独立截图工具（避免 MCP 浏览器抢占）
# 单文件模式
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. 行尾排版规则（必须遵守！）

🚫 禁止标点符号作为每行的结尾！

海报文字排版时，每行结尾必须是文字，不能是标点符号。这是小红书海报的视觉规范。

❌ 错误示例	✅ 正确示例
射手表面上看起来，	射手表面上看起来
不在乎任何人。	不在乎任何人
其实心里早就——	其实心里早就
给你留了位置！	给你留了位置

换行处理规则：

1. 逗号（，）：将逗号前的内容作为一行，逗号删除或移到下一行开头
2. 句号（。）：将句号前的内容作为一行，句号删除
3. 破折号（——）：将破折号前的内容作为一行，破折号移到下一行开头
4. 感叹号/问号：将符号前的内容作为一行，符号删除

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【回到】【直觉】

高亮原则：

1. 每行高亮 2-4 个词
2. 高亮词之间有语义呼应（对比/递进/因果）
3. 避免连续高亮（中间要有普通色间隔）
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: 基础海报生成