Add bundled screenshot backgrounds

README.en.md

@@ -146,7 +146,7 @@ Once installed, Claude Code auto-detects the skill. Trigger phrases:
 The skill is a structured workflow; the agent walks you through each step:
 
 1. **Choose style** — Style A editorial magazine, or Style B Swiss International
-2. **Clarify intent** — 6-question checklist: audience, duration, source material, images, theme, hard constraints
+2. **Clarify intent** — 7-question checklist: style, audience, duration, source material, images/screenshots, theme, hard constraints
 3. **Copy template** — Style A uses `assets/template.html`; Style B uses `assets/template-swiss.html`
 4. **Fill content** — create a rhythm plan, then choose and adapt the matching layout skeletons
 5. **Optional image generation** — in Codex, ask whether to use GPT-Image 2.0 / GPT-M 2.0 images, then insert them at page-appropriate ratios
@@ -180,17 +180,18 @@ In Codex, after the first deck draft is ready, the agent can ask whether the use
 
 - 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
+- Screenshot framing / screenshot redesigns: preserve raw screenshots with bundled background assets and a CleanShot X-style canvas first; use UI scene generation only when the screenshot needs reconstruction
 - Data posters / charts: turn key numbers into insert-ready visual assets
 - Multi-image compositions: useful for ultra-wide slots where three unrelated 16:9 images would break the grid
 
-Generated images must follow three core rules:
+Generated images must follow four 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 deck language: Chinese decks use Chinese labels inside infographics, English decks use English labels
 - Match the slot ratio before generation: 21:9 for many Swiss hero slots, 16:9 / 16:10 for common main visuals, 16:10 for UI scenes, fixed equal heights for image grids
+- When a raw screenshot must stay faithful, read `references/screenshot-framing.md` first and use bundled `assets/screenshot-backgrounds/` backgrounds plus programmatic scaling, padding, and alignment instead of redrawing the screenshot by default
 
-Image prompts live in [`references/image-prompts.md`](./references/image-prompts.md).
+Image prompts live in [`references/image-prompts.md`](./references/image-prompts.md). Screenshot framing lives in [`references/screenshot-framing.md`](./references/screenshot-framing.md).
 
 ## Cover Generation
 
@@ -232,7 +233,8 @@ guizang-ppt-skill/
 ├── README.en.md          ← this file
 ├── assets/
 │   ├── template.html         ← Style A editorial magazine template
-│   └── template-swiss.html   ← Style B Swiss template
+│   ├── template-swiss.html   ← Style B Swiss template
+│   └── screenshot-backgrounds/ ← bundled WebP screenshot backgrounds: 5 style-a / 4 style-b
 ├── scripts/
 │   └── validate-swiss-deck.mjs ← Swiss layout validator
 └── references/

README.md

@@ -148,7 +148,7 @@ git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guiza
 Skill 本身是结构化工作流,Agent 会逐步引导:
 
 1. **选择风格** — Style A 电子杂志风,或 Style B 瑞士国际主义
-2. **需求澄清** — 6 问清单:受众、时长、素材、图片、主题色、硬约束
+2. **需求澄清** — 7 问清单:风格、受众、时长、素材、图片/截图需求、主题色、硬约束
 3. **拷贝模板** — Style A 用 `assets/template.html`,Style B 用 `assets/template-swiss.html`
 4. **填充内容** — 先做主题节奏表,再从对应 layout 骨架里挑、粘、改文案
 5. **可选配图** — 在 Codex 中询问是否用 GPT-Image 2.0 / GPT-M 2.0 生成配图,再按页面比例插入
@@ -182,17 +182,18 @@ node scripts/validate-swiss-deck.mjs path/to/index.html
 
 - 人文纪实照片:富士 / 徕卡感的真实场景,增加人文表现力
 - 信息图 / 流程图 / 对比图 / 系统关系图:用于解释无法用实拍照片说明的概念
