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

5.2 KiB

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

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:

开源了一个 Skill,让 AI 接管你屏幕边那张便签纸
=> AI 接管便签纸
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:

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.
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.