Update README for Codex image flow

README.en.md

@@ -1,6 +1,6 @@
 # Magazine Web PPT · Editorial-Style Web Slide Deck Skill
 
-A [Claude Code / Claude Agent Skills](https://agentskills.io/) skill that generates **single-file HTML horizontal-swipe decks** with an "**editorial magazine × electronic ink**" aesthetic — picture *Monocle* with code stitched in.
+An agent skill for Claude Code, Codex, and similar coding-agent environments. It generates **single-file HTML horizontal-swipe decks** with an "**editorial magazine × electronic ink**" aesthetic — picture *Monocle* with code stitched in.
 
 > Distilled by [Guizang](https://x.com/op7418) from offline talks like "One-Person Company: Organizations Folded by AI" and "A New Way of Working." Every pitfall hit during those decks is logged in `checklist.md`.
 
@@ -13,6 +13,7 @@ A [Claude Code / Claude Agent Skills](https://agentskills.io/) skill that genera
 - 📐 **Horizontal swipe navigation**: ← → arrows / scroll wheel / touch swipe / bottom dots / ESC for index
 - 🎨 **5 curated theme presets**: Ink Classic / Indigo Porcelain / Forest Ink / Kraft Paper / Dune
 - 🧩 **10 page layouts**: cover, act divider, big numbers, lead image + text, image grid, pipeline, hero question, big quote, before/after, image + text mix
+- 🖼 **Optional Codex image flow**: generate documentary photos, infographics, flow diagrams, system maps, and UI scenes with GPT-M 2.0, then insert them at template-safe ratios
 - 📄 **Single HTML file** — no build, no server, open directly in the browser
 
 ## Fits / Doesn't fit
@@ -57,17 +58,31 @@ Once installed, Claude Code auto-detects the skill. Trigger phrases:
 
 ## Workflow
 
-The skill is a structured 6-step flow; Claude walks you through each:
+The skill is a structured workflow; the agent walks you through each step:
 
 1. **Clarify intent** — 6-question checklist: audience, duration, source material, images, theme, hard constraints
 2. **Copy template** — `assets/template.html` → project folder, update `<title>`, swap theme vars
 3. **Fill content** — pick from 10 layout skeletons, paste, edit copy (with class-name pre-flight + theme rhythm plan)
-4. **Self-check** — match against `references/checklist.md`; P0 issues must all pass
-5. **Preview** — open the HTML in a browser
-6. **Iterate** — use inline styles to tune font size, height, spacing
+4. **Optional image generation** — in Codex, ask whether to use GPT-M 2.0 images, then insert them at page-appropriate ratios
+5. **Self-check** — match against `references/checklist.md`; P0 issues must all pass
+6. **Preview** — open the HTML in a browser
+7. **Iterate** — use inline styles to tune font size, height, spacing
 
 Full spec in [`SKILL.md`](./SKILL.md).
 
+## Codex Image Flow
+
+In Codex, after the first deck draft is ready, the agent can ask whether the user wants generated visuals. Once confirmed, choose an image type or style. Common types include:
+
+- Documentary photos: Fuji / Leica-like real-world scenes that add human texture
+- Infographics / flow diagrams / comparison charts / system maps: for concepts that cannot be explained well with photos
+- Screenshot redesigns / UI scenes: reshape raw screenshots into consistent slide-friendly ratios and visual density
+
+Generated images must follow two core rules:
+
+- Treat the image as an embedded asset, not a standalone slide: no footer, page bottom, title, page number, corner mark, signature, or decorative border
+- Match the slot ratio before generation: 16:9 / 16:10 for main visuals, 16:10 for UI scenes, fixed equal heights for image grids
+
 ## Directory
 
 ```
@@ -81,6 +96,7 @@ guizang-ppt-skill/
     ├── components.md     ← component catalog (type, color, grid, icons, callout, stat, pipeline)
     ├── layouts.md        ← 10 layout skeletons (paste-ready)
     ├── themes.md         ← 5 theme presets (pick, don't customize)
+    ├── image-prompts.md  ← GPT-M 2.0 image types, ratios, and base prompts
     └── checklist.md      ← quality checklist (P0 / P1 / P2 / P3 tiers)
 ```
 
@@ -102,9 +118,10 @@ Switching themes only requires replacing the 6 variables at the top of `template
 
 1. **Restraint over flash** — WebGL backgrounds only bleed through on hero pages
 2. **Structure over decoration** — information hierarchy via type size + typeface + grid whitespace, not shadows or floating cards
-3. **Images are first-class citizens** — crop only from the bottom; top and sides stay intact
-4. **Rhythm lives on hero pages** — hero / non-hero alternation keeps the eye from fatiguing
-5. **Terms stay consistent** — Skills is Skills; no mix-and-match translations
+3. **Images are first-class citizens** — align them with the body content area, keep ratios stable, crop only from the bottom, and preserve top/sides
+4. **Generated visuals are assets** — keep only the core photo / chart / UI; do not render slide titles, footers, or corner marks inside the image
+5. **Rhythm lives on hero pages** — hero / non-hero alternation keeps the eye from fatiguing
+6. **Terms stay consistent** — Skills is Skills; no mix-and-match translations
 
 ## Visual references
 

README.md

@@ -2,7 +2,7 @@
 
 > 🌏 **English version: [README.en.md](./README.en.md)**
 
-一个 [Claude Code / Claude Agent Skills](https://agentskills.io/) 技能,用于生成**单文件 HTML 横向翻页 PPT**,视觉基调是"**电子杂志 × 电子墨水**"——像 *Monocle* 贴上了代码的样子。
+一个适配 Claude Code / Codex 等 Agent 环境的网页 PPT 技能,用于生成**单文件 HTML 横向翻页 PPT**,视觉基调是"**电子杂志 × 电子墨水**"——像 *Monocle* 贴上了代码的样子。
 
 > 由 [歸藏](https://x.com/op7418) 在"一人公司:被 AI 折叠的组织"、"一种新的工作方式"等线下分享中沉淀而成,踩过的每一个坑都写进了 `checklist.md`。
 
@@ -15,6 +15,7 @@
 - 📐 **横向左右翻页**:键盘 ← → / 滚轮 / 触屏滑动 / 底部圆点 / ESC 索引
 - 🎨 **5 套主题色预设**:墨水经典 / 靛蓝瓷 / 森林墨 / 牛皮纸 / 沙丘
 - 🧩 **10 种页面布局**:开场封面、章节幕封、数据大字报、左文右图、图片网格、Pipeline、悬念问题、大引用、Before/After 对比、图文混排
+- 🖼 **Codex 可选配图流程**:可用 GPT-M 2.0 生成纪实照片、信息图、流程图、系统关系图、UI 情景图,并按模板比例插入
 - 📄 **单文件 HTML**:不需要构建、不需要服务器,浏览器直接打开
 
 ## 适合 / 不适合
@@ -59,17 +60,31 @@ git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guiza
 
 ## 使用流程
 
-Skill 本身是结构化的 6 步工作流,Claude 会逐步引导:
+Skill 本身是结构化工作流,Agent 会逐步引导:
 
 1. **需求澄清** — 6 问清单:受众、时长、素材、图片、主题色、硬约束
 2. **拷贝模板** — `assets/template.html` → 项目目录,改 `<title>`,换主题色
 3. **填充内容** — 从 10 种 layout 骨架里挑、粘、改文案(先做类名预检 + 主题节奏规划)
-4. **自检** — 对照 `references/checklist.md`,P0 级问题必须全过
-5. **预览** — 浏览器直接打开
-6. **迭代** — inline style 改字号/高度/间距
+4. **可选配图** — 在 Codex 中可询问是否用 GPT-M 2.0 生成配图,再按页面比例插入
+5. **自检** — 对照 `references/checklist.md`,P0 级问题必须全过
+6. **预览** — 浏览器直接打开
+7. **迭代** — inline style 改字号/高度/间距
 
 详细说明见 [`SKILL.md`](./SKILL.md)。
 
+## Codex 配图能力
+
+在 Codex 环境中,完成 deck 初稿后可以主动询问用户是否需要生成配图。用户确认后,再选择图片类型或风格,常用类型包括:
+
+- 人文纪实照片:富士 / 徕卡感的真实场景,增加人文表现力
+- 信息图 / 流程图 / 对比图 / 系统关系图:用于解释无法用实拍照片说明的概念
+- 截图再设计 / UI 情景图:把原始截图统一成适合 PPT 的比例和视觉密度
+
+生成图片时要遵守两个关键规则:
+
+- 图片是 PPT 中的嵌入素材,不要自带页脚、页底、标题、角标、页码或装饰边框
+- 图片比例必须先匹配落位:主图常用 16:9 / 16:10,截图再设计常用 16:10,多图网格统一高度
+
 ## 目录结构
 
 ```
@@ -82,6 +97,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 分级)
 ```
 
@@ -103,9 +119,10 @@ guizang-ppt-skill/
 
 1. **克制优于炫技** — WebGL 背景只在 hero 页透出
 2. **结构优于装饰** — 信息靠字号 + 字体对比 + 网格留白,不用阴影和浮动卡片
-3. **图片是第一公民** — 只裁底部,顶部和左右完整
-4. **节奏靠 hero 页** — hero / non-hero 交替,才不累眼睛
-5. **术语统一** — Skills 就是 Skills,不中英混译
+3. **图片是第一公民** — 图片要对齐正文内容区,比例稳定,只裁底部,顶部和左右完整
+4. **配图只做素材** — 生成图只保留核心照片 / 图表 / UI,不要把 PPT 页脚、标题和角标画进图片里
+5. **节奏靠 hero 页** — hero / non-hero 交替,才不累眼睛
+6. **术语统一** — Skills 就是 Skills,不中英混译
 
 ## 视觉参考