-- 截图再设计 / UI 情景图:把原始截图统一成适合 PPT 的比例和视觉密度
+- 截图美化 / 截图再设计:原始截图优先用内置背景资产做 CleanShot X 式背景画布适配;需要重构时再生成 UI 情景图
 - 数据大字报 / 数据图表:把关键数字做成可直接插入 PPT 的视觉素材
 - 多图拼贴:用于极宽图片槽位,避免把三张 16:9 图片硬塞进三列
 
-生成图片时要遵守三个关键规则:
+生成图片时要遵守四个关键规则:
 
 - 图片是 PPT 中的嵌入素材,不要自带页脚、页底、标题、角标、页码或装饰边框
 - 图片语言跟随 deck 语言:中文 deck 的信息图用中文标签,英文 deck 用英文标签
 - 图片比例必须先匹配落位:瑞士风主图常用 21:9,通用主图常用 16:9 / 16:10,截图再设计常用 16:10,多图网格统一高度
+- 用户截图需要保真时,先读 `references/screenshot-framing.md`,用 `assets/screenshot-backgrounds/` 内置背景 + 程序化缩放/留边/对齐处理,不要默认重画截图内容
 
-配图提示词见 [`references/image-prompts.md`](./references/image-prompts.md)。
+配图提示词见 [`references/image-prompts.md`](./references/image-prompts.md),截图适配见 [`references/screenshot-framing.md`](./references/screenshot-framing.md)。
 
 ## 封面生成
 
@@ -233,7 +234,8 @@ guizang-ppt-skill/
 ├── README.md             ← 本文件
 ├── assets/
 │   ├── template.html         ← Style A 电子杂志风模板
-│   └── template-swiss.html   ← Style B 瑞士国际主义模板
+│   ├── template-swiss.html   ← Style B 瑞士国际主义模板
+│   └── screenshot-backgrounds/ ← 截图美化内置背景(WebP):style-a 5 套 / style-b 4 套
 ├── scripts/
 │   └── validate-swiss-deck.mjs ← 瑞士风版式校验器
 └── references/

SKILL.md

@@ -49,14 +49,14 @@ description: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背
 
 ### Step 1 · 需求澄清(**动手前必做**)
 
-**如果用户已经给了完整的大纲 + 图片**,可以跳过直接进 Step 2。
+**如果用户已经给了完整的大纲 + 图片/截图处理要求**,可以跳过直接进 Step 2。
 
-**如果用户只给了主题或一个模糊想法**,用这 6 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:
+**如果用户只给了主题或一个模糊想法**,用这 7 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:
 
 #### 运行环境适配
 
-- **在 Codex 中**:用普通对话直接询问用户,不要调用 Claude Code 的 `ask question` / `ask_question` 机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。
-- **在 Claude Code 中**:可以继续使用原有的 `ask question` 交互方式来逐项澄清。
+- **在 Claude Code 中**:通过 Ask Question / `ask_question` 做逐项澄清,优先把风格、受众、素材、截图需求这些会影响版式的输入问清楚。
+- **在 Codex 中**:用普通对话直接询问用户,不要调用 Claude Code 的 Ask Question / `ask_question` 机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。
 
 #### 7 问澄清清单
 
@@ -66,7 +66,7 @@ description: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背
 | 2 | **受众是谁?分享场景?**(行业内部 / 商业发布 / demo day / 私享会) | 决定语言风格和深度 |
 | 3 | **分享时长?** | 15 分钟 ≈ 10 页,30 分钟 ≈ 20 页,45 分钟 ≈ 25-30 页 |
 | 4 | **有没有原始素材?**(文档 / 数据 / 旧 PPT / 文章链接) | 有素材就基于素材,没有就帮他搭 |
-| 5 | **有没有图片?放在哪?** | 详见下方"图片约定" |
+| 5 | **有没有图片或截图?希望怎么处理?** | 决定图文版式、图片槽位、截图是否需要 CleanShot X 式适配或 GPT-M 2.0 重构 |
 | 6 | **想要哪套主题色?** | 杂志风 5 套(`themes.md`) / 瑞士风 4 套(`themes-swiss.md`),挑一 |
 | 7 | **有没有硬约束?**(必须包含 XX 数据 / 不能出现 YY) | 避免返工 |
 
