How to make a landing using AI in an hour - a guide with prompts, Cursor, Lovable and deploy on Vercel

◷ 16 min read 6/4/2026

Main chat

A chat for vibe coders: news, guides, live cases, marketplace, and finding executors.

How to make a landing using AI in an hour - a guide with prompts, Cursor, Lovable and deploy on Vercel - обложка

Previously, landing meant either paying a developer from 30,000 rubles and waiting for a week, or to figure out HTML/CSS/JS, Bootstrap, hosting and deploit. Now it's an hour of work and zero lines of manually written code.

In this guide - a full route from an empty page to a live site on the Internet. With specific prompts that can be copied, an explanation of each step and a separate block on SEO – because a beautiful landing page without organic traffic exists only for those you link to yourself.

What you get on the way out

For an hour on this guide you can make a full landing:

mobile-friendly
with the right SEO structure (headings, meta tags, speed)
logged in to a real domain via Vercel
code-ready

It is suitable for: personal project, MVP, portfolio, service, event, product – any task that requires a one-page presentation.

Tools: Lovable or Cursor - what to choose

Before starting, you need to choose a tool. They solve the same problem in different ways.

Lovable if you want results immediately

Lovable is a browser tool that generates a ready-made React application according to the description. You write a prompt, after 30 seconds you see a working preview, rule iterations.

Suitable if: no familiarity with the IDE, the speed of the first result is important, you want to immediately see a live preview.

Limitations: Less control over file structure, harder to manually connect third-party libraries.

Cursor if you want complete control

Cursor - IDE based on VS Code with built-in AI. Generates and edits files directly on your computer. Full access to the code, Git, terminal.

Suitable if you want to understand what is happening in the code, plan to develop the project further, you need integration with other services.

Recommendation for the first landing: Start with Lovable - get the result faster and understand the process. For further development, move to Cursor.

In this guide, there will be prompts for both tools - they are almost the same, the difference is only in the interface.

Step 1. Preparation: 10-minute brief (0:00–0:10)

The main mistake is to start with the “make me landing” prompt. AI will generate something common, you will spend an hour editing. The right approach is to write a mini brief first.

Answer five questions:

**1. What does the lander sell or present? ** Not “service,” but specifically, “an online course in vibcoding for entrepreneurs with no experience in development.”.

**2. Who's the target audience? ** “Small business owners 30-45 years old, want to automate routine, do not know how to code.”.

**3. What is the most important thing a visitor should do? ** Leave an email? Write to Telegram? Buy? One call to action works better than three.

**4. What tone and style? ** Serious and corporate? Friendly and simple? Technical?

**5. Do you have any competitors or favorite sites? ** Competitor URLs can be given directly to Lovable to analyze the style.

Write the answers in a text file - they will become the basis of the first prompt.

Step 2. The first prompt – the structure of the landing (0:10–0:20)

Open Lovable or a new Cursor chat and give the first prompt. Here’s a template that works – insert your answers from the brief:

code

Create a landing for [what].

Target audience: [Who].
Objective: [Action — for example, leave email in the form].
Tone: [Tone — for example, friendly, without jargon].
Stack: React + Tailwind CSS.

Page structure:
1. Hero section: H1 header, subheading, CTA button
2. Block with a problem: 3 pains of the target audience
3. Solution: How the product solves these pains
4. Block with advantages: 4-6 cards with icons
5. Section with social proof: 3 reviews (use placeholders)
6. Block with prices or rates (if applicable)
7.FAQ: 5 questions and answers
8. Final CTA: form with email field and button
9.Footer: Copyright, Policy Links

