landing-page

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>

3. Section Patterns

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)

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

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

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:

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.

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>

3. Section Patterns

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)

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

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

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:

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.

Documentation

Documentation

Landing Page Generator

Workflow

1. Gather the Brief

2. Generate the HTML

3. Section Patterns

Navigation

Hero

Features / Services

Pricing (optional)

FAQ

Footer

4. Technical Requirements

5. Colour Application

6. Output

Quality Rules

Variations

Documentation

landing-page

Documentation

Landing Page Generator

Workflow

1. Gather the Brief

2. Generate the HTML

3. Section Patterns

Navigation

Hero

Features / Services

Pricing (optional)

FAQ

Footer

4. Technical Requirements

5. Colour Application

6. Output

Quality Rules

Variations

landing-page

Documentation

Documentation

Landing Page Generator

Workflow

1. Gather the Brief

2. Generate the HTML

3. Section Patterns

Navigation

Hero

Features / Services

Social Proof / Testimonials

Pricing (optional)

FAQ

Footer

4. Technical Requirements

5. Colour Application

6. Output

Quality Rules

Variations

Documentation

landing-page

Documentation

Landing Page Generator

Workflow

1. Gather the Brief

2. Generate the HTML

3. Section Patterns

Navigation

Hero

Features / Services

Social Proof / Testimonials

Pricing (optional)

FAQ

Footer

4. Technical Requirements

5. Colour Application

6. Output

Quality Rules

Variations