@@ -80,7 +80,7 @@ description: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背
 | 内容是行业观察 / 人文 / 故事 / 文化 | A 更合适 |
 | 用户给了大量 KPI 数字 / 路线图 / 流程 | B 更合适(`Data Hero` 布局是瑞士风专长) |
 | 用户给了大量纪实照片 / 人文图片 | A 更合适(图片网格、左文右图是杂志风专长) |
-| 用户需要 GPT-M 2.0 生成截图再设计 / 信息图 / 证据墙 | B 也很合适(P23/P24 是瑞士风图片专用版式) |
+| 用户需要 GPT-M 2.0 生成截图再设计 / 信息图 / 证据墙 | B 也很合适(S22 主图、S15/S16 图片网格可以承载证据图) |
 
 #### 大纲协助(如果用户没有大纲)
 
@@ -113,6 +113,18 @@ description: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背
 - **如何替换**:保持**同名覆盖**最稳(HTML 里不用改路径);如果文件名变了,记得全局搜 `images/旧名` 改成新名
 - **没图怎么办**:和用户对齐,可以先用占位色块生成结构,等图片后期补;但要告知 layout 4/5/10 等图文混排页没图就没法验证视觉效果
 
+#### 截图需求约定(动手前必须问)
+
+只要用户提到产品截图、网页截图、代码截图、设计稿、dashboard、旧 PPT 截图或"帮我美化截图",都要先确认:
+
+- **截图位置**:截图文件在哪个文件夹?是否已经命名好?
+- **使用目的**:保真展示 / 截图美化 / 截图再设计 / UI 情景图?
+- **落位比例**:最终放进哪个版式槽位?常用 `21:9` / `16:10` / `16:9` / `4:3` / `1:1`
+- **内容要求**:是否必须保留全部文字、品牌、数据?是否有敏感信息要遮挡?
+- **视觉处理**:是否需要主题背景、留边、居中/角落对齐、拆成长截图面板?
+
+默认策略:先让内容适配模板,再处理图片比例。截图需要保真时,先读 `references/screenshot-framing.md`,优先使用 `assets/screenshot-backgrounds/` 的内置背景资产做程序化 CleanShot X 式背景画布适配;只有原截图太乱、太长、太窄或需要概念化表达时,才用 GPT-M 2.0 做截图再设计。
+
 #### Codex 配图生成(可选)
 
 如果当前运行环境是 **Codex**,完成 deck 初稿后,主动问用户是否需要用 GPT-M 2.0 生成配图并插入 PPT。不要默认生成。
@@ -123,13 +135,18 @@ description: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背
 
 如果用户确认生成,再问他想要哪种图片类型或风格;如果用户没有偏好,根据页面内容自行推荐 1-3 张最值得生成的配图。
 
+如果用户提供的是截图,先判断是**截图美化**还是**截图再设计**:
+
+- 截图美化:读 `references/screenshot-framing.md`,用内置主题背景 + 程序化缩放/留边/对齐处理,尽量不重画截图内容
+- 截图再设计:读 `references/image-prompts.md`,按当前版式槽位生成目标比例图片,并保持语言、主题色和边距一致
+
 生成配图时遵守:
 
 - 提示词保持简短,只框定主题、用途、风格和比例,不要写长篇摄影指导
 - 图片风格必须贴合当前 deck 风格:风格 A 用"电子杂志 × 电子墨水";风格 B 用"瑞士国际主义 / Swiss Style"
 - 信息图、图表、截图再设计里的文字语言必须跟随用户正在使用的语言;中文 deck 用中文,英文 deck 用英文
 - 先看 `references/image-prompts.md` 选择图片类型和基础提示词
