Tightened Slide 是一套用于构建单文件 HTML 横向滑动演示文稿的工作流程。当用户需要 Tightened Slide 演示、横向滑动演示、HTML 幻灯片、发布演示、分析演示、框架演示、产品演示或数据驱动演讲时，可使用此流程。
用途
该流程用于生成静态 HTML 演示文稿，通常输出为 index.html，并附带一个相邻的 images/ 文件夹。模板文件为 assets/template.html。正文幻灯片必须使用已注册的 S01 至 S22 布局，交付前必须运行校验器。支持的语言模式为英语和韩语。
主要能力
- 提供 S01 至 S22 共 22 种已注册布局，涵盖封面、时间线、KPI、对比、矩阵、系统图、图片主视觉等类型。
- 支持主题预设，未指定主题时默认使用 references/themes.md 中的 International Klein Blue。
- 支持英语和韩语两种语言模式，韩语模式使用 SUIT、Pretendard、Noto Sans KR、Noto Sans 字体栈。
- 提供图片槽位机制，为本地图片添加 data-image-slot 属性，并规定了各布局的默认槽位尺寸。
- 提供校验脚本 scripts/validate-deck.mjs，用于检查布局与规范符合性。
- 提供 references/ 下的布局锁定、布局骨架、图片提示词和交付清单等参考文件。
使用方式
-
明确关键信息：若用户已提供完整大纲和素材则直接进行；若缺少关键输入，最多询问三个问题，包括受众与演示场景、目标时长或页数、源材料与语言模式及硬性约束。未指定主题时默认 International Klein Blue，未指定语言时默认英语。
-
准备演示文稿：创建目标文件夹和图片文件夹，命令为 mkdir -p path/to/deck/images 和 cp assets/template.html path/to/deck/index.html。立即替换 index.html 中的 <title> 占位符。在根元素上设置语言模式，如 <html lang="en" data-language="en"> 或 <html lang="ko" data-language="ko">。若需离线使用本地动画回退，保持 assets/motion.min.js 可从复制的 HTML 路径访问，或接受模板内置的 CDN 回退。
-
预检：编写幻灯片标记前，阅读模板的 <style> 块、references/layout-lock.md 以及 references/layouts.md 中的相关骨架。确认计划使用的每个类都存在于模板中。不要发明全局类，仅对页面特定调整使用内联样式。编码前创建规划表：page -> data-layout -> reason -> image slot。7 至 8 页的演示至少使用六种不同的 Sxx 布局，10 页以上至少使用八种。
-
选择布局：使用已注册的布局集，包括 S01 索引封面、S02 垂直时间线 + KPI、S03 分栏陈述、S04 六格、S05 三层、S06 KPI 塔、S07 水平条形、S08 双栏对比、S09 点阵陈述、S10 分栏收尾、S11 水平时间线、S12 宣言 + 墨色横幅、S13 三种力量、S14 循环形式、S15 矩阵 + 主数据、S16 多卡片简报、S17 系统图、S18 为何现在、S19 四卡片、S20 堆叠 KPI 账本、S21 技术规格表、S22 图片主视觉。地图、路线、城市关系、位置网络或历史移动页面使用 S08 加 Tightened Map 组件。单张大图使用 S22，多张图片使用 S15 或 S16 的适配版本。不要创建未注册的图片分栏或证据墙布局。
-
应用视觉系统：硬性规则包括每套演示仅一种强调色；不使用渐变、阴影、圆角卡片、玻璃、霓虹、3D 或装饰性边框；大字号使用 200 或 300 的轻字重；正文使用克制的字重和清晰的层级；大尺寸使用 font-size:min(Xvw,Yvh) 且 Y >= X * 1.6；标题位于左/上内容轴，除非使用已注册的陈述/分栏布局；Kicker 文字位于标题上方而非旁边；.canvas-card 已有水平内边距，不要在其内部再添加 5vw 内边距层；所有说明、标签和脚注保持在底部导航安全区域之上；SVG 仅绘制几何图形，可见标签必须使用 HTML。语言规则方面，英语模式使用简洁的句子式标题和直接的正文；韩语模式使用简短韩语标题、紧凑正文行和一致的产品术语；图表标签和生成图片文字必须匹配所选语言模式。
-
图片流程：若需要图片，生成新图片前先询问。编写提示词前先选择布局槽位，使用 references/image-prompts.md。将生成或提供的图片保存在 images/ 中，命名为 {page}-{semantic-name}.{ext}，并为每个本地图片添加 data-image-slot。默认槽位：S22 为 s22-hero-21x9；S15 为 s15-grid-21x9 或 s15-grid-16x10；S16 为 s16-brief-21x9 或 s16-brief-16x10。
-
校验：运行 node scripts/validate-deck.mjs path/to/index.html，修复所有错误，警告需人工视觉复核。然后在浏览器中打开演示，检查标题对齐、字重、标题与正文间距、图片裁剪与槽位适配、说明和脚注是否在导航之上、ESC 索引可见性、B 静态模式。使用 references/checklist.md 作为交付清单。
适用场景
适用于发布演示、分析演示、框架演示、产品演示、数据驱动演讲，以及需要横向滑动、固定布局和严格视觉规范的 HTML 幻灯片制作场景。
限制
该流程仅适用于 Tightened Slide 系统。正文幻灯片必须使用已注册的 S01 至 S22 布局，不得创建未注册的布局。交付前必须通过校验器。支持的语言模式仅限英语和韩语。视觉系统有严格限制，包括单一强调色、禁用渐变阴影圆角等。图片生成前需先询问用户。