Back to Details

open-design-landing-deck

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

open-design-landing-deck

open-design-landing-deck

Sister skill to 
open-design-landing
. Same Atelier Zero visual system (warm paper, Inter Tight + Playfair Display, italic-serif emphasis, coral dots), but paginated as a horizontal magazine-style swipe deck instead of a long scrolling page.
The navigation model is intentionally borrowed from the 
guizang-ppt
 skill — 
←/→
arrow keys, wheel / swipe, ESC for the overview grid — so it feels like a print magazine flipping page by page rather than a web slide deck scrolling.
text
inputs.json + ../open-design-landing/styles.css
        │
        └──────────► scripts/compose.ts
                            │
                            ▼
                   <out>/index.html
                   (one viewport per slide, horizontal swipe)
作为
open-design-landing
的姊妹技能，它采用相同的Atelier Zero视觉系统（暖纸背景、Inter Tight + Playfair Display字体、斜体衬线强调、珊瑚色圆点），但以水平杂志式滑动幻灯片的形式分页，而非长滚动页面。
其导航模式特意借鉴了
guizang-ppt
技能——支持
←/→
方向键、滚轮/触屏滑动、按ESC键查看概览网格，带来翻阅印刷杂志般的体验，而非传统网页幻灯片的滚动感。
text
inputs.json + ../open-design-landing/styles.css
        │
        └──────────► scripts/compose.ts
                            │
                            ▼
                   <out>/index.html
                   (one viewport per slide, horizontal swipe)

What you get

