Agent skill · design visual · nexu-io
open-design-landing
Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic OpenDesign 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. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.
Why this skill is useful
Adds a pure-function composer that generates a self-contained HTML file and automates asset generation, providing new capabilities for landing page creation.
What it needs
Requires node installed locally. About 6k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
open-design-landing Build a single-page editorial landing site (or a slide deck — see the sibling open-design-landing-deck skill) in the Atelier Zero design system: warm-paper background, Inter Tight + Playfair Display, italic serif emphasis spans, dotted hairline rules, coral terminating dots, scroll-reveal motion, and 16 surreal collage plates. This is the canonical OpenDesign marketing-page recipe — the example output is the very page you see at open-design. The skill is fully parameterized. The agent fills one typed inputs.json from the user's brief; the composer turns that JSON + the canonical styles.css into a deployable artifact. --- What you get A single HTML file with all of: Editorial topbar (volume / issue / language strip), Headroom-style sticky nav with live GitHub star count. 8 numbered Roman-numeral sections with paper-textured background: hero (with 3 stat rings + 4-step index), about, capabilities (4 cards), labs (5 cards + filter pills + progress bar), method (4 steps with thumbnails), selected work (dark slab + 2 tilted cards), testimonial (pull quote + 5 partner glyphs), CTA (ribbon + email pill). Footer with 4 link columns + huge italic-serif kicker word. Scroll-reveal motion on every section (IntersectionObserver, respects prefers-reduced-motion). Fully responsive at 1280 / 1080 / 880 / 560 breakpoints. --- Workflow contract Run these four steps in order. The agent should complete each step before moving on, and prefer asking the user a focused question over inventing copy. 1. Gather brand inputs Use AskQuestion (or the equivalent in your UI) to collect the brand brief in chunks; do not dump the entire schema.ts on the user. Map their answers into inputs.json matching the typed shape. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/open-design-landing--1a74c3