Files
guizang-social-card-skill/references/portrait-fill.md
T
郭浩andClaude Opus 4.7 82d221bb90 v0.13 baseline · git 初始化 + 仓库瘦身
把所有本地 demo / 测试 / 上传图 / 调试脚本搬入 local-tests/,写
.gitignore 忽略整个测试目录与 node_modules/。本次起 skill 仓库
只跟踪:SKILL.md / HANDOFF.md / PRODUCT.md / assets/(3 模板)/
references/(15 规则文档)/ agents/openai.yaml / validate-social-deck.mjs
/ package.json + lock。

历次版本(v0.1-v0.12)的全部实质改动已包含在当前文件状态中——
HANDOFF.md 的版本历史段保留作为时间轴文字记录,但代码层面以
此 commit 为唯一基线,后续逐次 commit 对应 HANDOFF.md 新增段落。

HANDOFF/PRODUCT/category-cookbook/components/style-system 中的
demo 路径引用已加 local-tests/ 前缀。SKILL.md Step 5 line 190 的
'social-card-<slug>/' 是下游用户工作区的命名约定,未改动。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-27 22:00:55 +08:00

2.6 KiB

Portrait Fill Rules

3:4 social images have much more vertical space than a horizontal PPT slide. A layout that works in 16:9 often becomes a thin strip in 3:4. Solve that at the planning stage.

Vertical Zones

Think of a 1080x1440 Rednote image as five zones:

Zone Typical Height Role
Header/meta 56-90px issue label, category, page
Title/lead 240-420px hook and claim
Evidence/body 520-760px image, ledger, diagram, comparison
Bottom strip 90-180px captions, checklist, summary
Footer 52-86px issue/page metadata

Not every page needs all five, but every page needs an intentional vertical composition.

Underfilled Page Smells

Revise if:

  • A table or ledger occupies less than 45% of the canvas height.
  • The lower 25% of the page is empty without being an atmospheric hero page.
  • Four list items are rendered as short rows with large blank space below.
  • A screenshot is small even though it is the evidence.
  • Body copy is centered in the middle with no top/bottom rhythm.

Fixes For Thin Tables

When a table is too short:

  1. Increase row height to 118-170px.
  2. Add a left marginal column with large numbers, keywords, or category labels.
  3. Add a pull quote column beside the table.
  4. Add a top or bottom issue strip with 2-3 consequences.
  5. Convert the table to M08 Tall Ledger.
  6. If there are only 2-3 points, use M04 Pull Quote or M09 Atmospheric Thesis instead of a table.

Fixes For Sparse Text

If a page has only one core sentence:

  • Use M09 Atmospheric Thesis with visible WebGL/ink background.
  • Make the sentence the hero, not a small paragraph.
  • Add one small source/context row.
  • Use dark/ink page if the package needs rhythm.

Fixes For Screenshot Pages

If screenshot content matters:

  • Give it 45%-65% of the page height.
  • Put only one key sentence above it.
  • Use a bottom caption band instead of a side paragraph.
  • Crop carefully; preserve readable UI labels.

Page Rhythm

For a 7-page Rednote set, use at least 5 distinct shapes:

  • Cover / feature image.
  • Essay split.
  • Tall ledger.
  • Evidence screenshot.
  • Pull quote or atmospheric thesis.
  • Checklist/comparison.
  • Closing note.

Avoid repeating title + lead + 3 rows more than twice in one set.

Minimum Occupancy

As a rough rule, the active composition should occupy at least 78% of the page height.

This can include:

  • Large type.
  • Images/screenshots.
  • Ledger rows.
  • Background atmosphere on hero pages.
  • Caption bands.
  • Marginalia columns.

Whitespace is good only when it is designed. Empty leftover space is not.