Responsive Landing Page Builder
Generate a complete, conversion-optimized landing page
Create a complete landing page for: [PRODUCT_OR_SERVICE] **Target audience:** [WHO_IS_THIS_FOR] **Primary CTA:** [WHAT_SHOULD_VISITORS_DO] **Tone:** [professional / playful / technical / minimalist] Build the page with these sections: 1. **Hero** — headline, subhead, CTA button, optional hero image/illustration placeholder 2. **Social proof** — logos, testimonials, or stats 3. **Features** — 3-4 key benefits with icons 4. **How it works** — 3-step process 5. **Pricing** (if applicable) — clean comparison cards 6. **FAQ** — 4-5 common questions with expandable answers 7. **Final CTA** — closing statement with action button Technical requirements: - Next.js App Router with TypeScript - Tailwind CSS for all styling - Smooth scroll between sections - Mobile-responsive (test at 375px, 768px, 1280px) - Semantic HTML with proper heading hierarchy - Dark mode support using CSS variables Output each section as a separate component, plus the main page file that composes them.
How to Use This Prompt
- 1Copy the prompt template above
- 2Paste into claude
- 3Replace [bracketed placeholders] with your specific project details
- 4Iterate on the AI output to refine and customize the results
More Frontend Prompts
Related frontend templates from the vault
React Component from Sketch Description
Turn a natural-language UI description into a polished React component
Infinite Scroll with Virtualization
Use this prompt to infinite scroll with virtualization with AI assistance
Vibe-to-Code: App from Vibes
Describe an app idea in casual language and get a working prototype
Drag-and-Drop Kanban Board
Use this prompt to drag-and-drop kanban board with AI assistance
You Might Also Like
Prompts from other categories that share similar tags
Full-Stack App Scaffold from Description
Generate a complete project structure and boilerplate from a plain-English app description
REST API Endpoint Generator
Generate a complete CRUD API endpoint with validation and error handling
Next.js Performance Optimization
Optimize a Next.js application for Core Web Vitals and loading speed
AI Pair Programming Session
Set up an interactive pair programming session with AI as your coding partner
Keep Exploring the Vault