1
0
Эх сурвалжийг харах

Add screenshot framing semantics

郭浩 1 сар өмнө
parent
commit
2b9e6be015

+ 1 - 0
README.en.md

@@ -243,6 +243,7 @@ guizang-ppt-skill/
     ├── themes.md         ← 5 theme presets (pick, don't customize)
     ├── themes-swiss.md   ← 4 Swiss anchor-color themes
     ├── image-prompts.md  ← GPT-Image 2.0 / GPT-M 2.0 image types, ratios, and base prompts
+    ├── screenshot-framing.md ← CleanShot X-style screenshot framing semantics
     └── checklist.md      ← quality checklist (P0 / P1 / P2 / P3 tiers)
 ```
 

+ 1 - 0
README.md

@@ -244,6 +244,7 @@ guizang-ppt-skill/
     ├── themes.md         ← 5 套主题色预设(只能选不能自定义)
     ├── themes-swiss.md   ← 4 套瑞士风锚点色
     ├── image-prompts.md  ← GPT-Image 2.0 / GPT-M 2.0 配图类型、比例和基础提示词
+    ├── screenshot-framing.md ← CleanShot X 式截图适配语义
     └── checklist.md      ← 质量检查清单(P0 / P1 / P2 / P3 分级)
 ```
 

+ 3 - 1
SKILL.md

@@ -129,6 +129,7 @@ description: 生成横向翻页网页 PPT(单 HTML 文件),含 WebGL 背
 - 图片风格必须贴合当前 deck 风格:风格 A 用"电子杂志 × 电子墨水";风格 B 用"瑞士国际主义 / Swiss Style"
 - 信息图、图表、截图再设计里的文字语言必须跟随用户正在使用的语言;中文 deck 用中文,英文 deck 用英文
 - 先看 `references/image-prompts.md` 选择图片类型和基础提示词
+- 如果处理用户原始截图,先看 `references/screenshot-framing.md`:优先程序化做 CleanShot X 式截图适配,只有需要重构信息时才用 GPT-M 2.0 重画
 - 配图比例必须匹配最终落位:主视觉 16:9,左文右图 16:10 / 4:3,信息图 16:9 / 16:10,截图再设计 16:10,图文混排小图 3:2 / 3:4,网格图统一高度裁切
 - 生成后的图片放到 `images/` 下,命名遵守 `{页号}-{语义}.{ext}`
 
@@ -430,6 +431,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 式截图适配语义
     └── checklist.md          ← 质量检查清单(P0/P1/P2/P3 分级)
 ```
 
@@ -445,7 +447,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` 挑图片类型、比例和基础提示词
+6. 如果在 Codex 中生成配图,读 `image-prompts.md` 挑图片类型、比例和基础提示词;如果是用户原始截图,先读 `screenshot-framing.md`
 7. 细节调整时读 `components.md` 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 `layouts-swiss.md` 附录)
 8. 生成后先运行 `node scripts/validate-swiss-deck.mjs path/to/index.html`,再读 `checklist.md` 自检
 

+ 1 - 1
references/components.md

@@ -277,7 +277,7 @@
 
 5. **信息图 / 截图再设计**:给 `.frame-img` 同时加 `.fit-contain`,避免图内文字和标注被裁切。
 
-6. **用户原始截图比例不合适时**:优先重新生成"截图再设计 / UI 情景图"到目标比例,不要把原图硬塞成长条
+6. **用户原始截图比例不合适时**:优先按 `screenshot-framing.md` 做 CleanShot X 式程序化适配;只有截图太长、太窄或需要重构信息时,才重新生成"截图再设计 / UI 情景图"。
 
 ### Frame Caption 变体
 

+ 4 - 3
references/image-prompts.md

@@ -44,10 +44,11 @@
 
 原始截图比例通常不可控,不要直接作为最终视觉标准。按下面顺序处理:
 
