lulu-saas-landing

name	lulu-saas-landing
version	1.0.0
description	Design and generate SaaS landing pages with conversion-focused layouts
triggers	["saas landing page","landing page","marketing page","product page","startup landing"]
category	design
quality_bar	Landing page is visually polished, responsive, and follows conversion design principles
tools	["write_file"]
permissions	["write"]

SaaS Landing Page

Design high-converting SaaS landing pages with strong typography, clear hierarchy, and realistic UI details.

Steps

1. Ask discovery questions — What is the product? Who is the target audience? What is the key conversion goal? What brand colors/tones exist?
2. Choose a visual direction — Select a mood (professional, playful, minimal, bold) and map it to the Lulu AI design system or a suitable alternative.
3. Define the page structure — Plan sections: Hero, Social Proof, Features, How It Works, Pricing, FAQ, CTA, Footer.
4. Draft quickly — Build a working HTML page with inline CSS. Use strong typography hierarchy, generous whitespace, and intentional color accents.
5. Add realistic content — Write real-feeling headlines, subcopy, and button text. No lorem ipsum. Use product-appropriate placeholder names.
6. Self-critique — Run the Visual Quality Checklist before finalizing.

Output Format

A single self-contained index.html file with:

• Inline <style> block (no external dependencies except web fonts)
• Responsive layout (mobile-first, works down to 360px)
• Semantic HTML5 structure
• Embedded SVG icons (no icon library CDN)
• Font loading from Google Fonts or system stack

Artifact Constraints

• File size: Max 50KB for the HTML file
• Dependencies: Zero external CSS/JS. Font CDN links allowed.
• Responsive breakpoints: 360px, 768px, 1024px, 1440px
• Browser support: Modern Chrome, Firefox, Safari (last 2 versions)
• Animation: CSS transitions only. No JS animations.
• Interactive elements: Hover states on all buttons/links. No JS interactivity required.

Visual Quality Checklist

• Headline is clear, benefit-driven, and under 12 words
• Subheadline supports the headline (not repeats it)
• Primary CTA button is visually dominant and uses action-oriented text
• Social proof (logos, testimonials, or stats) visible above the fold
• Feature section uses 3-column grid with descriptive icons
• Pricing section has 3 tiers with a highlighted "popular" option
• FAQ section uses
  /

  for accordion behavior
• Footer includes legal links and social placeholders
• Typography uses max 2 font families (1 display + 1 body)
• Color contrast passes WCAG AA (4.5:1 for text)
• No AI-gradient backgrounds (flat colors, subtle patterns, or solid gradients only)
• Responsive: content is readable at all breakpoints without horizontal scroll
• Loading feels fast: no oversized images, no render-blocking resources

Example Prompt

Generate a SaaS landing page for "FlowPulse" — a team analytics platform that helps
engineering managers spot bottlenecks before they ship. Target: B2B tech leaders
at mid-size companies (50-500 engineers). Use the Lulu AI design system with a
professional, data-driven tone. Include a demo request CTA.

References

• See design/templates/saas-landing/ for a reference template
• See design/design-systems/lulu-ai/ for design tokens
• See design/prompts/designer.md for the designer persona profile