| 1 | # Red-note Layout Catalog |
| 2 | |
| 3 | This catalog describes 1242x1660 Xiaohongshu/red-note structures. It is structural only: style controls color, type mood, decoration, shadows, and texture. |
| 4 | |
| 5 | ## Zone Skeletons |
| 6 | |
| 7 | ### `hook-body-takeaway` |
| 8 | |
| 9 | - **Use for**: most red-note pages. |
| 10 | - **Zone sketch**: large hook, useful body sections, compact bottom takeaway/source. |
| 11 | - **Balance rule**: each zone has a job: stop, teach, remember. |
| 12 | - **Failure sign**: the page has useful content but no stop reason or final memory point. |
| 13 | |
| 14 | ### `saveable-list` |
| 15 | |
| 16 | - **Use for**: checklists, tips, pitfalls, templates, step guides. |
| 17 | - **Zone sketch**: hook, 3-6 rows/cards, bottom action or summary. |
| 18 | - **Balance rule**: rows must scan quickly and feel collectible. |
| 19 | - **Failure sign**: rows become paragraphs or unrelated cards. |
| 20 | |
| 21 | ### `single-value-object` |
| 22 | |
| 23 | - **Use for**: one data point, framework, template, or comparison. |
| 24 | - **Zone sketch**: hook, one dominant value object, short explanation/takeaway. |
| 25 | - **Balance rule**: the value object should be the reason to save the page. |
| 26 | - **Failure sign**: the main object is buried in surrounding explanation. |
| 27 | |
| 28 | ## Patterns |
| 29 | |
| 30 | ### `cover-hook` |
| 31 | |
| 32 | - **Input shape**: title hook, one benefit/claim, optional context. |
| 33 | - **Structure recipe**: large headline, short subtitle/context, one visual anchor or proof chip. |
| 34 | - **Budget rule**: hook owns the top/center; support is minimal. |
| 35 | - **Failure signs**: no immediate stop reason; metadata competes with the hook. |
| 36 | |
| 37 | ### `saveable-checklist` |
| 38 | |
| 39 | - **Input shape**: 3-6 practical tips, pitfalls, takeaways, or rules. |
| 40 | - **Structure recipe**: labeled rows/cards with short titles and one-line explanations. |
| 41 | - **Budget rule**: rows fill the value body; bottom summarizes the memory point. |
| 42 | - **Failure signs**: item text becomes long; list lacks grouping or final takeaway. |
| 43 | |
| 44 | ### `step-guide` |
| 45 | |
| 46 | - **Input shape**: 3-5 ordered actions, stages, or methods. |
| 47 | - **Structure recipe**: numbered vertical sequence with action label + concise detail. |
| 48 | - **Budget rule**: sequence uses the middle height with consistent row rhythm. |
| 49 | - **Failure signs**: steps are too long; action labels are unclear. |
| 50 | |
| 51 | ### `before-after-stack` |
| 52 | |
| 53 | - **Input shape**: before/after, wrong/right, problem/solution, old/new. |
| 54 | - **Structure recipe**: two stacked zones or aligned rows with matching fields. |
| 55 | - **Budget rule**: keep contrast fields parallel and short. |
| 56 | - **Failure signs**: contrast is hidden in prose; field counts do not match. |
| 57 | |
| 58 | ### `myth-fact-qa` |
| 59 | |
| 60 | - **Input shape**: repeated myths/facts, questions/answers, misconception/correction. |
| 61 | - **Structure recipe**: compact repeated rows; each row has a label and one clear answer. |
| 62 | - **Budget rule**: correction/result gets stronger visual weight. |
| 63 | - **Failure signs**: answer is buried; too many rows reduce scan speed. |
| 64 | |
| 65 | ### `data-takeaway-note` |
| 66 | |
| 67 | - **Input shape**: one metric, chart, ranking, or trend with interpretation. |
| 68 | - **Structure recipe**: hook, hero metric or compact chart, interpretation sentence, optional 1-2 proof chips. |
| 69 | - **Budget rule**: one main data object is usually enough. |
| 70 | - **Failure signs**: no interpretation; data labels are too dense. |
| 71 | |
| 72 | ### `mini-framework` |
| 73 | |
| 74 | - **Input shape**: one concept with 3-5 facets, rules, or categories. |
| 75 | - **Structure recipe**: central concept plus compact surrounding/stacked facets, or a simple 2x2. |
| 76 | - **Budget rule**: facets stay short and saveable. |
| 77 | - **Failure signs**: framework is not reusable at a glance; facets become long prose. |
| 78 | |
| 79 | ### `template-note` |
| 80 | |
| 81 | - **Input shape**: reusable template, prompt, formula, checklist form, or decision aid. |
| 82 | - **Structure recipe**: hook, template body with labeled slots/rows, bottom usage note. |
| 83 | - **Budget rule**: make the reusable structure visually obvious. |
| 84 | - **Failure signs**: template is buried in explanation; labels are not actionable. |
| 85 |