Skip to main content

The Ultimate 10-Minute AI Site Build Guide: Vercel v0 Step-by-Step โ€” From Zero to an Inquiry Landing Page

Hey everyone!

After the last Bolt tutorial went live, my inbox exploded. So many of you built your first AI landing page and felt that sweet sense of accomplishment.

Today we bring you something even hotter โ€” the Vercel v0 step-by-step walkthrough. Simpler, more intuitive โ€” arguably the best AI site-build tool out there right now.

We firmly believe AI is this era's best gift to every ordinary foreign-trade operator. We don't sell courses. We don't charge money. We just want to share the purest, most practical knowledge so more foreign-trade folks can shake off the anxiety and actually make real money.

Take a look at the result first: the site below is what we built from scratch using this article's method, in under 10 minutes. Demo site: https://glass-v0.laifa.xin/

Excited? Hang on โ€” this tutorial reveals every detail, every step, even every "battle of wits" with the AI.

1. Opener Comparison: v0 vs. Bolt โ€” Which One Should I Choose?โ€‹

Before we start, let's spend a minute clarifying the differences between v0 and Bolt so you can pick what suits you.

  • v0 advantages:

    • Easier to use: besides AI prompts, v0 supports visual editing โ€” you can directly modify text and tweak styles on the page, more intuitive and saves AI token consumption.
    • Free quota: also offers free usage.

  • v0's "downsides" (you need to know):

    • Can't export static pages: v0-generated pages only live on Vercel. There's 100GB free traffic per month, but exceeding that gets pricey, and you risk getting hit by traffic abuse. In contrast, Bolt lets you export pure static files and deploy anywhere (e.g. Tencent Cloud Pages from our last tutorial) โ€” higher flexibility.
    • Free version has branding: pages built with free v0 have a "Built with v0" icon at the bottom. Doesn't affect functionality, but for a professional-looking B2B site, it can feel a bit cheap.

Vercel v0 homepage screenshot โ€” clean interface and powerful AI generation

One-line summary:

  • Want maximum flexibility and 100% control? Pick Bolt.
  • Value convenience and visual editing, don't mind the small branding? v0 is your dish.

Of course, if you want it all โ€” v0's convenience without the branding โ€” you can upgrade to the $20/month paid plan. Orโ€ฆ share your v0 link with us, and we'll help you publish an ad-free version! (Details at the end.)

OK, enough talk โ€” let's get going!

2. AI Generates the Site Draft (v0 in Action)โ€‹

The prep work (using WPS to convert files, extracting Markdown from Yuque, structuring content with Google AI Studio) is identical to the last tutorial โ€” we jump straight to the AI site-build step.

Open v0.dev, paste the build requirements and product info you've prepared into the input box.

Prompt:

Help me build a landing page
1. In English
2. Needs navigation โ€” easy to jump to sections
3. Needs a form โ€” customers can submit inquiries
4. Company info: not yet available โ€” please fabricate
5. Product info
[paste in the product info you structured in aistudio]

Paste the carefully prepared build prompt and product materials into v0's input box

Click generate, and AI starts furiously "typing code". You'll see the code area on the right scrolling โ€” AI is hard at work.

AI generating code based on the prompt โ€” Stop button in bottom left, code area scrolling live on right

When the "Stop" button in the bottom left disappears and the right-side code stops scrolling, a complete site draft is in front of you.

Site draft complete โ€” preview shows a full page on the right, AI status on left has stopped

3. Page Optimization & Modificationโ€‹

1. AI Prompt Modifications (Global & Local)โ€‹

Page feels bland? Tell AI directly, e.g. "Add cool effects to the page".

Type a new modification prompt to make AI add more motion and visual effects

AI understands your intent, suggests several improvement directions for you to pick, then starts a new round of optimization.

AI analyzed your request and begins to optimize the page โ€” you can see it thinking and generating new code

Once optimized, AI tells you exactly what it changed. See, the new page is way more sophisticated, no?

After AI optimization, page now has animations and a more modern layout โ€” visual quality significantly up

Want to modify only a local section, like a partially displayed image? Click the "Select" arrow top right, pick that module, then give a precise prompt: "Image is clipped (image width exceeds container), scale image to 100%."

Use the Select tool to choose the clipped image module and give a precise fix prompt

Look โ€” problem fixed perfectly!

AI precisely executed the prompt โ€” image now displays fully within the module

2. Visual Editing (Token Saver)โ€‹

AI prompts consume tokens, and sometimes AI "over-improvises". v0's best feature is manual editing.

E.g. I want to remove "Pro" from the pricing module. Select it with the "Select" tool, delete the text directly in the edit panel on the right โ€” WYSIWYG!

Use Select tool to pick text, modify directly in the visual edit panel on the right โ€” no token consumption

If you know some code, click "Go to code" in the top right of the selected module to jump directly to the code view.

In the selected module's top right, click Go to code to locate that module's source code

Here you can edit code like a pro โ€” finer control.

In code view, you can directly edit HTML and CSS โ€” maximum freedom

4. Configure Inquiry Tracking (Core Step)โ€‹

The page looks great, but it can't yet collect inquiries. We'll use https://pixeltrack.laifa.xin/ again to bridge the data.

First, analyze what fields our form needs to collect: nickname, email, company name, phone, product of interest, message โ€” 6 fields total.

The v0-generated inquiry form contains the six customer-info fields to collect

Go to the Pixeltrack backend, click "Create ad".

In the Pixeltrack backend, click Create ad to start configuring a new inquiry track

Set ad name, upload image. Key point: by default there are only 4 fields. We need to set c1 and c2 to "Company name" and "Product of interest" respectively in the "Custom field configuration" to match our form.

