tightened-slide

Tightened Slide

当用户请求 Tightened Slide 幻灯片组、横向滑动演示文稿、HTML 幻灯片组、发布演示文稿、分析演示文稿、框架演示文稿、产品演示文稿或数据驱动的演讲时，使用此工作流。

操作假设

• 这是一个仅用于 Tightened Slide 的系统。
• 输出为静态 HTML 幻灯片组，通常是 index.html，并配有相邻的 images/ 文件夹。
• 模板为 assets/template.html。
• 正文幻灯片必须使用已注册的 S01 到 S22 布局。
• 交付前必须运行验证器。
• 支持英语和韩语模式。

第 1 步：只澄清重要事项

如果用户提供了完整大纲和素材，请直接开始。如果缺少关键输入，最多询问三个问题：

1. 受众和演示场景。
2. 目标时长或页数。
3. 源材料、语言模式、所需图片／数据以及硬性限制。

如果未指定主题，默认采用 references/themes.md 中的国际克莱因蓝。 如果未指定语言模式，默认使用英语。

第 2 步：准备幻灯片组

创建目标文件夹和图片文件夹：

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">

韩语模式使用模板的字体栈：SUIT、Pretendard、Noto Sans KR 和 Noto Sans，之后回退到 Inter 和系统无衬线字体。

如果幻灯片组必须支持离线使用并提供本地动画回退，请确保从复制后的 HTML 路径可访问 assets/motion.min.js，或接受模板内置的 CDN 回退方案。

第 3 步：预检

编写幻灯片标记之前：

• 阅读模板中的 <style> 块。
• 阅读 references/layout-lock.md。
• 阅读 references/layouts.md 中相关的骨架。
• 确认计划使用的每个类都存在于模板中。
• 不要自行创建全局类。仅使用内联样式进行页面级微调。

编码前创建规划表：

page -> data-layout -> reason -> image slot

对于 7–8 页的幻灯片组，至少使用六种不同的 Sxx 布局。对于 10 页及以上的幻灯片组，至少使用八种。

第 4 步：选择布局

使用已注册的布局集：

• 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 Component。

单张大图使用 S22。多张图片使用 S15 或 S16 的变体。不要创建未注册的图片分栏或证据墙布局。

第 5 步：应用视觉系统

硬性规则：

• 每个幻灯片组只使用一种强调色。
• 不使用渐变、阴影、圆角卡片、玻璃效果、霓虹、3D 效果或装饰性边框。
• 大字号文字使用轻字重：200 或 300。
• 正文使用克制的字重，并保持清晰的层级。
• 大字号使用 font-size:min(Xvw,Yvh)，且 Y >= X * 1.6。
• 除使用已注册的陈述／分栏布局外，标题应与内容区域的左侧／顶部轴线对齐。
• 引导文字应置于标题上方，不要放在标题旁边。
• .canvas-card 已包含水平内边距；不要在其中再添加一层 5vw 内边距。
• 所有说明文字、标签和脚注都应位于底部导航安全区上方。
• SVG 只能绘制几何图形；可见标签必须使用 HTML。

语言规则：

• 英语模式使用简洁的句式大小写标题和直接明了的正文。
• 韩语模式使用简短的韩语标题、紧凑的正文行，并保持产品术语一致。
• 图表标签和生成图片中的文字必须符合所选语言模式。

步骤 6：图像流程

如果需要图像：

• 生成新图像前先询问。
• 先选择布局槽位，再编写提示词。
• 使用 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

步骤 7：验证

运行：

node scripts/validate-deck.mjs path/to/index.html

修复所有错误。警告需要进行视觉检查。

然后在浏览器中打开演示文稿并检查：

• 标题对齐
• 字体粗细
• 标题与正文之间的间距
• 图像裁剪和图像槽位适配情况
• 导航上方的说明文字和脚注
• ESC 索引的可见性
• B 静态模式

使用 references/checklist.md 作为交付检查清单。