Skip to content
Get packs

Editorial Landing Page Builder

Builds a single-page editorial landing site in the Atelier Zero style from a brand brief.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
10 files

What it does

Once installed, the agent can turn a short brand brief into a finished, self-contained HTML landing page with a magazine-style layout: warm paper background, serif italic accents, numbered sections, and scroll animations. It first gathers brand details (name, tagline, navigation, sections) into a structured inputs file, then runs a script that assembles the page. It can fill the 16 decorative collage images either with placeholder graphics (no cost) or with AI-generated images via the fal.ai or Azure image services.

Great for

  • Founders or small studios who want a polished one-page marketing site quickly
  • Designers who want a consistent editorial starting point they can edit as HTML
  • Open-source maintainers building a project landing page

Skip it if

  • Complex multi-page web apps, since it produces one static page (reason: the output format is a single HTML file)
  • Teams needing a strict brand that differs from the Atelier Zero look (reason: the layout and styling are fixed by the design system)
  • Users who generate images with a paid key without watching the cost (reason: a full image run is roughly $0.40 and calls an external API)

Try asking

  • “Build me an editorial landing page for my indie app with a coral accent and three stats, using the placeholder image strategy”
  • “Create a magazine-style one-page site for my open-source project with a hero collage and a closing call to action”
  • “Generate a landing page for my design studio using AI-generated collage images”
Step-by-step guide: how to use Editorial Landing Page BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 10 original files, the Apache-2.0 licence and an attribution note.

    open-design-landing.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip open-design-landing.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip open-design-landing.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Use the placeholder image strategy first to check the layout before spending money on generated images
  • Provide accurate brand copy, URLs and contact details, since the agent is told to ask rather than invent content
  • Review the generated index.html in a browser at several screen widths before publishing

What's inside

  • assets/image-manifest.json
  • assets/imagegen-prompts.md
  • inputs.example.json
  • README.md
  • schema.ts
  • scripts/compose.ts
  • scripts/imagegen.ts
  • scripts/placeholder.ts
  • SKILL.md
  • styles.css

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.