发版宣传图制作规范

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

---

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

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 常见顺序探测）：

& "$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 诞生的直接原因