Guide · Agent skill
How to use the SaaS Landing Page Builder agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The saas-landing skill is a set of instructions that teaches an AI agent to build a complete marketing page for a software product. It is for designers, product teams and developers who want a quick, brand-consistent landing page draft. After this guide you will know how to install the skill, what it needs from your project, how to ask for a page in plain language, and what you get back.
SaaS Landing Page Buildernexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download and unzip the skill. Download the skill ZIP from the page and unzip it into ~/.claude/skills/ or into a project's .claude/skills/ folder.
- 2Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 3Add a DESIGN.md file. Place a DESIGN.md file with color, typography and layout tokens in the folder where you will run the agent.
- 4Ask for a landing page. Use a trigger phrase such as 'saas landing' or 'product landing' and give the product name and tagline.
- 5Set optional inputs. Decide whether to include pricing, how many proof items to show, and adjust hero spacing or accent strength if needed.
- 6Open and review index.html. Open the generated index.html in a browser, check the copy and colors against your brand, and make changes before sharing it.
What does the saas-landing skill make the agent do?
When the skill is active, the agent writes a single-page marketing site for a software product. The page includes a hero section, feature tiles, social proof, optional pricing, a call-to-action band and a footer. The result is one file, index.html, with all CSS inlined in a style block.
Before writing anything, the agent reads a DESIGN.md file in the current working folder and uses only the colors, fonts and layout rules declared there. If that file is missing, the skill tells the agent to stop and ask for one rather than invent a style.
- Output: one self-contained index.html file
- Sections in order: hero, features, social proof, pricing, footer CTA, footer
- Colors, typography and layout come from your DESIGN.md, not from guesses
- Static HTML only: no external JavaScript
How do you install the saas-landing skill?
Download the ZIP for the skill from the page where you found it, then unzip it. You can place it in one of two locations. A personal install goes in ~/.claude/skills/, which makes the skill available across your projects. A project install goes in the .claude/skills/ folder inside a specific project, which makes it available only there.
If you use the Claude apps instead of a local folder, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal: unzip into ~/.claude/skills/
- Single project: unzip into .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
What do you need before the skill will work?
You need two things. The first is a DESIGN.md file in the folder where you run the agent. It should declare color, typography and layout tokens, because the skill reads these and will not produce a page without them. The second is an agent runtime that can write files, since the skill declares file write as a required capability.
The Open Design app is optional. The source says it adds preview and comment mode, but the skill also works without it.
- A DESIGN.md file in the current working directory with color, typography and layout tokens
- An agent runtime with file write capability
- Optional: the Open Design host app for preview and comment mode
How do you trigger the skill with a natural request?
The skill responds to phrases that contain its trigger keywords: 'saas landing', 'marketing page' and 'product landing'. Put the keyword in your request together with the product name and tagline, since those are the two required inputs.
Ask for the page in plain language and say what the product is. The agent will then follow the skill's workflow: read DESIGN.md, plan the sections, apply the design tokens, write index.html and check its own work.
- Create a saas landing page for Acme Notes, tagline: Meeting notes that write their own follow-ups.
- Build a product landing page for our invoicing tool using the DESIGN.md in this folder.
- Make a marketing page for the analytics app, no pricing section.
Which inputs and settings can you control?
The skill accepts a few inputs. product_name and tagline are required. has_pricing is on by default, and you can turn it off to drop the pricing section. proof_count sets how many logos or testimonials appear in the social proof section, from 0 to 6, with a default of 3. If you set it to 0, that section is skipped.
Two visual parameters are also available. hero_density sets the hero's vertical padding in pixels, with a default of 96 and a range of 48 to 200. accent_strength sets the accent opacity, with a default of 1.0 and a range of 0.5 to 1.0.
- product_name (required, text)
- tagline (required, text)
- has_pricing (yes or no, default yes)
- proof_count (0 to 6, default 3)
- hero_density (48 to 200 pixels, default 96)
- accent_strength (0.5 to 1.0, default 1.0)
What are the safety notes for this skill?
The skill runs no scripts and makes no network calls, according to its listing. Its only declared capability is writing files. The output is a static HTML page with no external JavaScript, so it does not send data anywhere when you open it.
The skill also restricts what the agent writes. It asks for a single index.html file and says not to create separate CSS, JavaScript or README files. Review the file before publishing, since the copy is generated and may need your own facts, prices and claims.
- Runs scripts: no
- Uses network: no
- Writes only index.html
- Review generated copy, prices and claims before publishing
What people use it for
- A designer turns an existing brand file into a quick product landing page draft for stakeholder review.
- A developer gets a clean starter HTML page to hand over at the start of a product launch.
- A marketer prototypes a product page before asking a developer to build the production version.
- A product team creates a page without pricing by setting has_pricing to off.
Frequently asked questions
Is the saas-landing skill free to use?
The skill is licensed under Apache-2.0, as stated on its listing. Check the license file included with the download for the full terms before using it in a commercial project.
What do I need to install the saas-landing skill?
Download the ZIP, unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings, Capabilities, Skills in the Claude apps. You also need a DESIGN.md file in your working folder and an agent that can write files.
Why won't the skill generate a page without DESIGN.md?
The skill is written to read DESIGN.md first and to stop and ask for one if it is missing. It uses only the colors, fonts and layout rules declared in that file, so without it there is nothing to match.
Can I use the saas-landing page for a production website with forms or analytics?
No. The skill produces static HTML and explicitly forbids external JavaScript, so it does not include backends, forms or analytics. Use the output as a draft or starter page and add those features with other tools.
Does the skill need the Open Design app?
No. Open Design is an optional host app that adds preview and comment mode. The skill also works without it.
Does the skill run scripts or access the internet?
According to its listing, it runs no scripts and makes no network calls. Its declared capability is file writing only.
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 already have a DESIGN.md brand file and want a fast, on-brand landing page draft that you can hand to a developer or review yourself. Pick something else if you need a production site with forms, analytics, a backend or dynamic JavaScript, because this skill only writes static HTML.
Download the skill