Configure 6 tracking fields in Pixeltrack ad settings to map one-to-one with the landing page form

Once created, go to the "Tracking code" page and copy the tracking image URL.

On the Tracking code page, copy the .jpg or .png tracking image URL โ€” key for the next step

Back in v0, select the form module and input this prompt (remember to replace with your own image URL and parameters):

Prompt:

After the customer submits the form, display this image on the current page: https://pixeltrack-worker.laifa.xin/track/sweOx1vN.jpg
The image should carry parameters corresponding to: email (e), phone (p), name (n), message (m), company name (c1), product of interest (c2)

In v0, select the form module and input our prepared prompt containing the tracking URL and parameters

The "Battle of Wits" Debug Processโ€‹

AI's first attempt might use a popup to display the submission result โ€” not what we want.

After AI's first modification, submitting the form shows a dialog popup โ€” not the effect we want

We refine the prompt, asking it to display the image directly in the form area with a friendlier message.

Prompt:

Please remove the popup. What we need is โ€” after clicking "send inquiry", show submission success directly in the form area, display the image I gave you (200x200), tell the customer they submitted successfully, and prompt them to scan to add me (the image is a QR code, assume this is a WhatsApp QR code). Please improve and polish โ€” pay attention to aesthetics.

Give a more detailed prompt โ€” remove popup, show thank-you message and QR image in place

After AI's second modification, the effect is much better. But testing shows the backend received two identical inquiry records! Meaning the tracking image was loaded twice.

Pixeltrack backend shows duplicate inquiry records โ€” tracking code was triggered twice

Don't panic โ€” give AI another precise prompt to fix this.

Prompt:

Image URL: https://pixeltrack-worker.laifa.xin/track/sweOx1vN.jpg
Showing twice with parameters โ€” only show once. Width 200.

For the duplicate-tracking issue, give the final fix prompt โ€” ensure AI loads the image only once

After this round of debugging, submitting the form correctly shows the thank-you image.

Final effect: after submitting the inquiry, the form area shows a thank-you message and our QR image

The backend now logs only one inquiry record per submission โ€” problem solved!

Backend inquiry records normal โ€” one record per submission, tracking success

5. Publish the Site & Bind Domainโ€‹

Page done โ€” now let's get it online. In v0's top right, click Share โ†’ Publish โ†’ Deploy to Production.

Follow the order Share โ†’ Publish โ†’ Deploy to push our final page to production

Wait for deployment to finish...

Page shows Deploying... โ€” Vercel is deploying our site

Once deployed, click "Inspect on Vercel" to jump to the Vercel backend for domain binding.

After deployment, click Inspect on Vercel to enter Vercel backend management

In the Vercel backend, go to Settings โ†’ Domains and add your own domain.

On Vercel's domain settings page, enter the domain you want to bind and click Add

Vercel will prompt you to add a CNAME DNS record. If your domain is hosted at Cloudflare, you can directly click "Configure Automatically" โ€” one-click setup, super convenient.

If your domain is at Cloudflare, Vercel can auto-configure DNS for you โ€” massively simplifies the operation

After authorization, wait a moment and the domain status will show as verified.

Back in Vercel backend, the domain has been successfully verified and assigned an SSL cert

6. Final Polish & "Removing the Branding"โ€‹

1. Modify the Page Title (SEO Optimization)โ€‹

A newly published site's default title is "v0 app" โ€” bad for SEO. Back in v0, give AI a prompt:

Prompt:

Based on the current page content, help me complete the title, description, keywords, etc., to comply with SEO best practices

In v0, prompt AI to auto-generate SEO-compliant title and meta description based on page content

After AI generates, there may be code errors โ€” just click "Fix with v0" and let it self-fix, then redeploy.

AI auto-fixed the code errors โ€” we can redeploy to apply the SEO optimization

Preview again โ€” look, the browser tab title has updated!

After redeployment, the site's title and meta description have updated successfully โ€” better for search engine indexing

2. Remove the "Built with v0" Brandingโ€‹

Visit your site on the free version, and you'll see this small "tail" at the bottom.

Free v0 generated pages carry an official "Built with v0" badge in the bottom right

In Vercel settings, this toggle is forcibly enabled โ€” can't disable.

Free account settings page โ€” Show Built with v0 Button toggle is greyed out, can't operate

If you upgrade to a paid account, this toggle defaults to off โ€” after redeploy, the badge is gone.

Paid account settings page โ€” Show Built with v0 Button toggle is off by default

ใ€Ultimate Free Ad-Removal Solutionใ€‘

Don't want to pay? No problem! In v0's top right, click Share, set Visibility to Anyone with the link, then copy the link.

In v0's share settings, set visibility to "Anyone with the link" and copy the share link

Send us this link โ€” we'll use our paid account to redeploy an ad-free version for you!

7. Final Words: This Is Just the Beginningโ€‹

Congrats! Reading this far, you've mastered the skill of using top-tier AI tools to build a professional foreign-trade site โ€” for free, fast.

But site-building is just the first step of AI-empowered foreign trade. A solo grind is inefficient. A group's co-creation goes further.

In our community, hundreds of people are already following the tutorials and building their landing pages, and digging deep into:

  • How to use AI for market and keyword analysis?
  • How to write irresistible ad copy and cold emails?
  • How to play AI + SEM + SEO together to build a low-cost, high-return acquisition system?

We're here to see the power of AI together, and to turn tech into real inquiries and orders.

If you want to join us, leave "I want to join the group" in the comments, and I'll personally pull you in!

Remember โ€” we don't sell courses, we don't charge money. We just want to gather like-minded foreign-trade folks to do foreign trade well, together!