skills.rest
junainfinity
junainfinityCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

saas-landing

Generate a design-system-compliant SaaS landing page as a single index.html from a brief.

Updated Aug 23, 2026
Search Tags:#marketing#prototype#ux#saas#design-system#landing
One-click install
npx skills add https://github.com/junainfinity/osmDesign --skill saas-landing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: saas-landing
Source: https://github.com/junainfinity/osmDesign/tree/main/docs/examples/saas-landing-skill
Command: npx skills add https://github.com/junainfinity/osmDesign --skill saas-landing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly produce a polished, design-system-compliant SaaS landing page from a minimal brief, saving time on layout decisions and ensuring token-consistent visuals across tokens defined in DESIGN.md.

Core Features & Use Cases

  • Hero section with logo/wordmark, headline, subhead, primary CTA, and secondary CTA.
  • Features section comprising 3–6 tiles with icons, concise titles, and short descriptions.
  • Social proof section powered by a configurable number of logos or testimonials (controlled by proof_count).
  • Pricing section with 2–3 tiers when has_pricing is true.
  • Footer CTA and minimal footer with essential links.

Quick Start

Provide the product_name and tagline inputs to generate index.html for the SaaS landing.

Frequently Asked Questions about saas-landing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a SaaS landing page from a brief?▼

To generate a SaaS landing page, provide your product_name and tagline to produce a single index.html file. The output adapts to your pricing preference and social proof count to create a conversion-focused layout.

What sections are included in a conversion-focused landing page?▼

A conversion-focused landing page includes a hero section with CTAs, a features grid of 3–6 tiles, a social proof section, optional pricing tiers, and a footer CTA with essential links.

How do design system tokens affect the landing page layout?▼

Design system tokens enforce consistent color, typography, and layout rules defined in DESIGN.md. Applying these tokens ensures visual consistency across the generated marketing and product launch pages.

Can I control the pricing and social proof sections on my SaaS landing?▼

Yes, you can control these sections by setting has_pricing to true for 2–3 pricing tiers, and adjusting proof_count to configure the number of logos or testimonials displayed for social proof.

Do I need a separate design system setup to use this landing page generator?▼

You need a DESIGN.md file containing your design tokens for color, typography, and layout. The generator enforces these tokens to ensure the SaaS landing page visuals remain strictly compliant with your system.

What is the best way to create a marketing landing page for a SaaS product launch?▼

The best way is to input your product_name, tagline, and proof_count to instantly output a compliant index.html. This approach saves layout time and ensures token-consistent visuals for onboarding and launches.

Related Skills

Explore More Design & Creative Skills→
Maccio-huangMaccio-huang

saas-landing

Generates a single-page SaaS landing page with hero, features, pricing, and CTA sections.

Community
Intermediate
EmasoftEmasoft

amvcp-share-pages

Deploy a self-contained HTML page to Vercel and return a public live URL.

Community
Intermediate
MyHeavenDyfMyHeavenDyf

saas-landing

Generate a single-page SaaS landing page HTML prototype with hero, features, social proof, and pricing.

Community
Advanced
manuelbrandner85manuelbrandner85

imagegen-frontend-web

Generate section-based website design reference images for frontend development.

Community
Advanced