Color scheme: [Color – for example, dark background, accent #3f64ff].
Font: Inter or similar sans-serif.

Important:
Mobile adaptation is mandatory
Scrolling animations (subtle, not aggressive)
- Fill all texts with realistic placeholders on the topic

An example of a completed prompt

code

Create a landing page for the online course "Vybcoding from scratch" - training
Creating applications with AI without programming knowledge.

Target audience: entrepreneurs and managers 28-45 years old
They want to create their own tools and are afraid of technical complexity.
The main goal is to leave the email in the form for a free lesson.
Tone: friendly, motivating, without technical jargon.
Stack: React + Tailwind CSS.

Page structure:
1. Hero: “Build Your First App This Weekend”
subtitle about AI development, CTA "Get a free lesson"
2. Block with pain: “Helping a developer is expensive”, “No time”
Learn code for years, “Ideas exist – no implementation”
3. Solution: The course explains how AI writes code for you
4. Advantages: 6 cards (speed, cost, support, etc.)
5. Reviews: 3 placeholders from "graduates"
6. Tariffs: Basic / Advanced / Personal
7. FAQ: 5 questions about format, time, requirements
8. Final CTA: Form email + button
9. Footer

Colors: dark background #0a0a0a, accent #3f64ff, text #ffffff.
Font: Inter.

Lovable will generate the first version in 20-40 seconds. Cursor will create component files in the project folder.

Step 3. Iterations – edits through the prompts (0:20–0:35)

The first version is almost never perfect - that's normal. The next 15 minutes are spent on spot corrections with prompts.

Text and content corrections

code

Rewrite the Hero title. It's too general now.
The new heading should:
Contain a specific promise of results
Talk about time ("weekend", "1 hour")
Directly address the reader
Offer 3 options.

code

In the block with pain, replace the third paragraph. Instead of abstract.
Write a specific situation: the person invented
The idea of the application, opened Upwork, saw the development price and closed.

Design corrections

code

The Hero section is too empty. Add:
Gradient background with a thin grid (grid pattern)
- Badge above the title: "Already 1200+ graduates"
Under the CTA button is the small text “No credit card”. Cancellation at any time.”

code

Make cards with advantages on a dark background with a thin
boundary and icons from lucide-react. Add the hover effect:
light glow along the border of the card when hovering.

code

The CTA button is flashing too aggressively. Replace animation
The subtle pulse is just a shadow, not the button itself.

Editing forms

code

Make the email form two-step:
1. Step 1: Email field + Get a lesson button
2. Step 2: After submit – “Check your mail” message + tick animation
Use useState to manage your condition.

Addition of sections

code

Add the “How Does It Work” section between the pain block and the block
with advantages. Three steps numbered:
1. Describe the idea in words.
2. AI generates working code
3. Launch and show customers
Visually, the horizontal line connects the steps on the desktop.
vertical on mobile.

Step 4: SEO is the most important block (0:35–0:50)

A beautiful landing page without SEO is an ad that no one will see without a link. Proper SEO optimization takes 15 minutes in a prompt but affects traffic for years.

4.1 Meta* tags

code

Add the full set of SEO and Open Graph meta tags to <head>:

<title>Vibecoding from scratch - create an application over the weekend without code</title >>
<meta name="description" content="Online course on creating applications
with AI for entrepreneurs. No code knowledge. First result in 2 days.
There are 1,200+ graduates. >>
<meta name="keywords" content="wibcoding, create an application without code,
AI development, programming course, lovable cursor >>
<link rel="canonical" href="https://ваш-домен.ru/">"

Open Graph:
<meta property="og:title content=" >>
<meta property="og:description" content=" >>
<meta property="og:image" content="https://ваш-домен.ru/og-image.png">"
<meta property="og:url" content="https://ваш-домен.ru/">"
<meta property="og:type" content="website" >>

Twitter Card:
<meta name="twitter:card" content="summary large image" >>
<meta name="twitter:title" content=" >>
<meta name="twitter:description" content=" >>
<meta name="twitter:image" content="https://ваш-домен.ru/og-image.png">"

4.2 Correct heading hierarchy

This is one of the most common errors of AI-generated landing pages: several H1, H2 and H3 in random order.

code

Check and correct the entire page title hierarchy:
- Exactly one <h1> - only in the Hero section. It must contain
The main key query of the page.
Each section of the landing page opens <h2>.
Subparagraphs within the section are <h3>.
- No h4/h5/h6 on the landing.
Buttons, captions, badges are <p> or <span>, not headlines.
Remove the current header structure and correct all violations.

4.3 Schema.org markup

Structured data helps Google better understand content and show advanced snippets:

code

Add JSON-LD markup Schema.org to <head>:

For the course:
{
"@context: "https://schema.org","
"@type": "Course,"
"name": "Viebcoding from scratch,"
"Description": "Online course on creating applications with AI",
"provider": {
"@type": "Organization,"
"name": "The name of your company"
}
"offers":
"@type": "Offer,"
"price": "0,"
PriceCurrency: RUB,
"Description": "Free first lesson"
}
}

