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 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.
Profile →npx skills add nexu-io/open-design --skill open-design-landing --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# open-design-landing Build a single-page editorial landing site (or a slide deck — see the sibling [`open-design-landing-deck`](../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 Open Design marketing-page recipe — the example output is the very page you see at [open-design](https://github.com/nexu-io/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`](./styles.css) into a deployable artifact. ```text inputs.json + styles.css 16 image slots │ │ └──────────► scripts/compose.ts ◄────────────┘ │ ▼ <out>/index.html (self-contained) <out>/assets/ (PNG or SVG) ``` --- ## 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,
- What you get
- Workflow contract
- 1. Gather brand inputs
- 2. Decide the image strategy
- 3. Compose the artifact
- 4. (Optional) Mirror the deployable Astro site
- Self-check before delivering
- Files in this skill
- Boundaries
- See also
npx tsx scripts/placeholder.ts <out>/assets/ npx tsx scripts/compose.ts <inputs.json> <out>/index.html
What does the open-design-landing skill do?
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.
How do I install it?
Run `npx skills add nexu-io/open-design --skill open-design-landing --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.