Add Codex image generation guidance

references/components.md

@@ -255,9 +255,11 @@
 
 ### 关键约束（血泪经验，不要违反）
 
-1. **必须用 `height:Nvh` 固定高度**，不要用 `aspect-ratio`。
-   - 原因：用 aspect-ratio 在网格里会撑破父容器，导致图片堆叠。
-   - 推荐尺寸：`height:18vh` (紧凑条形) / `22vh` (标准网格) / `26vh` (突出展示) / `28vh` (大图)。
+1. **图片网格必须用 `height:Nvh` 固定高度**，不要用 `aspect-ratio`。
+   - 原因：网格里用 aspect-ratio 容易撑破父容器，导致图片堆叠。
+   - 推荐尺寸：`.h-16` (小型面板) / `.h-18` (紧凑条形) / `.h-22` (标准网格) / `.h-26` (突出展示) / `.h-28` (大图)。
+   - 单张主图可以用模板提供的比例类：`.r-16x9` / `.r-16x10` / `.r-4x3` / `.r-3x2` / `.r-3x4` / `.r-1x1`。
+   - 同一组图片必须使用同一个高度类,不要一张 `25vh`、一张 `21vh` 混用。
 
 2. **`object-position:top center`（已在 CSS 里设好）**，只允许裁掉底部。
    - 严禁裁剪左右和顶部 —— 这是图片的核心身份信息区。
@@ -271,7 +273,11 @@
    </div>
    ```
 
-4. **图片与布局其他部分对齐**：figure 单独加 `align-self:end` 让图片贴底。
+4. **图片与布局其他部分对齐**：使用 `.grid-2-7-5` / `.grid-2-6-6` / `.grid-2-8-4` 的 grid 结构自然顶对齐。不要给图片加 `align-self:end`。
+
+5. **信息图 / 截图再设计**：给 `.frame-img` 同时加 `.fit-contain`，避免图内文字和标注被裁切。
+
+6. **用户原始截图比例不合适时**：优先重新生成"截图再设计 / UI 情景图"到目标比例,不要把原图硬塞成长条。
 
 ### Frame Caption 变体