skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

saas-landing

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

1|Updated Jul 9, 2026
Search Tags:#design tokens#social proof#ui generation#marketing page#saas landing#single-page html#pricing section
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill saas-landing-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: saas-landing
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/runtime/skills/design/saas-landing
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill saas-landing-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Produces a complete, single-page SaaS marketing landing without manual layout or design inconsistencies, using your active DESIGN.md tokens and required section structure.

Core Features & Use Cases

  • Token-safe landing generation: Builds the full landing page while restricting all styling to the color, typography, layout, and components defined in DESIGN.md.
  • Structured marketing sections: Renders Hero, Features (3–6 tiles), Social proof (optional), Pricing (optional), Footer CTA band, and a minimal Footer in the required order.
  • Operationalized output for hosts: Outputs a single self-contained index.html with inlined CSS, no external JS, and editable elements tagged with data-od-id for comment/annotation targeting.

Quick Start

Use the saas-landing skill to create index.html by providing your product_name and tagline inputs (and optionally disabling pricing by setting has_pricing to false).

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 with HTML and inlined CSS?▼

To generate a single-page SaaS landing page, provide your product name and tagline to produce a self-contained index.html file. This output includes inlined CSS, no external JavaScript, and structured marketing sections like hero, features, and CTAs.

Can I exclude the pricing section from a generated SaaS marketing page?▼

Yes, you can exclude the pricing section from your SaaS marketing page by setting the has_pricing parameter to false. The generator also supports an optional social proof section, ensuring parameter-driven content inclusion for your specific marketing workflow.

What is the required section order for a SaaS landing page built using design tokens?▼

The required section order for a SaaS landing page built using design tokens is Hero, Features, optional Social proof, optional Pricing, a Footer CTA band, and a minimal Footer. This deterministic ordering ensures a complete, production-ready marketing page structure.

Does the generated landing page support design system constraints from a DESIGN.md file?▼

Yes, the generated landing page supports design system constraints by restricting all styling to the color, typography, layout, and components defined in your DESIGN.md file. This token-safe generation ensures your marketing page adheres to established design guidelines without manual layout inconsistencies.

How do I enable comment targeting on a generated SaaS landing page?▼

To enable comment targeting on a generated SaaS landing page, the output HTML includes editable elements tagged with data-od-id attributes. This operationalized output allows host platforms to directly target and annotate specific page sections for review.

What is the best way to create a production-ready marketing page without external dependencies?▼

The best way to create a production-ready marketing page without external dependencies is generating a self-contained index.html with inlined CSS and no external JavaScript. This approach ensures fast creation of desktop and web preview scenarios using active design tokens.

Related Skills

Explore More Marketing & Sales Skills→
soloamentesoloamente

stitch-design-taste

Generates DESIGN.md files for defining customizable GuiStudio design standards.

Community
Advanced
nexu-ionexu-io
84.7k

saas-landing

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

Official
Intermediate
leadgenjayleadgenjay
11

social-proof-builder

Generate testimonial, case study, and trust badge templates for landing pages.

Community
Intermediate
lebongobenilebongobeni

copywriting

Write persuasive marketing copy for web pages and conversion-focused sections.

Community
Advanced