Skip to content
Skillpedia
PT
Interfaces (UI/UX)101k · #486

open-design-landing

Has your agent create a single-page website with an editorial and collage look. It's useful for presenting a brand or product in a unique and attractive way. It creates a visually striking website.

What it does

Creates a single-page website with a sleek editorial look, inspired by magazines. It uses a specific design called 'Atelier Zero' with elements like a paper background, distinct fonts, and collage images.

When to use it

  • ✓Launching a new product or service.
  • ✓Showcasing a portfolio of work.
  • ✓Creating a marketing page for a brand.

Example of what to ask your AI

“I want to create a landing page for my artisanal coffee brand, named 'Golden Bean'. I need an editorial look that conveys sophistication and quality.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/nexu-io/open-design/blob/main/design-templates/open-design-landing/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/design-templates/open-design-landing/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
View on GitHub ↗Raw file
How it works

You provide me with information about your brand and what you want to highlight. The AI then uses this information to assemble the content and optionally creates unique collage-style images to make the site even more special.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add nexu-io/open-design --skill open-design-landing

Or download just the file:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/open-design-landing/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

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.

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, 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.

The eight question groups, in order:

Group Schema fields Min answers Notes
1 brand.{name,mark,tagline,description,location} 5 Mark = single glyph (Ø, ▲, ★…)
2 brand.{license,version,year,primary_url,contact_email} 4 URL is required; license defaults Apache-2.0
3 nav[] (up to 5) 3 Optional count badges
4 hero.{label,headline,lead,primary,secondary,stats} All Headline as MixedText (sans+em+dot)
5 about + capabilities.cards[4] All 4 cards × {num,tag,title,body}
6 labs.cards[5] + method.steps[4] All Both grids fixed-arity
7 work.cards[2] + testimonial All 5 partner glyphs as inline SVG path data
8 cta + footer.{columns[4],mega} All Mega kicker is a MixedText like the headlines

Open inputs.example.json for a complete worked example (OpenDesign itself).

2. Decide the image strategy

Strategy When to choose Cost / latency
placeholder First pass. Demo. Slide internal. No image budget yet. $0, <1s
generate Final delivery. Brand wants original collages. ~$0.40, ~6 min
bring-your-own User has art direction PNGs. Drop them at assets_path. $0, 0s

Set inputs.imagery.strategy accordingly.

placeholder — frame mode

npx tsx scripts/placeholder.ts <out>/assets/

Writes 16 .svg files (with .png aliases for compatibility) into <out>/assets/. Each placeholder shows the slot id, ratio, pixel

…

FAQ

What is 'Atelier Zero'?

It's a visual design style that uses a paper-like background, specific fonts (Inter Tight and Playfair Display), emphasis on italic text, dotted lines, coral terminating dots, subtle animations, and surreal collages.

Do I need to have images ready?

Not necessarily. You can ask the AI to generate 16 unique collage images for you, use images you already have, or use placeholder images while you decide.

Is the website responsive?

Yes, the website is fully responsive, meaning it adapts well to different screen sizes, such as desktops, tablets, and mobile phones.

Details

Original description by the author

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.

repo: nexu-io/open-design

Popularity

GitHub stars
101k
Ranking position
#486
License
Apache-2.0
Updated
10/16/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

General coding101k

sample-plugin

Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.

nexu-io/open-design

Branding101k

aster-atelier

Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.

nexu-io/open-design

Audio & voice101k

audio-jingle

Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.

nexu-io/open-design

Writing101k

blog-post

Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.

nexu-io/open-design

Similar skills

Interfaces (UI/UX)280k

accessibility

Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.

affaan-m/ECC

Interfaces (UI/UX)280k

design-system

Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.

affaan-m/ECC

Interfaces (UI/UX)280k

liquid-glass-design

Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.

affaan-m/ECC