{"id":"7d4f10fc-f625-491e-85f5-805f008ce977","shortId":"UzWDr5","kind":"skill","title":"open-design-landing-deck","tagline":"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, s","description":"# open-design-landing-deck\n\nSister skill to [`open-design-landing`](../open-design-landing/). Same\nAtelier Zero visual system (warm paper, Inter Tight + Playfair Display,\nitalic-serif emphasis, coral dots), but paginated as a **horizontal\nmagazine-style swipe deck** instead of a long scrolling page.\n\nThe navigation model is intentionally borrowed from the\n[`guizang-ppt`](../guizang-ppt/) skill — `←/→` arrow keys, wheel /\nswipe, ESC for the overview grid — so it feels like a print magazine\nflipping page by page rather than a web slide deck scrolling.\n\n```text\ninputs.json + ../open-design-landing/styles.css\n        │\n        └──────────► scripts/compose.ts\n                            │\n                            ▼\n                   <out>/index.html\n                   (one viewport per slide, horizontal swipe)\n```\n\n## What you get\n\n- A single self-contained HTML file with N viewport-sized slides laid\n  out horizontally on one transformed flex track.\n- **Keyboard navigation**: `←/→` · `↑/↓` · PageUp/PageDown · Space ·\n  Home/End.\n- **Wheel + touch swipe** (with momentum guard so a single trackpad\n  flick doesn't overshoot).\n- **Per-slide chrome strip**: brand mark, deck title, location,\n  Roman-numeral year, live slide counter (`01 / 11`).\n- **Coral progress bar** at the bottom that fills as you advance.\n- **Dot indicator** strip near the bottom; click any dot to jump.\n- **ESC overview grid** — scaled thumbnails of every slide, click to\n  jump. Mirrors `guizang-ppt`'s overview UX.\n- Reuses the **same 16-slot image library** as the sister skill — no\n  duplicate assets.\n\n## Slide types\n\n| Kind        | Use it for                                                    |\n| :---------- | :------------------------------------------------------------ |\n| `cover`     | Title plate at the start. 2-column copy + collage art.        |\n| `section`   | Roman-numeral divider between chapters. Centered, full-bleed. |\n| `content`   | Eyebrow + title + body + bullets + optional collage art.      |\n| `stats`     | Up to 4 large stat cells (value · label · sub-label).         |\n| `quote`     | Pull quote + author. Optional portrait collage on the right.  |\n| `cta`       | Closing pitch + 1-2 buttons.                                  |\n| `end`       | Mega italic-serif kicker word + signature footer.             |\n\nA typical 11-slide pitch:\n\n```\n1. cover     — title plate, hero collage\n2. section   — \"I. The problem\"\n3. content   — about / manifesto, bullets\n4. content   — capabilities, bullets\n5. stats     — 4 numbers\n6. section   — \"II. How it feels\"\n7. content   — method, bullets\n8. content   — selected work\n9. quote     — customer testimonial\n10. cta      — primary + secondary action\n11. end      — mega kicker + signature\n```\n\n## Workflow\n\n### 1. Author `inputs.json`\n\nStart from [`inputs.example.json`](./inputs.example.json) (the Open\nDesign pitch deck). The brand block, image strategy, and assets path\nmirror the sister skill — if you already filled out an\n`open-design-landing` brief, copy `brand` and `imagery` over verbatim.\n\nFor each slide, pick a `kind` and fill the typed fields from\n[`schema.ts`](./schema.ts). `MixedText` (sans-serif baseline +\nitalic-serif emphasis spans + coral terminating dot) is the same\nencoding used by the sister skill — see its `inputs.example.json`.\n\n### 2. (Optional) generate or stub imagery\n\nThis skill does **not** ship its own image generator or placeholder\nscript — it shares the 16-slot library from `open-design-landing`. To\nregenerate or stub:\n\n```bash\n# generate via gpt-image-2 (fal.ai)\nFAL_KEY=... npx tsx ../open-design-landing/scripts/imagegen.ts ../open-design-landing/inputs.example.json --out=../open-design-landing/assets/\n\n# or paper-textured SVG placeholders\nnpx tsx ../open-design-landing/scripts/placeholder.ts ../open-design-landing/assets/\n```\n\nSet your deck's `inputs.imagery.assets_path` to wherever those PNGs\nlive (default in the example: `../open-design-landing/assets/`).\n\n### 3. Compose the deck\n\n```bash\nnpx tsx scripts/compose.ts inputs.json out/index.html\n```\n\nThe composer reads `inputs.json`, loads the canonical Atelier Zero\nstylesheet from `../open-design-landing/styles.css`, layers\ndeck-specific rules on top (horizontal flex track, slide layouts,\nHUD, dot nav, ESC overview, keyboard / wheel / touch handlers), and\nwrites one self-contained HTML file.\n\n### 4. Self-check\n\n- [ ] Open the HTML in a fresh browser tab; slide 1 (cover) shows\n      with chrome strip top-right showing `01 / N`.\n- [ ] Press `→` (or Space, or scroll-down). Smoothly slides one\n      viewport to the right; dot nav advances; the coral progress bar\n      ticks forward.\n- [ ] Press `End`. Jumps to the final slide.\n- [ ] Press `Home`. Returns to slide 1.\n- [ ] Press `Esc`. Overview grid appears with scaled thumbnails;\n      click any tile to jump and dismiss the overview.\n- [ ] Resize to 1080px and 640px. Cover / content slides collapse to\n      a single column; dot nav still works; chrome strips shrink.\n- [ ] `prefers-reduced-motion: reduce` (DevTools → Rendering): page\n      transitions stay snappy and don't induce motion sickness.\n- [ ] Lighthouse: contrast AA, font-display swap, no layout shift.\n\n## Boundaries\n\n- **Reuse the sister skill's stylesheet.** The composer reads\n  `../open-design-landing/styles.css` at compile time. Do not\n  maintain a duplicate copy here; if Atelier Zero tokens evolve, edit\n  them once in the sister skill.\n- **Reuse the sister skill's image library.** No need to re-prompt or\n  re-render — the same 16 plates work for both surfaces.\n- **Keep slides single-viewport.** If a slide's content does not fit\n  100vh × 100vw at 1280×800 it will overflow and feel cramped. Trim\n  copy or split into two slides.\n- **Do not switch to vertical scroll-snap.** The horizontal swipe\n  posture is what makes this skill feel like a magazine spread; a\n  vertical scroller would just be a long landing page.\n- **Do not add a router.** This is a single-file artifact. Multi-page\n  decks are out of scope; for a multi-deck experience, render each\n  deck separately and link from a parent index.\n\n## See also\n\n- [`open-design-landing`](../open-design-landing/) — landing page sister skill.\n- [`guizang-ppt`](../guizang-ppt/) — the magazine-deck navigation\n  pattern this skill borrows.\n- [`design-systems/atelier-zero/DESIGN.md`](../../design-systems/atelier-zero/DESIGN.md) — token spec.","tags":["open","design","landing","deck","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-open-design-landing-deck","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/open-design-landing-deck","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (6,396 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:25.649Z","embedding":null,"createdAt":"2026-05-04T12:53:13.191Z","updatedAt":"2026-05-11T06:52:25.649Z","lastSeenAt":"2026-05-11T06:52:25.649Z","tsv":"'-2':326 '/../design-systems/atelier-zero/design.md':911 '/atelier-zero/design.md':910 '/guizang-ppt':108,897 '/index.html':141 '/inputs.example.json':401 '/open-design-landing':63,889 '/open-design-landing/assets':523,533,549 '/open-design-landing/inputs.example.json':521 '/open-design-landing/scripts/imagegen.ts':520 '/open-design-landing/scripts/placeholder.ts':532 '/open-design-landing/styles.css':139,571,736 '/schema.ts':449 '01':208,624 '1':325,342,395,614,661 '10':384 '100vh':797 '100vw':798 '1080px':681 '11':209,339,389 '1280':800 '16':253,496,778 '2':276,348,475,514 '3':353,550 '4':303,358,364,601 '5':362 '6':366 '640px':683 '7':372 '8':376 '800':801 '9':380 'aa':718 'action':388 'add':849 'advanc':220,642 'alreadi':421 'also':884 'appear':666 'arrow':110 'art':280,299 'artifact':858 'asset':263,413 'ateli':15,65,567,748 'author':315,396 'background':22 'bar':212,646 'baselin':454 'bash':508,554 'bleed':291 'block':409 'bodi':295 'borrow':102,906 'bottom':215,226 'boundari':726 'brand':37,196,408,431 'brief':429 'browser':611 'bullet':296,357,361,375 'button':327 'canon':566 'capabl':360 'cell':306 'center':288 'chapter':287 'check':604 'chrome':194,618,696 'click':227,240,670 'close':323 'collag':32,279,298,318,347 'collaps':687 'column':277,691 'compil':738 'compos':551,561,734 'contain':155,598 'content':292,354,359,373,377,685,793 'contrast':717 'copi':278,430,745,809 'coral':28,79,210,460,644 'counter':207 'cover':270,343,615,684 'cramp':807 'cta':322,385 'custom':382 'deck':5,12,38,41,55,90,135,198,406,536,553,574,862,871,875,901 'deck-specif':573 'default':545 'design':3,35,53,61,404,427,502,887,908 'design-system':907 'devtool':704 'dismiss':676 'display':74,721 'divid':285 'doesn':188 'dot':30,80,221,229,462,585,640,692 'duplic':262,744 'edit':752 'emphasi':26,78,458 'encod':466 'end':328,390,650 'esc':114,232,587,663 'everi':238 'evolv':751 'exampl':548 'experi':872 'eyebrow':293 'fal':516 'fal.ai':515 'feel':121,371,806,832 'field':446 'file':10,157,600,857 'fill':217,422,443 'final':654 'fit':796 'flex':170,580 'flick':187 'flip':126 'font':720 'font-display':719 'footer':336 'forward':648 'fresh':610 'full':290 'full-ble':289 'generat':477,489,509 'get':150 'gpt':512 'gpt-imag':511 'grid':118,234,665 'guard':182 'guizang':106,245,895 'guizang-ppt':105,244,894 'handler':592 'hero':346 'home':657 'home/end':176 'horizont':43,85,146,166,579,824 'html':156,599,607 'hud':584 'ii':368 'imag':255,410,488,513,764 'imageri':433,480 'index':882 'indic':222 'induc':713 'inputs.example.json':400,474 'inputs.imagery.assets':538 'inputs.json':138,397,558,563 'instead':91 'intent':101 'inter':71 'ital':24,76,331,456 'italic-serif':23,75,330,455 'jump':231,242,651,674 'keep':784 'key':111,517 'keyboard':172,589 'kicker':333,392 'kind':266,441 'label':308,311 'laid':164 'land':4,54,62,428,503,845,888,890 'languag':18 'larg':304 'layer':572 'layout':583,724 'librari':256,498,765 'lighthous':716 'like':122,833 'link':878 'live':205,544 'load':564 'locat':200 'long':94,844 'magazin':45,87,125,835,900 'magazine-deck':899 'magazine-styl':44,86 'maintain':742 'make':829 'manifesto':356 'mark':197 'mega':329,391 'method':374 'mirror':243,415 'mixedtext':450 'model':99 'momentum':181 'motion':702,714 'multi':860,870 'multi-deck':869 'multi-pag':859 'n':159,625 'nav':586,641,693 'navig':98,173,902 'near':224 'need':767 'npx':518,530,555 'number':365 'numer':203,284 'one':142,168,595,635 'open':2,34,52,60,403,426,501,605,886 'open-design-land':59,425,500,885 'open-design-landing-deck':1,51 'option':297,316,476 'out/index.html':559 'overflow':804 'overshoot':190 'overview':117,233,248,588,664,678 'page':96,127,129,706,846,861,891 'pageup/pagedown':174 'pagin':48,82 'paper':21,70,526 'paper-textur':525 'parent':881 'path':414,539 'pattern':903 'per':144,192 'per-slid':191 'pick':439 'pitch':324,341,405 'placehold':491,529 'plate':33,272,345,779 'playfair':73 'pngs':543 'portrait':317 'postur':826 'ppt':107,246,896 'prefer':700 'prefers-reduced-mot':699 'press':626,649,656,662 'primari':386 'print':124 'problem':352 'produc':6 'progress':211,645 'prompt':771 'pull':313 'quot':312,314,381 'rather':130 're':770,774 're-prompt':769 're-rend':773 'read':562,735 'recip':39 'reduc':701,703 'regener':505 'render':705,775,873 'resiz':679 'return':658 'reus':250,727,759 'right':321,622,639 'roman':202,283 'roman-numer':201,282 'router':851 'rule':576 'san':452 'sans-serif':451 'scale':235,668 'schema.ts':448 'scope':866 'script':492 'scripts/compose.ts':140,557 'scroll':95,136,631,821 'scroll-down':630 'scroll-snap':820 'scroller':839 'secondari':387 'section':281,349,367 'see':472,883 'select':378 'self':154,597,603 'self-check':602 'self-contain':153,596 'separ':876 'serif':25,77,332,453,457 'set':534 'share':494 'shift':725 'ship':485 'show':616,623 'shrink':698 'sick':715 'signatur':335,393 'singl':9,152,185,690,787,856 'single-fil':8,855 'single-viewport':786 'sister':56,259,417,470,729,757,761,892 'size':162 'skill':57,109,260,418,471,482,730,758,762,831,893,905 'skill-open-design-landing-deck' 'slide':11,134,145,163,193,206,239,264,340,438,582,613,634,655,660,686,785,791,814 'slot':254,497 'smooth':633 'snap':822 'snappi':709 'source-nexu-io' 'space':175,628 'span':27,459 'spec':913 'specif':575 'split':811 'spread':836 'start':275,398 'stat':300,305,363 'stay':708 'still':694 'strategi':411 'strip':195,223,619,697 'stub':479,507 'style':46,88 'stylesheet':569,732 'sub':310 'sub-label':309 'surfac':783 'surreal':31 'svg':528 'swap':722 'swipe':47,89,113,147,179,825 'switch':817 'system':68,909 'tab':612 'termin':29,461 'testimoni':383 'text':137 'textur':527 'thumbnail':236,669 'tick':647 'tight':72 'tile':672 'time':739 'titl':199,271,294,344 'token':750,912 'top':578,621 'top-right':620 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'touch':178,591 'track':171,581 'trackpad':186 'transform':169 'transit':707 'trim':808 'tsx':519,531,556 'two':813 'type':265,445 'typic':338 'use':42,267,467 'ux':249 'valu':307 'verbatim':435 'vertic':819,838 'via':510 'viewport':143,161,636,788 'viewport-s':160 'visual':17,67 'warm':20,69 'warm-pap':19 'web':133 'wheel':49,112,177,590 'wherev':541 'word':334 'work':379,695,780 'workflow':394 'would':840 'write':594 'year':204 'zero':16,66,568,749","prices":[{"id":"93e15c44-f74f-4392-9e0d-3e5e85614f2e","listingId":"7d4f10fc-f625-491e-85f5-805f008ce977","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-04T12:53:13.191Z"}],"sources":[{"listingId":"7d4f10fc-f625-491e-85f5-805f008ce977","source":"github","sourceId":"nexu-io/open-design/open-design-landing-deck","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/open-design-landing-deck","isPrimary":false,"firstSeenAt":"2026-05-04T12:53:13.191Z","lastSeenAt":"2026-05-11T06:52:25.649Z"},{"listingId":"7d4f10fc-f625-491e-85f5-805f008ce977","source":"skills_sh","sourceId":"nexu-io/open-design/open-design-landing-deck","sourceUrl":"https://skills.sh/nexu-io/open-design/open-design-landing-deck","isPrimary":true,"firstSeenAt":"2026-05-07T20:44:48.608Z","lastSeenAt":"2026-05-07T22:43:01.505Z"}],"details":{"listingId":"7d4f10fc-f625-491e-85f5-805f008ce977","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"open-design-landing-deck","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"fc1b89b38515bafb1a1c3ceeb5c882b323ca83f4","skill_md_path":"skills/open-design-landing-deck/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/open-design-landing-deck"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"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."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/open-design-landing-deck"},"updatedAt":"2026-05-11T06:52:25.649Z"}}