你将获得

  • A single self-contained HTML file with N viewport-sized slides laid out horizontally on one transformed flex track.
  • Keyboard navigation: 
    ←/→
    · 
    ↑/↓
    · PageUp/PageDown · Space · Home/End.
  • Wheel + touch swipe (with momentum guard so a single trackpad flick doesn't overshoot).
  • Per-slide chrome strip: brand mark, deck title, location, Roman-numeral year, live slide counter (
    01 / 11
    ).
  • Coral progress bar at the bottom that fills as you advance.
  • Dot indicator strip near the bottom; click any dot to jump.
  • ESC overview grid — scaled thumbnails of every slide, click to jump. Mirrors 
    guizang-ppt
    's overview UX.
  • Reuses the same 16-slot image library as the sister skill — no duplicate assets.
  • 一个独立的HTML文件，包含N个视口大小的幻灯片，在一条水平弹性轨道上排列。
  • 键盘导航：支持
    ←/→
    · 
    ↑/↓
    · PageUp/PageDown · 空格键 · Home/End键。
  • 滚轮+触屏滑动（带有动量防护，避免单次触控板轻扫导致过度翻页）。
  • 单页Chrome栏：包含品牌标识、幻灯片标题、地点、罗马数字年份、实时幻灯片计数器（
    01 / 11
    ）。
  • 底部珊瑚色进度条：随幻灯片推进逐渐填充。
  • 底部圆点指示器栏：点击任意圆点可跳转至对应幻灯片。
  • ESC概览网格——显示所有幻灯片的缩略图，点击可跳转。与
    guizang-ppt
    的概览用户体验一致。
  • 复用姊妹技能的16槽图像库——无需重复资产。

Slide types

幻灯片类型

KindUse it for
cover
Title plate at the start. 2-column copy + collage art.
section
Roman-numeral divider between chapters. Centered, full-bleed.
content
Eyebrow + title + body + bullets + optional collage art.
stats
Up to 4 large stat cells (value · label · sub-label).
quote
Pull quote + author. Optional portrait collage on the right.
cta
Closing pitch + 1-2 buttons.
end
Mega italic-serif kicker word + signature footer.
A typical 11-slide pitch:
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
类型适用场景
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      — 醒目关键词+签名

Workflow

工作流程

1. Author 
inputs.json

1. 编写
inputs.json

Start from 
inputs.example.json
 (the Open Design pitch deck). The brand block, image strategy, and assets path mirror the sister skill — if you already filled out an 
open-design-landing
brief, copy 
brand
and 
imagery
over verbatim.
For each slide, pick a 
kind
and fill the typed fields from 
schema.ts
. 
MixedText
(sans-serif baseline + italic-serif emphasis spans + coral terminating dot) is the same encoding used by the sister skill — see its 
inputs.example.json
.
从
inputs.example.json
（Open Design宣传幻灯片示例）开始。品牌模块、图像策略和资产路径与姊妹技能一致——如果你已完成
open-design-landing
的配置，可直接复制
brand
和
imagery
部分。
为每张幻灯片选择
kind
类型，并填写
schema.ts
中的对应字段。
MixedText
（无衬线基准文本+斜体衬线强调文本段+珊瑚色终止点）的编码方式与姊妹技能相同——可参考其
inputs.example.json
。

2. (Optional) generate or stub imagery

2. （可选）生成或生成占位图像

This skill does not ship its own image generator or placeholder script — it shares the 16-slot library from 
open-design-landing
. To regenerate or stub:
bash
undefined
本技能不附带独立的图像生成器或占位脚本——它共享
open-design-landing
的16槽图像库。如需重新生成或生成占位图像：
bash
undefined

generate via gpt-image-2 (fal.ai)

通过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/
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

或生成带纸张纹理的SVG占位图

npx tsx ../open-design-landing/scripts/placeholder.ts ../open-design-landing/assets/

Set your deck's `inputs.imagery.assets_path` to wherever those PNGs
live (default in the example: `../open-design-landing/assets/`).
npx tsx ../open-design-landing/scripts/placeholder.ts ../open-design-landing/assets/

将幻灯片的`inputs.imagery.assets_path`设置为这些PNG文件的存储位置（示例中的默认路径：`../open-design-landing/assets/`）。

3. Compose the deck

3. 合成幻灯片

bash
npx tsx scripts/compose.ts inputs.json out/index.html
The composer reads 
inputs.json
, loads the canonical Atelier Zero stylesheet from 
../open-design-landing/styles.css
, layers deck-specific rules on top (horizontal flex track, slide layouts, HUD, dot nav, ESC overview, keyboard / wheel / touch handlers), and writes one self-contained HTML file.
bash
npx tsx scripts/compose.ts inputs.json out/index.html
合成器读取
inputs.json
，从
../open-design-landing/styles.css
加载标准Atelier Zero样式表，叠加幻灯片专属规则（水平弹性轨道、幻灯片布局、HUD、圆点导航、ESC概览、键盘/滚轮/触摸事件处理），并生成一个独立的HTML文件。

4. Self-check

4. 自检清单

  • Open the HTML in a fresh browser tab; slide 1 (cover) shows with chrome strip top-right showing 
    01 / N
    .
  • Press 
    →
    (or Space, or scroll-down). Smoothly slides one viewport to the right; dot nav advances; the coral progress bar ticks forward.
  • Press 
    End
    . Jumps to the final slide.
  • Press 
    Home
    . Returns to slide 1.
  • Press 
    Esc
    . Overview grid appears with scaled thumbnails; click any tile to jump and dismiss the overview.
  • Resize to 1080px and 640px. Cover / content slides collapse to a single column; dot nav still works; chrome strips shrink.
  • prefers-reduced-motion: reduce
    (DevTools → Rendering): page transitions stay snappy and don't induce motion sickness.
  • Lighthouse: contrast AA, font-display swap, no layout shift.
  • 在新浏览器标签页中打开HTML文件；第1页（封面）显示，右上角Chrome栏显示
    01 / N
    。
  • 按
    →
    键（或空格键、向下滚动）。平滑向右滑动一个视口；圆点导航前进；珊瑚色进度条向前推进。
  • 按
    End
    键。跳转到最后一页。
  • 按
    Home
    键。返回第1页。
  • 按
    Esc
    键。显示概览网格和缩略图；点击任意缩略图可跳转并关闭概览。
  • 调整窗口大小至1080px和640px。封面/内容幻灯片自动调整为单列；圆点导航仍可正常使用；Chrome栏缩小。
  • 设置
    prefers-reduced-motion: reduce
    （开发者工具→渲染）：页面过渡保持流畅，不会引发晕动症。
  • Lighthouse检测：对比度达AA级、字体显示采用swap模式、无布局偏移。

Boundaries

边界限制

  • Reuse the sister skill's stylesheet. The composer reads 
    ../open-design-landing/styles.css
    at compile time. Do not maintain a duplicate copy here; if Atelier Zero tokens evolve, edit them once in the sister skill.
  • Reuse the sister skill's image library. No need to re-prompt or re-render — the same 16 plates work for both surfaces.
  • Keep slides single-viewport. If a slide's content does not fit 100vh × 100vw at 1280×800 it will overflow and feel cramped. Trim copy or split into two slides.
  • Do not switch to vertical scroll-snap. The horizontal swipe posture is what makes this skill feel like a magazine spread; a vertical scroller would just be a long landing page.
  • Do not add a router. This is a single-file artifact. Multi-page decks are out of scope; for a multi-deck experience, render each deck separately and link from a parent index.
  • 复用姊妹技能的样式表。合成器在编译时读取
    ../open-design-landing/styles.css
    。请勿在此维护副本；若Atelier Zero设计标记更新，只需在姊妹技能中编辑一次即可。
  • 复用姊妹技能的图像库。无需重新提示或渲染——同一组16个拼贴板块可用于两种场景。
  • 保持幻灯片为单视口大小。若幻灯片内容在1280×800分辨率下无法适配100vh × 100vw，将出现内容溢出并显得拥挤。请精简文本或拆分为两张幻灯片。
  • 请勿切换为垂直滚动吸附。水平滑动的交互方式是本技能具有杂志排版感的核心；垂直滚动版本仅相当于长着陆页。
  • 请勿添加路由。本技能生成的是单文件产物。多页幻灯片超出本技能范围；如需多幻灯片体验，请分别渲染每个幻灯片，并从父索引页面链接。

See also

相关链接

  • open-design-landing
     — landing page sister skill.
  • guizang-ppt
     — the magazine-deck navigation pattern this skill borrows.
  • design-systems/atelier-zero/DESIGN.md
     — token spec.
  • open-design-landing
     — 着陆页姊妹技能。
  • guizang-ppt
     — 本技能借鉴的杂志式幻灯片导航模式。
  • design-systems/atelier-zero/DESIGN.md
     — 设计标记规范。