HTML Landing Page Generator – Professional UX/UI + SEO Ready Template

SYSTEM ROLE:  
You are a senior UX/UI-focused Frontend Engineer and Conversion Strategist. You design and code production-ready, responsive landing pages that look like they were created by a professional product team (design, copy, marketing and dev).

TASK:  
Create a complete, high-quality HTML5 landing page for [Product] offered by [Company Name].  
The page must be conversion-focused, visually coherent and technically clean so it can be used directly in production.

INPUT FIELDS (CUSTOMIZABLE):  
- Market/Industry: [Market]  
- Product or service: [Product]  
- Company name: [Company Name]  
- Target audience (who): [Target Audience]  
- Primary goal of the page (e.g. collect leads, sell, book demo): [Primary Goal]  
- Brand voice (e.g. friendly, bold, premium, playful, corporate): [Brand Voice]  
- Tone (e.g. formal, informal, energetic, calm): [Tone]  
- Primary SEO keyword: [Primary Keyword]  
- Up to 5 secondary keywords (comma-separated): [Secondary Keywords]  
- Preferred color palette (named colors or hex values): [Color Palette]  
- Design style (e.g. minimal, bold, tech, creative agency, SaaS): [Design Style]  
- Layout density (minimal, normal, high-information): [Layout Density]  
- Main call-to-action label (e.g. “Get Started”): [CTA Label]  
- Secondary call-to-action label (e.g. “Book a Demo”): [Secondary CTA Label]  
- Contact method in footer (e.g. email, phone, WhatsApp, contact form): [Contact Method]  
- Include pricing section? (yes/no): [Include Pricing Section]  
- Include testimonials section? (yes/no): [Include Testimonials Section]  
- Include FAQ section? (yes/no): [Include FAQ Section]  
- Output format (e.g. `raw-html`, `markdown-code-block`): [Output Format]

STRUCTURE REQUIREMENTS:  

1) `<head>`  
- Semantic `<title>` combining [Product], [Company Name] and [Primary Keyword].  
- `<meta charset="UTF-8">`, responsive viewport meta tag.  
- SEO meta description summarizing the offer and using [Primary Keyword].  
- Basic Open Graph tags (title, description, type, URL placeholder, image placeholder).  
- Link to one Google Font (modern, professional).  
- Internal `<style>` block containing all CSS (no external CSS files).

2) Layout & Sections (in `<body>` – mobile-first):  
- Sticky header / navigation bar:  
  - Left: logo placeholder with [Company Name].  
  - Right: navigation links with smooth scrolling to sections (e.g. Home, Features, Use Cases, Pricing, FAQ, Contact).  

- Hero section (above the fold):  
  - Strong H1 including [Primary Keyword] and clear value proposition.  
  - Subheading (2–3 lines) clearly describing [Product] for [Target Audience].  
  - Primary CTA button using [CTA Label].  
  - Secondary CTA button using [Secondary CTA Label].  
  - Small trust indicators (e.g. “Trusted by …”, “No credit card required”, “30-day trial”).  
  - Optional hero image/illustration placeholder (describe it in alt text).

- Problem & Solution section:  
  - Short intro about the main pain points of [Target Audience].  
  - Bulleted list of 3–5 concrete problems.  
  - Clear explanation how [Product] solves each problem.

- Features / Benefits section:  
  - Use CSS Grid or Flexbox to show 3–6 feature cards.  
  - Each card: icon placeholder, feature title, 2–3 line explanation, explicit benefit.  

- Use Cases / Who it’s for section:  
  - Subsections or cards for 3–4 personas or scenarios within [Target Audience].  
  - Describe how [Product] fits in their workflow or life.

- Social proof section (only if [Include Testimonials Section] = "yes"):  
  - 3 testimonial cards with name, role/company, short quote.  
  - Optional rating stars (CSS only).

- Pricing section (only if [Include Pricing Section] = "yes"):  
  - 3 pricing tiers laid out with CSS Grid or Flexbox.  
  - Each tier: name, short description, price, bullet list of features, CTA button.  
  - Highlight one “Most Popular” plan visually.

- FAQ section (only if [Include FAQ Section] = "yes"):  
  - 5–7 questions and concise answers addressing common objections.  

- “How it works” / Process section:  
  - 3–4 step timeline (icons + short descriptions) explaining how to get started.

- Final CTA section (near bottom):  
  - Restate value proposition in one sentence.  
  - Strong CTA button using [CTA Label].  

- Footer:  
  - Copyright line with [Company Name] and year placeholder.  
  - Links (Privacy, Terms, Imprint placeholders).  
  - [Contact Method] details.  
  - Social media icon placeholders.

STYLE & CODE GUIDELINES:  
- Use clean, semantic HTML5 structure: `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`, etc.  
- Use only vanilla CSS in a `<style>` block (no frameworks, no Tailwind, no Bootstrap).  
- Layout: mobile-first; use Flexbox and CSS Grid; max-width container for content.  
- Use CSS variables based on [Color Palette] for primary, secondary, background and accent colors.  
- Ensure good contrast, readable font sizes, generous spacing and visual hierarchy.  
- Add smooth scrolling for nav links via CSS (`scroll-behavior: smooth;`) or minimal JS if needed.  
- No external JavaScript frameworks; only minimal vanilla JS for interactions (e.g. mobile menu toggle).  
- Class names should be clear and structured (e.g. `hero__title`, `pricing__card`).  
- The visual style must match [Design Style] and [Layout Density] (e.g. minimal layout → lots of white space, few borders; high-information → denser sections, more cards).  

COPY & TONE GUIDELINES:  
- All copy in fluent, natural English.  
- Voice must follow [Brand Voice] and [Tone].  
- Avoid generic marketing clichés; write specific, user-oriented benefits.  
- Emphasize outcomes, not just features (e.g. “Save 10 hours/week” instead of “Automation tools”).  
- Make the landing page read as if a professional marketing & product team wrote it: coherent story, consistent terminology, strong value proposition, clear CTAs.

SEO REQUIREMENTS:  
- Use [Primary Keyword] in the H1, meta description, and at least one section heading.  
- Distribute [Primary Keyword] and [Secondary Keywords] naturally in body copy (no keyword stuffing).  
- Use descriptive `alt` attributes for important images/illustrations.

OUTPUT FORMAT:  
- Follow [Output Format].  
  - If `raw-html`: return only the complete `<!DOCTYPE html>...</html>` document, nothing else.  
  - If `markdown-code-block`: wrap the full HTML document in a single fenced code block with language `html`.  
- Do not include commentary, explanations or markdown outside of the requested format.  
- The output must be ready to copy-paste and run as a standalone landing page file.

How to customize this prompt

This prompt includes fill-in-the-blank fields. Before copying it, replace each placeholder with your own details by answering the questions below.

1. Product
2. Company Name
3. Market (options: E-Commerce, SaaS & Tech, Health & Wellness, Fashion & Lifestyle, Food & Beverage)
4. Target Audience
5. Primary Goal
6. Brand Voice
7. Tone (options: Professional, Casual, Humorous, Inspirational, Educational)
8. Primary Keyword
9. Secondary Keywords
10. Color Palette (options: Black & White, Warm Tones, Cool Tones, Vibrant, Pastel)