red-layout-skill

Red Layout Skill

This skill is the layout source of truth for xiaohongshu-note pages, commonly 1242x1660.

A red-note page should read like a saveable social image note: a strong hook, useful body, and memorable takeaway. The layout should make the viewer understand why the page is worth pausing on and what value they can keep.

This canvas is a social note card, not a compressed slide. When the source content is dense or "needs to be summarized", summarize or regroup it for this reading format instead of cramming a 16:9 deck's worth of outline into one page.

Deep details live in the references:

• references/catalog.md - named red-note patterns and 1242x1660 zone skeletons.
• references/checklist.md - P0/P1/P2 structural self-check for delivery.

Preflight

Before writing HTML, decide:

1. Stop reason - why would someone pause, save, or screenshot this note page?
2. Hook - title, question, claim, number, or visual anchor in the first 1-2 seconds.
3. Value format - checklist, steps, comparison, myth/fact, template, data takeaway, framework, or story/proof.
4. Body grouping - start with 3-4 information chunks (or 5-6 compact list rows for checklist/steps), then regroup or choose a denser pattern when the content genuinely needs it; do not squeeze more chunks in by making them unreadable.
5. Takeaway - conclusion, action, summary line, warning, or compact bottom note.
6. Pattern - use a structure from references/catalog.md as a starting point when it helps the reading path; it is not a closed template menu, and a fresh composition is welcome when it serves the page thesis.
7. Budget - estimate hook height, body rows/sections, gaps, bottom note, and safe margin.

Use the canvas dimensions from the prompt. If custom dimensions are supplied, preserve the same red-note reading flow.

Canvas Grammar

• Hierarchy: hook > value body > support > takeaway/source.
• Prefer vertical sections, note cards, list rows, and poster-like bands.
• Keep copy short and scan-friendly. Split long paragraphs into bullets, labeled chunks, or compact rows.
• Use one main data object, framework, or list as the value body.
• Give the lower area a useful role: takeaway, action, summary, source, or final support.
• Use grid/flex document flow for text-bearing modules. Independent text/content modules occupy their own cells and must not overlap or escape the canvas. Absolute positioning is only for background accents, connector lines, non-text decoration, and intentional image/video background composition; text or transparent panels may intentionally sit over media.
• Composition starting point: a hook, 3-4 information chunks (or 6 compact rows), and a takeaway usually create a clear note. A "chunk" is a labeled card, a mini-section, a step, or a row group — not a single bullet. Treat this as a guide, not a closed composition: regroup, compress, or choose a denser pattern when the source needs it while keeping the page readable and inside the canvas.
• Vertical rhythm (guidance): avoid an accidental top-stack or unused lower band. Use flex flex-col with flex-1 / flex-grow or justify-between only when it distributes actual hook / body / takeaway modules; do not stretch empty containers merely to fill height. When content is sparse, enlarge or reposition the focal and support modules so the middle or bottom carries the page. Independent content modules must retain an actual nonzero gap. If content is longer than the canvas, compress or regroup it before writing.
• Body copy, ordinary labels, and card descriptions default to at least 33px (text-[33px] or style="font-size:33px"). Only a genuinely high-density bounded module may use 30px after restructuring; mark it data-ppt-density="high" and compensate its grid/flex footprint if it is scaled. Titles/headers are at least 44px (text-[44px] or larger) with no upper cap; auxiliary source/footer text is at least 22px. These floors preserve the same displayed 18px / 16px / 24px / 12px semantic minimums on this 1660px-high canvas.