Saas Landing Theme

SaaS Landing Theme

Generate production-grade, light-themed SaaS landing pages with a warm editorial aesthetic that avoids generic AI design patterns. Every page should feel intentionally designed, conversion-focused, and memorable.

When to Use This Skill

• User wants a SaaS landing page, marketing site, or product homepage
• User asks for a startup website, pricing page, or feature showcase
• User wants a professional light-themed web page with modern aesthetics
• User is building a SaaS product and needs a marketing presence
• User references "the SaaS theme" or "landing page skill" from prior conversations

Design Philosophy

This theme follows a warm editorial direction: clean but not sterile, professional but not corporate, modern but not trendy. The goal is a page that looks like it was designed by a top-tier agency, not generated by AI.

Anti-Patterns to Avoid

• Purple gradients on white (the #1 "AI slop" pattern)
• Inter, Roboto, Arial, or system fonts as primary typeface
• Generic hero illustrations with abstract blobs
• Cookie-cutter layouts with no spatial tension
• Flat, lifeless color palettes with no accent pop

Design System

Before writing any code, read the full design system reference: → references/design-system.md — Contains all CSS variables, typography, color palette, spacing scale, component patterns, and animation specifications.

Before writing template code, read the full template reference: → references/template-structure.md — Contains the canonical section ordering, HTML structure for each section, and component markup patterns.

Output Modes

Mode 1: Full Landing Page (default)

When the user asks for a "landing page", "SaaS site", or "marketing page" without specifying sections, generate the full page with all sections in canonical order:

1. Nav — Sticky, glass-morphism on scroll
2. Hero — Headline, subhead, CTAs, social proof, product screenshot
3. Logo Marquee — Scrolling client/partner logos
4. Features — 6-card grid with icon, title, description
5. Bento Grid — Mixed-size cards showing metrics, workflows, stats
6. Pricing — 3-tier cards (Starter / Professional / Enterprise)
7. Testimonials — 3-card grid with quotes and author info
8. CTA — Dark background, strong closing headline
9. Footer — 4-column layout with links

Mode 2: Section-Only

When the user asks for specific sections (e.g., "just a pricing section" or "hero + features"), generate only those sections but still include the full design system CSS variables and base styles.

Mode 3: React/JSX

When the user specifies React, Next.js, or JSX, output a single .jsx file using:

• Tailwind utility classes (no custom CSS files)
• React hooks for interactivity (scroll detection, intersection observer)
• Lucide React for icons
• The same design tokens translated to Tailwind config

Workflow

1. Read references — Always read references/design-system.md and references/template-structure.md before generating code
2. Gather context — Ask the user (if not already clear):

• Product name and tagline
• Target audience (CPA firms, startups, developers, etc.)
• Key features to highlight (3-6)
• Pricing tiers (if applicable)
• Any brand colors to incorporate

1. Generate — Write the full HTML/JSX file following the design system
2. Customize — Apply user's brand name, copy, features, and colors
3. Deliver — Save to /mnt/user-data/outputs/ and present to the user

Customization Points

When the user provides brand-specific information, map it to the design system:

| User Provides | Maps To | |---------------------|----------------------------------------------| | Brand color | --accent and --accent-soft CSS variables | | Product name | .logo text and page ` | | Tagline | Hero and content | | Features list | .feature-card content in features grid | | Pricing tiers | .pricing-card content and prices | | Testimonials | .testimonial-card quotes and author info | | Screenshot/mockup | .hero-screenshot` content area |

If the user provides a brand color, derive the full accent palette:

• --accent: The provided color
• --accent-soft: The color at 8% opacity on white
• --accent-hover: The color darkened ~10%

Quality Checklist

Before delivering, verify the output meets these standards:

• [ ] Uses Instrument Serif + General Sans (not Inter/Roboto/Arial)
• [ ] Warm off-white background (#FAFAF7), not pure white
• [ ] Accent color has sufficient contrast and a soft variant
• [ ] Noise texture overlay is present (body::before)
• [ ] Nav has glass-morphism effect on scroll
• [ ] Hero has perspective tilt on product screenshot
• [ ] Scroll-triggered fade-up animations on cards
• [ ] All interactive elements have hover states with transitions
• [ ] Responsive breakpoints at 1024px and 640px
• [ ] No generic placeholder text — use realistic, contextual copy
• [ ] Floating stat cards animate with float keyframe
• [ ] CTA section uses dark background with radial gradient glow
• [ ] Footer includes location flag (contextual to user's region)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: theepan
• Source: theepan/ai-agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.