splatstudio-landing-deck
姊妹技能，与 splatstudio-landing 配合使用。采用相同的 Atelier Zero 视觉系统（暖纸色调、Inter Tight + Playfair Display 字体、斜体衬线强调、珊瑚色圆点），但以水平杂志式翻页画册的形式呈现，而非长滚动页面。
导航模型有意借鉴了 guizang-ppt 技能——←/→ 方向键、滚轮/滑动、ESC 概览网格——从而模拟纸质杂志的逐页翻页体验，而非网页幻灯片滚动。
inputs.json + ../splatstudio-landing/styles.css
│
└──────────► scripts/compose.ts
│
▼
<out>/index.html
(每张幻灯片一个视口，水平滑动)
你会得到
- 一个自包含的 HTML 文件，包含 N 个视口大小的幻灯片，水平排列在单个变换过的弹性轨道上。
- 键盘导航：
←/→·↑/↓· PageUp/PageDown · Space · Home/End。 - 滚轮 + 触摸滑动（带有动量保护，防止单次触控板滑动过度）。
- 每页页面信息条：品牌标识、画册标题、位置、罗马数字年份、实时页码计数器（
01 / 11）。 - 底部珊瑚色进度条，随翻页而填充。
- 底部附近的圆点指示器；点击任意圆点即可跳转。
- ESC 概览网格——所有幻灯片的缩略图，点击即可跳转。与
guizang-ppt的概览用户体验一致。 - 重用姊妹技能的相同 16 槽位图片库——无需重复资源。
幻灯片类型
| 类型 | 用途 |
|---|---|
cover | 起始标题页。双栏文字 + 拼贴艺术。 |
section | 章节之间的罗马数字分隔。居中、全出血。 |
content | 眉标 + 标题 + 正文 + 要点 + 可选的拼贴艺术。 |
stats | 最多 4 个大型统计单元格（数值 · 标签 · 子标签）。 |
quote | 引文 + 作者。右侧可选的肖像拼贴。 |
cta | 结尾提议 + 1-2 个按钮。 |
end | 巨大的斜体衬线结束词 + 签名页脚。 |
典型的 11 页提案：
1. cover — 标题页，英雄拼贴
2. section — "I. 问题"
3. content — 关于 / 宣言，要点
4. content — 能力，要点
5. stats — 4 个数字
6. section — "II. 感受如何"
7. content — 方法，要点
8. content — 精选作品
9. quote — 客户推荐
10. cta — 主要 + 次要操作
11. end — 巨大的结束词 + 签名
工作流程
1. 编写 inputs.json
从 inputs.example.json（开放设计提案画册）开始。品牌模块、图片策略和资源路径与姊妹技能保持一致——如果你已经填写了 splatstudio-landing 的简报，可以直接复制 brand 和 imagery 部分。
对于每张幻灯片，选择一种 kind 并根据 schema.ts 中的类型字段填写。MixedText（无衬线基线 + 斜体衬线强调跨度 + 珊瑚色终止点）使用的编码与姊妹技能相同——请参阅其 inputs.example.json。
2. （可选）生成或占位图片
此技能不自带图片生成器或占位脚本——它与 splatstudio-landing 共享 16 槽位库。要重新生成或占位，可以：
# 通过 gpt-image-2 (fal.ai) 生成
FAL_KEY=... npx tsx ../splatstudio-landing/scripts/imagegen.ts ../splatstudio-landing/inputs.example.json --out=../splatstudio-landing/assets/
# 或创建纸质纹理的 SVG 占位图
npx tsx ../splatstudio-landing/scripts/placeholder.ts ../splatstudio-landing/assets/
将画册的 inputs.imagery.assets_path 设置为这些 PNG 文件所在的位置（示例中默认路径为 ../splatstudio-landing/assets/）。
3. 合成画册
npx tsx scripts/compose.ts inputs.json out/index.html
合成器读取 inputs.json，加载来自 ../splatstudio-landing/styles.css 的标准 Atelier Zero 样式表，并在其上叠加画册特定的规则（水平弹性轨道、幻灯片布局、HUD、圆点导航、ESC 概览、键盘/滚轮/触摸处理程序），然后写入一个自包含的 HTML 文件。
4. 自检
- 在新浏览器标签页中打开 HTML；第 1 页（封面）应显示，右上角页面信息条显示
01 / N。 - 按
→（或 Space，或向下滚动）。平滑地向右侧滑动一个视口；圆点导航前进；珊瑚色进度条向前移动。 - 按
End。跳转到最后一张幻灯片。 - 按
Home。返回第 1 页。 - 按
Esc。出现带有缩略图的概览网格；点击任意方块可跳转并关闭概览。 - 调整宽度至 1080px 和 640px。封面/内容幻灯片折叠为单列；圆点导航仍然可用；页面信息条缩小。
-
prefers-reduced-motion: reduce（DevTools → Rendering）：页面过渡保持流畅，不会引起晕动。 - Lighthouse：对比度 AA、font-display: swap、无布局偏移。
边界
- 重用姊妹技能的样式表。 合成器在编译时读取
../splatstudio-landing/styles.css。不要在此处维护重复副本；如果 Atelier Zero 令牌发生变化，请在姊妹技能中一次性编辑它们。 - 重用姊妹技能的图片库。 无需重新提示或重新渲染——相同的 16 张版面适用于两种展示形式。
- 保持幻灯片为单视口。 如果幻灯片内容在 1280×800 下无法适应 100vh × 100vw，则会溢出，显得拥挤。请精简文字或拆分为两张幻灯片。
- 不要切换到垂直滚动吸附。 水平滑动手势是此技能感觉像杂志版面的关键所在；垂直滚动就只是一个长页面了。
- 不要添加路由。 这是一个单文件产物。多页面画册不在范围内；如需多画册体验，请分别渲染每个画册，并从父索引链接它们。
另请参阅
splatstudio-landing— 着陆页姊妹技能。guizang-ppt— 此技能借用的杂志画册导航模式。design-systems/atelier-zero/DESIGN.md— 令牌规范。