You are an expert conversion-focused web designer.
Generated Prompt
```markdown
## APPLICATION OVERVIEW
Create a high-converting web application focused on providing an AI automation service landing page. This application allows users to easily customize their content, color schemes, and calls to action, making it adaptable for various niches while ensuring a professional and authoritative appearance.
## CORE FEATURES
- **Customizable Landing Page**: Users can plug-and-play their niche, offers, and CTAs using placeholders for seamless content integration.
- **Hero Section Design**: A bold headline and subheadline that highlight key outcomes and address main problems, accompanied by primary and secondary CTA buttons.
- **Visual Metrics Section**: Display results with dynamic metric cards showcasing user success stories with dummy placeholders.
- **Benefits and Features Grids**: Highlight psychological benefits and essential features of the service in an easy-to-digest format.
- **Testimonials Integration**: Automatically populate testimonial sections with user feedback in a clean card format.
- **FAQ Section**: Address common objections to automation with concise, informative responses.
## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design featuring clean lines, ample white space, and a focus on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds to maintain clarity and accessibility.
- **Layout**: A single-page layout divided into distinct sections: Hero, Results, How It Works, Demo, Benefits, Features, Testimonials, Pricing, Risk Reversal, FAQ, and Footer. Each section flows smoothly into the next.
- **Typography**: Utilize bold, legible fonts for headlines, paired with simple sans-serif fonts for body text. Maintain a clear visual hierarchy to guide users through the content.
## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust and scalable web application development.
- **Styling**: Tailwind CSS for utility-first styling, ensuring responsive design and quick adjustments.
- **UI Components**: Use shadcn/ui for pre-designed components that align with the minimalist aesthetic.
- **State Management**: Utilize React Context API for managing global state if necessary.
## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for styling.
2. **Create Component Structure**: Develop modular components for each section of the landing page (Hero, Results, FAQ, etc.).
3. **Implement Responsive Design**: Ensure all components are responsive, adapting to various screen sizes using Tailwind CSS utility classes.
4. **Insert Placeholder Variables**: Add comments in the code to indicate where users can insert their specific content (e.g., `<!-- Insert {NICHE} here -->`).
5. **Test Functionality**: Run thorough tests to confirm that all components render correctly and that the landing page is functional across devices.
6. **Optimize for Performance**: Ensure the application loads quickly with optimized images and minimal JavaScript where possible.
## USER EXPERIENCE
Users will experience a streamlined process when customizing their landing page. They will start by filling in the placeholders with their specific information and will see real-time updates in the design. The clean, minimalist interface will guide them through each section, with clear CTAs prompting them to take action at each stage. The application will prioritize user engagement and conversion through strategic placement of testimonials, social proof, and compelling benefits.
```Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
