SaaS Landing Page
Design high-converting SaaS landing pages with strong typography, clear hierarchy, and realistic UI details.
Steps
- Ask discovery questions — What is the product? Who is the target audience? What is the key conversion goal? What brand colors/tones exist?
- Choose a visual direction — Select a mood (professional, playful, minimal, bold) and map it to the Lulu AI design system or a suitable alternative.
- Define the page structure — Plan sections: Hero, Social Proof, Features, How It Works, Pricing, FAQ, CTA, Footer.
- Draft quickly — Build a working HTML page with inline CSS. Use strong typography hierarchy, generous whitespace, and intentional color accents.
- Add realistic content — Write real-feeling headlines, subcopy, and button text. No lorem ipsum. Use product-appropriate placeholder names.
- 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.mdfor the designer persona profile