release-poster git:20260821.c0c683cC

Immutable. This exact content is served forever at /api/v1/blob/fd07fd79774fc70f.

---
title: 发版宣传图制作规范（横版 16:9 / 竖版 9:16）
id: release-poster
type: skill
tags: [release, poster, screenshot, marketing, douyin, html]
builtin: true
---

# 发版宣传图制作规范

> 版本发布时快速产出社交平台宣传图（抖音等）。模板已固化，填内容即可，禁止每次重新设计。

---

## 一、 铁律（血泪教训，不可违反）

1. **Logo 必须用官方源文件原样嵌入**：`src-tauri/icons/icon-source.svg`（深紫黑板 #1a1a2e + 白色开口壳暂停键）。**禁止凭印象重绘、禁止改色、禁止改路径**——模板中 logo 段已固化，直接复用。
2. **内容只列更新亮点，内部事故/修复细节一律不入图**。
3. **禁止 emoji 充当图标**，卡片图标用线条 SVG（stroke 配色跟随卡片主题色）。
4. **文案以 HTML 源码为准**——vision 审查可能误读简繁体/错字，遇 vision 报告文字错误先核对源码再决定改不改。

---

## 二、 两版规格

| 版式 | 尺寸 | 用途 | 模板 |
|------|------|------|------|
| 横版 16:9 | **1920×1080** | 封面图/横屏场景 | `templates/horizontal.html` |
| 竖版 9:16 | **1080×1920** | 抖音全屏视频 | `templates/vertical.html` |

**竖版安全区（上下都有平台 UI 遮挡，均已固化进模板，禁止减小）：**

| 区域 | 安全区 | 遮挡源 |
|------|--------|--------|
| 顶部 | **≥ 200px**（`stage padding-top:200px`） | 抖音状态栏（时间/电量）+ 顶部导航 tab（推荐/关注等）约 150px |
| 底部 | **≥ 260px**（`footer margin-bottom:190px + padding-bottom:72px ≈ 262px`） | 抖音标题/描述/右侧工具栏约 200-250px |

品牌行（logo+名称+徽章）是顶部第一内容，必须落在顶部安全区之下。

---

## 三、 设计 Token（模板已固化，理解即可）

- 背景：`#0b0d14` + 三色光斑（#3b5bff 蓝 / #00c2a8 青 / #7a3bff 紫，blur 130-140px, opacity .22-.35）
- 三卡片主题色固定顺序：**c1 蓝 / c2 青 / c3 紫**（顶部横条=横版 / 左侧竖条=竖版）
- 文字：主白 #eef1f8 / 次 #b9c0d6 / 弱 #9aa3bd / 最弱 #6b7490 / hint #8a93ad
- 强调：标题关键词用青蓝渐变 `<em>`；正文重点 `<b>` 纯白
- CTA 按钮：#00e0c2 青底黑字等宽字体
- 卡片数固定 3 个（多了拥挤，少了空洞；更新点 >3 时合并归类）

---

## 四、 制作流程（5 步）

```
1. 复制模板 → 替换 {{占位符}}（版本号/主标题/三卡标题+英文+描述/安装命令/说明）
   - 卡片描述 ≤ 40 字，防孤字贴边（长文案先压缩，禁止靠调字号硬塞）
   - 卡片图标按内容选线条 SVG，stroke 用卡片主题浅色（c1 #6f8bff / c2 #00e0c2 / c3 #a86fff）
2. headless Chrome 截图（命令见下）
3. desktop_vision 验收：溢出/孤字/贴边/对齐/logo 完整性
4. 竖版加做：像素级安全区复测（vision 坐标估算不可信，见第五节）
5. 删除临时 HTML（Hygiene 纪律），PNG 交付桌面
```

截图命令（Chrome 路径按 find_chrome 常见顺序探测）：

```powershell
& "$chrome" --headless --disable-gpu --hide-scrollbars \
  --window-size=<宽>,<高> --screenshot='<输出.png>' 'file:///<模板.html>'
```

---

## 五、 验收纪律（vision 会误报，必须有复测手段）

vision 审查适用于发现**布局级问题**（溢出/空白/对齐），但两类误报已实战确认：

| 误报 | 真相复测法 |
|------|-----------|
| "文字是繁体/错字" | 读 HTML 源码核对，源码为准 |
| "安全区只有 40-50px" | **像素扫描**：在 PNG 中定位目标色（hint 文字 #8a93ad、按钮 #00e0c2）的最低 y 坐标，安全区 = 画布高 − 文字最低 y。⚠️ 不要扫"非背景色"——背景光斑会干扰（底部光斑曾导致误判安全区=1px） |

像素扫描参考实现（PowerShell + System.Drawing）：逐行从底向上扫描，容差 30-40 匹配目标色，返回最低命中行。

---

## 六、 实战记录（v0.1.8，2026-08-06）

- 横版三卡片 `flex:1` 横排；竖版三卡片 `flex:1` 纵排 + `align-items:center`——均分空间消除中部大片空白
- 竖版 footer 必须 `align-items:center` 整体居中，左对齐会导致视觉重心偏左
- 第三卡文案"…绝不回退到错误环境。"初版过长出现孤字贴边，压缩文案后通过
- logo 第一版凭印象绘制被大王打回，改为官方 icon-source.svg 原样嵌入——**此为本 skill 诞生的直接原因**