Landing Page Generator
Generate a complete, deployable landing page as a single HTML file. No build step, no dependencies — open it in a browser or deploy anywhere.
Workflow
1. Gather the Brief
Ask the user for:
| Field |
Required |
Example |
| Business/product name |
Yes |
"Acme Plumbing" |
| Value proposition |
Yes |
"24/7 emergency plumbing across Newcastle" |
| Target audience |
Yes |
"Homeowners in the Hunter Valley" |
| Primary CTA |
Yes |
"Call Now" / "Get a Quote" / "Sign Up" |
| Secondary CTA |
No |
"Learn More" / "View Pricing" |
| Brand colours |
No |
Primary: #1E40AF, accent: #F59E0B |
| Logo URL or text |
No |
URL to logo image, or just use business name |
| Phone / email |
No |
For contact section |
| Sections wanted |
No |
Default: hero, features, testimonials, FAQ, footer |
If no brand colours provided, suggest using the color-palette skill to generate them, or use a sensible default (slate/blue).
2. Generate the HTML
Produce a single HTML file with:
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<!-- Meta, OG tags, favicon -->
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind config with custom colours</script>
</head>
<body>
<!-- Nav -->
<!-- Hero -->
<!-- Features -->
<!-- Social Proof -->
<!-- Pricing (optional) -->
<!-- FAQ -->
<!-- Footer -->
<!-- Dark mode toggle script -->
</body>
</html>
3. Section Patterns
Navigation
- Sticky top nav with logo/name + anchor links to sections
- Mobile hamburger menu (CSS-only or minimal JS)
- CTA button in nav (right-aligned)
Hero
- Full-width, above the fold
- Headline (h1) — the value proposition, not the business name
- Subheadline — supporting detail, 1-2 sentences
- Primary CTA button (large, contrasting colour)
- Optional: hero image placeholder or gradient background
- Pattern: text-left on desktop (60/40 split with image), centred on mobile
Features / Services
- 3-6 items in a responsive grid (1 col mobile, 2-3 cols desktop)
- Each: icon placeholder + heading + short description
- Use semantic headings (h2 for section, h3 for items)
Social Proof / Testimonials
- 2-3 testimonial cards with quote, name, role/company
- Star rating if applicable
- Alternative: logo bar of client/partner logos
Pricing (optional)
- 2-3 tier cards (basic/pro/enterprise pattern)
- Highlighted "recommended" tier
- Feature comparison list per tier
- CTA button per tier
FAQ
- Accordion pattern (details/summary — no JS needed)
- 4-6 common questions
- Schema.org FAQPage markup for SEO
Footer
- Business name, contact info, social links
- Legal links (privacy, terms) as placeholders
- Copyright year (use JS for auto-update)
4. Technical Requirements
Responsive: Mobile-first with three breakpoints
Default: mobile (< 640px)
sm: 640px+ (tablet)
lg: 1024px+ (desktop)
Dark mode: Three-state toggle (light/dark/system)
- CSS custom properties for colours
.dark class on <html> — no CSS media query- Small JS snippet for toggle + localStorage persistence
Accessibility:
- Proper heading hierarchy (h1 → h2 → h3, no skips)
- Alt text placeholders on all images
- Focus-visible styles on interactive elements
- Sufficient colour contrast (4.5:1 minimum)
- Skip-to-content link
SEO:
- Semantic HTML5 elements (header, main, section, footer)
- OG meta tags (title, description, image, url)
- Twitter card meta tags
- Canonical URL
- JSON-LD for LocalBusiness if it's a local business (reference
seo-local-business skill)
Performance:
- No JS required for core content rendering
- Lazy-load images (
loading="lazy")
- System font stack (no external font requests)
- Single file — no external CSS/JS beyond Tailwind CDN
5. Colour Application
If user provides brand colours, configure Tailwind inline:
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' },
accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' },
}
}
}
}
</script>
If no colours provided, use Tailwind's built-in palette (slate for neutrals, blue for primary).
6. Output
Write the file to the user's specified location, or default to ./index.html.
After generating:
- Tell the user how to preview:
open index.html (macOS) or python3 -m http.server for a local server
- Suggest deployment options: drag to Cloudflare Pages, Netlify drop, or
wrangler deploy for Workers
- List placeholder content that needs replacing (images, testimonials, phone numbers)
Quality Rules
- No placeholder lorem ipsum — generate realistic placeholder text based on the business type
- No broken layouts — test the responsive grid mentally: 1 col → 2 col → 3 col
- No inline styles — use Tailwind classes exclusively
- Real interactions — smooth scroll to sections, working accordion, working dark mode toggle
- Accessible by default — don't sacrifice accessibility for aesthetics
- Australian conventions — if the business is Australian, use +61 phone format, Australian spelling, ABN placeholder
Variations
| Request |
Approach |
| "Coming soon page" |
Hero only + email signup form + countdown timer |
| "Product launch" |
Hero + features + pricing + CTA-heavy |
| "Portfolio" |
Hero + project grid + about + contact |
| "Event page" |
Hero + schedule + speakers + venue + register CTA |
| "App download" |
Hero + features + screenshots + app store badges |
Adapt the section selection to match the page purpose. Not every page needs pricing or FAQ.
1---2name: landing-page3description: Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'.4license: Unspecified5---6# Landing Page Generator78Generate a complete, deployable landing page as a single HTML file. No build step, no dependencies — open it in a browser or deploy anywhere.910## Workflow1112### 1. Gather the Brief1314Ask the user for:1516| Field | Required | Example |17|-------|----------|---------|18| Business/product name | Yes | "Acme Plumbing" |19| Value proposition | Yes | "24/7 emergency plumbing across Newcastle" |20| Target audience | Yes | "Homeowners in the Hunter Valley" |21| Primary CTA | Yes | "Call Now" / "Get a Quote" / "Sign Up" |22| Secondary CTA | No | "Learn More" / "View Pricing" |23| Brand colours | No | Primary: #1E40AF, accent: #F59E0B |24| Logo URL or text | No | URL to logo image, or just use business name |25| Phone / email | No | For contact section |26| Sections wanted | No | Default: hero, features, testimonials, FAQ, footer |2728If no brand colours provided, suggest using the `color-palette` skill to generate them, or use a sensible default (slate/blue).2930### 2. Generate the HTML3132Produce a **single HTML file** with:3334```35<!DOCTYPE html>36<html lang="en" class="scroll-smooth">37<head>38 <!-- Meta, OG tags, favicon -->39 <script src="https://cdn.tailwindcss.com"></script>40 <script>tailwind config with custom colours</script>41</head>42<body>43 <!-- Nav -->44 <!-- Hero -->45 <!-- Features -->46 <!-- Social Proof -->47 <!-- Pricing (optional) -->48 <!-- FAQ -->49 <!-- Footer -->50 <!-- Dark mode toggle script -->51</body>52</html>53```5455### 3. Section Patterns5657#### Navigation58- Sticky top nav with logo/name + anchor links to sections59- Mobile hamburger menu (CSS-only or minimal JS)60- CTA button in nav (right-aligned)6162#### Hero63- Full-width, above the fold64- Headline (h1) — the value proposition, not the business name65- Subheadline — supporting detail, 1-2 sentences66- Primary CTA button (large, contrasting colour)67- Optional: hero image placeholder or gradient background68- Pattern: text-left on desktop (60/40 split with image), centred on mobile6970#### Features / Services71- 3-6 items in a responsive grid (1 col mobile, 2-3 cols desktop)72- Each: icon placeholder + heading + short description73- Use semantic headings (h2 for section, h3 for items)7475#### Social Proof / Testimonials76- 2-3 testimonial cards with quote, name, role/company77- Star rating if applicable78- Alternative: logo bar of client/partner logos7980#### Pricing (optional)81- 2-3 tier cards (basic/pro/enterprise pattern)82- Highlighted "recommended" tier83- Feature comparison list per tier84- CTA button per tier8586#### FAQ87- Accordion pattern (details/summary — no JS needed)88- 4-6 common questions89- Schema.org FAQPage markup for SEO9091#### Footer92- Business name, contact info, social links93- Legal links (privacy, terms) as placeholders94- Copyright year (use JS for auto-update)9596### 4. Technical Requirements9798**Responsive**: Mobile-first with three breakpoints99```100Default: mobile (< 640px)101sm: 640px+ (tablet)102lg: 1024px+ (desktop)103```104105**Dark mode**: Three-state toggle (light/dark/system)106- CSS custom properties for colours107- `.dark` class on `<html>` — no CSS media query108- Small JS snippet for toggle + localStorage persistence109110**Accessibility**:111- Proper heading hierarchy (h1 → h2 → h3, no skips)112- Alt text placeholders on all images113- Focus-visible styles on interactive elements114- Sufficient colour contrast (4.5:1 minimum)115- Skip-to-content link116117**SEO**:118- Semantic HTML5 elements (header, main, section, footer)119- OG meta tags (title, description, image, url)120- Twitter card meta tags121- Canonical URL122- JSON-LD for LocalBusiness if it's a local business (reference `seo-local-business` skill)123124**Performance**:125- No JS required for core content rendering126- Lazy-load images (`loading="lazy"`)127- System font stack (no external font requests)128- Single file — no external CSS/JS beyond Tailwind CDN129130### 5. Colour Application131132If user provides brand colours, configure Tailwind inline:133134```html135<script>136tailwind.config = {137 darkMode: 'class',138 theme: {139 extend: {140 colors: {141 primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' },142 accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' },143 }144 }145 }146}147</script>148```149150If no colours provided, use Tailwind's built-in palette (slate for neutrals, blue for primary).151152### 6. Output153154Write the file to the user's specified location, or default to `./index.html`.155156After generating:1571. Tell the user how to preview: `open index.html` (macOS) or `python3 -m http.server` for a local server1582. Suggest deployment options: drag to Cloudflare Pages, Netlify drop, or `wrangler deploy` for Workers1593. List placeholder content that needs replacing (images, testimonials, phone numbers)160161## Quality Rules1621631. **No placeholder lorem ipsum** — generate realistic placeholder text based on the business type1642. **No broken layouts** — test the responsive grid mentally: 1 col → 2 col → 3 col1653. **No inline styles** — use Tailwind classes exclusively1664. **Real interactions** — smooth scroll to sections, working accordion, working dark mode toggle1675. **Accessible by default** — don't sacrifice accessibility for aesthetics1686. **Australian conventions** — if the business is Australian, use +61 phone format, Australian spelling, ABN placeholder169170## Variations171172| Request | Approach |173|---------|----------|174| "Coming soon page" | Hero only + email signup form + countdown timer |175| "Product launch" | Hero + features + pricing + CTA-heavy |176| "Portfolio" | Hero + project grid + about + contact |177| "Event page" | Hero + schedule + speakers + venue + register CTA |178| "App download" | Hero + features + screenshots + app store badges |179180Adapt the section selection to match the page purpose. Not every page needs pricing or FAQ.
onfire7777