{"id":"dbcaaee4-e2da-4573-bf39-a0d26fb3296d","shortId":"KmtNPc","kind":"skill","title":"open-design-landing","tagline":"Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionall","description":"# open-design-landing\n\nBuild a single-page editorial landing site (or a slide deck — see the\nsibling [`open-design-landing-deck`](../open-design-landing-deck/) skill)\nin the **Atelier Zero** design system: warm-paper background, Inter\nTight + Playfair Display, italic serif emphasis spans, dotted hairline\nrules, coral terminating dots, scroll-reveal motion, and 16 surreal\ncollage plates.\n\nThis is the canonical Open Design marketing-page recipe — the example\noutput is the very page you see at [open-design](https://github.com/nexu-io/open-design).\n\nThe skill is fully **parameterized**. The agent fills one typed\n`inputs.json` from the user's brief; the composer turns that JSON +\nthe canonical [`styles.css`](./styles.css) into a deployable artifact.\n\n```text\ninputs.json + styles.css                       16 image slots\n        │                                            │\n        └──────────► scripts/compose.ts ◄────────────┘\n                            │\n                            ▼\n              <out>/index.html  (self-contained)\n              <out>/assets/      (PNG or SVG)\n```\n\n---\n\n## What you get\n\nA single HTML file with **all** of:\n\n- Editorial topbar (volume / issue / language strip), Headroom-style\n  sticky nav with live GitHub star count.\n- 8 numbered Roman-numeral sections with paper-textured background:\n  hero (with 3 stat rings + 4-step index), about, capabilities (4 cards),\n  labs (5 cards + filter pills + progress bar), method (4 steps with\n  thumbnails), selected work (dark slab + 2 tilted cards), testimonial\n  (pull quote + 5 partner glyphs), CTA (ribbon + email pill).\n- Footer with 4 link columns + huge italic-serif kicker word.\n- Scroll-reveal motion on every section (IntersectionObserver, respects\n  `prefers-reduced-motion`).\n- Fully responsive at 1280 / 1080 / 880 / 560 breakpoints.\n\n---\n\n## Workflow contract\n\nRun these four steps in order. The agent should **complete** each step\nbefore moving on, and prefer asking the user a focused question over\ninventing copy.\n\n### 1. Gather brand inputs\n\nUse `AskQuestion` (or the equivalent in your UI) to collect the brand\nbrief in chunks; do **not** dump the entire `schema.ts` on the user.\nMap their answers into `inputs.json` matching the typed shape.\n\nThe eight question groups, in order:\n\n| Group | Schema fields                                           | Min answers | Notes                                    |\n| :---- | :------------------------------------------------------ | :---------- | :--------------------------------------- |\n| 1     | `brand.{name,mark,tagline,description,location}`        | 5           | Mark = single glyph (Ø, ▲, ★…)           |\n| 2     | `brand.{license,version,year,primary_url,contact_email}`| 4           | URL is required; license defaults Apache-2.0 |\n| 3     | `nav[]` (up to 5)                                       | 3           | Optional count badges                     |\n| 4     | `hero.{label,headline,lead,primary,secondary,stats}`    | All         | Headline as `MixedText` (sans+em+dot)     |\n| 5     | `about` + `capabilities.cards[4]`                       | All         | 4 cards × {num,tag,title,body}            |\n| 6     | `labs.cards[5]` + `method.steps[4]`                     | All         | Both grids fixed-arity                    |\n| 7     | `work.cards[2]` + `testimonial`                         | All         | 5 partner glyphs as inline SVG path data |\n| 8     | `cta` + `footer.{columns[4],mega}`                      | All         | Mega kicker is a `MixedText` like the headlines |\n\nOpen [`inputs.example.json`](./inputs.example.json) for a complete\nworked example (Open Design itself).\n\n### 2. Decide the image strategy\n\n| Strategy          | When to choose                                          | Cost / latency        |\n| :---------------- | :------------------------------------------------------ | :-------------------- |\n| `placeholder`     | First pass. Demo. Slide internal. No image budget yet.  | $0, <1s               |\n| `generate`        | Final delivery. Brand wants original collages.          | ~$0.40, ~6 min        |\n| `bring-your-own`  | User has art direction PNGs. Drop them at `assets_path`.| $0, 0s                |\n\nSet `inputs.imagery.strategy` accordingly.\n\n#### `placeholder` — frame mode\n\n```bash\nnpx tsx scripts/placeholder.ts <out>/assets/\n```\n\nWrites 16 `.svg` files (with `.png` aliases for compatibility) into\n`<out>/assets/`. Each placeholder shows the slot id, ratio, pixel\ndimensions, and the prompt hint from `image-manifest.json`. The\ncomposer's `<img src='./assets/hero.png'>` etc. just work.\n\n#### `generate` — gpt-image-2 mode\n\n```bash\nFAL_KEY=... npx tsx scripts/imagegen.ts <inputs.json> --out=<out>/assets/\n```\n\nCalls fal.ai's `openai/gpt-image-2` synchronous endpoint per slot.\nComposes prompts as: **style anchor** (paper-collage editorial system)\n+ **brand variables** (name / nav / headline / italic emphasis pulled\nfrom `inputs.json`) + **per-slot composition** (e.g. cropped plaster\nhead + tree growing through arch). Skips slots whose target file\nalready exists; pass `--force` to re-render.\n\nWithout `FAL_KEY`, the script prints the prompts so the operator can\nroute them through the `/gpt-image-fal` slash-command skill manually.\n\n#### `bring-your-own`\n\nDrop 16 PNGs matching `assets/image-manifest.json` filenames at\n`inputs.imagery.assets_path`. Done.\n\n### 3. Compose the artifact\n\n```bash\nnpx tsx scripts/compose.ts <inputs.json> <out>/index.html\n```\n\nThe composer reads `inputs.json` and `../styles.css`, then writes one\nself-contained HTML file. The page includes:\n\n- The full Atelier Zero stylesheet, inlined.\n- All section markup with `data-reveal` attributes for staggered\n  scroll motion.\n- Inline IntersectionObserver script (mirrors\n  `apps/landing-page/app/_components/reveal-root.tsx`).\n- Inline Headroom nav script (mirrors `header.tsx`).\n- Inline GitHub star-count fetcher (auto-detects from `brand.primary_url`).\n\n### 4. (Optional) Mirror the deployable Astro site\n\nFor deployable production output, **fork the `apps/landing-page/`**\npackage: copy it into your workspace, align `app/page.tsx` with content\nfrom your `inputs.json`, and copy your `<out>/assets/*.png` into the\npaths expected by `app/image-assets.ts` / R2 URLs. Build with\n`pnpm --filter @open-design/landing-page build` for a static `out/`\nexport ready for any CDN.\n\n> A future iteration may bundle a composer that emits the full\n> `apps/landing-page/` tree from `inputs.json` in one command. Until\n> then, fork-and-edit is the supported path.\n\n---\n\n## Self-check before delivering\n\nBefore marking done, the agent **must** verify:\n\n- [ ] `<out>/index.html` opens in a browser without console errors.\n- [ ] All 16 image slots load (no 404s in DevTools network tab).\n- [ ] Headline italic emphasis spans render in Playfair (not sans).\n- [ ] Coral terminating dots appear at every `display` h1/h2 end.\n- [ ] Scroll from top to bottom; every section animates in once.\n- [ ] Resize to 880px and 560px; no horizontal scroll, no overlap.\n- [ ] `prefers-reduced-motion: reduce` (DevTools → Rendering) disables\n      transitions cleanly.\n- [ ] Lighthouse: contrast AA, font-display swap, no layout shift on the\n      hero (CLS < 0.05).\n\n---\n\n## Files in this skill\n\n```text\nskills/open-design-landing/\n├── SKILL.md                 # this contract\n├── README.md                # quick-start\n├── schema.ts                # typed inputs (single source of truth)\n├── styles.css               # Atelier Zero stylesheet (single source of truth)\n├── inputs.example.json      # Open Design as the worked example\n├── example.html             # canonical rendering (regenerated from inputs.example.json)\n├── scripts/\n│   ├── compose.ts           # inputs.json + styles.css → index.html\n│   ├── imagegen.ts          # gpt-image-2 wrapper (fal.ai)\n│   └── placeholder.ts       # SVG paper-textured frames\n└── assets/\n    ├── *.png                # 16 collage plates (Open Design instance)\n    ├── image-manifest.json  # slot → file/dimensions/prompt mapping\n    └── imagegen-prompts.md  # human-readable prompt pack\n```\n\n---\n\n## Boundaries\n\n- **Do not** invent new colors or typefaces. Tokens live in\n  `design-systems/atelier-zero/DESIGN.md`; extend the design system\n  before adding a new ramp here.\n- **Do not** drop `data-reveal` attributes from generated markup.\n  Without them the page goes static and feels dead.\n- **Do not** wrap the composed HTML in a framework that injects its\n  own stylesheet ordering — Atelier Zero relies on stylesheet-order\n  cascade for paper texture and z-index of side rails.\n- **Do not** add a separate stylesheet file for the Astro landing-page\n  fork; copy `styles.css` verbatim into `app/globals.css` so visual parity\n  stays one-to-one.\n\n## See also\n\n- [`design-systems/atelier-zero/DESIGN.md`](../../design-systems/atelier-zero/DESIGN.md) — token spec.\n- [`apps/landing-page/`](../../apps/landing-page/) — deployable Astro static counterpart.\n- [`skills/open-design-landing-deck/`](../open-design-landing-deck/) — sibling slides skill that reuses this design system.","tags":["open","design","landing","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents"],"capabilities":["skill","source-nexu-io","skill-open-design-landing","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","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 (9,092 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.726Z","embedding":null,"createdAt":"2026-05-04T12:53:13.298Z","updatedAt":"2026-05-11T06:52:25.726Z","lastSeenAt":"2026-05-11T06:52:25.726Z","tsv":"'-2.0':393 '/../apps/landing-page':1112 '/../design-systems/atelier-zero/design.md':1108 '/assets':174,538,549,584,771 '/atelier-zero/design.md':1012,1107 '/gpt-image-fal':654 '/index.html':170,682,839 '/inputs.example.json':470 '/landing-page':788 '/nexu-io/open-design).':133 '/open-design-landing-deck':73,1118 '/styles.css':158,688 '0':500,526 '0.05':920 '0.40':509 '0s':527 '1':316,365 '1080':284 '1280':283 '16':104,166,540,665,848,982 '1s':501 '2':243,377,442,479,575,971 '3':217,394,399,674 '4':220,225,235,258,386,403,421,423,433,457,741 '404s':853 '5':228,249,372,398,418,431,445 '560':286 '560px':890 '6':429,510 '7':440 '8':204,453 '880':285 '880px':888 'aa':908 'accord':530 'ad':1018 'add':1077 'aesthet':29 'agent':39,140,297,836 'alias':545 'align':761 'alreadi':630 'also':1103 'anchor':597 'anim':883 'answer':346,363 'apach':392 'apartamento':23 'app/globals.css':1093 'app/image-assets.ts':778 'app/page.tsx':762 'appear':870 'apps/landing-page':754,810,1111 'apps/landing-page/app/_components/reveal-root.tsx':722 'arch':624 'ariti':439 'art':518 'artifact':162,677 'ask':307 'askquest':321 'asset':524,980 'assets/image-manifest.json':668 'astro':746,1084,1114 'ateli':18,77,702,942,1057 'attribut':713,1029 'auto':736 'auto-detect':735 'background':84,214 'badg':402 'bar':233 'bash':534,577,678 'bodi':428 'bottom':880 'boundari':998 'brand':46,318,331,366,378,505,603 'brand.primary':739 'breakpoint':287 'brief':47,149,332 'bring':513,661 'bring-your-own':512,660 'browser':843 'budget':498 'build':53,781,789 'bundl':803 'call':585 'canon':111,156,957 'capabilities.cards':420 'capabl':224 'card':226,229,245,424 'cascad':1064 'cdn':798 'check':829 'choos':487 'chunk':334 'class':9 'clean':905 'cls':919 'collag':26,106,508,600,983 'collect':329 'color':1003 'column':260,456 'command':657,816 'compat':547 'complet':299,473 'compos':151,566,593,675,684,805,1046 'compose.ts':963 'composit':616 'consol':845 'contact':384 'contain':173,694 'content':764 'contract':289,929 'contrast':907 'copi':315,756,769,1089 'coral':96,867 'cost':488 'count':203,401,733 'counterpart':1116 'crop':618 'cta':252,454 'dark':241 'data':452,711,1027 'data-rev':710,1026 'dead':1041 'decid':480 'deck':64,72 'default':391 'deliv':831 'deliveri':504 'demo':493 'deploy':161,745,749,1113 'descript':370 'design':3,31,51,70,79,113,130,477,787,951,986,1010,1015,1105,1125 'design-system':1009,1104 'detect':737 'devtool':855,901 'dimens':558 'direct':519 'disabl':903 'display':88,873,911 'done':673,834 'dot':93,98,417,869 'drop':521,664,1025 'dump':337 'e.g':617 'edit':822 'editori':13,25,58,188,601 'eight':354 'em':416 'email':254,385 'emit':807 'emphasi':91,609,860 'end':875 'endpoint':590 'entir':339 'equival':324 'error':846 'etc':568 'everi':272,872,881 'exampl':119,475,955 'example.html':956 'exist':631 'expect':776 'export':794 'extend':1013 'fal':578,639 'fal.ai':586,973 'feel':1040 'fetcher':734 'field':361 'file':184,542,629,696,921,1081 'file/dimensions/prompt':990 'filenam':669 'fill':40,141 'filter':230,784 'final':503 'first':491 'fix':438 'fixed-ar':437 'focus':311 'font':910 'font-display':909 'footer':256,455 'forc':633 'fork':752,820,1088 'fork-and-edit':819 'four':292 'frame':532,979 'framework':1050 'full':701,809 'fulli':137,280 'futur':800 'gather':317 'generat':502,571,1031 'get':180 'github':201,730 'github.com':132 'github.com/nexu-io/open-design).':131 'glyph':251,375,447 'goe':1037 'gpt':573,969 'gpt-imag':572,968 'grid':436 'group':356,359 'grow':622 'h1/h2':874 'hairlin':94 'head':620 'header.tsx':728 'headlin':406,412,467,607,858 'headroom':195,724 'headroom-styl':194 'hero':215,404,918 'hint':562 'horizont':892 'html':183,695,1047 'huge':261 'human':994 'human-read':993 'id':555 'imag':167,482,497,574,849,970 'image-manifest.json':564,988 'imagegen-prompts.md':992 'imagegen.ts':967 'includ':699 'index':222,1071 'index.html':966 'inject':1052 'inlin':449,705,718,723,729 'input':319,936 'inputs.example.json':469,949,961 'inputs.imagery.assets':671 'inputs.imagery.strategy':529 'inputs.json':43,144,164,348,612,686,767,813,964 'instanc':987 'inter':85 'intern':495 'intersectionobserv':274,719 'invent':314,1001 'issu':191 'ital':89,263,608,859 'italic-serif':262 'iter':801 'json':154 'key':579,640 'kicker':265,461 'lab':227 'label':405 'labs.cards':430 'land':4,14,52,59,71,1086 'landing-pag':1085 'languag':21,192 'latenc':489 'layout':914 'lead':407 'licens':379,390 'lighthous':906 'like':465 'link':259 'live':200,1007 'load':851 'locat':371 'manual':659 'map':344,991 'mark':368,373,833 'market':36,115 'marketing-pag':114 'markup':708,1032 'match':349,667 'may':802 'mega':458,460 'method':234 'method.steps':432 'min':362,511 'mirror':721,727,743 'mixedtext':414,464 'mode':533,576 'monocl':22 'motion':102,270,279,717,899 'move':303 'must':837 'name':367,605 'nav':198,395,606,725 'network':856 'new':1002,1020 'note':364 'npx':535,580,679 'num':425 'number':205 'numer':208 'one':142,691,815,1099,1101 'one-to-on':1098 'open':2,30,50,69,112,129,468,476,786,840,950,985 'open-design':128,785 'open-design-land':1,49 'open-design-landing-deck':68 'openai/gpt-image-2':588 'oper':648 'option':400,742 'optional':48 'order':295,358,1056,1063 'origin':507 'output':120,751 'overlap':895 'pack':997 'packag':755 'page':12,57,116,124,698,1036,1087 'paper':83,212,599,977,1066 'paper-collag':598 'paper-textur':211,976 'parameter':138 'pariti':1096 'partner':250,446 'pass':492,632 'path':451,525,672,775,826 'per':591,614 'per-slot':613 'pill':231,255 'pixel':557 'placehold':490,531,551 'placeholder.ts':974 'plaster':619 'plate':107,984 'playfair':87,864 'png':175,544,772,981 'pngs':520,666 'pnpm':783 'prefer':277,306,897 'prefers-reduced-mot':276,896 'primari':382,408 'print':643 'produc':5 'product':750 'progress':232 'prompt':561,594,645,996 'pull':247,610 'question':312,355 'quick':932 'quick-start':931 'quot':248 'r2':779 'rail':1074 'ramp':1021 'ratio':556 're':636 're-rend':635 'read':685 'readabl':995 'readi':795 'readme.md':930 'recip':117 'reduc':278,898,900 'regener':959 'reli':1059 'render':637,862,902,958 'requir':389 'resiz':886 'respect':275 'respons':281 'reus':1123 'reveal':101,269,712,1028 'ribbon':253 'ring':219 'roman':207 'roman-numer':206 'rout':650 'rule':95 'run':290 'san':415,866 'schema':360 'schema.ts':340,934 'script':642,720,726,962 'scripts/compose.ts':169,681 'scripts/imagegen.ts':582 'scripts/placeholder.ts':537 'scroll':100,268,716,876,893 'scroll-rev':99,267 'secondari':409 'section':209,273,707,882 'see':65,126,1102 'select':239 'self':172,693,828 'self-check':827 'self-contain':171,692 'separ':1079 'serif':90,264 'set':528 'shape':352 'shift':915 'show':552 'sibl':67,1119 'side':1073 'singl':11,56,182,374,937,945 'single-pag':10,55 'site':15,60,747 'skill':74,135,658,924,1121 'skill-open-design-landing' 'skill.md':927 'skills/open-design-landing':926 'skills/open-design-landing-deck':1117 'skip':625 'slab':242 'slash':656 'slash-command':655 'slide':63,494,1120 'slot':168,554,592,615,626,850,989 'sourc':938,946 'source-nexu-io' 'span':92,861 'spec':1110 'stagger':715 'star':202,732 'star-count':731 'start':933 'stat':218,410 'static':792,1038,1115 'stay':1097 'step':221,236,293,301 'sticki':197 'strategi':483,484 'strip':193 'style':196,596 'styles.css':157,165,941,965,1090 'stylesheet':704,944,1055,1062,1080 'stylesheet-ord':1061 'support':825 'surfac':37 'surreal':105 'svg':177,450,541,975 'swap':912 'synchron':589 'system':80,602,1011,1016,1106,1126 'tab':857 'tag':426 'taglin':369 'target':628 'termin':97,868 'testimoni':246,443 'text':163,925 'textur':213,978,1067 'thumbnail':238 'tight':86 'tilt':244 'titl':427 'token':1006,1109 'top':878 'topbar':189 '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' 'transit':904 'tree':621,811 'truth':940,948 'tsx':536,581,680 'turn':152 'type':42,143,351,935 'typefac':1005 'ui':327 'url':383,387,740,780 'use':32,320 'user':147,309,343,516 'variabl':604 'verbatim':1091 'verifi':838 'version':380 'visual':20,1095 'volum':190 'want':506 'warm':82 'warm-pap':81 'whose':627 'without':638,844,1033 'word':266 'work':240,474,570,954 'work.cards':441 'workflow':288 'workspac':760 'world':8 'world-class':7 'wrap':1044 'wrapper':972 'write':539,690 'year':381 'yet':499 'z':1070 'z-index':1069 'zero':19,78,703,943,1058 'étude':24 'ø':376","prices":[{"id":"ec32612e-687d-47fc-ad93-9569343d9e18","listingId":"dbcaaee4-e2da-4573-bf39-a0d26fb3296d","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.298Z"}],"sources":[{"listingId":"dbcaaee4-e2da-4573-bf39-a0d26fb3296d","source":"github","sourceId":"nexu-io/open-design/open-design-landing","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/open-design-landing","isPrimary":false,"firstSeenAt":"2026-05-04T12:53:13.298Z","lastSeenAt":"2026-05-11T06:52:25.726Z"}],"details":{"listingId":"dbcaaee4-e2da-4573-bf39-a0d26fb3296d","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"open-design-landing","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":"14544a0c569906096bc29ae6a40e67a620246bbe","skill_md_path":"skills/open-design-landing/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/open-design-landing"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"open-design-landing","description":"Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in `apps/landing-page/`. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/open-design-landing"},"updatedAt":"2026-05-11T06:52:25.726Z"}}