Zakaria
a46764fb1b
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
119 lines
4.2 KiB
Markdown
119 lines
4.2 KiB
Markdown
# open-design-landing-deck
|
|
|
|
Sister skill to [`open-design-landing`](../open-design-landing/).
|
|
Produces a single-file slide deck in the **Atelier Zero** design
|
|
language — warm-paper background, italic-serif emphasis, coral
|
|
terminating dots, surreal collage plates — paginated as a horizontal
|
|
magazine swipe deck (←/→ · wheel · touch · ESC overview), the same
|
|
nav model as [`guizang-ppt`](../guizang-ppt/).
|
|
|
|
> **Read first** — agent contract, schema, and self-check live in
|
|
> [`SKILL.md`](./SKILL.md). This README is the human quick-start.
|
|
|
|
## 30-second tour
|
|
|
|
```bash
|
|
# 1. Compose the worked example.
|
|
npx tsx scripts/compose.ts inputs.example.json example.html
|
|
|
|
# 2. Open it.
|
|
open example.html
|
|
```
|
|
|
|
The deck assumes 16 collage assets at `../open-design-landing/assets/`
|
|
(the sister skill ships them). Use ←/→ · Space · PageUp/PageDown ·
|
|
Home/End to navigate, ESC for the overview grid.
|
|
|
|
## What you get
|
|
|
|
- N viewport-sized slides (the worked example has 11) laid out
|
|
horizontally on a `transform: translateX(...)` flex track.
|
|
- Per-slide chrome strip (top + bottom): brand mark · deck title ·
|
|
location · live `NN / TT` counter.
|
|
- Coral progress bar at the bottom that fills as you advance.
|
|
- Dot indicator near the bottom (click to jump).
|
|
- ESC overview grid with scaled thumbnails.
|
|
- 7 slide kinds: `cover`, `section`, `content`, `stats`, `quote`,
|
|
`cta`, `end`. Mix freely.
|
|
- Same 16-slot image library as the landing-page sister skill —
|
|
no extra prompting or rendering.
|
|
|
|
## Files
|
|
|
|
```text
|
|
skills/open-design-landing-deck/
|
|
├── SKILL.md # ← agent contract (read this first)
|
|
├── README.md # ← you are here
|
|
├── schema.ts # typed slide variants + brand block (re-exports from sister)
|
|
├── inputs.example.json # Open Design 11-slide pitch deck
|
|
├── example.html # canonical rendering
|
|
└── scripts/
|
|
└── compose.ts # inputs.json + sister styles.css → index.html
|
|
```
|
|
|
|
## Authoring a deck
|
|
|
|
1. Copy `inputs.example.json` to your project as `inputs.json`.
|
|
2. Edit `brand` (or copy from a sister-skill `inputs.json` you already have).
|
|
3. Set `deck_title` (the kicker shown in the chrome strip).
|
|
4. Build the `slides` array. Each entry is one of seven kinds — see
|
|
[`schema.ts`](./schema.ts) for the full type. A typical pitch:
|
|
|
|
```text
|
|
1. cover — title plate
|
|
2. section — chapter divider
|
|
3-5. content — manifesto, capabilities, method
|
|
6. stats — the numbers
|
|
7. section — chapter divider
|
|
8. content — selected work
|
|
9. quote — customer testimonial
|
|
10. cta — primary action
|
|
11. end — kicker word
|
|
```
|
|
|
|
5. Run the composer:
|
|
|
|
```bash
|
|
npx tsx scripts/compose.ts inputs.json out/index.html
|
|
```
|
|
|
|
## Image strategy
|
|
|
|
The deck inherits the sister skill's 16-slot image library. Set
|
|
`inputs.imagery.assets_path` to wherever those PNGs live; the example
|
|
uses `'../open-design-landing/assets/'`.
|
|
|
|
To regenerate or stub:
|
|
|
|
```bash
|
|
# Generate via gpt-image-2 (fal.ai)
|
|
FAL_KEY=fal-... 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/
|
|
```
|
|
|
|
## Migrating from `editorial-collage-deck`
|
|
|
|
This skill replaces the older `editorial-collage-deck` skill. The renames
|
|
are mechanical:
|
|
|
|
| Old | New |
|
|
| --- | --- |
|
|
| skill folder `editorial-collage-deck/` | `open-design-landing-deck/` |
|
|
| shared assets `../editorial-collage/assets/` | `../open-design-landing/assets/` |
|
|
| TS type `EditorialCollageDeckInputs` | `OpenDesignLandingDeckInputs` |
|
|
|
|
The `EditorialCollageDeckInputs` alias re-exported from
|
|
[`schema.ts`](./schema.ts) is a temporary bridge: it is kept for the
|
|
**v0.3.x** line and removed in the next minor release (**v0.4.0**).
|
|
Update imports before then.
|
|
|
|
## 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) — design tokens.
|