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 fully automated workflow for generating a self-contained HTML landing page with specific design aesthetics and image generation capabilities.
What it needs
Requires node installed locally. Requires azure, fal account access. 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