-- 如果处理用户原始截图,先看 `references/screenshot-framing.md`:优先程序化做 CleanShot X 式截图适配,只有需要重构信息时才用 GPT-M 2.0 重画
+- 如果处理用户原始截图,先看 `references/screenshot-framing.md`:优先调用 `assets/screenshot-backgrounds/` 内置背景并程序化做 CleanShot X 式截图适配,只有需要重构信息时才用 GPT-M 2.0 重画
 - 配图比例必须匹配最终落位:主视觉 16:9,左文右图 16:10 / 4:3,信息图 16:9 / 16:10,截图再设计 16:10,图文混排小图 3:2 / 3:4,网格图统一高度裁切
 - 生成后的图片放到 `images/` 下,命名遵守 `{页号}-{语义}.{ext}`
 
@@ -315,7 +332,7 @@ cp "<SKILL_ROOT>/assets/template-swiss.html" "项目/XXX/ppt/index.html"
 | 全屏主视觉 | 16:9 + `max-height:64vh` |
 | 图文混排小插图 | 3:2 或 3:4 |
 
-**默认不要让图片 `align-self:end`**——会滑到页面底部,很容易碰到分页组件。用 grid 容器 + `align-items:start`(template 已预设)让图片贴顶即可;只有风格 B 的 P23 可以用 `.swiss-img-split.align-image-bottom`,因为模板已经给它内置了 `--nav-safe-bottom` 安全区。
+**默认不要让图片 `align-self:end`**——会滑到页面底部,很容易碰到分页组件。用 grid 容器 + `align-items:start`(template 已预设)让图片贴顶即可;如果确实需要图文底对齐,必须先控制图片高度,再使用模板已有安全区类 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,不要让最低处碰到分页组件。
 
 **风格 B 瑞士风额外规则**:
 - 单张大图用 S22;多图测试用 S15/S16 的原始卡片网格改造,不要用未登记的 P23/P24
@@ -391,9 +408,9 @@ cp "<SKILL_ROOT>/assets/template-swiss.html" "项目/XXX/ppt/index.html"
 19. **装饰元素严格在 grid 内**——bars 矩阵、点阵、ring-mat 不能贴边或溢出页面
 20. **底部内容预留 nav 空间**——nav 在 ~97vh,内容收尾不要过 93vh(吸取 P22 KPI 大字溢底教训)
 21. **图片容器直角无阴影**——`.frame-img` 不加 `border-radius` / `box-shadow`;边界只用 hairline
-22. **P23/P24 图片同组一致**——同一组图片统一比例、高度、边距、线条粗细;信息图/UI 图加 `.fit-contain`
-23. **组件角色要正确**——P23/P24 的 caption 是必选信息锚点;P22 的 KPI/说明是必选;数据专用版式必须有真实数据,不能靠文案硬填
-24. **通用/非通用版式要分清**——P3/P8/P11/P19/P23 较通用;P6/P7/P20/P21/P22 是数据/案例专用;P14/P15/P17 是结构专用
+22. **S15/S16/S22 图片同组一致**——同一组图片统一比例、高度、边距、线条粗细;信息图/UI 图加 `.fit-contain`
+23. **组件角色要正确**——S15/S16 图片格需要 caption 信息锚点;S22 的 KPI/说明是必选;数据专用版式必须有真实数据,不能靠文案硬填
+24. **通用/非通用版式要分清**——S03/S08/S11/S19 较通用;S06/S07/S20/S21/S22 是数据/案例专用;S14/S15/S17 是结构专用
 
 ### Step 5 · 本地预览
 
@@ -419,6 +436,7 @@ guizang-ppt-skill/
 ├── assets/
 │   ├── template.html         ← 风格 A · 电子杂志风模板（种子文件）
 │   ├── template-swiss.html   ← 风格 B · 瑞士国际主义风模板（种子文件）
+│   ├── screenshot-backgrounds/ ← 截图美化内置背景(WebP):style-a 5 套 / style-b 4 套
 │   └── motion.min.js         ← Motion One 本地副本（离线兜底,约 64KB,共用）
 ├── scripts/
 │   └── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐
