Add Codex image generation guidance

SKILL.md

@@ -40,6 +40,11 @@ description: 生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT
 
 **如果用户只给了主题或一个模糊想法**,用这 6 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:
 
+#### 运行环境适配
+
+- **在 Codex 中**:用普通对话直接询问用户,不要调用 Claude Code 的 `ask question` / `ask_question` 机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。
+- **在 Claude Code 中**:可以继续使用原有的 `ask question` 交互方式来逐项澄清。
+
 #### 6 问澄清清单
 
 | # | 问题 | 为什么要问 |
@@ -82,6 +87,25 @@ description: 生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT
 - **如何替换**:保持**同名覆盖**最稳(HTML 里不用改路径);如果文件名变了,记得全局搜 `images/旧名` 改成新名
 - **没图怎么办**:和用户对齐,可以先用占位色块生成结构,等图片后期补;但要告知 layout 4/5/10 等图文混排页没图就没法验证视觉效果
 
+#### Codex 配图生成(可选)
+
+如果当前运行环境是 **Codex**,完成 deck 初稿后,主动问用户是否需要用 GPT-M 2.0 生成配图并插入 PPT。不要默认生成。
+
+推荐询问方式:
+
+> 要不要为这份 PPT 生成几张配图?可以做成人文纪实照片、杂志风信息图、流程/对比/系统关系图,或把截图再设计成统一的杂志风视觉。
+
+如果用户确认生成,再问他想要哪种图片类型或风格;如果用户没有偏好,根据页面内容自行推荐 1-3 张最值得生成的配图。
+
+生成配图时遵守:
+
+- 提示词保持简短,只框定主题、用途、风格和比例,不要写长篇摄影指导
+- 图片风格必须贴合本 skill 的"电子杂志 × 电子墨水"基调
+- 信息图、图表、截图再设计里的文字语言必须跟随用户正在使用的语言;中文 deck 用中文,英文 deck 用英文
+- 先看 `references/image-prompts.md` 选择图片类型和基础提示词
+- 配图比例必须匹配最终落位:主视觉 16:9,左文右图 16:10 / 4:3,信息图 16:9 / 16:10,截图再设计 16:10,图文混排小图 3:2 / 3:4,网格图统一高度裁切
+- 生成后的图片放到 `images/` 下,命名遵守 `{页号}-{语义}.{ext}`
+
 ### Step 2 · 拷贝模板
 
 从 `assets/template.html` 拷贝一份到目标位置（通常是 `项目/XXX/ppt/index.html`），同时在同级建一个 `images/` 文件夹准备接图片。
@@ -233,6 +257,7 @@ guizang-ppt-skill/
     ├── components.md     ← 组件手册（字体、色、网格、图标、callout、stat、pipeline、动效...）
     ├── layouts.md        ← 10 种页面布局骨架（可直接粘贴,含动效标记）
     ├── themes.md         ← 5 套主题色预设（只能选不能自定义）