-1. 如果原图比例接近目标槽位,直接放入统一 `.frame-img` 中,用 `cover` 或 `fit-contain`
-2. 如果原图过高、过窄、过长,优先用"截图再设计 / UI 情景图"重新生成到目标比例
+1. 如果原图内容需要保真,先读 `screenshot-framing.md`,用 CleanShot X 式程序化适配:目标比例画布 + 风格化背景 + 截图等比缩放 + 语义化 padding/alignment
+2. 如果原图比例接近目标槽位,直接放入统一 `.frame-img` 中,用 `cover` 或 `fit-contain`
 3. 如果一张 UI 图被拉成巨长条,拆成 2-3 张同尺寸局部面板;每个面板使用同一高度类
-4. 如果必须保留原图,用 `fit-contain` 放进统一 frame,接受留白,不要裁掉关键文字
+4. 如果原图过高、过窄、过长且无法通过适配解决,再用"截图再设计 / UI 情景图"重新生成到目标比例
+5. 如果必须保留原图,用 `fit-contain` 放进统一 frame,接受留白,不要裁掉关键文字
 
 ### C. 生成提示词后缀
 

+ 1 - 1
references/layouts-swiss.md

@@ -776,7 +776,7 @@ Swiss 主题有 22 个登记版式,生成时要主动展示版式系统,不要
 - 同组图片必须同一比例、同一高度、同一边距密度;不要一张 16:9、一张 4:3、一张长条截图混排
 - 标题区和图片区之间必须有明显缓冲;模板里的 `.swiss-img-grid` 默认带顶部间距,只有在外层 grid 已经给足 gap 时才加 `.tight`
 - UI/信息图统一 `.fit-contain`;照片统一 cover
