Sync multi-theme optimizations from dev (exclude Bento/Style C)
- Magazine (A) + Swiss (B) template updates: ?slide=N, ESC thumbnail fix, reduced-motion, spacing fixes - Swiss validator: Playwright M1/M2 rendered measurement (overflow/whitespace/nav-safe/title-gap) - SKILL.md: Step 0 upstream-update check, image-mixing decision tree, measure-before-edit ladder - checklist.md: image-role guidance, quiet-zone rule, post-render measurement section - Remove author-local golden-source absolute paths; point to in-repo template-swiss.html snapshot - Add ppt-skill-showcase.png and A/B-only unification-plan.md - Exclude all Bento/Style C assets, references, validator, and design-research docs Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
郭浩andCursor committed
1 parent
82fe5ae129
commit
ba12c5c9ad
11 files changed
+429
-95
No files matched your search
@@ -47,6 +47,23 @@ description: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背
|
||||
|
||||
## 工作流
|
||||
|
||||
### Step 0 · 启动前检查更新（必做）
|
||||
|
||||
每次启动本 Skill 前,先在 Skill 根目录检查 GitHub 上游是否有更新;有更新时先问用户是否要更新,用户确认后再执行更新,然后继续后续流程。
|
||||
|
||||
```bash
|
||||
git -C "<SKILL_ROOT>" fetch --quiet
|
||||
git -C "<SKILL_ROOT>" rev-list --count HEAD..@{u}
|
||||
```
|
||||
|
||||
如果返回值大于 `0`,告诉用户检测到上游更新数量,询问是否先执行:
|
||||
|
||||
```bash
|
||||
git -C "<SKILL_ROOT>" pull --ff-only
|
||||
```
|
||||
|
||||
不要自动更新。用户拒绝时继续使用当前版本;如果网络不可用、没有 upstream 或不是 git 仓库,说明无法检查更新并继续流程。
|
||||
|
||||
### Step 1 · 需求澄清(**动手前必做**)
|
||||
|
||||
**如果用户已经给了完整的大纲 + 图片/截图处理要求**,可以跳过直接进 Step 2。
|
||||
@@ -316,7 +333,7 @@ cp "<SKILL_ROOT>/assets/template-swiss.html" "项目/XXX/ppt/index.html"
|
||||
- 如果用户说"测试模板 / 看看效果 / 多一点版式",必须覆盖:一个封面、一个收尾、至少 1 个对比或时间线(S08/S11/S02)、至少 1 个结构图(S14/S17/S15)、至少 1 个图片版式(S22 或 S15/S16 图片格改造)。
|
||||
- 不允许连续 3 页使用同一种主体结构,例如连续三页 `head + grid + card`。
|
||||
- 图片页不能偷懒发明新结构。2-3 张图时,用 S15/S16 的原始网格骨架改造成图片格;单张大图用 S22。
|
||||
- 开写 HTML 前先列一张 `页码 → data-layout → 选用理由 → 图片槽位` 草稿;交付前运行 `node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html`。
|
||||
- 开写 HTML 前先列一张 `页码 → data-layout → 选用理由 → 图片槽位` 草稿;交付前运行 `node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html`。校验器会先做静态结构检查;如果环境中能解析到 Playwright,还会做真实渲染后的可见边界、底部空白、nav 安全线和标题间距测量。
|
||||
|
||||
#### 3.2 · 图片比例规范
|
||||
|
||||
@@ -345,6 +362,18 @@ cp "<SKILL_ROOT>/assets/template-swiss.html" "项目/XXX/ppt/index.html"
|
||||
- GPT-M 2.0 生成图使用 `image-prompts.md` 的"风格 B:瑞士国际主义配图规则"
|
||||
- 任何图片、caption、timeline label、footnote 的最低处都不能进入底部分页区域;需要贴底时用 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,不要手写 `bottom:2vh`
|
||||
|
||||
#### 3.2.0 · 图文混排决策树（从社交卡片规则迁移）
|
||||
|
||||
先判断图片在这一页里的角色,再决定容器、比例和裁切方式:
|
||||
|
||||
- **证据截图 / UI / 代码 / dashboard**:保真优先,先读 `references/screenshot-framing.md`;关键文字和数据不能被裁掉。需要统一比例时,优先程序化背景画布 + `.fit-contain`,不要为了铺满而裁掉 UI 内容。
|
||||
- **已按槽位重生成的信息图 / 插图**:按目标槽位铺满,例如 S22 用 `21:9`,S15/S16 用统一 `21:9` 或 `16:10`;不要再用短高度把图缩小成小贴片。
|
||||
- **照片 / 产品图 / 人物图**:使用标准比例 + 明确 `object-position`;主体、人脸、产品和关键证据不能被标题、caption 或裁切压住。
|
||||
- **文字压图 / 全屏主视觉**:先做 quiet-zone 判断,图里至少要有约 30% 低细节区域承载文字;不通过就换图、换裁切或改成图文分栏。只在必要时加局部 tint,不要整页套黑色/白色遮罩。
|
||||
- **多图组**:同一组统一比例、高度、容器处理和 caption 密度;不要一张 `contain`,另一张 `cover`。
|
||||
- **生成图是素材,不是整页 slide**:图片内部不要自带页眉、页脚、页码、logo、主标题、装饰边框或署名,避免和 deck chrome 重复。
|
||||
- **图文呼吸**:标题、图片、caption、正文必须各自留出间距;生成后用 validator 的 `M1/M2` 检查可见边界、底部空白、nav 安全线和标题间距。
|
||||
|
||||
#### 3.2.1 · 中文大标题字号分档(风格 B 必做)
|
||||
|
||||
中文方块字视觉面积大,不能直接套英文 hero 的 6.8-7vw。写中文大标题前先分档:
|
||||
@@ -391,11 +420,35 @@ cp "<SKILL_ROOT>/assets/template-swiss.html" "项目/XXX/ppt/index.html"
|
||||
|
||||
生成完一定要打开 `references/checklist.md`，逐项对照。里面总结了**真实迭代过程中踩过的所有坑**，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。
|
||||
|
||||
#### 4.0.1 · 先量后改:超出 / 空白 / 标题间距
|
||||
|
||||
当一页内容超出或显得巨空时,不要先凭感觉大幅删改。先运行:
|
||||
|
||||
```bash
|
||||
node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html
|
||||
```
|
||||
|
||||
看校验输出里的测量项:
|
||||
|
||||
- `M1 DOM/visual overflow`:具体超出多少 px,以及最低/最高问题元素
|
||||
- `M1 bottom whitespace`:底部空白多少 px,active content height 占比多少
|
||||
- `M1 nav-safe`:最低内容是否进入底部分页安全线
|
||||
- `M2 title gap`:标题和下一块内容之间的实际距离
|
||||
|
||||
修正阶梯:
|
||||
|
||||
- `1-40px` over:只微调,上移内容组或收紧一个 gap/padding,不要删内容。
|
||||
- `40-90px` over:局部压缩间距或模块高度,仍优先保留内容。
|
||||
- `90-160px` over:轻微压标题或压缩一段正文,必要时拆页。
|
||||
- `160px+` over:才考虑换版式、合并模块或删内容。
|
||||
|
||||
修完再跑一次 validator。如果 `M1 bottom whitespace` 变大,说明修过头了;恢复部分间距、放大最后一块或把内容组向下回调。
|
||||
|
||||
#### 4.0 · 不只看代码:必须打开网页做视觉核对
|
||||
|
||||
代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:
|
||||
|
||||
1. 同时打开原始参考 PPT、当前模板或生成页、测试 PPT;原始参考是 `/Users/guohao/Documents/op7418的仓库/项目/Thin-Harness-Fat-Skills/ppt/index.html`。
|
||||
1. 同时打开当前模板(golden source 快照)或生成页、以及正在迭代的测试 PPT 逐页对照。
|
||||
2. 截图前等入场动效稳定(约 1-2 秒),不要把动画中间态当成版式问题。
|
||||
3. 先看视觉:大标题字重、标题与内容间距、图片是否与正文对齐、图片/说明是否碰到底部分页组件。
|
||||
4. 再看代码:确认该页选用的版式与内容形状匹配,没有把数据专用版式拿来讲概念,也没有把可选组件堆成装饰。
|
||||
|
||||
Reference in new issue
Block a user