open-design-landing-deck

open-design-landing-deck

与 open-design-landing 配套的技能。采用相同的 Atelier Zero 视觉系统（暖纸色、Inter Tight + Playfair Display、 斜体衬线强调、珊瑚色圆点），但采用水平杂志风格的 滑动演示文稿分页，而非长页面滚动。

导航模式特意借鉴了 guizang-ppt 技能——←/→ 方向键、滚轮 / 滑动、ESC 打开概览网格——让翻页体验更像逐页翻阅纸质杂志， 而非滚动浏览网页幻灯片。

inputs.json + ../open-design-landing/styles.css
        │
        └──────────► scripts/compose.ts
                            │
                            ▼
                   <out>/index.html
                   (one viewport per slide, horizontal swipe)

你将获得

• 一个独立的 HTML 文件，其中包含 N 张视口大小的幻灯片， 水平排列在一条经过变换的 flex 轨道上。
• 键盘导航：←/→ · ↑/↓ · PageUp/PageDown · Space · Home/End。
• 滚轮 + 触屏滑动（带动量保护，避免触控板的一次快速滑动 越过多张幻灯片）。
• 每张幻灯片的装饰条：品牌标志、演示文稿标题、位置、 罗马数字年份、实时幻灯片计数器（01 / 11）。
• 底部的珊瑚色进度条，随翻页逐渐填充。
• 底部附近的圆点指示条；点击任意圆点即可跳转。
• ESC 概览网格——显示每张幻灯片的缩略图，点击即可 跳转。与 guizang-ppt 的概览交互体验一致。
• 复用配套技能的同一套 16 槽图片库——无需重复准备资源。

幻灯片类型

类型	用途
cover	开篇标题页。双栏文案 + 拼贴艺术。
section	章节间的罗马数字分隔页。居中、全幅显示。
content	眉题 + 标题 + 正文 + 项目符号 + 可选拼贴艺术。
stats	最多 4 个大型数据单元格（数值 · 标签 · 副标签）。
quote	引述 + 作者。右侧可选肖像拼贴。
cta	结尾宣传语 + 1-2 个按钮。
end	超大斜体衬线强调词 + 签名页脚。

典型的 11 张幻灯片演示文稿：

1. cover     — title plate, hero collage
2. section   — "I. The problem"
3. content   — about / manifesto, bullets
4. content   — capabilities, bullets
5. stats     — 4 numbers
6. section   — "II. How it feels"
7. content   — method, bullets
8. content   — selected work
9. quote     — customer testimonial
10. cta      — primary + secondary action
11. end      — mega kicker + signature

工作流

1. 编写 inputs.json

从 inputs.example.json（Open Design 演示文稿）开始。品牌信息、图片策略和资源路径 与配套技能保持一致——如果你已经填写了 open-design-landing 简报，可将 brand 和 imagery 原样复制过来。

为每张幻灯片选择一个 kind，并根据 schema.ts 填写对应类型的字段。MixedText（无衬线基准文本 + 斜体衬线强调片段 + 结尾的珊瑚色圆点）采用与配套技能相同的编码方式——请参阅其 inputs.example.json。

2. （可选）生成图片或使用占位图片

此技能不附带自己的图片生成器或占位图片 脚本——它与 open-design-landing 共用 16 槽图片库。要 重新生成或使用占位图片：

# generate via gpt-image-2 (fal.ai)
FAL_KEY=... npx tsx ../open-design-landing/scripts/imagegen.ts ../open-design-landing/inputs.example.json --out=../open-design-landing/assets/

# or paper-textured SVG placeholders
npx tsx ../open-design-landing/scripts/placeholder.ts ../open-design-landing/assets/

将演示文稿的 inputs.imagery.assets_path 设为这些 PNG 文件所在的路径 （示例中的默认值：../open-design-landing/assets/）。

3. 组合演示文稿

npx tsx scripts/compose.ts inputs.json out/index.html

组合器会读取 inputs.json，加载 ../open-design-landing/styles.css 中的 Atelier Zero 标准样式表， 叠加演示文稿专用规则（水平 flex 轨道、幻灯片布局、 HUD、圆点导航、ESC 概览、键盘 / 滚轮 / 触屏处理器）， 并写入一个独立的 HTML 文件。

4. 自检

• 在新的浏览器标签页中打开 HTML；显示第 1 张幻灯片（封面），右上角的导航条显示 01 / N。
• 按 →（或空格键，或向下滚动）。页面平滑地向右滑动一个视口；圆点导航前进；珊瑚色进度条向前推进。
• 按 End。跳转到最后一张幻灯片。
• 按 Home。返回第 1 张幻灯片。
• 按 Esc。显示带有缩放缩略图的概览网格；点击任意方块即可跳转并关闭概览。
• 将窗口大小调整为 1080px 和 640px。封面和内容幻灯片折叠为单列；圆点导航仍可使用；导航条缩小。
• prefers-reduced-motion: reduce（DevTools → Rendering）：页面过渡依然迅捷，且不会引起晕动。
• Lighthouse：对比度达到 AA、字体使用 swap、没有布局偏移。

边界

• 复用姊妹技能的样式表。 编译时，组合器会读取 ../open-design-landing/styles.css。此处不要维护重复副本；如果 Atelier Zero 令牌发生变化，只需在姊妹技能中修改一次。
• 复用姊妹技能的图像库。 无需重新提示或渲染，同一组 16 张图片适用于这两种界面。
• 让每张幻灯片只占一个视口。 如果幻灯片内容无法放入 1280×800 下的 100vh × 100vw，就会溢出并显得拥挤。精简文案或拆分为两张幻灯片。
• 不要改为纵向滚动吸附。 横向滑动的呈现方式让这项技能如同杂志跨页；纵向滚动只会变成一个很长的落地页。
• 不要添加路由器。 这是一个单文件产物。多页演示文稿不在范围内；如需多套演示文稿，请分别渲染每套内容，并从父级索引链接到它们。

另请参阅

• open-design-landing — 落地页姊妹技能。
• guizang-ppt — 此技能借鉴的杂志式演示文稿导航模式。
• design-systems/atelier-zero/DESIGN.md — 令牌规范。