@@ -431,7 +449,7 @@ guizang-ppt-skill/
     ├── themes.md             ← 风格 A · 5 套主题色预设（只能选不能自定义）
     ├── themes-swiss.md       ← 风格 B · 4 套瑞士风主题色预设（IKB / 柠檬黄 / 柠檬绿 / 安全橙）
     ├── image-prompts.md      ← GPT-M 2.0 配图类型、比例和基础提示词
-    ├── screenshot-framing.md ← CleanShot X 式截图适配语义
+    ├── screenshot-framing.md ← CleanShot X 式截图适配语义 + 内置背景资产映射
     └── checklist.md          ← 质量检查清单（P0/P1/P2/P3 分级）
 ```
 
@@ -447,7 +465,7 @@ guizang-ppt-skill/
    - 风格 A → `layouts.md`(顶部有 Pre-flight 类名清单、主题节奏规划、动效 recipe 决策树)
    - 风格 B → **先读 `swiss-layout-lock.md`**,再读 `layouts-swiss.md`;正文页必须从 S01-S22 选择,每页写 `data-layout`
 5. 如果风格 B 需要地点、路线、人物住所或城市关系地图,读 `swiss-map-component.md`
-6. 如果在 Codex 中生成配图,读 `image-prompts.md` 挑图片类型、比例和基础提示词;如果是用户原始截图,先读 `screenshot-framing.md`
+6. 如果在 Codex 中生成配图,读 `image-prompts.md` 挑图片类型、比例和基础提示词;如果是用户原始截图,先读 `screenshot-framing.md`,优先使用 `assets/screenshot-backgrounds/` 的内置背景资产
 7. 细节调整时读 `components.md` 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 `layouts-swiss.md` 附录)
 8. 生成后先运行 `node scripts/validate-swiss-deck.mjs path/to/index.html`,再读 `checklist.md` 自检
 

references/checklist.md

@@ -154,12 +154,15 @@ node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html
 - 图片容器只用 `.frame-img`;**不要** `border-radius` / `box-shadow`
 - UI / 信息图 / 流程图若是用户原始截图或文字密集图,使用 `.fit-contain`;若已按槽位重生成,必须用对应比例类铺满容器,例如 `.frame-img.r-21x9`,不能再用固定短高度把图片缩小
 - 多图同组必须统一槽位、比例、高度,不要混用
+- 用户原始截图要先读 `references/screenshot-framing.md`:优先用 `assets/screenshot-backgrounds/` 内置主题背景 + 程序化缩放/留边/对齐,不要为了比例统一就重画截图内容
+- 截图背景必须跟随当前主题色,且可裁成 `21:9` / `16:10` / `4:3` / `1:1`;背景里不能有标题、页脚、边框、logo、人物或明显主体
 - GPT-M 2.0 提示词必须写明:Swiss Style、单一 accent、直角、无渐变/阴影/圆角、无页眉页脚标题角标
 
 **自检命令**:
 - `grep -E "frame-img.*border-radius|box-shadow" index.html`——命中就删
 - `grep -n "data-image-slot" index.html`——每张本地图片都应有槽位声明
 - 目视:图片内部如果自带大标题、页码、页脚、角标,优先重生成,不要在页面里再裁切硬救
+- 目视:截图外侧背景应该是安静托底,不能比截图本身更抢眼;Swiss 风截图不得出现圆角和投影
 
 ### 0-D-2. 瑞士风底部分页安全区:最低处不要碰 nav
 
@@ -169,7 +172,7 @@ node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html
 
 **做法**:
 - 主内容最低边缘与分页组件之间至少留 `3vh` 呼吸空间
-- P23 需要底部对齐时用 `.swiss-img-split.align-image-bottom`,模板已内置 `--nav-safe-bottom:8vh`
+- 图文页需要底部对齐时,先控制图片高度,再给主体容器加 `.nav-safe-bottom` / `.nav-safe-bottom-tight`
 - 其他页面需要贴底时,给主体容器加 `.nav-safe-bottom` 或 `.nav-safe-bottom-tight`
 - 不要手写 `bottom:2vh` / `bottom:0` 放说明文字;这会和 nav 抢位置
 
@@ -447,9 +450,9 @@ Dark hero 可以用 Holographic Dispersion（钛金色散）等带中心结构
 
 ### 13e. Swiss 图文混排不能只用一种
 
-- 7-8 页 Swiss 测试 deck 至少使用 6 个不同 P 编号版式
-- 有 2-3 张配图时,至少使用两种图片承载方式:P22 主视觉 / P23 单图解释 / P24 证据墙 / P15 矩阵 / P16 小报
-- P23 默认底对齐:文字块和图片底部对齐,不要因为担心 nav 就退回顶部对齐;先控制图片高度
+- 7-8 页 Swiss 测试 deck 至少使用 6 个不同 S 编号版式
+- 有 2-3 张配图时,至少使用两种图片承载方式:S22 主视觉 / S15 矩阵 / S16 小报 / S08 对照图文 / S19 四卡证据
+- 左文右图或右文左图需要底对齐时,先控制图片高度和主体安全区,不要把整块内容推到分页组件附近
 - 白底信息图容器必须白底、无描边;不要用灰框包白图
 
 ### 13f. Swiss 中文大标题要降级

references/screenshot-framing.md

@@ -8,6 +8,30 @@
 2. **GPT-M 2.0 只做重构**:只有原图过长、过窄、信息太乱、需要 UI 情景化或概念化表达时,才使用“截图再设计 / UI 情景图”。
 3. **模板槽位先行**:先确定 slide 版式和图片槽位比例,再决定截图适配参数。
 
+## 开始前询问
+
+在主流程 Step 1 中,只要用户可能提供截图,就先问清楚:
+
+- 截图在哪个文件夹?是否包含网页、App、代码、dashboard、设计稿或旧 PPT?
+- 这批截图要**保真展示**、**统一美化**、**重新设计成 UI 情景图**,还是混合处理?
+- 最终要放进哪些槽位:21:9 顶图、16:10 主图、4:3 侧图、1:1 方图、还是多图网格?
+- 是否必须保留所有文字和数据?是否需要隐藏账号、头像、项目名等敏感信息?
+- 构图希望居中、左上、右下,还是根据页面内容自动判断?
+
+如果在 Claude Code 中,用 Ask Question / `ask_question` 做这些澄清;如果在 Codex 中,用普通对话询问,不要调用 Ask Question。
+
+## 处理链路
+
+1. **先匹配版式**:根据内容选择模板 layout,确定截图槽位尺寸和比例。
+2. **再选处理方式**:
+   - 要保真:程序化适配,不重画截图。
+   - 要统一视觉但不改内容:程序化适配 + 主题背景。
+   - 原图不可用或需要解释概念:再走 GPT-M 2.0 截图再设计。
+3. **再选择背景**:优先使用内置背景资产,不应该每张截图临时生成一种风格。
+4. **最后合成截图**:创建目标比例画布,背景 cover 铺满,截图等比缩放后按 `padding` 和 `alignment` 放入。
+
+默认不要裁掉截图内容。只有截图已经按目标槽位重新生成,或者用户明确允许裁切时,才使用 cover 裁切。
+
 ## 语义参数
 
 每次处理截图前,先确定这 7 个参数:
@@ -29,6 +53,7 @@
 - 背景: `paper` / `blurred` / 低饱和 `gradient`
 - 质感:纸张、墨水、胶片颗粒、暖白、低对比
 - 截图:可用小圆角和轻微阴影,但不要像 SaaS 营销卡片
+- 背景资产:优先使用 `assets/screenshot-backgrounds/style-a/` 下对应主题的 16:9 crop-safe WebP,截图合成时按槽位裁切
 - 推荐语义:
 
 ```text