+    ├── image-prompts.md  ← GPT-M 2.0 配图类型、比例和基础提示词
     └── checklist.md      ← 质量检查清单（P0/P1/P2/P3 分级）
 ```
 
@@ -241,8 +266,9 @@ guizang-ppt-skill/
 2. Step 1 需求澄清完成后,读 `themes.md` 帮用户选定一套主题色
 3. **动手前 Read `assets/template.html` 的 `<style>` 块**——这是类名的唯一来源,缺类会导致整页样式崩
 4. 读 `layouts.md` 挑布局(顶部有 Pre-flight 类名清单、主题节奏规划、动效 recipe 决策树)
-5. 细节调整时读 `components.md` 查组件(含 Motion 动效系统章节)
-6. 生成后读 `checklist.md` 自检(顶部 P0-0 规则强制预检 + 动效自检块)
+5. 如果在 Codex 中生成配图,读 `image-prompts.md` 挑图片类型、比例和基础提示词
+6. 细节调整时读 `components.md` 查组件(含 Motion 动效系统章节)
+7. 生成后读 `checklist.md` 自检(顶部 P0-0 规则强制预检 + 动效自检块)
 
 **动效相关**:模板已把 Motion One 的加载和 5 种 recipe 逻辑全部内嵌到 `template.html` 底部的 module script。你不需要改 JS,只需要按 `layouts.md` 的骨架在 HTML 里加 `data-anim` / `data-animate` 即可。离线演示靠 `assets/motion.min.js`,断网时自动降级为"无动画但内容可读"。
 

assets/template.html

@@ -41,8 +41,8 @@
   /* width: NSLIDES * 100vw，会在 JS 里动态矫正 */
   #deck{position:fixed;inset:0;width:10000vw;height:100vh;display:flex;flex-wrap:nowrap;transition:transform .9s cubic-bezier(.77,0,.175,1);z-index:10;will-change:transform}
   .slide{width:100vw;height:100vh;flex:0 0 100vw;position:relative;padding:6vh 6vw 10vh 6vw;display:flex;flex-direction:column;overflow:hidden}
-  .slide.light{color:var(--ink)}
-  .slide.dark{color:var(--paper)}
+  .slide.light{color:var(--ink);background:var(--paper)}
+  .slide.dark{color:var(--paper);background:var(--ink)}
 
   /* 默认页：遮罩较厚，保证文字可读 */
   .slide::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background .7s ease}
@@ -166,6 +166,18 @@
   .frame-img{overflow:hidden;position:relative;background:rgba(0,0,0,.04);box-sizing:border-box;width:100%;border-radius:4px}
   .slide.dark .frame-img{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
   .frame-img > img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
+  .frame-img.fit-contain > img{object-fit:contain;object-position:center center}
+  .frame-img.r-16x9{aspect-ratio:16/9;max-height:64vh}
+  .frame-img.r-16x10{aspect-ratio:16/10;max-height:56vh}
+  .frame-img.r-4x3{aspect-ratio:4/3;max-height:56vh}
+  .frame-img.r-3x2{aspect-ratio:3/2;max-height:46vh}
+  .frame-img.r-3x4{aspect-ratio:3/4;max-height:60vh}
+  .frame-img.r-1x1{aspect-ratio:1/1;max-height:50vh}
+  .frame-img.h-16{height:16vh}
+  .frame-img.h-18{height:18vh}
+  .frame-img.h-22{height:22vh}
+  .frame-img.h-26{height:26vh}
+  .frame-img.h-28{height:28vh}
   .frame-cap{display:flex;justify-content:space-between;align-items:baseline;gap:1vw;margin-top:.8vh;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.72}
   .frame-cap .pf{font-family:var(--serif-zh);font-weight:600;font-size:max(13px,1vw);letter-spacing:.04em;text-transform:none;opacity:.94}
   .frame-cap .nb{font-family:var(--serif-en);font-style:italic;font-size:max(15px,1.2vw);letter-spacing:.02em;text-transform:none;opacity:.88}
@@ -405,11 +417,12 @@
      - pipeline(data-animate="pipeline"):Space/→ 手动推进
      Motion One 没加载成功时(CDN 断 + 本地丢),所有 [data-anim] 会兜底显示。
   */
-  [data-anim]{opacity:0}
-  [data-anim="left"]{transform:translateX(-24px)}
-  [data-anim="right"]{transform:translateX(24px)}
-  [data-anim="line"]{opacity:0;transform:translateY(10px)}
-  [data-animate="pipeline"] [data-anim]{opacity:.15}
+  [data-anim]{opacity:1}
+  body.motion-ready [data-anim]{opacity:0}
+  body.motion-ready [data-anim="left"]{transform:translateX(-24px)}
+  body.motion-ready [data-anim="right"]{transform:translateX(24px)}
+  body.motion-ready [data-anim="line"]{opacity:0;transform:translateY(10px)}
+  body.motion-ready [data-animate="pipeline"] [data-anim]{opacity:.15}
 
   /* ---------- 响应式降级 ---------- */
   @media (max-width:900px){
@@ -692,6 +705,7 @@ try {
 
 if(motion){
   const { animate, stagger } = motion;
+  document.body.classList.add('motion-ready');
   const EASE = [.22, 1, .36, 1];
   const slides = [...document.querySelectorAll('.slide')];
   let pipeStep = -1;

references/checklist.md

@@ -124,8 +124,9 @@ CSS 里 `.frame-img img` 已经预设 `object-position:top`，只裁底。
 
 **做法**:
 - 图文混排**必须用 `.frame.grid-2-7-5`**(或 `.grid-2-6-6`/`.grid-2-8-4`)
-- 右列 `<figure class="frame-img">` 用 **标准比例 16/10 或 4/3 + max-height:56vh**,自然贴顶即可
+- 右列 `<figure class="frame-img r-16x10">` 或 `<figure class="frame-img r-4x3">` 自然贴顶即可
 - 要让左列 callout 看起来"贴底",给**左列**加 flex column + `justify-content:space-between`,不要动右列
+- 如果图片与大标题顶端齐平但正文从标题下方开始,给图片加 `margin-top:7vh` 到 `9vh`,让图片跟正文内容区对齐
 
 ### 4c. 图片不要用原图奇葩比例
 
@@ -219,9 +220,29 @@ Dark hero 可以用 Holographic Dispersion（钛金色散）等带中心结构
 ### 13. 左文右图的对齐
 
 - 左列的文字组 `justify-content:space-between`：标题贴顶，引用框贴底
-- 右列图片 `align-self:end`：和左列的底部元素对齐
+- 右列图片保持自然顶对齐,不要加 `align-self:end`
+- 右列图片通常要跟正文内容区对齐,不是跟大标题顶端对齐;必要时加 `margin-top:7vh` 到 `9vh`
 - 网格整体 `align-items:start`（不是 `center` / `end`）
 
+### 13b. 标题与正文间距
+
+- 顶部标题 + 下方长文章/引用/图表的两段式布局,中间必须有明显间距,推荐 `margin-top:6vh` 到 `8vh`
+- 居中大标题页必须整体水平居中,不要只让文字块左对齐居中摆放
+- 复杂内容页用大标题定调,下方内容用 grid / rowline 两端对齐,不要把大标题、小标题、正文挤成一坨
+
+### 13c. UI 情景图不要拉成巨长条
+
+- 单张 UI 截图如果放满宽后变成长条,优先拆成 2-3 个局部面板
+- 多面板拼排时每个 `.frame-img` 用同一个固定高度类,如 `.h-16` / `.h-18` / `.h-22`,不要用同一个超宽容器硬塞
+- 同一组图片的视觉大小必须一致,不要混用不同高度、不同缩放和不同边距密度
+- 如果确实需要全宽,必须生成比例足够长的横向图片,并在 prompt 里明确"ultra-wide horizontal strip"
+
+### 13d. 生成配图不要自带 slide 元素
+
+- GPT-M 2.0 生成的配图只是嵌入素材,不要让图片自带页眉、页脚、标题、页码、角标、署名或装饰边框
+- 流程图/信息图只保留核心图形和必要短标签,PPT 自己负责标题、页脚和 chrome
+- 如果生成图已经带了这些元素,优先重生成;不要在 PPT 里再叠一层 chrome 造成干扰
+
 ### 14. 图片的微弱圆角
 
 所有 `.frame-img` 和 `.frame-img img` 都加 `border-radius:4px`，视觉上"柔和"但不软。**不要超过 8px**，否则像消费 app UI。

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 变体
 

references/image-prompts.md

@@ -0,0 +1,117 @@
+# GPT-M 2.0 配图提示词
+
+用于 Codex 环境下为本 skill 生成 PPT 配图。提示词只负责定基调,不要写成长篇说明。先判断图片落位和比例,再选择类型。
+
+## 通用规则
+
+- 风格基调:电子杂志 × 电子墨水,克制、真实、留白充足,适合横向网页 PPT
+- 信息图、图表、截图再设计中的文字语言必须跟随用户语言:中文 deck 用中文,英文 deck 用英文
+- 不生成卡通、3D、霓虹科技感、SaaS 模板感、过度装饰或假 logo
+- 图片要给标题或正文留出可叠加空间,不要满屏堆细节
+- 同一页或同一组图片必须使用同一比例、同一视觉缩放、同一边距密度
+- 配图是嵌入 PPT 的素材,不是一张独立 slide:不要生成页眉、页脚、页码、标题栏、角标、署名、装饰边框或 slide chrome
+- 生成后保存到 `images/`,命名为 `{页号}-{语义}.{ext}`
+
+## 比例选择
+
+| 用途 | 推荐比例 | HTML 落位 |
+|------|---------|-----------|
+| 章节封面 / 全屏主视觉 | 16:9 | `.frame-img.r-16x9` 或 hero 背景参考 |
+| 左文右图主图 | 16:10 或 4:3 | `.frame-img.r-16x10` / `.frame-img.r-4x3` |
+| 信息图 / 系统关系图 | 16:9 或 16:10 | `.frame-img.r-16x9.fit-contain` / `.frame-img.r-16x10.fit-contain` |
+| 截图再设计 / UI 情景图 | 16:10 | `.frame-img.r-16x10.fit-contain` |
+| 图文混排小图 | 3:2 或 3:4 | `.frame-img.r-3x2` / `.frame-img.r-3x4` |
+| 图片网格 | 统一横图 | `.frame-img.h-22` / `.frame-img.h-26` |
+| 小型面板组 | 统一横图 | `.frame-img.h-16` / `.frame-img.h-18` |
+
+信息图和截图再设计优先用 `fit-contain`,避免文字被裁切;纪实照片优先用默认 `cover`,保持画面张力。
+
+## 图片标准化策略
+
+### A. 先选目标槽位
+
+不要先生成图片再硬塞进页面。先决定图片落位:
+
+1. 主视觉:16:9
+2. 左文右图:16:10 或 4:3
+3. 信息图/截图再设计:16:9 或 16:10,并使用 `fit-contain`
+4. 多图网格/面板组:统一高度类,同一组内禁止混用高度
+
+### B. 用户原始图片/截图的处理
+
+原始截图比例通常不可控,不要直接作为最终视觉标准。按下面顺序处理:
+
+1. 如果原图比例接近目标槽位,直接放入统一 `.frame-img` 中,用 `cover` 或 `fit-contain`
+2. 如果原图过高、过窄、过长,优先用"截图再设计 / UI 情景图"重新生成到目标比例
+3. 如果一张 UI 图被拉成巨长条,拆成 2-3 张同尺寸局部面板;每个面板使用同一高度类
+4. 如果必须保留原图,用 `fit-contain` 放进统一 frame,接受留白,不要裁掉关键文字
+
+### C. 生成提示词后缀
+
+每个配图提示词最后都补一句规格约束:
+
+```text
+输出必须是[16:9/16:10/4:3/3:2]横向构图,主体居中但保留边距,画面密度中等,与同组图片保持相同视觉缩放和边距。只保留核心图形/画面本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。
+```
+
+同一页需要多张图时,补一句:
+
+```text
+这是一组图片中的一张,请保持与同组图片相同的画面比例、元素大小、边距、线条粗细和标注密度。
+```
+
+## 类型 1: 人文纪实照片
+
+用于增加现场感、情绪和真实世界锚点。
+
+```text
+生成一张横向纪实摄影配图,主题是:[页面概念]。风格像 Fujifilm / Leica editorial documentary,自然光、低饱和、轻微胶片颗粒、真实工作或生活现场,克制有人文温度。适合电子杂志 × 电子墨水 PPT,留出标题空间。不要商业摆拍、科幻界面、AI 机器人、logo 或水印。输出必须是[16:9/16:10/4:3]横向构图,主体居中但保留边距,画面密度中等。只保留核心照片本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。
+```
+
+## 类型 2: 杂志风信息图
+
+用于解释概念、流程、对比、系统关系。
+
+```text
+生成一张横向杂志风信息图,解释:[概念/流程/关系]。电子墨水风格,黑白灰为主,少量低饱和强调色,细线条、网格、编号、短标签、留白充足。图中文字使用[中文/英文],保持简短可读。不要卡通、3D、霓虹科技感或模板感。输出必须是[16:9/16:10]横向构图,主体居中但保留边距,画面密度中等。只保留核心信息图本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。
+```
+
+## 类型 3: 流程 / Pipeline 图
+
+用于讲清从 A 到 B 到 C 的过程。
+
+```text
+生成一张横向流程信息图,展示:[步骤 1] → [步骤 2] → [步骤 3] → [结果]。风格为电子杂志 × 电子墨水,细箭头、分段编号、短注释、克制留白。图中文字使用[中文/英文]。只保留核心流程图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。
+```
+
+## 类型 4: 对比图
+
+用于 before / after、新旧模式、两种协作方式对照。
+
+```text
+生成一张横向对比信息图,左侧是[旧模式],右侧是[新模式]。风格像高端独立杂志里的分析图,黑白灰和一个低饱和强调色,细线分栏、短标签、清晰层级。图中文字使用[中文/英文]。只保留核心对比图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。
+```
+
+## 类型 5: 系统关系图
+
+用于多角色、多工具、多模块之间的关系。
+
+```text
+生成一张横向系统关系图,展示:[角色/工具/模块]之间如何连接。电子墨水杂志风,节点、细线、箭头、编号和少量短注释,结构清晰,留白充足。图中文字使用[中文/英文]。只保留核心关系图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。
+```
+
+## 类型 6: 截图再设计 / UI 情景图
+
+用于把真实截图、代码、设计稿、工作区处理成统一视觉素材。
+
+```text
+生成一张横向 UI 情景图,把[截图/界面/工作区内容]再设计成适合杂志风 PPT 的视觉。保留真实产品工作流的感觉,使用纸张底色、细线框、网格、少量标注和克制阴影。图中文字使用[中文/英文],短而清晰。不要真实品牌 logo、花哨 dashboard、霓虹渐变或过度拟物。输出必须是16:10横向构图,主体居中但保留边距,画面密度中等。只保留核心 UI 画面本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。
+```
+
+## 类型 7: 数据大字报图
+
+用于突出一个关键数字或少量指标。
+
+```text
+生成一张横向数据大字报视觉,核心数字是:[数字],含义是:[含义]。风格为电子墨水杂志版式,超大衬线数字、少量短注释、细线、留白和纸张质感。图中文字使用[中文/英文]。只保留核心数据视觉本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。
+```

references/layouts.md

@@ -18,13 +18,30 @@ layouts.md 使用的所有类（`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` /
 
 | 场景 | 推荐比例 | 写法 |
 |------|---------|------|
-| 左文右图 主图 | 16:10 或 4:3 | `aspect-ratio:16/10; max-height:54vh` |
-| 图片网格（多图对比） | 统一 | **固定 `height:26vh`，不用 aspect-ratio** |
-| 左小图 + 右文字 | 1:1 或 3:2 | `aspect-ratio:1/1; max-width:40vw` |
-| 全屏主视觉 | 16:9 | `aspect-ratio:16/9; max-height:64vh` |
-| 图文混排小插图 | 3:2 | `aspect-ratio:3/2; max-width:30vw` |
+| 左文右图 主图 | 16:10 或 4:3 | `.frame-img.r-16x10` 或 `.frame-img.r-4x3` |
+| 图片网格（多图对比） | 统一 | `.frame-img.h-22` / `.frame-img.h-26`，不用 aspect-ratio |
+| 小型面板组 | 统一 | `.frame-img.h-16` / `.frame-img.h-18`，同组必须同高 |
+| 左小图 + 右文字 | 1:1 或 3:2 | `.frame-img.r-1x1` 或 `.frame-img.r-3x2` |
+| 全屏主视觉 | 16:9 | `.frame-img.r-16x9` |
+| 信息图 / 截图再设计 | 16:9 或 16:10 | `.frame-img.r-16x9.fit-contain` 或 `.frame-img.r-16x10.fit-contain` |
+| 图文混排小插图 | 3:2 或 3:4 | `.frame-img.r-3x2` 或 `.frame-img.r-3x4` |
 
-图片必须包在 `<figure class="frame-img">` 里，里面的 `<img>` 会自动 `object-fit:cover + object-position:top center`，只裁底部，不裁顶/左/右。
+图片必须包在 `<figure class="frame-img">` 里。默认照片会 `object-fit:cover + object-position:top center`,只裁底部,不裁顶/左/右。信息图和截图再设计必须加 `.fit-contain`,避免文字或标注被裁切。
+
+### B2. 图片与内容的垂直对齐
+
+图片应该跟正文内容区对齐,不要默认贴到大标题顶端。特别是左文右图和图文混排页:
+
+- 如果左列是 kicker + 大标题 + 正文 + callout,右列图片通常从正文高度开始,可给图片加 `style="margin-top:7vh"` 到 `9vh`
+- 如果图片是信息图或 UI 情景图,优先对齐正文首行或说明文字,不要和超大标题顶端齐平
+- 如果一张截图/UI 情景图在横向页面里变成很长的条,不要硬拉满宽;改成极宽横图素材,或拆成 2-3 个局部面板拼排
+- 多图面板必须使用同一个高度类,不要混用 `h-16` / `h-22` 或手写不同 `height`
+
+### B3. 标题与正文的间距
+
+- 两段式页面(顶部标题 + 下方长正文/引用/图表)必须在标题和内容之间留出明显间距,推荐 `margin-top:6vh` 到 `8vh`
+- 居中大标题页必须让主标题在页面水平居中,使用 `.center` 或 `text-align:center; margin-inline:auto`
+- 复杂内容页(大标题 + 小标题 + 详细内容)要让大标题和下方内容分层,下方内容使用左右两端对齐的 grid 或 rowline,不要全部堆在一条中轴线上
 
 ### C. 图片定位准则（避免图片堆到页面最底部、被浏览器工具栏遮挡）
 
@@ -293,7 +310,7 @@ layouts.md 使用的所有类（`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` /
       </div>
     </div>
     <!-- 右列：图片用标准 16/10 比例 + max-height，不要 align-self:end -->
-    <figure class="frame-img" style="aspect-ratio:16/10; max-height:56vh" data-anim>
+    <figure class="frame-img r-16x10" data-anim>
       <img src="images/codepilot.png" alt="CodePilot 产品截图">
       <figcaption class="img-cap">CodePilot · 产品截图</figcaption>
     </figure>
@@ -309,7 +326,7 @@ layouts.md 使用的所有类（`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` /
 - 用 `grid-2-7-5`（左 7 份、右 5 份），`align-items:start` 已在 template 预设
 - **左列**用 flex column + `justify-content:space-between`：标题贴顶，callout 自然贴底
 - **右列图片** **不要加 `align-self:end`**。会让图片滑到 cell 底部，低分屏下被浏览器工具栏遮挡
-- 图片必须用 **标准比例 16/10 或 4/3 + `max-height:56vh`**，不要用原图奇葩比例（`2592/1798` 这种）
+- 图片必须用 **标准比例类 `.r-16x10` 或 `.r-4x3`**，不要用原图奇葩比例（`2592/1798` 这种）
 
 ---
 
@@ -599,7 +616,7 @@ layouts.md 使用的所有类（`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` /
       </div>
     </div>
     <!-- 右列:辅助图 · 竖版或方形 -->
-    <figure class="frame-img" style="aspect-ratio:3/4; max-height:60vh" data-anim>
+    <figure class="frame-img r-3x4" data-anim>
       <img src="images/figma.png" alt="Figma design system">
       <figcaption class="img-cap">Figma · Design System</figcaption>
     </figure>