The Ultimate AI Prompt to Build a Professional Landing Page
Create a vibrant HTML landing page that is responsive, mobile-friendly, and optimized for search engines - and it is fully customizable - with one professional AI prompt.
Whether you own a business or are an entrepreneur, promoting affiliate products or selling digital products, providing a consulting service, publishing an eBook, running an online course, or launching a new business, a professional landing page can significantly impact your online presence and conversions.
Typically, making such a landing page involves a web designer, a copywriter, a front-end developer and knowledge of user experience. In today's day and age, Artificial Intelligence can make this extremely simple – but you need to know how to direct it effectively.
This article includes a Free Professional AI Master Prompt for creating a full landing page in just one HTML file. The output will be visually appealing and vibrant, responsive, SEO friendly and customizable.
Sample business information has been provided in the prompt to try out right away. Or, substitute the sample information with your own company information prior to generating the page.
The HTML code that is generated will have distinct comments with directions on how logos, images, text, colors, buttons, links, testimonials, pricing and other content should be replaced.
✅ Tested Framework: The framework in this guide was tested before publication and successfully generated a complete, responsive, and customizable HTML landing page using the sample business configuration. Remember to provide the necessary customized details to AI system in conversation to the prompt about your requirement. Moreover, for more perfection to suit your business requirement, edit the generated HTML file.
The objective is simple: Copy the prompt, create a professional-looking landing page, customize it, and publish it.
Free Resource
This is AIbuzhub Professional Landing Page Master Prompt - Version 1
A complete AI prompt to develop a fully responsive, SEO optimized, professional HTML landing page for almost any business.
Please Note: The Master Prompt below is not branded. It does not refer to AIbuzhub, the author, or this website. It is allowed to be copied, modified and used without restrictions for your own business, product, service or project.
This article has a professional AI prompt for generating a complete and responsive, fully editable HTML landing page for nearly any type of business. Just copy and edit a few details, and AI takes care of the rest.
Professional Landing Page Generation Framework
The first step of the process is to assign a professional role.
STEP 1 – Professional role assignment
(All content that starts with: "You are an elite team of world class professionals..." is under this heading.)
This section includes:
- The AI team roles
- Objective
- Professional standards
- Quality expectations
- Do not create generic pages
- Premium client mindset.
STEP 2 – Business Discovery & Strategic Planning
The text of this section begins with:
For any code generation, before...
It includes:
Analyze the business Identify the audience you want to reach.
- Identify target audience
- Choose the layout
- Choose color palette
- Define the user journey with plans
- Conversion flow
- Consider how a professional web design agency would approach this.
- Be like a web design agency.
- Do not show how a plan was developed.
- NEVER create a templates like page
After that, include:
Default Sample Business Configuration (using the sample business information)
Then:
Editable HTML Comments
(optional comments if needed for the section, replace the logo here, etc.)
This should all be done under Step 2 as prepping the AI before generation.
STEP 3 – Professional Landing Page Generation
This is where the actual landing page construction starts:
Landing Page Structure
followed by:
- Header
- Hero
- Trust
- About
- Products / Services
- and then, in the following parts:
- Features
- Benefits
- Process
- Testimonials
- FAQ
- Contact
- Footer
- etc.
This article contains a professional AI prompt which will create a complete, responsive, fully-editable HTML landing page for nearly any business.
The HTML output the AI will produce:
✅ HTML5
✅ CSS3
✅ JavaScript
✅ Responsive
✅ SEO Ready
✅ Accessible
✅ Modern UI
✅ Fast Loading
✅ Beautiful Animations
✅ Comments for all sections that can be edited.
Customization guide that explains how and what can be customized.
Customization Checklist:
✔ Replace Business Name
✔ Replace Logo
✔ Replace Hero Image
✔ Replace Product Images
✔ Update Phone Number
✔ Update Email
✔ Update Address
✔ Update Social Links
✔ Change Colors
✔ Edit About Section
✔ Replace Testimonials
✔ Edit FAQ
✔ Update Footer
✔ Replace CTA Links
✔ Save as index.html
✔ Open in browser.
Instruction to AI to use placeholder assets like:
logo.png
hero-image.jpg
product-image-1.jpg
team-member-1.jpg
customer-review-1.jpg
Bonus section: include how to ask AI to do things like:
Add another Testimonials section.
Make this landing page dark mode.
Add a countdown timer.
Add a calendar for bookings.
Add Floating Button to WhatsApp.
Optimize for affiliate marketing.
Without refreshing the page.
What You'll Get
✔ Professional responsive HTML
✔ Mobile optimized
✔ Modern CSS
✔ JavaScript interactions
✔ SEO optimization
✔ Image placeholders
✔ Editable comments
✔ CTA buttons
✔ FAQ
✔ Testimonials
✔ Pricing tables
✔ Contact forms
✔ Google Maps placeholder
✔ Footer
✔ Social Media
✔ Fast loading
✔ Accessibility
✔ Clean code
✔ Easy customization
Remember, before you copy the prompt:
In some cases, AI ask some questions to the answer before writing any code. Required in case of actual details need to be incorporated instead of the sample date provided.
For example:
Business Name
Business Type
Product or Service
Target audience
Primary Goal: (Generate leads / Sell product / Promoting Ebook / Affiliate marketing / App downloads / Appointment booking / Portfolios / Newsletters)
Brand Colors
Preferred Style: Modern / Luxury / Minimal / Corporate / Creative / Dark / Elegant)
Business Description: Main Headline (optional)
Sub headline (optional)
Call-to- Social media links
Testimonial (optional)
Pricing (optional)
FAQs (optional).
Before you copy the master prompt
The AI prompt was designed to be used right away. In order to make it easy for you to see how it works, the prompt comes with a sample business with realistic information. You can then copy and paste the prompt into ChatGPT or any other suitable platform, and get a landing page quickly and professionally formatted without having to prepare your business details. After creating the landing page, it can be easily customized to suit your business.
Option 1- Recommend testing the prompt first.
The best way to learn about the result of this prompt is to just copy and paste the whole prompt into a text box of any appropriate AI system for generating a web page. Based on the information provided in the prompt, the AI will create a full-fledged landing page.
Option 2 - Customize the prompt
Before generating, if you are already running a business, product or service, you can change the sample business information at the start of the prompt with your own details before submitting it to AI platform.
Items that can be customized includes:
- Business name
- Logo
- Product or service
- Business description
- Target audience
- Brand colors
- Contact details
- Social media link
- Testimonials
- Questions asked frequently(FAQ)
- Pricing information
- Call-to-action buttons
- Images
- Affiliate links
- Website links
The AI will automatically take in your information when creating the landing page. Even after generating, the created image can be easily customized. If you do not want to alter anything, then it is ok; Customizing would not have any effect on the other main information of the page that was generated. The HTML file generated by the AI will be easy to customize and it is user-friendly. The code is well commented and clearly marked to indicate where you can replace text, pictures, colors, buttons, contact information and links.
For instance, you can use comments like:
- Replace the name of the business here
- Insert my company logo here
- Add my Product image here
- Change the primary color here
- Replace this button with this link.
These are some of the common comments used to customize the landing page, even by those who are not familiar with HTML.
Re-use the prompt again and again
This Master prompt has a few of the greatest benefits. It is not restricted to any single sort of business.
The prompt given here can be used to make landing pages for:
- Small businesses
- Affiliate marketing products
- Digital products
- eBooks
- Consultants
- Coaches
- Restaurants
- Local service businesses
- Real estate agencies
- Online courses
- Freelancers
- Software products (SaaS)
- Health and wellness enterprises
- Personal portfolios
- Event promotions
- Non-profit organizations.
Additions to the prompt:
If the business type naturally needs other sections not listed here, be clever and create and add other sections.
Examples:
Restaurant
→ Menu
→ Reservation
→ Opening Hours
Law Firm
→ Practice Areas
→ Attorney Profiles
Gym
→ Membership Plans
eBooks
→ Book Preview
→ Author
→ Reader Reviews
Software
→ Screenshots
→ Integrations
→ Feature Comparison
Coach
→ Programs
→ Client Results
This saves you from having to build a new prompt every time - just provide the business details and let AI build a new landing page for you. You're now ready to copy the Master Prompt and create your own landing page that's all professional.
The Professional Landing Page Generation Framework
STEP 1 – Professional Role Assignment
Outline the scope of AI's expertise, responsibilities, and standards.
Copy everything below exactly as written.
You are an elite team of highly-skilled professionals operating as a single agency. Your team consisting of:
- Senior UI/UX designer
- Award-winning front-end developer
- Senior Full-Stack Web Architect
- Conversion rate optimization (CRO) specialist
- SEO Expert
- Branding & Visual Identity Expert
- Professional Copywriter
- Digital marketing strategist
- Accessibility consultant (WCAG)
- User Experience Researcher
- Mobile responsive design expert
- Performance Optimization Engineer
- And others expertise.
Your objective is to work as a team of experts to design and build a vibrating, premium quality, visually stunning, super engaging and conversion-driven landing page to look like it's been professionally web designed for a high-paying client
All decisions should be based on:
- Professional appearance
- User experience
- Conversion optimization
- Visual hierarchy
- Readability
- Mobile responsiveness
- Accessibility
- SEO
- Fast loading performance
- Clean, maintainable code.
Quality Standard
This landing page is to be made in high-quality premium standards taking care of the following:
Each section should be professionally designed.
Avoid generic layouts.
Avoid placeholder-looking designs.
Don't fill out too much white space.
The layout should be designed so that it is well balanced and contemporary.
Design Principle
Each section should address one of these questions:
Who are you?
What do you offer?
Why should someone believe me?
How do this work?
Why did you choose you?
What do others say?
What is the price?
What is your method of communication?
Every visitor is taken through these questions until they arrive at the last call to action.
Design Style
The landing page should include:
Modern typography
Balanced spacing
Rounded cards
Professional color palette
Soft shadows
Use gradient backgrounds as needed
Modern buttons
Hover effects
Smooth scrolling
Subtle animations
Readable fonts
Consistent icon style
High-quality section spacing
Excellent visual hierarchy
Clean layout
Premium appearance
The page should be with current aspects, and appropriate for 2026 and beyond.
Responsive Design
The landing page should be perfect and compatible to:
Desktop
Laptop
Tablet
Mobile devices
Large screens
Small screens
Responsive designs to be utilized throughout the page.
Avoid horizontal scrolling.
Optimize it as mobile friendly for each section.
Performance
Generate clean code.
Avoid unnecessary JavaScript.
Avoid duplicate CSS.
Optimize loading speed.
Use efficient layouts.
Minimize unused styles.
Use semantic HTML.
Accessibility
Adhere to good accessibility standards.
Use:
Semantic HTML
Alt text placeholders
Where appropriate, ARIA labels are added to the appropriate sections
Readable font sizes
Proper color contrast
Keyboard-friendly navigation
Accessible forms
Descriptive button labels.
SEO
Generate:
SEO title
Meta description
Meta keywords (optional)
Open Graph tags
Twitter Card tags
Canonical tag placeholder
Structured heading hierarchy
For appropriate pages, include schema markup
Semantic HTML
Search engine friendly layout
Image alt placeholders.
Project Discovery
Mentally answer to the following questions before developing the landing page.
Do not exhibit these questions or answers.
Use them only to enhance the final design.
- What is the primary goal?
- Who is the target audience?
- What problem is being solved?
- What action should visitors take?
- Which emotions should the page create?
- What information is most important?
- Which sections will increase trust?
- Which sections are unnecessary?
- What is the design style more appropriate to the business?
- Which CTA should appear most frequently?
Only after completing this analysis should you begin generating HTML.
Coding Style
Make clean, professional code.
Incorporate comments in the HTML.
Every editable section should be clearly identified.
For example:
<! -- Replace the Company Logo Here! -->
<! -- Replace Hero Image -->
<! -- Replace Button Link -->
<! -- Replace Testimonials -->
<! -- Replace Business Address -->
<! -- Replace Phone Number -->
The code needs to be simple, easy to understand and easily modifiable by beginners.
Output Requirement
The final output should only be the completed HTML document.
Avoid giving explanations before and after the code.
Avoid summarizing the design.
Try not to write a description of the code.
Simply produce the complete landing page.
STEP 2 – Business Discovery & Strategic Planning
Analyze the business requirements and plan the best landing page strategy before generating any code.
Before writing the code, first analyse the information about the business that was provided. Determine the right structure, colour palette, page breaks, button placement, language and visual flow for the website, considering the nature of the business and the intended audience. Then, create the landing page accordingly.
And finally, before generating the landing page, envision it exactly as a professional web design agency would. Before writing any code, also plan the structure, user journey, conversion process, content flow, design consistency, and mobile user experience before writing the code. Do not mention this planning process, only output the finished HTML as specified.
Do not repeat data in multiple sections.
Each section should add new values.
Do not create pages that are generic or template.
Never use Lorem Ipsum or placeholder paragraphs. Write relevant and business-centric copy throughout the landing page.
The landing page should be unique, modern, trustworthy, and customized to specific business.
Default Sample Business configuration:
The default sample business configuration below is included so that you can immediately test the framework with the sample business information. This portion should be editable in the HTML after generating it. From the generated HTML, users can substitute the sample information with their own information and run the framework again to prefect their business. Proceed with the default sample business configuration given below to generate a complete landing page. Any information given in samples business information should be easily editable in HTML without affecting the structure of the page.
Business name- BrightPath digital solutions
Type of business- XXX marketing consultancy
Audience targeted- Business startups, entrepreneurs, solopreneurs, students, existing small business owners and local business units
Primary goal - Generate leads
Primary CTA - Book a free strategy session
Secondary CTA - Learn more
Business description: BrightPath digital solutions provides an all in one solutions for entrepreneurs and small business owners to expand their reach and operations through AI-driven marketing strategies, expert website design, search engine optimization, digital services and business automation.
Contact:
Email - xyz@abc.com
Contact number - +0 (000) 000-0000
Address - XXX Business avenue, zip-0000.
Website- www.abcxyz.com
Social media:
YouTube
Brand Colors:
Primary: Royal Blue
Secondary: White
Accent: Orange
Preferred Style:
Modern
Professional
Elegant
Trustworthy
Friendly
Editable HTML Comments
Create a full, responsive and search engine optimized landing page following the specification below:
Every section should include a comment like:
<! --OPTIONAL SECTION
If this section is not relevant to your business, you may safely delete it -->
Next, within the HTML, every editable section will be clearly marked with comments like:
<! --BUSINESS NAME
Replace "BrightPath Digital Solutions" with your own business name-->
<! --HERO IMAGE
Replace hero.jpg using your own picture-->
<! --PRIMARY CTA BUTTON
Replace the URL below with your landing page or affiliate link-->
ADS
STEP 3 - Professional Landing Page Generation
Landing Page Structure
Using the following structure given below, create the entire landing page.
Each section needs to have a definite purpose.
Ensure that in this section, the visitors are naturally led toward the primary call-to-action.
The repetitions if not necessary are to be avoided.
To maintain the visual consistency throughout the page.
Generate all content professionally without additional instructions.
1. Header
Create a modern sticky navigation header.
The header should be visible when scrolling.
Include:
- Company Logo (placeholder)
- Business Name
- Navigation Menu
- Home
- About
- Services / Products
- Features
- Testimonials
- FAQ
- Contact
- Primary CTA Button
The navigation should smoothly scroll to each section.
On mobile devices, convert the navigation into a professional hamburger menu.
Header Design
The header should include:
Professional spacing
Soft shadow
Semi-transparent when scrolling
Sticky behavior
Hover animation on menu items
Active menu highlighting
Rounded CTA button
Modern typography.
2. Hero Section
This is the most important section.
This section should be designed in such a way that the attention of the visitors is captured within the first five seconds.
The first main visible screen (above the fold) should be occupied by this section and ensure that visitors are encouraged to keep scrolling down the page. With a maximum of 150–250 words.
Create:
A powerful headline.
A good subheading.
A short paragraph describing the value proposition.
Primary CTA button.
Secondary CTA button.
Hero image placeholder.
Optional trust badges.
Customer statistics.
Star ratings.
Client logos (placeholders).
Hero Headline
Make a compelling headline.
It should:
Clearly communicate the main benefit.
Emphasize customer results.
Avoid generic marketing phrases.
Be short.
Memorable.
Emotionally engaging.
Sub headline
Expand upon the headline.
Explain:
Who the business helps.
What problem it solves.
Why it is different.
To keep it conversational.
Using technical jargon is to be avoided, unless it is appropriate to the business.
CTA Buttons
Generate two buttons.
A) Primary CTA
Examples:
Book Now
Order Today
Start Free Trial
Download Now
Get Started
Request Demo
Buy Now
B) Secondary CTA
Examples:
Learn More
See Pricing
View Portfolio
Watch Demo
Explore Features
Hero Image
Create an area for an image placeholder.
Include comments indicating where users should replace the image.
Create decorative patterns or background graphics, if suitable, through the use of CSS.
Hero Background
Use modern styling.
Possible elements:
Gradient background.
Abstract shapes.
Soft glowing icons.
Glass morphism.
Animated floating icons.
Subtle geometric patterns.
Do not overuse effects.
Maintain a vibrant professional appearance.
3. Value Proposition
Three or four cards each.
Example
✔ Save Time
✔ Increase Sales
✔ Trusted Experts
✔ 24/7 Support
4. Trust & Social Proof Section
After the hero section, create a dedicated trust-building area.
This part of the section should ease visitors' concerns about the business's credibility.
Include:
Experience (sample values).
Number of happy customers.
Completed projects.
Customer satisfaction percentage.
Professional certifications (placeholders).
Trusted partner logos.
Media mentions (placeholders).
Awards (optional).
Each statistic should use animated number counters.
For every metric an icon should be used.
Client Logos
Create place-holding logos for:
Client 1
Client 2
Client 3
Client 4
Client 5
Use neutral placeholder boxes with comments indicating where to replace them.
Trust Badges
Create badge placeholders like:
100% Satisfaction
Secure Payments
Certified professionals
Money-back guarantee
24/7 Support
Industry Certified
Adapt the badges according to the business type.
5. About Section
Create About section visually engaging. Maximum 250–350 words.
Divide into two coulumns
Left side:
Business story.
Mission. Vision.
Core values.
Right side:
Professional image placeholder.
Decorative graphics.
Experience highlights.
About Content
Compose natural and persuasive copy.
Explain:
Who the business is.
Why it exists.
What makes it different.
Who it serves.
Avoid exaggerated claims.
Focus on authenticity.
Mission
Create a concise mission statement.
Limit to no more than three sentences.
Customer-focused.
Vision
Generate an inspiring vision statement.
Explain long-term goals.
Compile a list of value creators.
Core Values
Create four to six value cards.
Examples:
Integrity
Innovation
Customer
Success
Quality
Transparency
Continuous improvement
For each value, include:
An icon.
A title.
A short description.
6. Services or Products Section
Automatically determine whether the business sells:
Products
Services
Digital products
Blogs
Courses
Affiliate products
Software
Professional services
Restaurant menu
Local business offerings
Generate the most appropriate layout.
Product Cards
Each card needs to have:
Professional image placeholder.
Title.
Short description.
Key benefit.
Call-to-Action button.
Hover animation.
Rounded corners.
Shadow effect.
Consistent spacing.
Service Cards
If services are offered, add:
Icon.
Service title.
Brief explanation.
Expected customer benefit.
Optional Learn More button.
Grid Layout
Use a responsive grid to arrange cards.
Desktop:
Three to four columns.
Tablet: Two columns.
Mobile: Single column.
Maintain equal spacing.
Use consistent sizing.
7. Why Choose Us Section
This section should be dedicated to clearly mentioning why visitors should choose this business rather than choosing a competitor.
Do not use generic marketing claims.
Focus on meaningful customer benefits and differentiators.
Include:
- A compelling section heading.
- A short introduction paragraph.
- Four to eight feature cards.
- Professional icons.
- Short description for each point.
Examples of differentiators:
- Industry expertise
- Proven results
- Personalized service
- Transparent pricing
- Fast turnaround
- Innovative solutions
- Dedicated support
- Customer-first approach
Each card needs to have a title, icon and a concise explanation.
8. Key Features Section
Ensure that the salient features or qualities of the product or service is included as a short description.
The short description created should be presented as appealing and in a well-ordered format.
Include the following in each feature:
- Feature title
- Professional icon
- Short explanation
- Customer advantage
If applicable, include image placeholders.
Establish the features using responsive cards or alternating content blocks.
9. Customer Benefits Section
Instead of only describing the features, explain the outcome that customers can experience and benefit from it.
Focus on benefits rather than technical specifications.
Examples:
- Save Time
- Increase revenue
- Improve productivity
- Reduce costs
- Enhance customer satisfaction
- Grow faster
- Simplify daily operations
Each benefit should include:
- Icon
- Title
- One to three sentence explanation
Describe it in a convincing and natural tone.
10. How It Works / Process Section
For business types that need explanation, create a process timeline.
Examples:
Step 1 – Contact Us
Step 2 – Free Consultation
Step 3 – Planning
Step 4 – Implementation
Step 5 – Delivery
Use number cards with a timeline.
Provide short description of each step.
Include subtle animations where appropriate.
11. Portfolio Or Gallery
If appropriate for the business, develop a portfolio section.
Examples include:
- Completed projects
- Product gallery
- Before and after comparisons
- Restaurant menu
- Property listing
- Event photos
- Software screenshots
Each item should include:
- Image placeholder
- Title
- Short description
Create a responsive Grid layout.
Include hover effects.
If this section is not appropriate, omit it automatically.
12. Case Studies
If appropriate, generate one to three short case studies.
Each case study to include:
- Customer type
- Challenge
- Solution
- Measurable results
Use professional cards to present them.
Avoid exaggerated claims.
Use "realistic" sample data where appropriate.
13. Video Section
If the business would benefit from video content, create a section containing
- Video placeholder
- Play button
- Brief description
- Optional transcript summary
Write in such a way that the users can change the placeholder and replace with their own YouTube videos, Vimeo or a self hosted video.
14. Testimonials
Write three to six reliable customer feedback reviews in the testimonial area.
Each testimonial should include:
- Customer name
- Job title
- Name of the company (if relevant)
- Profile image placeholder
- Five-star rating
- Short testimonial
- Business outcome
Testimonials should be different for each and uniqe.
Do not use a repetitive or clichéd style.
Use realistic language.
15. Success Metrics
Create an area highlighting specific accomplishments.
Examples:
- Projects completed
- Happy customers
- Years of experience
- Products sold
- App downloads
- Five-star reviews
Display each statistic using animated counters.
Use professional icons.
16. Pricing Section (When Appropriate)
Only create this section if pricing is applicable.
Examples:
- SaaS
- Memberships
- Coaching
- Courses
- Digital products
- Subscription services
Include:
- Two to four pricing cards
- Highlight the recommended plan
- Feature comparison
- CTA button
- Money refund guarantee (if applicable)
Omit this section automatically if pricing is not applicable.
17. Frequently asked questions
Create six to ten questions that are asked frequently (FAQ’s)
Questions should be authentic and address customers' concerns.
Can include collapsible accordion panels.
The answer should be short, factual and reassuring.
To avoid repeated information that has already been used in the page.
18. Final Call-To-Action
Create a prominent call to action section before the footer.
This section should summarize the value proposition and encourage immediate call for action.
Include:
- Strong headline
- Supporting text
- Primary CTA button
- Secondary CTA button (optional)
- Trust message
Examples:
- No Credit Card is needed.
- Free consultation.
- Cancel anytime.
- Secure checkout.
- Limited time offers (when applicable).
It is better to consider using contrasting colors so that this section stands out.
19. Professional Design Principles
The design of each section of the page should by modern UI/UX principles.
The final landing page generated needs to be premium, trustworthy, balanced and engaging.
Avoid outdated layouts.
Avoid clutter.
Excessive animations should be avoided
The design should be consistent throughout the page.
The decisions taken on design should lead to improvement in usability and conversions.
Visual Hierarchy
Design a clear hierarchy of visuals throughout the page.
Visitors should know where to start searching first.
Use different font size, spacing, colour and contrast to highlight key information.
Prioritize:
- Headlines
- Calls-to-Action
- Benefits
- Customer Proof
- Contact Information
The user should be naturally drawn from one section to another.
White Space
Include profuse white space throughout the page.
An overcrowded appearances to be avoided
Ensure that uniform margins and padding are maintained.
Provide required spacing between sections.
The design should be open, elegant and readable.
Typography
Use modern web-safe fonts.
Establish a clear hierarchy of typography.
Generate:
Primary Heading Style
Secondary Heading Style
Section Heading Style
Body Text Style
Button Text Style
Caption Style
Ensure typography remains readable in all screen sizes.
Avoid decorative fonts.
Use professional font weights.
Maintain consistent line spacing.
Color Strategy
Select colours according to business nature.
Examples:
Corporate
Luxury
Healthcare
Restaurant
Technology
Education
Fitness
Finance
Creative Agency
E-commerce
Online Affiliate marketing
Digital product marketing
Online blogs
eBook publisher
Startup
Entrepreneur
Solopreneur
Small business
Consistent branding to be maintained.
Make sure of accessibility.
Avoid excessive colors.
Avoid using accent colors for anything but important actions.
Primary buttons should naturally stand out.
Color Psychology
Choose the colors that will support meeting business goals.
For example:
Blue: Trust
Orange: Action
Green: Growth
Red: Urgency
Purple: Creativity
Black: Luxury
White: Cleanliness
Apply colors thoughtfully rather than randomly.
Button Design
Create contemporary CTA buttons.
Include:
Rounded corners
Comfortable padding
Hover animation
Shadow
Smooth transition
Readable typography
Clear contrast
Primary CTAs should always be more visually prominent than secondary buttons.
Card Design
Whenever cards are used, maintain consistency.
Each card should include:
Rounded corners
Soft shadows
Consistent spacing
Professional icons
Balanced typography
Hover effects
Proper alignment
Cards should never appear crowded.
Iconography
Consistent icon style should be used wherever required for the entire landing page.
The icons are supposed to complement the text and not be the focus of the text itself.
Keep the same size and space between the tops and the bottom consistently.
Align icons consistently.
Image Placement
All photos must be related to the text.
Don't use decorative pictures in random spots.
Use placeholder comments indicating where images can be replaced.
Maintain consistent image ratios.
Use responsive image containers.
Section Transitions
Create smooth visual transition between sections.
Add spaces, colors, dividers or subtle shapes.
Avoid abrupt changes.
Maintain a consistent visual flow.
Responsive Layout
Every section should be able to resize itself automatically to fit various screen size.
Desktop
Laptop
Tablet
Mobile
Ensure:
No horizontal scrolling
Comfortable spacing
Readable typography
Touch-friendly buttons
Responsive images
Layouts to be flexible.
Mobile-First Thinking
Prioritize the mobile experience.
Do not resize the desktop layout.
Optimize each section for smaller screens.
Maintain usability.
Animations
Use subtle animations only.
Examples:
Fade In
Slide Up
Scale
Hover
Smooth Number Counters
Floating Icons
Smooth Scroll
Avoid distracting animations.
Never reduce page performance.
Micro-Interactions
Include subtle interactions for better user experience.
Examples:
Button hover effects
Image zoom on hover
Card lift effect
Navigation highlight
Accordion transitions
Form focus effects
Smooth scrolling
Loading transitions
Animations should be realistic.
Accessibility
Ensure that the design is accessible.
Maintain:
Proper contrast
Readable font sizes
Keyboard navigation
Alt text placeholders
ARIA labels
Logical heading hierarchy
Accessible forms
Color-independent indicators
Follow the contemporary accessibility guidelines, where possible.
Trustworthy Design
The landing page should immediately communicate professionalism.
Avoid trickeries.
Do not use aggressive marketing phrases.
Build credibility through:
Clean design
Testimonials
Statistics
Awards
Professional imagery
Clear messaging
Transparent information.
Emotional Design
Create an emotional connection with the visitors.
Use persuasive but honest copy.
Focus on problem solving.
Emphasize results, not features.
Promote confidence and trust.
Consistency
All sections should be felt that it belongs to the same website.
Maintain consistent:
Colors
Spacing
Typography
Buttons Icons
Card styles
Border radius
Shadow styles
Animation timing
Navigation
Overall design language
Do not combine conflicting styles.
Optional Advanced Design Features
When appropriate, intelligently include:
Glassmorphism
Gradient overlays
Animated backgrounds
Wave dividers
Curved sections
Floating shapes
Interactive cards
Progress indicators
Comparison tables
Feature highlights
Use the above features when they enhance usability and visual appeal.
Excessive use of visual effects to be avoided.
Design Quality Check
Before creating the ultimate HTML, be sure if:
✓ The page is professional.
✓ The design is aesthetically pleasing.
✓ Easy to scan layout.
✓ Calls-to-Action are prominent.
✓ All sections are well-defined.
✓ The mobile responsiveness has been considered.
✓ Accessibility has been adhered to.
✓ Colors are consistent.
✓ Typography is readable.
✓ There are images to support the content.
✓ The user journey naturally guides visitors towards conversion.
If any of the above criteria’s are not satisfied, then the design should be further amended before generating the final HTML code.
20. Technical Development Standards
Build landing page with modern web standards.
Build clean, well structured and maintainable code.
The complete landing page should be ready for professional deployment and require minimal modification.
HTML Requirements
Use semantic HTML5 elements throughout the document.
Example includes:
- Header
- Navigation
- Main
- Section
- Article
- Aside (when appropriate)
- Footer
Create a rational heading hierarchy using H1, H2, H3 and H4.
One main heading (H1) to be used per page.
Use descriptive element names, whenever possible.
CSS Requirements
Place all CSS in one <style> section.
Organize styles logically.
Examples:
- Reset Styles
- Variables
- Typography
- Layout
- Navigation
- Hero
- Sections
- Cards
- Buttons
- Forms
- Footer
- Responsive media queries.
Use CSS variables for colours, spacing, typography, border radius, etc wherever required. Avoid duplicating the styles.
Create a clean and readable CSS.
Javascript requirements
Write all the Javascript in one <script> section.
Javascript is used only where it can genuinely improve the user experience.
Example includes:
- Smooth scrolling
- Mobile navigation toggle
- FAQ accordion
- Animated counters
- Scroll animations
- Form validation
- Button interactions
- Back-to-top button
Try not to put any unnecessary libraries unless requested.
Maintain a light and organized JavaScript.
Responsive design requirements
Make sure the landing page works on:
- Desktop
- Laptop
- Tablet
- Mobile
All the contents should be readable, legible and visually appealing in all screen sizes.
Buttons should be touch friendly.
The images should be proportionally scaled.
Navigation should adapt automatically.
Form Requirements
Whenever a contact form is included:
Create professionally designed input fields for:
- Full Name
- Email Address
- Phone Number (optional)
- Subject (optional)
- Message
The following information should be provided in each field:
- Labels
- Placeholder text
- Validation
- Clear error handling
- Accessible markup
Create a professional submit button.
SEO Requirements
Generate:
- Page Title
- Meta Description
- Canonical URL placeholder
- Open Graph tags
- Twitter Card tags
- Favicon placeholder
- Structured heading hierarchy
- Descriptive image ALT attributes
- Semantic HTML
Where appropriate, include basic structured data using Schema.org markup.
Accessibility requirements
Make sure to comply with modern accessibility best practices.
Include:
- Descriptive ALT text placeholder
- ARIA labels wherever appropriate
- Keyboard navigation support
- Sufficient color contrast
- Readable font sizes
- Proper focus states
- Accessible forms
- Accessible buttons
Using color as the only means for communicating information should be avoided.
Performance optimization
Optimize speed and efficiency.
Use:
- Lightweight code
- Efficient CSS
- Minimal JavaScript
- Optimized spacing
- Responsive images
- Lazy loading where appropriate
Do not use unnecessary animation and excessive effects.
Browser Compatibility
Create code that is compatible with all modern browsers including:
- Google Chrome
- Microsoft Edge
- Mozilla firefox
- Safari
Use the updated version of HTML & CSS.
Editable Comments
Insert clear comments where users can customize the content in the HTML document. Examples:
<! -- Replace Company Logo Here -->
<! -- Replace Hero Image -->
<! -- Replace Business Name -->
<! -- Replace the Primary CTA Link -->
<! -- Replace Contact Information -->
<! -- Remove Social Media Links -->
<! -- Replace Testimonials -->
<! -- Replace Pricing -->
<! -- Optional Section - Delete if not required -->
Comments should be obvious and easily understood.
Optional Section Handling
If a section is not suitable for the business type, intelligently omit it rather than forcing unnecessary content.
For example:
- Pricing may not be required for a law firm.
- Menu section only apply to restaurants.
- Portfolio sections may not suit every business.
- Booking calendars are relevant only for appointment based businesses.
Organize and give priority to relevance over completeness.
Content Quality
Create original, meaningful, and persuasive content.
Do not use:
- Lorem Ipsum
- Repetitive marketing phrases
- Empty filler text
- Generic placeholder paragraphs
Each section should provide useful information that is appropriate for the business type and audience.
Final Output Requirements
Final output should be only one complete HTML document.
Include:
- HTML
- CSS
- JavaScript
All the information should be contained in a single file.
Avoid giving any explanation before or after the code.
Avoid summarizing the design.
Do not describe implementation decisions.
Only return the completed landing page.
Final Quality Assurance Checklist
Before generating the final HTML verify the following silently:
✓ Business information has been correctly interpreted.
✓ The page structure corresponds to the type of business.
✓ Navigation links functions as per the requirements.
✓ Call to action are easily visible.
✓ Responsive design has been applied.
✓ Mobile navigation functions correctly.
✓ Typography is consistent.
✓ Color palette used is consistent.
✓ Placeholders have been used in images.
✓ ALT text placeholders have been included.
✓ Forms include labels and validation.
✓ Buttons are accessible.
✓ HTML is semantic.
✓ CSS is organized.
✓ JavaScript is lightweight and clean.
✓ Comments clearly identify editable sections.
✓ Additional sections have been added if appropriate.
✓ No conflicting or duplicated information is presented across the sections.
✓ SEO elements have been generated.
✓ Accessibility best practices have been followed.
✓ Performance has been considered.
✓ The design appears contemporary, trustworthy, professional and focused on conversions.
If any of the above is not satisfactory, improve the landing page before creating the final output.
End of Professional Landing Page Generation Framework
Final thoughts
Congratulations! Now you have a professional landing page generation structure that may be utilized for nearly any business. As AI models evolve, so will the quality of the resulting landing pages. As AI models develop, the quality of landing pages generated will improve. Do not be afraid to try something different or take a chance and try this prompt for various industries, layout, and also with follow up prompts.
Note: This framework works with any AI that produces HTML, whether displayed as HTML code, a preview or a downloadable file, depending on the platform. This prompt can be used with any AI system that can write long form HTML code and follow lengthy instructions. Follow the instructions given by your chosen AI platform and answer the questions raised by the AI system to save or customize the final generated landing page. There are various suitable AI platforms that are popular.
Example:
- ChatGPT
- Google Gemini
- Anthropic Claude
- Microsoft Copilot (as applicable to the version)
The exact output will vary because each AI model has its own features, but the framework is designed to work with any capable AI coding assistants in general. Market feedbacks are, using Claude and Gemini tools are with less conversational for generating the output than ChatGPT.
Point to remember- do’s and don’ts. Definitely include this.
For example:
Do
✔ Copy the entire prompt framework.
✔ Leave the framework unchanged the first time you test it.
✔ Additional information required by the AI system can be provided for specific businesses
✔ Save the generated HTML before editing.
✔ Replace all placeholder information.
✔ Test the page in desktop and mobile.
✔ Test all the CTAs.
✔ Compress images before publishing.
✔ Preview in different browsers.
Don't
✘ Delete sections from the framework.
✘ Replace only part of the sample business.
✘ Publish with placeholder text.
✘ Leave example email addresses.
✘ Forget to test contact forms.
Comments
Post a Comment