For the FAQ section, add a separate FAQPage block:
{
"@context: "https://schema.org","
"@type": "FAQPage,"
"mainEntity":
{
"@type": "Question,"
"Name": "Do you need programming knowledge?"
"acceptedAnswer":
"@type": "Answer,"
"text": No. The course is designed specifically for people without a technical background.
}
}
Other questions from the FAQ section
]
}

FAQPage markup often displays directly in the SERPs – this significantly increases CTR.

4.4 Loading speed

Speed is a direct ranking factor for Google. Three mandatory optimizations:

code

Optimize productivity:

1. All images:
- WebP format
Attributes width and height are mandatory
Loading="lazy" for everything below fold
- loading="eager" + fetchpriority="high" for Hero-image

2. Fonts:
Download Inter through Google Fonts with display=swap
- Add <link rel="preconnect" href="https://fonts.gstatic.com">"
Preload only used marks (400, 600)

3. Critical CSS:
Styles Hero-section built-in inline in <head >>
- All other styles load asynchronously

4.5 Mobile adaptation and Core Web Vitals

code

Check and optimize for mobile devices:

- viewport meta required: <meta name="viewport"
content="width=device-width, initial-scale=1" >>
CTA buttons: minimum 44×44px (tap target size)
Main text font: at least 16px on mobile
Section spacing: 48px on mobile, 96px on desktop
Hero section on mobile: text on top of the image, not near
- Form on mobile: button for full width

LCP (Largest Contentful Paint):
Hero image or background gradient should be loaded first
No heavy libraries on the critical path.

For CLS (Cumulative Layout Shift):
All images with fixed dimensions
Fonts with font-display: swap and a given fallback font

4.6 Semantic HTML

code

Replace all <div> with semantic tags where appropriate:
- Main navigation: <nav >>
- Main section: <main >>
Each thematic block: <section> with aria-labelledby
- List of benefits: <ul> + <li >>
- Reviews: <blockquote> + <cite >>
- Footer: <footer >>
Form with captions: <label for=..."> + <input id=..." >>

Add alt text to all images.
Add aria-label to textless icons.

4.7 Sitemap and robots.txt

code

Create two files in the public/ folder:

sitemap.xml:
<?xml version="1.0" encoding="UTF-8"? >>
<urlset xmlns=http://www.sitemaps.org/schemas/sitemap/0.9">
<url> >>
<loc>https://ваш-домен.ru/</loc>
<lastmod>2026-06-03</lastmod >>
<changefreq>monthly</changefreq >>
<priority>1.0</priority >>
</url >>
</urlset >>

robots.txt:
User-agent: *
Allow:
Sitemap: https://ваш-домен.ru/sitemap.xml

Step 5. Deployment at Vercel (0:50–1:00)

Vercel is the easiest way to roll out a React project on the Internet. The free rate covers 95% of landing tasks.

From Lovable

In Lovable there is a button Publish – click, get the address on .lovable.app. To connect your domain: go to the project settings → Custom Domain → enter the domain → add a CNAME record to the DNS.

If you want to deposit through Vercel instead of built-in Lovable hosting, export the project with the button Export to GitHub, then follow the instructions below.

From Cursor (via GitHub + Vercel)

Step 1. Initialize Git and start in GitHub:

