第一个 AI 生成页面实战

本文属于《从 0 到 1 AI 产品出海知识库》的「AI 编程工具入门」章节。

引言：该动手了

读完前面的章节，你已经了解了 AI 编程工具的基本概念，知道了 v0、Cursor、Claude Code 各自的定位，也选定了适合自己的工具组合。接下来该做一件具体的事——用 AI 工具，从零生成一个可以上线访问的页面。

这篇文章的目标非常明确：手把手带你用 AI 工具生成一个出海产品的落地页（Landing Page），并完成部署，让任何人都能通过一个 URL 访问到它。 不需要你有任何前端开发经验，但需要你有一台电脑、一个浏览器、一个 GitHub 账号。

实战目标：我们要做什么

我们假设你正在做一个面向海外用户的 AI 写作工具，需要一个英文落地页来介绍产品。这个页面包含以下几个部分：

• Hero 区域：一句核心标语 + 一段副标题 + 一个 CTA（Call-to-Action）按钮
• Features 区域：三个核心功能介绍，每个功能带图标、标题和简短描述
• Testimonials 区域：两条用户评价
• Pricing 区域：两个定价方案卡片
• Footer 区域：品牌信息和社交链接

最终交付物是一个可以公网访问的 URL，部署在 Vercel 上，自动获得 HTTPS 和 CDN 加速。

方案选择：v0 路线 vs Cursor 路线

在动手之前，先了解两条主流路线的差异，然后根据自己的情况选择。

v0 是 Vercel 推出的 AI 页面生成工具，核心交互方式是「纯对话」——你用自然语言描述想要的页面，它实时生成 React 代码并渲染预览。整个过程不涉及本地开发环境，所有操作在浏览器里完成。

Cursor 是一个 AI 代码编辑器，核心交互方式是「对话 + 手动调整」——你在本地项目中用 Agent 模式让 AI 生成代码，然后可以手动修改、调试、预览。灵活度更高，但需要配置本地开发环境。

如果你对写代码完全陌生，选 v0 路线；如果你想趁这个机会熟悉一下代码项目结构，选 Cursor 路线。两条路线最终都能得到可上线的页面，差别在于过程的精细程度。

路线 A：v0 纯对话生成

第一步：注册并进入 v0

打开浏览器访问 https://v0.dev，用 GitHub 账号登录。v0 提供免费额度，足够完成本教程的练习。登录后你会看到一个对话框和一个空白预览区域。

第二步：写第一个 Prompt，生成页面骨架

在对话框中输入你的第一条指令。这条指令决定了页面的整体结构和风格。以下是一个经过验证的 prompt 示例：

Build a modern landing page for an AI writing tool called "WriteFlow".
Use a clean, minimal design with a dark navy background and white text.
Include the following sections from top to bottom:

1. Hero section: a bold headline "Write Better, Ship Faster",
   a subheadline explaining the product in one sentence,
   and a "Get Started Free" CTA button.
2. Features section: three feature cards in a row,
   each with an icon, title, and short description.
   Features: AI-powered writing, One-click export, Team collaboration.
3. Testimonials section: two customer quotes side by side,
   each with an avatar, name, and role.
4. Pricing section: two pricing cards — Free tier and Pro tier ($19/mo).
5. Footer with logo, copyright, and social media links.

Use Tailwind CSS for styling. Make it fully responsive.

把这段 prompt 粘贴到 v0 的对话框中，点击发送。大约 10 到 30 秒后，右侧预览区会出现生成的页面。

第三步：迭代修改

第一次生成的结果通常不会完美。v0 的迭代方式是继续在对话框中追加指令，每次只改一件事。

调整 Hero 区域：

Make the headline text larger and bolder.
Add a gradient effect from white to light blue on the headline.

调整 Features 区域：

Change the feature icons to use emoji or simple SVG icons.
Add a subtle hover animation to each card — slight scale up and shadow.

调整配色：

