// 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。
Proma 使用顾问，主动帮用户把"在 Agent 身上反复踩同一个坑"变成"一次性沉淀成 Skill"。**必须**在以下场景触发：(1) 用户表达不满或挫败——"不对"、"怎么又"、"你没理解"、"我刚才说了"、"再说一遍"、"算了"、"Proma 怎么"、"为什么不能"、"这个 Agent 真"、"stop"；(2) 用户在同一会话里第 2 次以上解释同一个流程/偏好/格式；(3) 用户表达"每次都要我提醒"、"以后都这样"、"能不能记住"、"下次别这样"；(4) 用户主动求优化——"怎么用 Proma 更顺手"、"有什么使用技巧"、"这个流程能不能固化"；(5) 用户混淆 Skill 和 Chat 模式工具、或问"你能做 X 吗"而 X 其实已有 Skill 或更适合换模式。本 Skill 不直接干活——它做四件事：诊断真实痛点、检查已有能力是否被忽略、**主动设计**沉淀方案（Skill 大纲、命名、触发场景预先想好）、把用户的认知负担降到最低（用户只需要确认或微调）。Coach 在判断有更好做法时会**主动挑战**用户而不是顺从。一切从最简单的方案开始，先用最小代价解决，反复出现再升级为完整 Skill。
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions "deck," "slides," "presentation," or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
| name | guizang-ppt-skill |
| description | 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。 |
| version | 1.0.0 |
生成一份单文件 HTML的横向翻页 PPT，提供两种可选的视觉基调：
assets/template.html · 主题色：references/themes.md · 布局：references/layouts.mdassets/template-swiss.html · 主题色：references/themes-swiss.md · 布局：references/layouts-swiss.md两种风格共享：横向翻页（键盘 ← →、滚轮、触屏、ESC 索引）、Lucide 图标、Motion One 入场动效（本地 + CDN 双保险）。
合适的场景：
不合适的场景：
如果用户已经给了完整的大纲 + 图片,可以跳过直接进 Step 2。
如果用户只给了主题或一个模糊想法,用这 6 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:
ask question / ask_question 机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。ask question 交互方式来逐项澄清。| # | 问题 | 为什么要问 |
|---|---|---|
| 1 | 风格 A 还是 B?(电子杂志风 / 瑞士国际主义风) | 必须先问,决定用哪个 template + layouts + themes 文件 |
| 2 | 受众是谁?分享场景?(行业内部 / 商业发布 / demo day / 私享会) | 决定语言风格和深度 |
| 3 | 分享时长? | 15 分钟 ≈ 10 页,30 分钟 ≈ 20 页,45 分钟 ≈ 25-30 页 |
| 4 | 有没有原始素材?(文档 / 数据 / 旧 PPT / 文章链接) | 有素材就基于素材,没有就帮他搭 |
| 5 | 有没有图片?放在哪? | 详见下方"图片约定" |
| 6 | 想要哪套主题色? | 杂志风 5 套(themes.md) / 瑞士风 4 套(themes-swiss.md),挑一 |
| 7 | 有没有硬约束?(必须包含 XX 数据 / 不能出现 YY) | 避免返工 |
| 如果用户说... | 推荐风格 |
|---|---|
| "杂志感" / "人文" / "Monocle 风" / 不指定 | A · 电子杂志风 |
| "瑞士风" / "Swiss Style" / "Helvetica" / "极简" / "网格" / "信息图" / "数据驱动" | B · 瑞士国际主义风 |
| 内容是 AI 产品 / 技术 / 工程 / 数据汇报 | B 更合适 |
| 内容是行业观察 / 人文 / 故事 / 文化 | A 更合适 |
| 用户给了大量 KPI 数字 / 路线图 / 流程 | B 更合适(Data Hero 布局是瑞士风专长) |
| 用户给了大量纪实照片 / 人文图片 | A 更合适(图片网格、左文右图是杂志风专长) |
| 用户需要 GPT-M 2.0 生成截图再设计 / 信息图 / 证据墙 | B 也很合适(P23/P24 是瑞士风图片专用版式) |
用"叙事弧"模板搭骨架,再填内容:
钩子(Hook) → 1 页 : 抛一个反差 / 问题 / 硬数据让人停下来
定调(Context) → 1-2 页 : 说明背景 / 你是谁 / 为什么讲这个
主体(Core) → 3-5 页 : 核心内容,用 Layout 4/5/6/9/10 穿插
转折(Shift) → 1 页 : 打破预期 / 提出新观点
收束(Takeaway) → 1-2 页 : 金句 / 悬念问题 / 行动建议
叙事弧 + 页数规划 + 主题节奏表(见 layouts.md),三张表对齐后再进 Step 2。
大纲建议保存为 项目记录.md 或 大纲-v1.md,便于后续迭代。
在动手前向用户说清:
项目/XXX/ppt/images/ 下(和 index.html 同级){页号}-{语义}.{ext},例如 01-cover.jpg / 03-figma.jpg / 05-dashboard.png
images/旧名 改成新名如果当前运行环境是 Codex,完成 deck 初稿后,主动问用户是否需要用 GPT-M 2.0 生成配图并插入 PPT。不要默认生成。
推荐询问方式:
要不要为这份 PPT 生成几张配图?可以做成人文纪实照片、杂志风信息图、流程/对比/系统关系图,或把截图再设计成统一的杂志风视觉。
如果用户确认生成,再问他想要哪种图片类型或风格;如果用户没有偏好,根据页面内容自行推荐 1-3 张最值得生成的配图。
生成配图时遵守:
references/image-prompts.md 选择图片类型和基础提示词images/ 下,命名遵守 {页号}-{语义}.{ext}根据 Step 1 选定的风格,拷贝对应的模板到目标位置（通常是 项目/XXX/ppt/index.html），同时在同级建一个 images/ 文件夹准备接图片。
mkdir -p "项目/XXX/ppt/images"
# 风格 A · 电子杂志风
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/ppt/index.html"
# 或 风格 B · 瑞士国际主义风
cp "<SKILL_ROOT>/assets/template-swiss.html" "项目/XXX/ppt/index.html"
两个 template*.html 都是完整可运行的文件——CSS、WebGL shader、翻页 JS、字体/图标 CDN 全已预设好,只有 <!-- SLIDES_HERE --> 占位符等待你填充 slide 内容。
注意:风格 A 和 B 不能混用。layouts.md 里的类（如 .h-hero 衬线大标题、.display-zh 等）只在 template.html 有定义；layouts-swiss.md 里的类（如 .kpi-hero、.accent-block、.span-N、.dots 等）只在 template-swiss.html 有定义。一份 deck 只能选一套。
拷贝后立刻改掉以下占位符，否则浏览器 Tab 会显示"[必填] 替换为 PPT 标题"这种尴尬文字：
| 位置 | 原始 | 需改为 |
|---|---|---|
<title> | [必填] 替换为 PPT 标题 · Deck Title | 实际 deck 标题(如 一种新的工作方式 · Luke Wroblewski) |
每次拷贝完 template.html 第一件事:grep 一下"[必填]" 确认全部替换完。
本 skill 只允许从 5 套精心调配的预设里选一套,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。
| # | 主题 | 适合 |
|---|---|---|
| 1 | 🖋 墨水经典 | 通用 / 商业发布 / 不知道选啥的默认 |
| 2 | 🌊 靛蓝瓷 | 科技 / 研究 / 数据 / 技术发布会 |
| 3 | 🌿 森林墨 | 自然 / 可持续 / 文化 / 非虚构 |
| 4 | 🍂 牛皮纸 | 怀旧 / 人文 / 文学 / 独立杂志 |
| 5 | 🌙 沙丘 | 艺术 / 设计 / 创意 / 画廊 |
操作:
references/themes.md,找到对应主题的 :root 块assets/template.html(已拷贝版本)开头 :root{ 块里标有"主题色"注释的那几行(--ink / --ink-rgb / --paper / --paper-rgb / --paper-tint / --ink-tint)var(--...),无需任何其他改动硬规则:
<style> 里有定义（最重要）这是所有生成问题的源头。layouts 骨架使用了很多类名,如果模板的 <style> 里没有对应定义,浏览器会 fallback 到默认样式——大标题字体错、卡片挤成一团、pipeline 糊成一行、图片堆到页面底部。
两种风格类名互不通用(再次强调):
h-hero(衬线)、stat-card、grid-2-7-5、frame 等h-hero(无衬线)、kpi-hero、accent-block、span-N、dots、grid-12 等h-hero 是 Noto Serif SC 衬线,风格 B 的 h-hero 是 Inter 无衬线)在写任何 slide 代码之前:
<style> 块末尾):
assets/template.htmlassets/template-swiss.html<style> 里存在<style> 里补上,不要在每个 slide 里 inline 重写style="..." inline风格 A 常见容易遗漏的类:
h-hero / h-xl / h-sub / h-md / lead / kicker / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / grid-6 / grid-3 / grid-4 / frame / frame-img / img-cap / callout / callout-src / chrome / foot
风格 B 常见容易遗漏的类(2026-05 重构后):
canvas-card / chrome-minh-hero(无衬线 7.4vw weight 200) / h-statement(9.6vw) / h-xl / h-md / t-cat(SemiBold 600 小标) / t-meta(mono uppercase) / lead / num-mega / monocard-ink / card-accent / card-fill / card-outlinedgrid-12 / grid-2-9 / grid-2-9-5 / span-Ntimeline-v + tl-node + tl-axis + dot / timeline-h + tl-h-node + tl-h-axiskpi-tower-row + bar-tower / h-bar-chart + bar-row + bar-fill / spec-bars + bar-vertdot-mat(SVG mask 实心点)/ ring-mat(描边圆)/ cross-mat(× 网格)/ hr-hairlinecover-split / closing-split / duo-compare + vrule / manifesto-top + ink-banner-full / three-forces / loop-diagram / matrix-fill + matrix-cell / brief-grid + brief-card / system-diagram / why-now-grid / four-cards / stacked-ledger + ledger-row / tech-spec / image-hero + hero-img-wrap + hero-overlay-block + hero-statsframe-img / fit-contain / r-21x9 / r-16x9 / r-16x10 / h-22 / h-26 / swiss-img-split / swiss-img-grid / swiss-img-caption / swiss-keyline / swiss-lined--sp-3...--sp-13(8/12/16/24/32/40/48/64/80/96/160 px)在挑布局之前,必须先列出每一页的主题 class(hero dark / hero light / light / dark)并写到文档或草稿里对齐。详细规则看 references/layouts.md 开头的"主题节奏规划"一节。
强制规则:
light / dark / hero light / hero dark 之一,不要只写 herohero dark + ≥1 个 hero lightlight 正文页,必须有 dark 正文页制造呼吸生成后自检:grep 'class="slide' index.html 列出所有主题,人工确认节奏合理再交付。
不要从零写 slide。打开对应的 layouts 文件,里面有 10 种现成布局骨架,每种都是完整可粘贴的 <section> 代码块。
风格 A → references/layouts.md:
| Layout | 用途 |
|---|---|
| 1. 开场封面 | 第 1 页 |
| 2. 章节幕封 | 每幕开场 |
| 3. 数据大字报 | 抛硬数据 |
| 4. 左文右图(Quote + Image) | 身份反差 / 故事 |
| 5. 图片网格 | 多图对比 / 截图实证 |
| 6. 两列流水线(Pipeline) | 工作流程 |
| 7. 悬念收束 / 问题页 | 幕末 / 收尾 |
| 8. 大引用页(Big Quote) | 衬线金句 / takeaway |
| 9. 并列对比(Before / After) | 旧模式 vs 新模式 |
| 10. 图文混排(Lead Image + Side Text) | 信息密集的图文页 |
风格 B → 先读 references/swiss-layout-lock.md,再读 references/layouts-swiss.md。
瑞士主题默认进入 Swiss locked mode:
S01-S22;新增首页/尾页只能使用 Skill 明确提供的 SWISS-COVER-ASCII / SWISS-CLOSING-ASCII。<section class="slide"> 必须写 data-layout="Sxx"。没有 data-layout 就视为未登记版式。P23/P24、Swiss Image Split、Evidence Grid 这类原始 22P 之外的正文结构,除非用户明确要求实验版式。S08 + Swiss Map Component:先读 references/swiss-map-component.md,仍保留 data-layout="S08"。原始 22 个正文版式如下:
| Layout | 用途 |
|---|---|
| S01 Index Cover | 原始索引封面 |
| S02 Vertical Timeline + KPI | 演化对比 / 年代变迁 |
| S03 Split Statement | 核心论点 / 左右分屏 |
| S04 Six Cells | 6 项概念定义 |
| S05 Three Layers | 三层架构 |
| S06 KPI Tower | 4 项数据视觉化高度差 |
| S07 H-Bar Chart | 5-10 项排名比较 |
| S08 Duo Compare | Before/After 对照 |
| S09 Dot Matrix Statement | 大引述 / statement |
| S10 Split Closing | 收束页 |
| S11 Horizontal Timeline | 4-7 步流程 |
| S12 Manifesto + Ink Banner | 阶段性结论 |
| S13 Three Forces | 3 个对等概念深化 |
| S14 Loop Form | 自学闭环 / 自动化 |
| S15 Matrix + Hero Stat | 8-12 项矩阵 + 总数据 |
| S16 Multi-card Brief | 6 项快讯小卡 |
| S17 System Diagram | 三层架构 / 生态地图 |
| S18 Why Now | 三论点 + 数据支撑 |
| S19 Four Cards | 4 项等权特性 |
| S20 Stacked KPI Ledger | 纵向账单数据 |
| S21 Tech Spec Sheet | 产品规格 / benchmark |
| S22 Image Hero | 21:9 顶图 + 标题块 + 三列 KPI |
登记扩展:S08 + Swiss Map Component 用于地点、人物住所、路线、城市关系。它不是新 layout,而是 S08 右侧插槽的 MapLibre 地图组件;必须按 references/swiss-map-component.md 的点位、连线、卡片和右上角缩放/拖动控制实现。
选对应 layout,粘过去,改文案和图片路径即可。务必先完成 3.0 预检。
风格 B 版式多样性硬规则:
head + grid + card。页码 → data-layout → 选用理由 → 图片槽位 草稿;交付前运行 node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html。永远用标准比例,不要用原图奇葩比例(如 2592/1798):
| 场景 | 推荐比例 |
|---|---|
| S22 顶部主图 | 21:9;照片关键主体放中央安全区 |
| S15/S16 多图格 | 统一 21:9 或统一 16:10,不能混用 |
| 左文右图 主图(风格 A) | 16:10 或 4:3 + max-height:56vh |
| 图片网格(风格 A) | 固定 height:26vh,不用 aspect-ratio |
| 左小图 + 右文字 | 1:1 或 3:2 |
| 全屏主视觉 | 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 安全区。
风格 B 瑞士风额外规则:
data-image-slot:例如 s22-hero-21x9 / s15-grid-21x9 / s16-brief-21x9subject centered in the safe middle area;照片容器用 object-position:center 35%,不要用 top centervar(--paper),不要用灰底包白底信息图.swiss-keyline;需要强调时只用 .swiss-lined 的顶部 accent 线.fit-contain;如果已按 S15/S16 槽位重生成,必须用 .frame-img.r-21x9 / .frame-img.r-16x10 铺满容器,不要固定 height:18vh 后把图缩小image-prompts.md 的"风格 B:瑞士国际主义配图规则".nav-safe-bottom / .nav-safe-bottom-tight,不要手写 bottom:2vh中文方块字视觉面积大,不能直接套英文 hero 的 6.8-7vw。写中文大标题前先分档:
| 标题形态 | 推荐字号 |
|---|---|
| 1 行,≤ 8 个中文字符 | min(6.4vw,11.2vh) |
| 2 行,每行≤ 8 个中文字符 | min(5.8vw,10.2vh) |
| 2 行,任一行 9-12 个中文字符 | min(5.2vw,9.2vh) |
| 3 行或更长 | 优先改写标题;不得已用 min(4.6vw,8.2vh) |
如果标题挤占了图片或正文区域,先压缩标题文案,再降字号;不要靠把下方内容推到底来硬塞。
组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 references/components.md。
生成完一定要打开 references/checklist.md，逐项对照。里面总结了真实迭代过程中踩过的所有坑，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。
代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:
/Users/guohao/Documents/op7418的仓库/项目/Thin-Harness-Fat-Skills/ppt/index.html。h-hero 类在 template.html 里缺失height:Nvh,不用 aspect-ratio(会撑破)align-self:end,用 grid + align-items:start(见 Step 3.2)nowrap(避免 1 字 1 行)font-family 没用 --serif 类变量)box-shadow / linear-gradient / border-radius > 0 都要砍掉(rule 横线除外)font-size:min(Xvw, Yvh),只用 vw 在标准 16:9 屏会溢出(吸取 P15/P20/P22 教训)card-ink / card-accent / card-fill / card-outlined 四类不能混用(禁止"蓝底+蓝描边"、"灰底+描边"等)card-fill 灰底);只突出一项时单独换 card-accent,且只允许一张border-radius 都不允许;装饰用 8×8 直角小方块,不要 9px 圆形点<i data-lucide="name"></i> + lucide.createIcons(),选棱角风格(避免圆胖)justify-self(会与虚线错位)[data-anim] 容器先强制 opacity:1,recipe 内再用 motion {opacity:[0,1]} 覆盖,否则有些页会"看不见"[data-anim] 在缩略图里 opacity:1"Microsoft YaHei UI", "Noto Sans SC"t-cat SemiBold 600 / t-meta mono uppercaseB 静态;按 B 切换 body.low-power,停止 WebGL/ASCII canvas RAF 和 Motion 入场动画.frame-img 不加 border-radius / box-shadow;边界只用 hairline.fit-contain直接在浏览器打开 index.html 就行。macOS 下：
open "项目/XXX/ppt/index.html"
不需要本地服务器。图片走相对路径 images/xxx.png。
根据用户反馈修改——模板的 CSS 已经高度参数化，90% 的调整都是改 inline style（字号 font-size:Xvw / 高度 height:Yvh / 间距 gap:Zvh）。
guizang-ppt-skill/
├── SKILL.md ← 你正在读
├── assets/
│ ├── template.html ← 风格 A · 电子杂志风模板（种子文件）
│ ├── template-swiss.html ← 风格 B · 瑞士国际主义风模板（种子文件）
│ └── motion.min.js ← Motion One 本地副本（离线兜底,约 64KB,共用）
├── scripts/
│ └── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐
└── references/
├── components.md ← 组件手册（字体、色、网格、图标、callout、stat、pipeline、动效... 风格 A 适用）
├── layouts.md ← 风格 A · 10 种页面布局骨架（可直接粘贴,含动效标记）
├── swiss-layout-lock.md ← 风格 B · 原始 22P 版式锁,正文页必须按这里登记
├── layouts-swiss.md ← 风格 B · 原始 22P 骨架说明 + 少量明确标注的实验区
├── swiss-map-component.md ← 风格 B · S08 地图扩展组件(MapLibre 点位/连线/卡片/控制)
├── themes.md ← 风格 A · 5 套主题色预设（只能选不能自定义）
├── themes-swiss.md ← 风格 B · 4 套瑞士风主题色预设（IKB / 柠檬黄 / 柠檬绿 / 安全橙）
├── image-prompts.md ← GPT-M 2.0 配图类型、比例和基础提示词
└── checklist.md ← 质量检查清单（P0/P1/P2/P3 分级）
加载顺序建议：
SKILL.md(这个文件)了解整体themes.md 帮用户选一套主题色themes-swiss.md 帮用户选一套主题色<style> 块——这是类名的唯一来源,缺类会导致整页样式崩
assets/template.htmlassets/template-swiss.htmllayouts.md(顶部有 Pre-flight 类名清单、主题节奏规划、动效 recipe 决策树)swiss-layout-lock.md,再读 layouts-swiss.md;正文页必须从 S01-S22 选择,每页写 data-layoutswiss-map-component.mdimage-prompts.md 挑图片类型、比例和基础提示词components.md 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 layouts-swiss.md 附录)node scripts/validate-swiss-deck.mjs path/to/index.html,再读 checklist.md 自检动效相关:模板已把 Motion One 的加载和 recipe 逻辑内嵌到底部 module script。你不需要改 JS,只需要按 layouts.md / layouts-swiss.md 的骨架在 HTML 里加 data-anim / data-animate 即可。离线演示靠 assets/motion.min.js,断网时自动降级为"无动画但内容可读"。风格 B 模板必须保留 B 键低功耗模式:切换后停止 WebGL/ASCII canvas RAF,取消正在运行的 Web Animations,并把当前页内容直接 reveal 到静态最终态。
违反其中任何一条，杂志感都会垮。
height:Nvh 固定，不要用 aspect-ratio 撑违反其中任何一条，画面瞬间从瑞士掉到 PowerPoint。
本 skill 的两种风格分别参考了：
风格 A · 电子杂志风:
风格 B · 瑞士国际主义风:
可以把它们当做风格锚点。