open-design-landing-deck

Original：🇺🇸 English

Translated

2 scripts

Produce a single-file slide deck in the Atelier Zero visual language (warm-paper background, italic-serif emphasis spans, coral terminating dots, surreal collage plates) — Open Design's brand deck recipe. The deck uses **horizontal magazine-style swipe pagination** (←/→, wheel, swipe), a per-slide chrome strip with brand mark and slide counter, an ESC overview grid, a coral progress bar, and inherits the canonical stylesheet + 16-slot image library from the sister `open-design-landing` skill.

4installs

Sourcenexu-io/open-design

Added on2026-05-05

NPX Install

npx skill4agent add nexu-io/open-design open-design-landing-deck

SKILL.md Content

View Translation Comparison →

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)

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

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

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.

open-design-landing-deck

NPX Install

Tags

SKILL.md Content

open-design-landing-deck

What you get

Slide types

Workflow

1. Author
`inputs.json`

2. (Optional) generate or stub imagery

3. Compose the deck

4. Self-check

Boundaries

See also