bash копировать

git init
git add .
git commit -m "Initial landing page"
gh repo create my-landing --public --push

Step 2. Log in to vercel.com, log in via GitHub.

Step 3. Press Add New Project → select my-landing repository → click Deploy.

Vercel itself will determine that this is a React-project, configure the assembly and deploit. After 60-90 seconds, the site is live at my-landing.vercel.app.

Step 4. Connect your domain: Settings → Domains → Add Domain → enter the domain → add the suggested DNS entries from your registrar.

After that, each git push in the branch main = automatic deployment of the new version. No manual server updates.

Environment variables

If there is a form in the landing with sending to the backend:

bash копировать

# Vercel Dashboard → Settings → Environment Variables
NEXT PUBLIC API URL=https://api.ваш-сервис.ru
RESEND API KEY=re xxxxxxxxxxxxxxx

## Step 6. Analytics and conversion tracking (bonus)

Landing without analytics is money in the dark. Minimum set:

code

Connect the analytics:

1. Vercel Analytics (built-in, free):
npm install @vercel/analytics

In the root component:
import { Analytics } from '@vercel/analytics/react'
Add <Analytics /> to the end of JSX

2. Event when sending the form:
import { track } from '@vercel/analytics'

const handleSubmit = () =>
track('lead form submitted', {source: 'hero cta' })
}

3. Yandex Metrika (for Russian-speaking audience):
Add a script to <head> with your counter ID.
Set your target to click on the CTA button.

Common Mistakes and How to Avoid Them

In an hour you can not only do landing, but also step on standard rakes. Here are the most frequent:

Multiple calls to action. “Buy”, “Subscribe”, “Learn more” and “Write to us” on one screen – conversions drop. One landing = one target action.

H1 with the brand name. I.T. Academy in H1 is a mistake. H1 should contain a key request and benefit: “An online course on building AI applications without code.”.

Slow download due to video in Hero. The video in the background of the Hero section weighs 5-20 MB and kills LCP. Replace it with CSS or a static image.

Form without confirmation. The user presses the button - does not know if the form has been sent. Always add a state of success.

The title text hasn’t changed. The AI generates template titles like “Welcome” or “Discover New Opportunities.” Rewrite H1 to your audience’s real search query.

No mobile version of the form. Check the landing page on your phone in person - the form should be convenient, the button is large enough.

Final checklist before publication

Before you share the link, go through the list:

code

SEO:
One H1 with a key request
Title up to 60 characters, description up to 160 characters
Canonical tag with final URL
● All images with alt texts
JSON-LD markup (Course/Service + FAQPage)
Sitemap.xml and robots.txt in /public

Speed:
● Verified via PageSpeed Insights - LCP < 2. 5s
● All images in WebP
Fonts with font-display: swap

Mobile version:
● Checked on iPhone SE (small screen)
● All buttons are at least 44×44px
The form works with a mobile keyboard

Content:
● No Lorem ipsum and obvious placeholders
● Real or plausible reviews
The CTA button is one and visible.
Footer with privacy policy (especially if there is a form)

Technically:
The form sends data or at least shows a success state
● No broken links
● Favicons connected
Open Graph image 1200×630px created

How to Iterate After Launch

Landing is not the end, but the beginning. After launch, the work continues with prompts:

code

According to Vercel Analytics:
80% of users leave after the Hero section
Average scrolling depth - 40%
Rework Hero: Make the title more specific, add
Social proof directly below the CTA (number of customers)
or company logos), reduce the indent to the first content block.

code

Form conversion is 0.8%, I want to raise it to 2%+.
Test three versions of the CTA button text:
1. "Get a free lesson"
2. "Start free."
3. "I want to try"
Implement an A/B test through random distribution of users
LocalStorage.

Prompt month after launch often yields more output than initial generation.

Conclusion

The hour is a realistic time for the first working version of the landing page. A high-quality result that converts and is visible in the search will require another 2-3 hours of iterations and edits after the first deploitation.