@@ -39,7 +64,8 @@ ratio:16:10, background:paper, padding:standard, inset:balanced, shadow:editoria
 
 - 背景: `plain` / `grid` / `dot-matrix`
 - 色彩:只允许当前锚点色作为极低占比强调;不要大面积亮色块
-- 截图:直角、无阴影、少量 hairline 或顶部 accent 线
+- 截图:直角、无阴影、无圆角、少量 hairline 或顶部 accent 线
+- 背景资产:优先使用 `assets/screenshot-backgrounds/style-b/` 下对应主题色的 16:9 crop-safe WebP,只用当前 accent,不要混色
 - 推荐语义:
 
 ```text
@@ -56,6 +82,33 @@ ratio:21:9, background:grid, padding:standard, inset:subtle, shadow:none, corner
 - 背景不能有文字、logo、图标、人物、设备、边框、明显主体或方向性构图。
 - 背景必须 crop-safe:裁成 `21:9`、`16:10`、`4:3`、`1:1` 都不能暴露“被裁掉”的痕迹。
 
+## 内置主题背景资产
+
+本 Skill 已经内置一组 GPT-M 2.0 预生成背景。处理截图时**优先使用这些资产**,不要实时调用 GPT-M 2.0 重新生成背景。只有用户明确要求新风格、现有主题缺失,或背景与内容明显不匹配时,才生成新的背景。
+
+背景图之后由程序复用到每张截图中。不要把背景当作单张 slide 来画,背景图内部不能有标题、页脚、边框、logo、人物或明显主体。
+
+### Style A · 5 套主题背景
+
+| 主题 | 内置资产 | 背景语义 |
+|---|---|---|
+| 墨水经典 | `assets/screenshot-backgrounds/style-a/monocle-classic.webp` | 黑白灰纸张纹理、柔和阴影、细颗粒 |
+| 靛蓝瓷 | `assets/screenshot-backgrounds/style-a/indigo-porcelain.webp` | 靛蓝低饱和墨色、纸感渐变、轻微噪点 |
+| 森林墨 | `assets/screenshot-backgrounds/style-a/forest-ink.webp` | 模糊植物阴影、低饱和绿色、纸张颗粒 |
+| 牛皮纸 | `assets/screenshot-backgrounds/style-a/kraft-paper.webp` | 暖纸色、淡墨阴影、复古印刷颗粒 |
+| 沙丘 | `assets/screenshot-backgrounds/style-a/dune.webp` | 沙色/灰调柔和渐变、低对比、留白安静 |
+
+### Style B · 4 套主题背景
+
+| 主题色 | 内置资产 | 背景语义 |
+|---|---|---|
+| IKB 蓝 | `assets/screenshot-backgrounds/style-b/ikb-dot-gradient.webp` | 点阵 + 低对比蓝色渐变,避免亮蓝大色块 |
+| 柠檬黄 | `assets/screenshot-backgrounds/style-b/lemon-grid.webp` | 纯网格 + 稀疏点阵,黄色只做低透明细线/点 |
+| 柠檬绿 | `assets/screenshot-backgrounds/style-b/lemon-green-dot-shadow.webp` | 点阵 + 阴影场,绿色只做轻微光感 |
+| 安全橙 | `assets/screenshot-backgrounds/style-b/safety-orange-halftone.webp` | 模块化半调点阵 + 暗部阴影,橙色低占比 |
+
+内置背景都是 1920×1080 级别的 16:9 WebP。程序化合成时,先把背景 cover 到目标画布,再裁成 `21:9` / `16:10` / `4:3` / `1:1` 等截图槽位。背景必须四角安静,因为截图可能居中、左上、右下或被裁成不同尺寸。
+
 ## 截图类型决策
 
 | 原始素材 | 推荐处理 |
@@ -69,6 +122,8 @@ ratio:21:9, background:grid, padding:standard, inset:subtle, shadow:none, corner
 
 ## 生成背景图提示词
 
+只有需要新增背景资产时才使用本节。常规截图美化不要实时生成背景,直接使用上方内置资产。
+
 ### Style A 背景
 
 ```text