| name | open-design-landing-deck |
| description | 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.
|
| triggers | ["slide deck","演示文稿","pitch deck","keynote","editorial slides","atelier zero deck","open design deck","open design landing deck"] |
| od | {"category":"brand-deck","surface":"web","mode":"deck","scenario":"marketing","featured":2,"audience":"founders pitching, conference talks, internal reviews","tone":"editorial, restrained, premium","scale":"6-15 viewport-locked slides","preview":{"type":"html","entry":"index.html"},"craft":{"requires":["typographic-rhythm","pixel-discipline"]}} |
| inputs | [{"id":"brand","label":"Brand identity (shared across slides)","schema_path":"./schema.ts#BrandBlock"},{"id":"deck_title","label":"Kicker shown in the per-slide top chrome","description":"e.g. `'Open Design · Vol. 01 / Issue Nº 26'`."},{"id":"slides","label":"Ordered list of typed slides","description":"Each entry is one of seven slide kinds. Mix and match freely; the composer routes each by `kind`.\n","schema_path":"./schema.ts#Slide"},{"id":"imagery","label":"Image library (defaults to sister skill's assets)","schema_path":"../open-design-landing/schema.ts#ImageryConfig"}] |
| parameters | {"slides_recommended_count":{"type":"number","default":11,"description":"8-15 is the sweet spot. Below 6 the deck feels thin; above 18 attendees lose the thread."}} |
| outputs | [{"path":"<out>/index.html","description":"Self-contained HTML deck — Atelier Zero CSS inlined, runtime script inline, images relative."}] |
| capabilities_required | ["file-write","node-runtime"] |
| example_prompt | Build me an 11-slide pitch deck for "Lumen Field", a focus-soundscape
studio. Cover with hero plate, two section dividers, two product
content slides with bullets, a stats slide showing 12 soundscapes / 4
presets / 1 daily ritual, a customer quote, a closing CTA, and an end
card. Reuse the open-design-landing image library.
|
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
| 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:
FAL_KEY=... npx tsx ../open-design-landing/scripts/imagegen.ts ../open-design-landing/inputs.example.json --out=../open-design-landing/assets/
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
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