Change the CTA button color to a vibrant blue (#3B82F6).
Add a subtle gradient background to the pricing section.

关键原则：每次只提一个修改需求。不要在一条 prompt 里同时改五个东西，否则 AI 很容易顾此失彼。如果某次修改让其他部分变差了，告诉它「恢复上一版的 XX 部分」。

第四步：导出代码

当你对页面效果满意后，点击页面右上角的「Export」按钮，选择「Export to GitHub」。v0 会提示你选择一个 GitHub 仓库（可以直接创建新的）。代码会被推送过去，包含完整的 Next.js 项目结构。

第五步：部署到 Vercel

因为代码来自 v0（Vercel 自家产品），部署流程极其简单：

1. 打开 https://vercel.com，用同一个 GitHub 账号登录
2. 点击「Add New Project」，选择刚才导出的仓库
3. Vercel 会自动检测 Next.js 项目并配置构建命令
4. 点击「Deploy」，等待 1 到 2 分钟
5. 部署完成后，你会得到一个 xxx.vercel.app 的公开 URL

至此，你的第一个 AI 生成页面就上线了。

路线 B：Cursor 本地生成

第一步：创建项目

在终端中执行以下命令，用 Next.js 官方模板初始化项目：

npx create-next-app@latest writeflow-landing \
  --typescript --tailwind --eslint --app --src-dir
cd writeflow-landing

用 Cursor 打开这个项目文件夹。

第二步：在 Agent 模式下生成页面

按 Cmd + L（Mac）或 Ctrl + L（Windows）打开 Cursor 的 Chat 面板，确认当前模式为「Agent」。然后输入以下 prompt：

在项目根目录创建 src/app/page.tsx，实现一个出海产品落地页。
产品名：WriteFlow，定位是 AI 写作工具。

页面需要包含以下区域，从上到下排列：
1. Hero：大标题 "Write Better, Ship Faster"，副标题一句话介绍产品，
   一个蓝色 CTA 按钮 "Get Started Free"
2. Features：三个功能卡片横排，分别是 AI-powered Writing、
   One-click Export、Team Collaboration，每张卡片有图标 + 标题 + 描述
3. Testimonials：两条用户评价并排展示
4. Pricing：两张定价卡片，Free 和 Pro（$19/mo）
5. Footer：品牌 logo + 版权信息 + 社交链接

设计要求：
- 深色背景（#0F172A），白色文字
- 使用 Tailwind CSS
- 完全响应式，移动端友好
- CTA 按钮使用蓝色 #3B82F6，hover 变深
- 功能卡片 hover 时有轻微放大和阴影效果

Cursor 会在项目中创建或修改文件。你会看到它逐个写入代码。生成完成后，运行 pnpm dev 启动本地开发服务器，在浏览器中打开 http://localhost:3000 查看效果。

第三步：手动微调

Cursor 路线的优势在这里体现——你可以直接打开 src/app/page.tsx，手动调整任何不满意的地方。比如：

• 觉得某段文案不够好？直接改文字
• 觉得间距不对？直接改 Tailwind class
• 觉得某个组件逻辑复杂？拆成独立文件

手动修改后，可以继续用 Chat 对话让 AI 帮你做更复杂的改动。两条路径可以交替使用。

第四步：推送到 GitHub 并部署

git init
git add .
git commit -m "feat: initial landing page"
gh repo create writeflow-landing --public --source=. --push

然后在 Vercel 中按路线 A 的第五步操作即可。如果你之前已经授权过 Vercel 访问你的 GitHub，新建的仓库甚至会自动触发部署。

Prompt 技巧：写出好 Prompt 的四个要点

无论使用 v0 还是 Cursor，prompt 的质量直接决定生成结果的好坏。以下是四条核心要点：

一、明确说出页面结构和各区块内容。 不要只说「帮我做一个落地页」，要列出每个区块（Hero、Features、Pricing、Footer）分别包含什么。AI 不会自己猜你的产品结构。

二、给出具体的设计约束。 颜色值（#0F172A）、按钮文案（"Get Started Free"）、字号要求（大标题 bold）——越具体，生成结果越接近预期。模糊的描述会得到通用的结果。

三、指定技术栈。 告诉 AI 使用 Tailwind CSS、Next.js App Router、TypeScript 等。不指定的话，它可能输出你最不熟悉的技术栈。

四、分步迭代，不要一步到位。 第一条 prompt 负责生成骨架，后续 prompt 逐个区域优化。一次提太多修改要求，AI 容易丢失上下文。

生成代码示例

以下是 AI 生成的典型页面组件代码（Next.js App Router + Tailwind CSS），节选 Hero 区域：

export default function LandingPage() {
  return (
    <main className="min-h-screen bg-[#0F172A] text-white">
      {/* Hero Section */}
      <section className="flex flex-col items-center justify-center px-4 pt-32 pb-20 text-center">
        <h1 className="text-5xl font-bold md:text-7xl bg-gradient-to-r from-white to-blue-300 bg-clip-text text-transparent">
          Write Better, Ship Faster
        </h1>
        <p className="mt-6 max-w-2xl text-lg text-slate-300">
          AI-powered writing tool that helps you create, edit, and publish
          content in minutes. Built for teams that move fast.
        </p>
        <a
          href="#pricing"
          className="mt-8 rounded-lg bg-blue-500 px-8 py-3 text-lg font-semibold text-white transition-colors hover:bg-blue-600"
        >
          Get Started Free
        </a>
      </section>
 
      {/* Features Section */}
      <section className="mx-auto max-w-6xl px-4 py-20">
        <h2 className="text-center text-3xl font-bold">Everything You Need</h2>
        <div className="mt-12 grid gap-8 md:grid-cols-3">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="rounded-xl border border-slate-700 bg-slate-800/50 p-6 transition-transform hover:scale-105 hover:shadow-lg"
            >
              <div className="mb-4 text-4xl">{feature.icon}</div>
              <h3 className="text-xl font-semibold">{feature.title}</h3>
              <p className="mt-2 text-slate-400">{feature.description}</p>
            </div>
          ))}
        </div>
      </section>
    </main>
  )
}

