SEO

SEO Landing Page Generator (Full Page HTML + Tailwind CSS)

Name: SEO Landing Page Generator (Full Page HTML + Tailwind CSS)
Author: Claude Directory

Claude Directory December 10, 2025

0 copies 0 likes

Instantly generates a fully SEO-optimized, responsive landing page in pure HTML + Tailwind CSS with hero, features, testimonials, pricing, FAQ, and more. Boost conversions and rankings without coding

Prompt

You are an expert full-stack developer and SEO specialist with 10+ years experience building high-converting landing pages.

Create a COMPLETE, production-ready, SINGLE HTML FILE landing page for:

🛠️ Product/Service: [INSERT PRODUCT/SERVICE NAME]
🎯 Target Audience: [e.g. small business owners, developers]
✨ Key Selling Points (3-5 bullets): [LIST THEM]
💰 Pricing (if applicable): [e.g. $29/mo]
🔗 Main CTA: [e.g. Start Free Trial]
📱 Demo/Video URL: [OPTIONAL]

Primary Keywords: [KEYWORD1, KEYWORD2, KEYWORD3]
Secondary Keywords: [kw4, kw5, kw6]

Competitor sites for inspiration: [competitor.com, other.com]
Design Style: [modern/minimalist/bold/fun/professional]
Color Palette: [primary color, secondary, accent]

📋 REQUIRED SECTIONS (in order):
1. Hero (H1 with KW, subheadline, 2 CTAs, image/video)
2. Features/Benefits (4-6 cards with icons)
3. How It Works (3-5 step timeline)
4. Social Proof (3 testimonials + logos)
5. Pricing (2-4 tiers)
6. FAQ (4-6 questions)
7. Final CTA
8. Footer (links, social, privacy)

✅ TECHNICAL REQUIREMENTS:
• Tailwind CSS v3 CDN ONLY (no other frameworks)
• 100% Mobile Responsive (mobile-first)
• SEO Optimized: title/meta/H1/H2s, schema.org JSON-LD, OpenGraph, alt texts
• PageSpeed 95+: lazy images, minified CSS/JS, no render-blocking
• Accessibility: ARIA labels, keyboard nav, WCAG 2.1 AA
• Fast load: hero image WebP/AVIF optimized
• Use Heroicons or Lucide for icons
• Google Fonts (2 max)

🚫 NO: React/Vue/JS frameworks, external JS libs, build tools

Output ONLY the complete <!DOCTYPE html> ... </html> code.
Make it copy-paste deployable to Netlify/Vercel instantly.

Generate now:

How to Use

1. Copy the full prompt text from the 'content' field above. 2. Replace all placeholders (e.g. [INSERT PRODUCT/SERVICE NAME]) with your specific details like product name, keywords, audience, and features. 3. Paste the customized prompt into Claude, ChatGPT, or any AI chat interface. 4. Review the generated HTML output for completeness and make minor tweaks if needed. 5. Save the HTML as an .html file and open in browser to preview. 6. Deploy instantly to Netlify, Vercel, or GitHub Pages by drag-and-drop. 7. Add your custom images/videos via URLs and track performance with Google Analytics.

Comments

More Prompts

View all

Research

ChatGPT Web Browsing Research Agent

Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.

Community

Development

ChatGPT API Integration Blueprint

Design production-ready ChatGPT API integrations. Covers authentication, streaming, function calling, structured outputs, and cost optimization with the latest OpenAI SDK.

Community

Data Analysis

Advanced Data Analysis with Code Interpreter

Step-by-step data analysis pipeline using ChatGPT's Code Interpreter. Upload CSV/Excel files for cleaning, visualization, statistical analysis, and insights.

Community

Productivity

ChatGPT Memory & Personalization Optimizer

Optimize ChatGPT's memory feature for persistent context. Teaches how to structure memories, manage what's stored, and leverage personalization effectively.

Community

Creative

DALL-E 3 Prompt Engineering Master

Generate precise, creative DALL-E 3 prompts. Handles style specifications, aspect ratios, composition rules, and iterative refinement for stunning AI-generated images.

Community

Productivity

ChatGPT Canvas Collaborative Editor

Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.

Community