Agent skill · design visual · nexu-io
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".
Why this skill is useful
Provides a structured workflow for generating a SaaS landing page that adheres to specific design tokens and principles, which the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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: 1. Hero — logo-or-wordmark, headline (tagline input), subhead (1–2 sentences), primary CTA, secondary CTA. Use the herodensity parameter as vertical padding in px. 2. Features — 3–6 feature tiles. Each: icon, short title, 1–2 sentence body. 3. Social proof — proofcount logos or testimonials. If 0, skip this section. 4. Pricing — 2–3 tiers. Include only if haspricing is true. 5. Footer CTA — large accent-colored band with one-button call to action. 6. 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 productname and tagline inputs; generate plausible specific copy for the rest). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/saas-landing--8958f7