-- 如果用户原始截图比例混乱,先用 GPT-M 2.0 重生成同一比例的"截图再设计"
+- 如果用户原始截图比例混乱,先按 `screenshot-framing.md` 做 CleanShot X 式程序化适配;只有太长、太窄或需要重构信息时,才用 GPT-M 2.0 重生成同一比例的"截图再设计"
 
 ```html
 <section class="slide light" data-animate="grid-reveal">

+ 82 - 0
references/screenshot-framing.md

@@ -0,0 +1,82 @@
+# 截图美化语义规则
+
+用于把用户提供的产品截图、网页截图、代码截图、设计稿截图处理成符合模板比例的图片资产。目标是类似 CleanShot X 的“截图居中 + 背景填充 + 统一比例”,而不是默认让 GPT-M 2.0 重画截图。
+
+## 优先级
+
+1. **程序化适配优先**:截图内容、文字、UI 细节需要保真时,不要重画;创建目标比例画布,把原截图等比缩放后放入画布。
+2. **GPT-M 2.0 只做重构**:只有原图过长、过窄、信息太乱、需要 UI 情景化或概念化表达时,才使用“截图再设计 / UI 情景图”。
+3. **模板槽位先行**:先确定 slide 版式和图片槽位比例,再决定截图适配参数。
+
+## 语义参数
+
+每次处理截图前,先确定这 7 个参数:
+
+| 参数 | 可选值 | 判断方式 |
+|---|---|---|
+| `ratio` | `21:9` / `16:10` / `16:9` / `4:3` / `1:1` | 跟随模板图片槽位,不要跟随原截图比例 |
+| `background` | `plain` / `gradient` / `wallpaper` / `blurred` / `grid` / `paper` | 跟随当前 PPT 风格和主题 |
+| `padding` | `compact` / `standard` / `spacious` | 普通截图 standard;文字密集或高截图 spacious;小图组 compact |
+| `inset` | `none` / `subtle` / `balanced` | 截图需要从背景中浮出来时用 balanced;瑞士风多用 none/subtle |
+| `shadow` | `none` / `soft` / `editorial` | Style A 可 soft/editorial;Style B 默认 none |
+| `corners` | `square` / `small` / `medium` | Style B square;Style A small/medium |
+| `alignment` | `center` / `top-left` / `top-right` / `bottom-left` / `bottom-right` | 跟随页面构图,不是永远居中 |
+
+## 风格映射
+
+### Style A · 电子杂志风
+
+- 背景: `paper` / `blurred` / 低饱和 `gradient`
+- 质感:纸张、墨水、胶片颗粒、暖白、低对比
+- 截图:可用小圆角和轻微阴影,但不要像 SaaS 营销卡片
+- 推荐语义:
+
+```text
+ratio:16:10, background:paper, padding:standard, inset:balanced, shadow:editorial, corners:small, alignment:center
+```
+
+### Style B · 瑞士国际主义
+
+- 背景: `plain` / `grid` / `dot-matrix`
+- 色彩:只允许当前锚点色作为极低占比强调;不要大面积亮色块
+- 截图:直角、无阴影、少量 hairline 或顶部 accent 线
+- 推荐语义:
+
+```text
+ratio:21:9, background:grid, padding:standard, inset:subtle, shadow:none, corners:square, alignment:center
+```
+
+## 背景强度规则
+
+截图背景是“托底”,不是主视觉。
+
+- 如果 `alignment` 不确定,背景中心和四角都必须安静,不要放显眼色块。
+- 如果截图要放在右下角,右下角不能有强色块;其他位置同理。
+- 瑞士风锚点色只做 `5%-8%` 视觉占比的淡线、点阵或极浅几何场,不要生成高亮蓝条、大色块、霓虹渐变。
+- 背景不能有文字、logo、图标、人物、设备、边框、明显主体或方向性构图。
+- 背景必须 crop-safe:裁成 `21:9`、`16:10`、`4:3`、`1:1` 都不能暴露“被裁掉”的痕迹。
+
+## 截图类型决策
+
+| 原始素材 | 推荐处理 |
+|---|---|
+| 普通网页 / App / 桌面截图 | 程序化适配到目标比例 |
+| 产品 UI 细节很重要 | 程序化适配,使用 `fit-contain`,不重画 |
+| 长网页截图 | 截关键区域或拆成 2-3 张同尺寸面板 |
+| 极窄 / 极高截图 | 先尝试 `spacious + side alignment`;仍太小时再重构 |
+| 代码截图 | Style A 用纸感背景;Style B 用浅网格背景;文字必须可读 |
+| 概念解释用的 UI 情景图 | 可以 GPT-M 2.0 重新设计 |
+
+## 生成背景图提示词
+
+### Style A 背景
+
+```text
+16:9 crop-safe screenshot background for an editorial magazine / e-ink PPT system. Warm off-white paper texture, subtle ink wash, fine film grain, low contrast, quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.
+```
+
+### Style B 背景
+
+```text
+16:9 crop-safe screenshot background for a Swiss International Style PPT system. Pure off-white base, ultra-subtle 16-column grid and sparse dot matrix, one accent color only: [theme color], used at very low opacity as thin lines or tiny dots, no large bright color blocks. Quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.
+```

+ 1 - 1
references/swiss-layout-lock.md

@@ -74,7 +74,7 @@
 - 图片格必须吸附原始卡片网格,不要让图片自己决定宽高。
 - 如果图片是按槽位重新生成的 `s15-grid-21x9` / `s16-brief-21x9`,容器必须用 `.frame-img.r-21x9` 铺满槽位,不要再加 `.fit-contain`,也不要用固定 `height:18vh` 这类短槽把长图缩小。
 - `.fit-contain` 只用于必须保留原始比例的用户截图或文字密集图片;一旦决定重生成图片,就应该按槽位比例重生成并铺满。
-- 如果原始截图比例不可控,先用 GPT-M 2.0 重生成“截图再设计”,再插入固定槽位
+- 如果原始截图比例不可控,先按 `references/screenshot-framing.md` 做程序化比例适配;只有长截图、极窄截图或信息需要重构时,才用 GPT-M 2.0 重生成“截图再设计”。
 
 ## 禁止清单