Add bundled screenshot backgrounds

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