Landing Page Generator
Generate complete, high-converting landing pages from a product/service brief. Outputs production-ready HTML/CSS that's mobile-responsive and optimized for conversions.
How to Use
/landing-page-generator "SaaS project management tool for remote teams, $29/mo, free trial"
/landing-page-generator brief.txt
/landing-page-generator "Freelance web developer portfolio — book a call CTA"
Provide as much context as possible:
- What the product/service is
- Target audience
- Primary CTA (sign up, buy, book a call, download)
- Pricing (if applicable)
- Key features/benefits
- Brand colors (optional, defaults to professional blue/dark theme)
Page Generation Process
Step 1: Analyze the Brief
Extract:
- Product type: SaaS, physical product, service, portfolio, lead magnet, event
- Target audience: Who is this for?
- Primary CTA: What action should visitors take?
- Value proposition: Why should they care?
- Tone: Professional, casual, bold, minimal, luxurious
Step 2: Select Page Template
Based on product type:
| Type |
Sections |
Typical Length |
| SaaS |
Hero, Features, How It Works, Pricing, Testimonials, FAQ, CTA |
Long |
| Service |
Hero, Services, Process, Portfolio, Testimonials, CTA |
Medium |
| Portfolio |
Hero, Work Samples, About, Services, Contact |
Medium |
| Lead Magnet |
Hero, Benefits, Social Proof, Form, CTA |
Short |
| E-commerce |
Hero, Product Features, Gallery, Reviews, Buy CTA |
Medium |
| Event |
Hero, Speakers/Details, Schedule, Tickets, FAQ |
Medium |
Step 3: Generate the Page
Create a single self-contained HTML file with embedded CSS. No external dependencies except Google Fonts.
Required sections (adapt to product type):
Hero Section
- Headline: Clear value proposition (max 10 words)
- Subheadline: Supporting detail (max 25 words)
- CTA button: High-contrast, action-oriented text ("Start Free Trial", not "Submit")
- Optional: Hero image placeholder or background
- Optional: Social proof badge ("Trusted by 10,000+ teams")
Features/Benefits
- 3-4 feature cards with icons (use Unicode/emoji icons)
- Each card: Icon + Feature name + 1-2 sentence benefit (focus on outcome, not feature)
- Grid layout: 3 columns on desktop, 1 on mobile
Social Proof
- 2-3 testimonial cards with:
- Quote text
- Name and title/company
- Star rating (if applicable)
- Optional: Logo bar of client/partner logos (placeholder boxes with company names)
How It Works (if applicable)
- 3-step process with numbered steps
- Step title + brief description
- Visual connector between steps
Pricing (if applicable)
- 1-3 pricing tiers in card format
- Highlight the recommended tier
- Feature comparison list
- CTA button on each tier
FAQ
- 4-6 common questions
- Accordion-style (click to expand) using pure CSS/HTML <details>
Final CTA
- Repeat the primary CTA with urgency
- Different angle from hero (address remaining objections)
- Strong contrasting background
Step 4: Design System
Apply these design principles:
Typography:
- Font:
Inter from Google Fonts (clean, modern, high readability)
- Heading scale: 3rem, 2rem, 1.5rem, 1.25rem
- Body: 1rem / 1.6 line-height
- Max line width: 65ch for readability
Colors (default, override with brand colors if provided):
--primary: #2563eb; /* Blue - CTAs, links */
--primary-dark: #1d4ed8; /* Hover state */
--bg: #ffffff; /* Background */
--bg-alt: #f8fafc; /* Alternating section bg */
--text: #1e293b; /* Body text */
--text-light: #64748b; /* Secondary text */
--accent: #f59e0b; /* Highlights, badges */
Layout:
- Max width: 1200px, centered
- Section padding: 80px vertical (48px on mobile)
- Consistent spacing scale: 4, 8, 16, 24, 32, 48, 64, 80px
Responsive breakpoints:
- Desktop: 1024px+
- Tablet: 768px - 1023px
- Mobile: < 768px
Step 5: Conversion Optimization
Apply these conversion principles to the generated page:
- Above the fold: Headline + CTA visible without scrolling
- Single CTA focus: One primary action, repeated 2-3 times throughout
- Contrast ratio: CTA buttons must have WCAG AA contrast (4.5:1 minimum)
- Loading speed: No external JS, minimal CSS, no images (placeholders only)
- Scannability: Users should understand the offer in 5 seconds
- Objection handling: FAQ and testimonials address common concerns
- Urgency/scarcity: Optional — only if authentic ("Limited beta spots", not fake countdowns)
Step 6: Output
Save to output/landing-page/:
output/landing-page/
index.html # Complete self-contained page
README.md # Customization guide for the client
README.md includes:
- How to customize colors (CSS variables at top of file)
- How to replace placeholder content
- How to add real images
- How to connect forms to their email service
- How to deploy (Netlify drag-and-drop, GitHub Pages, any static host)
Step 7: Present to User
Show:
- Brief summary of what was generated
- Key design decisions made
- File location
- Suggestions for what the client should customize (images, testimonials, specific copy)
Quality Standards
1---2name: landing-page-generator-43description: Generate high-converting, mobile-responsive landing pages from a brief. Use when building landing pages, sales pages, or marketing pages for clients.4---5
6# Landing Page Generator
7
8Generate complete, high-converting landing pages from a product/service brief. Outputs production-ready HTML/CSS that's mobile-responsive and optimized for conversions.
9
10## How to Use
11
12```
13/landing-page-generator "SaaS project management tool for remote teams, $29/mo, free trial"
14/landing-page-generator brief.txt
15/landing-page-generator "Freelance web developer portfolio — book a call CTA"
16```
17
18Provide as much context as possible:
19- What the product/service is
20- Target audience
21- Primary CTA (sign up, buy, book a call, download)
22- Pricing (if applicable)
23- Key features/benefits
24- Brand colors (optional, defaults to professional blue/dark theme)
25
26## Page Generation Process
27
28### Step 1: Analyze the Brief
29
30Extract:
31- **Product type**: SaaS, physical product, service, portfolio, lead magnet, event
32- **Target audience**: Who is this for?
33- **Primary CTA**: What action should visitors take?
34- **Value proposition**: Why should they care?
35- **Tone**: Professional, casual, bold, minimal, luxurious
36
37### Step 2: Select Page Template
38
39Based on product type:
40
41| Type | Sections | Typical Length |
42|------|----------|---------------|
43| SaaS | Hero, Features, How It Works, Pricing, Testimonials, FAQ, CTA | Long |
44| Service | Hero, Services, Process, Portfolio, Testimonials, CTA | Medium |
45| Portfolio | Hero, Work Samples, About, Services, Contact | Medium |
46| Lead Magnet | Hero, Benefits, Social Proof, Form, CTA | Short |
47| E-commerce | Hero, Product Features, Gallery, Reviews, Buy CTA | Medium |
48| Event | Hero, Speakers/Details, Schedule, Tickets, FAQ | Medium |
49
50### Step 3: Generate the Page
51
52Create a single self-contained HTML file with embedded CSS. No external dependencies except Google Fonts.
53
54**Required sections** (adapt to product type):
55
56#### Hero Section
57```
58- Headline: Clear value proposition (max 10 words)
59- Subheadline: Supporting detail (max 25 words)
60- CTA button: High-contrast, action-oriented text ("Start Free Trial", not "Submit")
61- Optional: Hero image placeholder or background
62- Optional: Social proof badge ("Trusted by 10,000+ teams")
63```
64
65#### Features/Benefits
66```
67- 3-4 feature cards with icons (use Unicode/emoji icons)
68- Each card: Icon + Feature name + 1-2 sentence benefit (focus on outcome, not feature)
69- Grid layout: 3 columns on desktop, 1 on mobile
70```
71
72#### Social Proof
73```
74- 2-3 testimonial cards with:
75 - Quote text
76 - Name and title/company
77 - Star rating (if applicable)
78- Optional: Logo bar of client/partner logos (placeholder boxes with company names)
79```
80
81#### How It Works (if applicable)
82```
83- 3-step process with numbered steps
84- Step title + brief description
85- Visual connector between steps
86```
87
88#### Pricing (if applicable)
89```
90- 1-3 pricing tiers in card format
91- Highlight the recommended tier
92- Feature comparison list
93- CTA button on each tier
94```
95
96#### FAQ
97```
98- 4-6 common questions
99- Accordion-style (click to expand) using pure CSS/HTML <details>
100```
101
102#### Final CTA
103```
104- Repeat the primary CTA with urgency
105- Different angle from hero (address remaining objections)
106- Strong contrasting background
107```
108
109### Step 4: Design System
110
111Apply these design principles:
112
113**Typography**:
114- Font: `Inter` from Google Fonts (clean, modern, high readability)
115- Heading scale: 3rem, 2rem, 1.5rem, 1.25rem
116- Body: 1rem / 1.6 line-height
117- Max line width: 65ch for readability
118
119**Colors** (default, override with brand colors if provided):
120```css
121--primary: #2563eb; /* Blue - CTAs, links */
122--primary-dark: #1d4ed8; /* Hover state */
123--bg: #ffffff; /* Background */
124--bg-alt: #f8fafc; /* Alternating section bg */
125--text: #1e293b; /* Body text */
126--text-light: #64748b; /* Secondary text */
127--accent: #f59e0b; /* Highlights, badges */
128```
129
130**Layout**:
131- Max width: 1200px, centered
132- Section padding: 80px vertical (48px on mobile)
133- Consistent spacing scale: 4, 8, 16, 24, 32, 48, 64, 80px
134
135**Responsive breakpoints**:
136- Desktop: 1024px+
137- Tablet: 768px - 1023px
138- Mobile: < 768px
139
140### Step 5: Conversion Optimization
141
142Apply these conversion principles to the generated page:
143
1441. **Above the fold**: Headline + CTA visible without scrolling
1452. **Single CTA focus**: One primary action, repeated 2-3 times throughout
1463. **Contrast ratio**: CTA buttons must have WCAG AA contrast (4.5:1 minimum)
1474. **Loading speed**: No external JS, minimal CSS, no images (placeholders only)
1485. **Scannability**: Users should understand the offer in 5 seconds
1496. **Objection handling**: FAQ and testimonials address common concerns
1507. **Urgency/scarcity**: Optional — only if authentic ("Limited beta spots", not fake countdowns)
151
152### Step 6: Output
153
154Save to `output/landing-page/`:
155
156```
157output/landing-page/
158 index.html # Complete self-contained page
159 README.md # Customization guide for the client
160```
161
162**`README.md`** includes:
163- How to customize colors (CSS variables at top of file)
164- How to replace placeholder content
165- How to add real images
166- How to connect forms to their email service
167- How to deploy (Netlify drag-and-drop, GitHub Pages, any static host)
168
169### Step 7: Present to User
170
171Show:
1721. Brief summary of what was generated
1732. Key design decisions made
1743. File location
1754. Suggestions for what the client should customize (images, testimonials, specific copy)
176
177## Quality Standards
178
179- [ ] Page loads with no external dependencies except Google Fonts
180- [ ] Fully responsive at 320px, 768px, and 1200px widths
181- [ ] All CTA buttons have hover states
182- [ ] Color contrast meets WCAG AA
183- [ ] Page has proper `<meta>` viewport tag
184- [ ] Semantic HTML (`<header>`, `<main>`, `<section>`, `<footer>`)
185- [ ] No horizontal scroll at any breakpoint
186- [ ] FAQ sections are interactive (expand/collapse)
187- [ ] Total HTML file size under 50KB
dvcrn