84 lines
7.4 KiB
Markdown
84 lines
7.4 KiB
Markdown
# 视觉生产手册
|
||
|
||
封面与正文解释性插图的生产方法。核心原则：**配图是内容的一部分，不是装饰**——信息位图上的文字逐字取自文章，封面上的是这篇文章的标题，不是好看的背景。
|
||
|
||
## 封面规格（硬约束）
|
||
|
||
- 比例 **2.35:1**（建议 1200×509 或更大，微信信息流首图比例）
|
||
- **标题主体放中央安全区**：微信会另裁一张 1:1 的方形分享卡（默认居中裁），主体偏左或偏右会被裁掉字——同步草稿箱时脚本会提交两个裁剪框参数，但设计上就要满足「中心裁一块 1:1 不丢主信息」
|
||
- 图上主标题 **4–7 字**最佳，字高占画面 25–35%；缩略到 345px 宽（信息流实际尺寸）主体仍一眼可辨——这是验收标准，不满足重做
|
||
|
||
## 封面七步推导
|
||
|
||
不要「想一个好看的画面」，按顺序走：
|
||
|
||
1. **找张力**：这篇文章里什么打破了什么 / 什么变成了什么？（「手写模板 → 自动生成」「一台机器 → 十三台」）张力即画面
|
||
2. **定关系**：对比 / 流程 / 层级 / 汇聚 / 转折——关系的类型决定构图骨架
|
||
3. **找隐喻**：把抽象张力翻译成具体物件。**避雷**：机器人、发光大脑、齿轮堆、赛博蓝紫渐变——这些是 AI 生图的默认值，出现即平庸
|
||
4. **选形态**（从下表挑一个，不混搭）
|
||
5. **布局**：左文右图 / 上题下景 / 中央大字，按形态模板走
|
||
6. **写成 brief**：一段 150–300 字的散文描述（给 ckm-banner-design 或生图模型），含标题文案、字体感、颜色、位置
|
||
7. **缩略图回看**：345px 下看主体可辨、标题完整；不过关回到对应步骤重做，不盲目重跑
|
||
|
||
## 封面形态速查
|
||
|
||
| 形态 | 适合 | 要点 |
|
||
|---|---|---|
|
||
| 纯色大字 | 观点、宣言 | 底色克制，字即主体 |
|
||
| 数字冲击 | 数据结论 | 一个大数字 + 一句限定，防断章取义 |
|
||
| 图上压字 | 叙事、体验 | 底图留白充足，压字区加暗色遮罩 |
|
||
| 对比式 | 前后变化 | 左右分栏，箭头/裂隙点题 |
|
||
| 扁平插画 | 方法、教程 | 元素 ≤3，不写实 |
|
||
| 截图标注 | 产品更新 | 真实界面 + 标注，最可信 |
|
||
| 信息表 | 评测、清单 | 封面即结论摘要 |
|
||
| 场景实拍 | 生活叙事 | 有人的真实场景优于摆拍 |
|
||
|
||
## 正文解释性插图
|
||
|
||
- **信息位**（删图读者看不懂）：图上文字**逐字取自文章**，不自由发挥——让模型自由发挥会生成无关鸡汤并自带 emoji
|
||
- **节奏位**（删图读者读不下去）：概念隐喻或场景，图上不加文字
|
||
- **手绘媒介**：同一篇内统一一种媒介，篇与篇之间轮换，避免整个号只有一种图。媒介池：马克笔白板 / 方格笔记本 / 便签 / 黑板粉笔 / 牛皮纸手绘 / 终端等宽 / 打印稿批注 / 扁平矢量
|
||
- **实证图**（真实截图/照片）：优先作为证据直接使用，不重绘产品界面当证据；需要标注/放大/对比时才加工
|
||
|
||
## 生产路由（每张图先判断走哪条路径，不默认全走某一条）
|
||
|
||
| 图位类型 | 路径 | 理由 |
|
||
|---|---|---|
|
||
| 实证位（真实截图/照片） | 直接使用，不生成 | 证据不可代生成 |
|
||
| 信息位（流程/对比/结构/数据，图上文字逐字取自文章） | **SVG 自绘** | AI 生图中文缺字错字不可控；几何类图 SVG 的文字与比例都精确 |
|
||
| 节奏位（概念隐喻、场景氛围，图上无文字） | **le-gpt-image 首选**，失败回退 SVG 媒介池图形 | 质感、光影、氛围是生图强项；SVG 画氛围图易显工程感——历史配图「不美观」主要来自这类图硬走自绘 |
|
||
| 封面 · 文字型（纯色大字/数字冲击/信息表/截图标注/对比式） | **SVG 自绘** | 标题 4–7 字必须逐字精确且居中央安全区、比例必须精确 2.35:1；生图尺寸仅建议值，风险大于收益 |
|
||
| 封面 · 图像型（图上压字/扁平插画/场景实拍） | **le-gpt-image 底图 + 自绘文字层** | 底图要质感（AI 强项），标题要精确（SVG/HTML 叠字后浏览器截图合成）；底图失败回退文字型形态 |
|
||
|
||
判断的依据是**这张图的成败关键在文字精确还是画面质感**：前者永远自绘，后者优先生图。走 le-gpt-image 的图彼此风格要统一（其 Gallery 同类别案例）；信息位 SVG 与节奏位 AI 图因功能不同可在同一篇共存，但各自内部统一媒介。
|
||
|
||
## 与 le-gpt-image 的联动协议（节奏位与图像型封面首选）
|
||
|
||
前提：本机已装 le-gpt-image 且 Codex 已登录（其 `scripts/gpt_image.py check` 可验）。把 brief 交给它执行时：
|
||
|
||
1. **Gallery 优先**：由 le-gpt-image 按其 gallery 索引路由精调案例改写 prompt，不现写；brief 给清比例倾向（`--size`）但接受实测偏差（其通道尺寸仅建议值）。
|
||
2. **额度纪律**：单张 40–60 秒、消耗 ChatGPT 订阅额度——一篇通常只有 1–3 张节奏位图或封面底图走它，逐张生成逐张验收；不做探索性批量变体，变体只在验收不合格时重出一次。
|
||
3. **文字纪律**：交给它的 prompt **不含图上中文文字**——文字一律由自绘层叠加（AI 生图中文缺字错字不可控，它的强项是画面不是排版）。封面底图按「图上压字」形态预留压字区（留白充足或暗色遮罩区）。
|
||
4. **验收**：节奏位图查畸变与乱码（画面里出现乱字说明 prompt 混入了文字要求，重出）；封面底图查「实际尺寸任一边裁到 2.35:1 后主体仍完整」+ 压字区可用；345px 缩略回看照旧。
|
||
5. **失败回退**：凭证失效（401）、配额不足、内容策略拒绝、超时、或重出一次仍不可用——该图**回退 SVG 自绘路径**（节奏位降级为媒介池图形，封面改文字型形态），如实记入交付清单的图片状态（哪张回退、原因），不中断交付流程。
|
||
|
||
## 与 ckm-banner-design 的联动协议
|
||
|
||
需要直接生成封面图时，把 brief 交给 ckm-banner-design 执行，brief 必须包含：
|
||
|
||
1. 比例 2.35:1 与目标像素
|
||
2. 主标题文案（4–7 字）与短标题（1:1 分享卡用，2–4 字）
|
||
3. 视觉张力一句话 + 形态名 + 避雷项（AI 默认视觉）
|
||
4. 风格媒介（从媒介池指定一种）
|
||
5. 验收点：345px 缩略可辨、标题完整、中央 1:1 安全区无关键信息丢失
|
||
|
||
产出后按「缩略图回看」验收；不合格改 brief 重生，不改用其他工具绕开。
|
||
|
||
## SVG 自绘路径（零依赖，兼失败回退位）
|
||
|
||
没有生图管线时，几何类信息图（流程、对比、曲线、分层）用 SVG 手绘完全够用，且比 AI 生图**文字更可靠**（不会出缺字错字）：SVG 源文件放 `imgs/src/`，浏览器打开后按目标尺寸截屏导出 PNG。曲线/管道/卡片类图优先走这条路；只有需要插画质感时才必须用生图。封面同样可 SVG 自绘（文字型封面 = 纯色大字形态，正是最稳的封面形态之一）。le-gpt-image 失败时，节奏位图与封面底图也回退到这条路（见上节第 5 条）。
|
||
|
||
---
|
||
|
||
致谢：封面七步推导、形态库与媒介轮换方法改写自 [wechat-article-skills](https://github.com/aiworkskills/wechat-article-skills)（Apache-2.0）的 cover-method / image-method；组合封面安全区意识来自 [mp-article-writor](https://github.com/balabalabalading/huuuuuuho-skills/tree/main/skills/mp-article-writor)（MIT）的视觉路由。仅借方法。
|