skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

saas-landing

Generate a self-contained SaaS landing HTML with inline CSS and data-od-id attributes.

84.7k|9.9k|Updated Apr 28, 2026
Search Tags:#frontend#tokens#ux#saas#design-system#landing-page
One-click install
npx skills add https://github.com/nexu-io/open-design --skill saas-landing-nexu-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: saas-landing
Source: https://github.com/nexu-io/open-design/tree/main/docs/examples/saas-landing-skill
Command: npx skills add https://github.com/nexu-io/open-design --skill saas-landing-nexu-io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create a ready-to-use, single-page SaaS landing that follows a design system and tokens to accelerate marketing page delivery.

Core Features & Use Cases

  • Hero, features, social proof, pricing, and CTA sections assembled from DESIGN.md tokens and inputs.
  • Works for product launches, marketing campaigns, and onboarding pages where a fast, brand-consistent landing is required.
  • Use case: generate a landing page for a new SaaS product with a strong conversion-focused hero and pricing.

Quick Start

Provide an index.html rendering a polished SaaS landing using the given product_name and tagline as inputs.

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 single-page SaaS landing page using design tokens?▼

Generate a SaaS landing page by providing product inputs and design tokens to render a self-contained HTML file. The output includes hero, features, social proof, pricing, and CTA sections styled with inline CSS and no external JavaScript.

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

A conversion-focused SaaS landing page includes hero, features, social proof, pricing, and call-to-action sections. These components are assembled within a responsive layout to support product launches and marketing campaigns.

Can I build a SaaS landing page without external JavaScript dependencies?▼

You can build a SaaS landing page without external JavaScript because the output is a self-contained index.html file. All CSS is inline, and editable elements are tagged with data-od-id attributes for customization.

How do I apply a design system to a marketing page for a product launch?▼

Apply a design system to a marketing page by using DESIGN.md tokens to govern the visual styling of the landing sections. This ensures brand consistency and accelerates the delivery of onboarding pages and campaign assets.

Does the generated landing page output require any external CSS files?▼

The generated landing page does not require external CSS files. The HTML output is completely self-contained with inline styles, ensuring the single-page SaaS landing renders correctly without external asset requests.

What is the best way to customize editable elements in a generated SaaS landing?▼

The best way to customize editable elements in a generated SaaS landing is to target tags with data-od-id attributes. These identifiers map directly to the rendered hero and pricing sections for precise content updates.

Related Skills

Explore More Design & Creative Skills→
2389-research2389-research
90

landing-page-design

Generate landing-page concepts with brand context and design briefs.

Official
Advanced
PiercingXXPiercingXX
1

saas-landing

Generate a self-contained index.html SaaS landing page from DESIGN.md tokens.

Community
Intermediate
octavehqoctavehq

octave-get-brand-components

Capture website design systems to generate reusable component kits with CSS and HTML templates.

Official
Advanced
Z43LZ43L

scrapling

Extract web content from static, dynamic, and Cloudflare-protected pages.

Community
Advanced