Saas Landing

Generates a complete single-page SaaS landing with hero, features, social proof, pricing tiers, and footer CTA. The whole thing lives in one self-contained HTML file with inlined CSS. It reads your project's DESIGN.md to pull color tokens, typography, and layout rules instead of inventing its own style, so the output actually matches your design system. You get sliders for hero spacing and accent strength, plus inputs for product name, tagline, and how many proof logos to show. Good for prototyping a marketing page fast or scaffolding something you'll hand off to a designer. It skips lorem ipsum and generates plausible copy, which saves you one annoying step.

skills.sh installs: 277
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill saas-landing --agent claude-code

Installs into .claude/skills of the current project.

Files

SaaS Landing Skill

Produce a single-page SaaS landing. Agent, follow this workflow exactly.

1. Read context

Before writing anything:

Read DESIGN.md in 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_count logos or testimonials. If 0, skip this section.
Pricing — 2–3 tiers. Include only if has_pricing is true.
Footer CTA — large accent-colored band with one-button call to action.
Footer — minimal: links + copyright.