这段代码有几个值得注意的点：bg-gradient-to-r from-white to-blue-300 实现了标题的渐变文字效果；hover:scale-105 hover:shadow-lg 实现了卡片的悬浮交互；整个布局使用 flex 和 grid 实现响应式。如果你使用 v0 生成，这些代码会自动生成；如果你使用 Cursor，可以在 Agent 生成后直接阅读和修改。

从 Prompt 到部署的完整流程

部署平台对比

虽然 Vercel 是最自然的选择，但并非唯一选项。以下是几个主流部署平台的对比：

对于本教程的 Next.js 落地页项目，推荐使用 Vercel。它和 Next.js 同属一个生态，构建配置零摩擦，而且 v0 导出的项目可以直接关联部署。

常见问题与排查

实际操作中，你可能会遇到以下问题：

上线前检查清单

在宣布「页面完成」之前，逐项检查以下内容：

• 页面在桌面端浏览器正常显示——打开 Chrome、Safari 各看一次
• 页面在手机端正常显示——用浏览器开发者工具切换到移动端视图检查
• CTA 按钮链接正确——点击按钮后跳转到预期页面或锚点
• 所有文案无拼写错误——特别是英文文案，建议用 Grammarly 检查一遍
• 页面加载速度可接受——Vercel 部署后访问页面，首次加载应在 3 秒内完成
• HTTPS 已启用——Vercel 默认启用，在域名设置中确认
• favicon 已设置——浏览器标签页上显示的图标，不要留默认空白
• SEO meta 标签已配置——title、description、og:image 至少要有
• 社交链接可点击——GitHub、Twitter 等链接指向正确地址
• Google Analytics 或 Plausible 已接入——上线后需要有数据追踪
• 自定义域名已配置（如果需要）——在 Vercel 项目设置中添加
• 代码已推送到 GitHub——确保有版本备份

总结与下一步

到这里，你已经完成了从 prompt 到部署的完整流程。不管选了 v0 路线还是 Cursor 路线，你手里现在有了一个可以公网访问的产品落地页。

这个页面是静态的——它只展示信息，没有后端逻辑。在后续章节中，你会学习如何让页面具备实际功能：接入数据库、添加用户认证、对接支付系统。但那些都是下一步的事。现在最重要的事情你已经做到了：把东西放到了互联网上。

记住，第一个页面不需要完美。它的核心价值是让你走完从「想法」到「上线」的全程。有了这个经验，后面的迭代和优化就有了着力点。

参考资料

1. v0.dev 官方文档 — v0 的官方使用指南和 prompt 技巧
2. Build a Landing Page with v0 from Scratch — YouTube — 从零用 v0 构建落地页的视频教程
3. Building a React Landing Page with v0.dev — Dev.to — 分步文字教程，包含迭代 prompt 示例
4. How to Ship a Landing Page with v0 and Vercel — Medium — 从 v0 生成到 Vercel 部署的完整流程
5. Cursor 官方文档 — Agent 最佳实践 — 使用 Cursor Agent 模式的官方指南
6. Cursor 入门到实战 — ExplainThis — 系统化的 Cursor 中文教程
7. v0 Templates — Landing Pages — v0 社区模板库，可以直接复用和修改
8. 零基础 AI 编程完整教程：Cursor、V0、Supabase、Vercel 实战指南 — 涵盖全栈开发的中文实战教程