Files
guizang-social-card-skill/references/content-planning.md
T
郭浩 bd1bb1e16d v0.14: 截图美化素材迁移 + 散落改动归集
主线:从 PPT skill port 9 张截图舞台底 WebP,补齐 v0.11 当时只迁规则未迁素材的缺口。

新增
- assets/screenshot-backgrounds/style-a/ · 5 张 Editorial 底
  dune / forest-ink / indigo-porcelain / kraft-paper / monocle-classic
- assets/screenshot-backgrounds/style-b/ · 4 张 Swiss 底
  ikb-dot-gradient / lemon-green-dot-shadow / lemon-grid / safety-orange-halftone

模板
- template-editorial-card.html: 加 5 条 .frame-shot.bg-asset-* 规则
- template-swiss-card.html: 加 4 条 .frame-shot.bg-asset-* 规则
  两侧都带 fallback 实色,素材未加载时背景不透

文档
- screenshot-treatment.md: 新增 Solid vs Asset 小节 + 两张对照表 + 4 条 rules of thumb
  + 两条新 cheat-sheet recipe,明确路径假设与 accent 绑定
- HANDOFF.md: 版本号 v0.14,目录树加 screenshot-backgrounds/,
  写清"素材迁移不是规则迁移"的边界(未引入 PPT 原 7 参数语义系统)

顺带归集本轮工作期间累积的散落改动(PRODUCT/SKILL/category-cookbook/
components/content-planning/map-component/production-workflow/
qa-checklist/style-system/validate-social-deck)一并入库,避免长期挂在 dirty tree。
2026-05-28 00:39:45 +08:00

163 lines
5.2 KiB
Markdown

# Content Planning
## Compression Ladder
Start from the user's original text and compress in layers:
1. Core claim: one sentence.
2. Viewer promise: what the reader gets from swiping.
3. Section map: 4-8 ideas.
4. Page hooks: short, concrete, not abstract.
5. Body fragments: only the words needed to explain the visual.
Do not put the full article on images. The image set is a visual outline that makes the user want to read the caption/body.
## Rednote Page Plan Template
```text
Title:
Audience:
Style:
Image assets:
01 Cover
- Hook:
- Visual:
- Bottom points:
02 Page
- Point:
- Copy:
- Visual:
- Layout:
...
```
## Good Page Roles
Use varied roles instead of repeating the same card page:
- Hook cover.
- Problem scene.
- Misconception vs reality.
- Checklist.
- Comparison.
- Product screenshot evidence.
- One big quote or conclusion.
- Step-by-step flow.
- Gear list or buying guide.
- Summary page with "remember these three".
## Copy Rules
- Titles should be plain and sharp.
- Avoid abstract labels like "背景介绍" unless the page is actually context.
- Use verbs and consequences: "高帮鞋会让脚更闷" is better than "鞋子选择".
- For product updates, lead with the user-facing change, then add the feature name.
- For outdoor posts, lead with the embodied problem: hot, wet, slippery, heavy, exposed, lost, cold.
- For AI/tool posts, lead with workflow change: faster capture, less manual work, cross-app automation, editable output.
## Cover Hook Patterns
Use one of these:
- "终于有 Mac 版了"
- "新手别急着买"
- "这个功能真的改变用法"
- "我替你踩过坑了"
- "先看这 5 个点"
- "不要被装备带着走"
- "从此不用手动..."
Avoid:
- Overlong complete article titles.
- Vague hype without a concrete object.
- Multiple unrelated claims on one cover.
## WeChat Square Title Compression
When producing a WeChat `1:1` cover, derive a short title from the long `21:9` title.
Rules:
- Preserve the core object and the strongest action.
- Use 4-10 Chinese characters when possible.
- Use 2 short lines if one line becomes too cramped.
- Remove explanations, clauses, and long modifiers.
- Do not use the full long title in the square.
Examples:
```text
开源了一个 Skill,让 AI 接管你屏幕边那张便签纸
=> AI 接管便签纸
```
```text
Codex 史诗级更新,体验爆炸提升
=> Codex 大更新
```
## Image-Led Sequence (lifestyle, image-heavy content)
When the user has multiple good lifestyle photos (旅行 / 户外 / 自家成菜 / 家居 / 真实情感场景), front-load the strongest photo on page 1 and let pages 2-3 carry the text/data. Do not bury great photos.
Pattern:
```
P1 M16 Image-Led Cover ← single best photo, full bleed, restrained title
P2 S11 / M05 / M10 ← text-heavy: ledger / checklist / mini-data — eye rests
P3 M02 Field-Note Photo ← second-best photo, in a frame, with caption
P4-N M02 / M11 ← more field notes or marginalia essays
P_last M07 / M04 ← closing note or pull quote
```
Hard rule: **never two M16 in a row**. After a full-bleed cover the eye needs to settle on text before another big image. Two image-led covers back-to-back read as "we couldn't decide which photo to use."
When this pattern does NOT apply:
- News / tutorial / data / review posts — the cover is a hook line, not a photo. Use M01 or S01.
- Posts with one good photo only — use M16 for P1, then M02 once on P3-4 with that same photo or a different angle. Do not pad.
- Swiss-mode product/release posts — photos in Swiss are product renders or UI screenshots, not lifestyle. Use S08 Image Hero, not M16.
For the cover title placement and typography on a great photo, see `references/layout-recipes.md` M16 (4 modes: 顶压底沉 / 侧栏立柱 / 角落徽章 / 下沉条带) and `references/image-overlay.md` (subject map + localized tint fallback).
## Page Count Guidance
- 600-1000 Chinese characters: 5-7 images.
- 1000-1800 Chinese characters: 7-9 images.
- Very long source: compress to 8-10 images and put the rest in caption/body.
- If several pages have large empty lower areas, merge adjacent ideas.
## Matching Visuals To Content
Use visuals only when they support the point:
- Screenshot: proof of a product feature or UI.
- Photo: scene, object, person, outdoor atmosphere.
- Generated image: missing scene, conceptual hero, stylized product/lifestyle illustration.
- Diagram: flow, cross-app chain, checklist, system relation.
Generated image prompts should be short and role-specific:
```text
Editorial documentary photo for a Rednote hiking gear guide, summer mountain trail, lightweight long-sleeve outfit, natural sunlight, clean composition, no text, no logo, 3:4.
```
```text
Swiss style conceptual product image, Android home screen widgets generated by natural language, clean off-white background, one IKB blue accent, no text, no logo, 3:4.
```
## Captions And Metadata
Small recurring elements help the set feel designed:
- Category row: `AI TOOL / UPDATE / 2026`
- Issue row: `SUMMER HIKING / BEGINNER GUIDE`
- Page number: `03 / 08`
- Compact labels: `DO`, `DON'T`, `WHY`, `NOTE`
Keep these consistent. They should support orientation, not become decoration.