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
- 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).
- 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>
- 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)
- 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
- 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).
- 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.