The main thing that changes AI in this process is that you stop depending on the developer for each edit. Wanted to change the color of the button, reformulate the title, add a section — prompt, and ready.

** Shortened route:**

Write a brief (10 min) → the first prompt → get the basic version
Iterations of prompts on design and content (15 min)
SEO Prompts: Meta* tags, H1, Schema.org, speed (15 minutes)
Deploy at Vercel via GitHub (10 mins)
Checklist check (10 min)

The link can be shuffled within an hour after the start.

* Meta Platforms Inc. (Facebook, Instagram) is recognized as an extremist organization and its activities are prohibited in the Russian Federation.

How to make a landing using AI in an hour - a guide with prompts, Cursor, Lovable and deploy on Vercel

What you get on the way out

Tools: Lovable or Cursor - what to choose

Lovable if you want results immediately

Cursor if you want complete control

Step 1. Preparation: 10-minute brief (0:00–0:10)

Step 2. The first prompt – the structure of the landing (0:10–0:20)

An example of a completed prompt

Step 3. Iterations – edits through the prompts (0:20–0:35)

Text and content corrections

Design corrections

Editing forms

Addition of sections

Step 4: SEO is the most important block (0:35–0:50)

4.1 Meta* tags

4.2 Correct heading hierarchy

4.3 Schema.org markup

4.4 Loading speed

4.5 Mobile adaptation and Core Web Vitals

4.6 Semantic HTML

4.7 Sitemap and robots.txt

Step 5. Deployment at Vercel (0:50–1:00)

From Lovable

From Cursor (via GitHub + Vercel)

Environment variables

## Step 6. Analytics and conversion tracking (bonus)

Common Mistakes and How to Avoid Them

Final checklist before publication

How to Iterate After Launch

Conclusion

Taste-Skill: How to give AI “good taste” and get rid of the boring frontend forever

—

How to properly compose proms for DeepSeek: a complete guide

Automatic Deploy on VPS via GitHub Actions – a step-by-step guide

GitHub from scratch: registration, first repository and basic commands

Taste-Skill: How to give AI “good taste” and get rid of the boring frontend forever

How to make a readable interface without a designer: typography and indentations

How to make a landing using AI in an hour - a guide with prompts, Cursor, Lovable and deploy on Vercel

## What you get on the way out

## Tools: Lovable or Cursor - what to choose

Lovable if you want results immediately

Cursor if you want complete control

## Step 1. Preparation: 10-minute brief (0:00–0:10)

## Step 2. The first prompt – the structure of the landing (0:10–0:20)

An example of a completed prompt

## Step 3. Iterations – edits through the prompts (0:20–0:35)

Text and content corrections

Design corrections

Editing forms

Addition of sections

## Step 4: SEO is the most important block (0:35–0:50)

4.1 Meta* tags

4.2 Correct heading hierarchy

4.3 Schema.org markup

4.4 Loading speed

4.5 Mobile adaptation and Core Web Vitals

4.6 Semantic HTML

4.7 Sitemap and robots.txt

## Step 5. Deployment at Vercel (0:50–1:00)

From Lovable

From Cursor (via GitHub + Vercel)

Environment variables

## ## Step 6. Analytics and conversion tracking (bonus)

## Common Mistakes and How to Avoid Them

## Final checklist before publication

## How to Iterate After Launch

## Conclusion

Taste-Skill: How to give AI “good taste” and get rid of the boring frontend forever

—

What you get on the way out

Tools: Lovable or Cursor - what to choose

Step 1. Preparation: 10-minute brief (0:00–0:10)

Step 2. The first prompt – the structure of the landing (0:10–0:20)

Step 3. Iterations – edits through the prompts (0:20–0:35)

Step 4: SEO is the most important block (0:35–0:50)

Step 5. Deployment at Vercel (0:50–1:00)

## Step 6. Analytics and conversion tracking (bonus)

Common Mistakes and How to Avoid Them

Final checklist before publication

How to Iterate After Launch

Conclusion