saas-landing
Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".
Install / Use
npx skills add nexu-io/open-design --skill saas-landingInstalls into whichever agent you are using.
SKILL.md
Installable skill definition
Quality Score
Category
DesignSupported Platforms
Our assessment of saas-landing
saas-landing scores 90/100 on our quality scale, 31st of 133 Design skills we index (top 24%).
Its SKILL.md is 4.5 KB long, well organised into 8 sections with 1 code example: a solid amount of guidance for an agent.
With 97,896 GitHub stars, it is one of the more widely adopted skills in the catalogue.
Maintenance, license and trust
- The repository was last updated today, so saas-landing is actively maintained.
- It is released under the Apache-2.0 license, a permissive license that allows use, modification and commercial use with attribution.
- Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.
saas-landing compared with similar skills
All 4 of these similar skills score higher than saas-landing; compare them before choosing.
| Skill | Score | Stars | Updated | Format |
|---|---|---|---|---|
| saas-landing (this skill)by nexu-io | 90 | 97.9k | today | SKILL.md |
| algorithmic-artby anthropics | 100 | 177.9k | 2d ago | SKILL.md |
| pptxby anthropics | 100 | 177.9k | 2d ago | SKILL.md |
| designby nextlevelbuilder | 100 | 130.2k | 3d ago | SKILL.md |
| ui-ux-pro-maxby nextlevelbuilder | 100 | 130.2k | 3d ago | SKILL.md |
Frequently asked questions
- How do I install saas-landing?
- Run
npx skills add nexu-io/open-design --skill saas-landing. The install tabs above show the steps for each supported agent. - Which AI agents does saas-landing work with?
- It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
- Is saas-landing safe to use?
- It is Apache-2.0-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
- Is saas-landing still maintained?
- The repository was last updated today, so saas-landing is actively maintained.
Skill content
View source on GitHubname: saas-landing description: | Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing". triggers:
- "saas landing"
- "marketing page"
- "product landing"
od:
mode: prototype
platform: desktop
scenario: marketing
preview:
type: html
entry: index.html
reload: debounce-100
design_system:
requires: true
sections: [color, typography, layout, components]
craft:
requires: [typography, color, anti-ai-slop, laws-of-ux]
inputs:
- name: product_name type: string required: true
- name: tagline type: string required: true
- name: has_pricing type: boolean default: true
- name: proof_count type: integer default: 3 min: 0 max: 6 parameters:
- name: hero_density type: spacing default: 96 range: [48, 200]
- name: accent_strength type: opacity default: 1.0 range: [0.5, 1.0] outputs: primary: index.html capabilities_required:
- file_write
SaaS Landing Skill
Produce a single-page SaaS landing. Agent, follow this workflow exactly.
1. Read context
Before writing anything:
- Read
DESIGN.mdin the current working directory. If missing, stop and ask for one. - Identify the color palette, typography tokens, and layout principles.
- Note the "Agent Prompt Guide" section — it overrides any instruction here if they conflict.
2. Plan sections
Required sections, in order:
- Hero — logo-or-wordmark, headline (tagline input), subhead (1–2 sentences), primary CTA, secondary CTA. Use the hero_density parameter as vertical padding in px.
- Features — 3–6 feature tiles. Each: icon, short title, 1–2 sentence body.
- Social proof —
proof_countlogos or testimonials. If 0, skip this section. - Pricing — 2–3 tiers. Include only if
has_pricingis true. - Footer CTA — large accent-colored band with one-button call to action.
- Footer — minimal: links + copyright.
3. Apply design system
- All colors must come from DESIGN.md tokens. Do not invent hex values.
- Typography: use the declared display font for headlines, body font for everything else.
- Layout: respect the grid, max-width, and section spacing rules.
- Components: use declared button/card/input patterns. Do not add shadows if DESIGN.md's Depth & Elevation says minimal.
- Accent: use the accent color only once in the hero, once in the footer CTA, and for all links. Do not flood the page.
4. Write the file
Output a single self-contained index.html with:
- All CSS inlined in a
<style>block in<head>. - System font fallbacks if DESIGN.md fonts aren't loadable from Google Fonts etc.
- No external JS.
- Semantic HTML (
<header>,<main>,<section>,<footer>). - Each editable element tagged with
data-od-id="<unique-slug>"so the host app's comment mode can target it.
5. Self-check
Before finishing, verify:
- [ ] All text is content-meaningful, not lorem ipsum (use product_name and tagline inputs; generate plausible specific copy for the rest).
- [ ] No broken color references (every CSS color value is in DESIGN.md's palette or a valid alpha/fallback variant).
- [ ] Responsive breakpoints match DESIGN.md's Responsive Behavior section.
- [ ] The page looks good at 1440w, 768w, and 375w (mentally simulate).
- [ ] Accent used no more than twice total.
6. Done
Write only index.html. Do not generate a separate CSS file, JS file, or README.
For skill authors reading this as a reference
This is a minimal but complete skill. Structure:
saas-landing-skill/
├── SKILL.md ← you are here
└── assets/
└── base.html (optional starter template; this skill doesn't use one)
Things to notice:
- The
od:front-matter block is optional for Claude-Code-only compatibility, but adding it lights up OD's typed inputs, sliders, preview metadata, and capability gating. - The workflow below the front-matter is plain Markdown that the agent reads as its system prompt.
- DESIGN.md is treated as a collaborator, not an override. The skill gives the agent authority to override when the brief conflicts, but never to invent new tokens.
data-od-idtagging is how we wire elements to comment mode. Skills that want comment-mode compatibility must annotate their output.
See ../../docs/skills-protocol.md for the full protocol.
Related Skills
algorithmic-art
177.9kCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
pptx
177.9kUse this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an em…
design
130.2kComprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG…
ui-ux-pro-max
130.2kUI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation.
Languages
Trust signals
From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.