Add bundled screenshot backgrounds

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