Guide · Agent skill
How to use the Editorial Landing Page Builder agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The open-design-landing skill lets an AI agent turn a short brand brief into a finished, single-file HTML landing page with a magazine-style layout. It is aimed at founders, small studios, designers and open-source maintainers who want a polished one-page marketing site without building it from scratch. By the end of this guide you will know what an agent skill is, how to install this one, how to ask for a page in plain language, and what it needs to run.
Editorial Landing Page Buildernexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Install the skill. Download the ZIP from the skill page and unzip it into ~/.claude/skills/, or into .claude/skills/ inside your project. Alternatively, upload the ZIP under Settings, Capabilities, Skills in the Claude apps.
- 2Check the requirements. Make sure Node.js with npx and tsx is available for the TypeScript scripts. Only add FAL_KEY or Azure credentials if you plan to generate images.
- 3Describe your brand. Ask the agent for a landing page and give it your brand name, tagline, navigation and key sections. Answer its follow-up questions in the order it asks them.
- 4Pick an image strategy. Choose placeholder for a free first pass, generate for final AI-made collages, or bring-your-own if you already have 16 PNG files.
- 5Let the agent build the page. The agent fills an inputs file and runs the composer, which writes index.html and the assets folder.
- 6Open and review the output. Open index.html in a browser and check the content, layout and responsiveness. Ask the agent for changes to the inputs and rebuild.
What is an agent skill?
An agent skill is a folder of instructions and supporting files that an AI agent can load when a task matches it. The main file is SKILL.md, which tells the agent when to use the skill and how to work through the task. Other files in the folder, such as scripts and templates, give the agent tools to do the work.
This skill is designed for Claude-style agents. Once it is installed, you do not run it like a normal program. You describe what you want in ordinary language and the agent decides to use it.
What the skill makes the agent do
The agent first gathers brand details such as name, tagline, navigation links and sections. It writes these into a structured inputs file, which follows a typed schema. It then runs a script that assembles the page into one self-contained HTML file with the CSS inlined.
The page uses a warm paper background, serif italic accents, numbered sections and scroll animations. The skill also handles the 16 decorative collage images. You can fill them with placeholder graphics at no cost, or with AI-generated images through the fal.ai or Azure image services.
- Output: one standalone index.html file, with images in an assets folder.
- Sections include a hero, about block, capability cards, labs, method steps, selected work, a testimonial, a closing call to action and a footer.
- The layout and styling are fixed by the Atelier Zero design system, so you edit content rather than the look.
Install the skill
Option one is to download the ZIP from the skill's page and unzip it into your personal skills folder, ~/.claude/skills/. To make it available only inside one project, unzip it into that project's .claude/skills/ folder instead.
Option two is to upload the ZIP in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload the skill there.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills
Ask for a landing page in plain language
You do not need a special command. Ask for a landing page, editorial site or magazine-style layout and include your brand details. The agent will ask focused questions in groups, such as brand identity, navigation, hero copy and footer, rather than dumping the whole schema on you.
Say which image strategy you want. Placeholder is the default and costs nothing. If you want generated collage images, say so explicitly, since that uses an external image service.
- Trigger phrases from the skill include landing page, editorial site, magazine layout, hero collage and atelier zero.
- Give the brand name, a one-line tagline, the accent colour you want and any key numbers you want shown.
- Mention any links you need, such as a repository or primary URL, since the brief asks for one.
Run the scripts to build the page
The skill ships with scripts written in TypeScript. The README shows the basic flow: create placeholder images, compose the HTML from an inputs file, then open the result in your browser. The agent normally runs these for you, but you can run them yourself to check the output.
The commands below come from the skill's README. Run them from the skill folder, with Node.js and npx available.
- Create placeholder images in ./out/assets/
- Compose the page from inputs.example.json into ./out/index.html
- Open ./out/index.html in your browser
npx tsx scripts/placeholder.ts ./out/assets/
npx tsx scripts/compose.ts inputs.example.json ./out/index.html
open ./out/index.htmlChoose an image strategy and check costs
The image strategy controls the 16 collage slots. Placeholder writes paper-textured frames with no image cost and returns almost immediately. Generate calls an external image service for all 16 slots. Bring-your-own uses PNG files you have already created and placed in the assets path.
A full generate run is roughly $0.40 and takes about six minutes according to the skill's notes. Check your provider account before running it repeatedly.
- placeholder: no cost, fast, good for first drafts and demos
- generate: roughly $0.40 and about six minutes per full run, calls fal.ai or Azure
- bring-your-own: no cost, you supply the PNG files
Safety notes: scripts and network access
This skill runs scripts and, when you choose generation, makes network requests to an image provider. Read the scripts in the scripts folder before running the skill on a machine with sensitive data, and confirm you are comfortable with the image calls it makes.
Generation needs credentials. FAL_KEY is required for the fal provider. Azure image credentials are required only if you choose Azure. Keep these keys out of shared project files and out of the page you publish.
- Runs scripts: yes, the TypeScript files under scripts/
- Uses network: yes, only when image generation is chosen
- Keep FAL_KEY or Azure credentials in environment settings, not in committed files
What people use it for
- A founder launching a one-page marketing site for an app beta, using placeholder images first.
- A design studio creating an editorial starting page that a designer can then edit as HTML.
- An open-source maintainer producing a project landing page with a repository link and a short feature list.
- A team testing a layout quickly with placeholders before deciding whether to pay for generated collage images.
Frequently asked questions
Is the open-design-landing skill free?
The skill is published under the Apache-2.0 licence. Placeholder images cost nothing, but generated images use a paid external image service and a full run is roughly $0.40 according to the skill's notes.
What do I need to install open-design-landing?
You need the skill folder placed in ~/.claude/skills/ or a project's .claude/skills/ folder, or uploaded in the Claude apps. To run the scripts you need Node.js with npx and tsx. FAL_KEY or Azure credentials are only needed for generated images.
Do I need an API key to use it?
No, not for placeholder images. A FAL_KEY from fal.ai is required only when the image strategy is generate with the fal provider, and Azure image credentials are required only when Azure is chosen.
Can it build a multi-page website?
No. The skill produces one static HTML page, so it is not suited to complex multi-page web apps. Use it for one-page marketing sites.
Can I change the colours and fonts?
The layout and styling are fixed by the Atelier Zero design system. If your brand must differ from that look, pick a different tool or edit the generated HTML by hand afterwards.
What should I do if the page does not render or the images are missing?
Check that the placeholder script ran and wrote files to the assets folder, and that index.html sits next to it. If you chose generate, confirm your FAL_KEY or Azure credentials are set and that the provider account has budget.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a polished one-page editorial marketing site quickly and are happy to edit the resulting HTML. Pick something else if you need a multi-page app, a custom brand look that departs from the Atelier Zero style, or if you do not want to pay for or manage image API keys.
Download the skill