open-design-landing-deck

name open-design-landing-deck en_name Write a Brand-Story Deck like a Founder Storyteller zh_name 像会讲故事的创始人一样写品牌故事稿 description OpenDesign's brand-story deck for partners and press: why it exists, what it believes, and where design is going. Built as a decision-grade marketing & GTM deck for partners, press, community. en_description OpenDesign's brand-story deck for partners and press: why it exists, what it believes, and where design is going. Built as a decision-grade marketing & GTM deck for partners, press, community. zh_description 像会讲故事的创始人一样写品牌故事稿——一份可商业交付的市场增长 Deck，围绕真实主题、证据链与决策目标组织。 tags ["marketing-gtm","annual-marketing-plan","marketing","launch","campaign","pipeline","decision-deck","commercial-slide-agent","open-design-landing-deck"] triggers ["annual-marketing-plan","marketing-gtm","Write a Brand-Story Deck like a Founder Storyteller","像会讲故事的创始人一样写品牌故事稿","launch","campaign","pipeline","html deck","html slides"] od {"surface":"web","mode":"deck","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"]},"category":"marketing-gtm","scenario":"marketing","example_prompt":"Create \"Write a Brand-Story Deck like a Founder Storyteller\" as a decision-grade Marketing & GTM deck in this template's own visual system. Subject: OpenDesign's brand-story deck for partners and press: why it exists, what it believes, and where design is going. Audience: partners, press, community. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the plan connect creative choices to measurable growth."} 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. `'OpenDesign · 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: # 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 . 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 — landing page sister skill. guizang-ppt — the magazine-deck navigation pattern this skill borrows. design-systems/atelier-zero/DESIGN.md — token spec.