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.

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

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

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:

# 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

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.

…