open-design-landing-deck

# open-design-landing-deck

Sister skill to [`open-design-landing`](../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`](../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)
```

## 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.

## Slide types

| Kind        | Use 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
```

## Workflow

### 1. Author `inputs.json`

Start from [`inputs.example.json`](./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`](./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`.

### 2. (Optional) generate or stub imagery

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
# 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/
```

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

### 3. Compose the deck

```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.

### 4. Self-check

- [ ] 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.

## 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.

## See also

- [`open-design-landing`](../open-design-landing/) — landing page sister skill.
- [`guizang-ppt`](../guizang-ppt/) — the magazine-deck navigation
  pattern this skill borrows.
- [`design-systems/atelier-zero/DESIGN.md`](../../design-systems/atelier-zero/DESIGN.md) — token spec.