如何让AI生成页面

页面是用户接触产品的第一步。一个 Landing Page 是否清晰、一个 Dashboard 是否易用，直接决定了用户会不会留下来。但传统做法里，从设计稿到前端代码，一个完整页面往往要花几天甚至几周。

现在，AI 工具可以在几分钟内生成一个可用页面的雏形。你要做的不是从零写每一行代码，而是学会「告诉 AI 你想要什么」，然后逐步迭代到满意的结果。

本章介绍如何用 v0、Cursor、Claude Code 等工具生成完整页面，包括 Landing Page、Dashboard、设置页等常见类型，给出具体的 Prompt 写法和迭代技巧。

一、AI 生成页面的主流方式

目前生成页面有三条主要路径，适用场景各不相同：

1. v0 直接生成

v0 是 Vercel 推出的 AI UI 生成工具。你用自然语言描述想要什么页面，它直接输出基于 React + Tailwind CSS + shadcn/ui 的代码，并且可以实时预览。

适合场景：前端页面、UI 组件、营销页、原型验证。

优势：

• 生成的代码直接可用，技术栈现代（React + Tailwind）
• 支持对话式迭代，改一句 Prompt 就能看到变化
• 可以一键部署到 Vercel

局限：

• 后端逻辑、数据库交互需要额外处理
• 生成的代码量大时，Token 消耗较高
• 复杂业务逻辑仍需手动补充

2. Cursor 对话生成

Cursor 是一个 AI 代码编辑器，内置 Composer 和 Agent 模式，可以在你的项目上下文里直接生成页面代码。

适合场景：需要在现有项目中添加页面、需要全栈逻辑（前后端一起写）、需要深度集成业务代码。

优势：

• 能读取你项目的已有代码、组件库、样式规范
• 支持生成完整的全栈功能（API + 页面 + 数据库）
• 可以用 @ 引用特定文件作为上下文

局限：

• 需要一定编程基础，才能判断生成质量
• 对 Prompt 的组织能力要求更高

3. Claude Code 终端生成

Claude Code 是 Anthropic 的终端 AI 编码助手，可以直接操作文件系统、运行命令、生成整个页面文件。

适合场景：批量生成多个页面、需要精确控制文件结构、偏好命令行工作流。

优势：

• 直接读写文件系统，生成速度快
• 支持 Agent 模式，可以多步骤自动完成
• 可以结合项目规则文件控制代码风格

局限：

• 没有可视化预览，需要自己运行项目查看效果
• 对非程序员门槛较高

生成方式对比

一个常见的高效组合是：先用 v0 生成 UI 原型，再用 Cursor 或 Claude Code 补全业务逻辑。这种「v0 设计 + Cursor 实现」的工作流已经被很多开发者采用。

二、生成完整页面的标准步骤

不管用哪个工具，生成一个完整页面的流程基本一致：

预览代码

复制SVGPNG源码

流程图画布 · 115%

重置全屏

Mermaid 流程图加载中...

第一步：明确页面目标

在写 Prompt 之前，先回答三个问题：

1. 这个页面是做什么的？ —— 转化用户、展示数据、收集信息？
2. 谁在用这个页面？ —— 潜在客户、已登录用户、管理员？
3. 在什么设备上用？ —— 桌面端优先、移动端优先、还是都要兼顾？

把这三个问题想清楚，后面写 Prompt 才不会跑偏。

第二步：编写初始 Prompt

一个好的初始 Prompt 包含三部分信息：

• 你要构建什么：页面类型、核心功能
• 谁在用、什么时候用：用户画像、使用场景
• 设计约束：风格、配色、参考案例

具体写法见后面的「Prompt 策略」部分。

第三步：生成并预览初版

把 Prompt 交给工具，拿到第一版结果。第一版通常不会完美，但会给你一个可以迭代的基础。

第四步：迭代优化

AI 生成页面最大的优势就是迭代快。不要指望一次生成就完美，而是通过多轮对话逐步调整：

• 布局不对？描述你想要的布局结构
• 颜色不好看？指定具体色值或风格关键词
• 间距太大？直接说「把各区块间距缩小到 48px」
• 缺一个功能？追加描述

第五步：组件拆分与工程化

当页面稳定后，把它拆分成独立组件，便于维护和复用。这一步在 Cursor 或 Claude Code 中完成效果更好，因为它们能理解你项目的组件结构。

三、不同页面类型的 Prompt 策略

不同类型的页面，Prompt 的侧重点不同。下面分别介绍四种常见页面类型。

Landing Page（落地页）

Landing Page 的核心目标是转化。Prompt 里要强调信息层次和行动号召。

好的 Prompt 示例：

为一个 AI 写作工具创建一个 Landing Page。目标用户是自媒体运营人员，他们需要快速产出高质量文章。

页面结构：

1. Hero 区域：一句话标题说明产品价值，副标题补充功能亮点，一个主 CTA 按钮「免费试用」，右侧放产品截图
2. 痛点区域：3 个卡片，分别展示「写作慢」「质量不稳定」「多平台适配难」
3. 功能展示：左右交替布局，4 个核心功能配截图和说明
4. 用户评价：3 条真实用户评价，带头像和职位
5. 定价区域：3 列定价卡片，中间那个高亮为推荐方案
6. 底部 CTA：再次强调核心价值 + 注册按钮
7. Footer：产品链接、社交媒体、备案信息

设计风格：简洁现代，主色用蓝紫渐变 #6366F1 到 #8B5CF6，大量留白，字体用 Inter。移动端响应式。

差的 Prompt 示例：

帮我做一个 AI 写作工具的网站。

差异在于：好的 Prompt 给出了完整的页面结构、每个区块的内容要求、设计风格和技术约束。差的 Prompt 太模糊，AI 只能猜测，结果大概率不符合预期。

Dashboard（数据看板）

Dashboard 的核心是信息密度和可读性。Prompt 要描述清楚数据指标、布局网格和交互方式。

好的 Prompt 示例：

创建一个 SaaS 产品的管理后台 Dashboard。用户是产品经理，每天早上打开看关键指标。

布局：左侧 240px 固定侧边栏导航，顶部 64px 高度 header 放搜索和用户头像。主内容区用 12 列网格。

主内容区从上到下：

1. 指标卡片区（4 列）：今日活跃用户、新增注册、付费转化率、MRR，每个卡片带数字、趋势箭头和环比变化百分比
2. 图表区域（2 列，左 8 右 4）：左侧折线图展示近 30 天用户增长趋势，右侧饼图展示用户来源分布
3. 数据表格：最近 10 条用户反馈，列包含用户头像、用户名、反馈内容、状态标签（待处理/已处理）、时间

使用 Recharts 做图表，数据用 mock 数据。深色模式支持。表格支持排序和分页。

表单页（Form Page）

表单页的核心是减少用户填写摩擦。Prompt 要明确字段、校验规则和交互反馈。

好的 Prompt 示例：

创建一个用户注册页面。目标用户是首次使用产品的开发者。

字段：

• 邮箱（必填，校验邮箱格式，失焦时验证是否已注册）
• 密码（必填，至少 8 位，包含大小写字母和数字，实时显示强度指示器）
• 用户名（必填，3-20 位字母数字，失焦时检查是否被占用）
• 同意条款复选框（必填）

布局：居中卡片式布局，卡片宽度 420px，白色背景圆角 12px，轻微阴影。上方放产品 Logo 和标题「创建账户」。

交互：

• 提交时显示 loading 状态
• 成功后跳转到欢迎页
• 失败时在对应字段下方显示红色错误提示
• 支持 Google 和 GitHub 第三方登录按钮

使用 React Hook Form + Zod 做表单校验。

列表页（List Page）

列表页的核心是高效浏览和操作。Prompt 要描述列表项结构、筛选条件和操作方式。

好的 Prompt 示例：

创建一个文章管理列表页。用户是内容运营，需要快速找到和编辑文章。

顶部操作栏：左侧页面标题「文章管理」和文章总数，右侧「新建文章」按钮。

筛选区：搜索框（按标题搜索）、状态筛选下拉（全部/草稿/已发布/已下架）、分类筛选下拉、时间范围选择器。

列表展示方式：支持列表视图和卡片视图切换。

列表视图的列：标题（点击可编辑）、作者头像+名称、分类标签、状态标签（不同颜色）、创建时间、操作按钮（编辑/预览/更多）

卡片视图：每张卡片展示封面图、标题、摘要前 100 字、状态标签、更新时间。

底部分页器，每页 20 条。支持批量选择和批量操作（发布/下架/删除）。

Prompt 策略对比

四、好 Prompt vs 差 Prompt 对比

Prompt 的质量直接决定生成效果。下面用几个对比来展示差异。

核心原则：你给出的信息越多越具体，AI 生成的结果就越接近你的预期。 模糊的 Prompt 等于把决策权交给 AI，而 AI 会做出最通用的选择——通常不是你想要的。

五、迭代优化方法

AI 很少一次生成完美结果。迭代优化是把 70 分的初版变成 90 分成品的关键。

方法一：分步修改

不要一次性提出所有修改需求。按优先级逐步修改：

1. 第一轮：调整大结构（布局、区块顺序）
2. 第二轮：修改内容（文案、数据展示）
3. 第三轮：优化细节（间距、颜色、字体）
4. 第四轮：补充交互（hover 效果、动画、过渡）

每一轮只关注一个层面，避免一次改太多导致 AI 顾此失彼。

方法二：引用式微调

在 Cursor 中，你可以用 @ 引用具体的代码文件或组件，然后说：

参考 @pricing-card.tsx 的样式，把这个页面里所有的卡片都改成一样的圆角和阴影效果。

在 v0 中，你可以选中页面的某个部分，然后针对性修改：

把 Hero 区域的背景改成渐变色，从 #6366F1 到 #8B5CF6，方向是从左到右。

方法三：对比式修正

当你觉得生成的效果不对但说不清楚时，给一个参考对象：

布局参考 Linear 的定价页，但是配色用我们自己的品牌色 #6366F1，卡片不要阴影改用 1px 边框。

方法四：响应式适配

生成桌面端效果后，单独处理响应式：

现在帮我适配移动端：侧边栏折叠为底部导航栏，Hero 区域的标题字号缩小到 28px，三列卡片改为纵向堆叠，图表区域改为全宽上下排列。

六、实战案例

案例一：用 v0 生成 SaaS 定价页

背景：一个 AI 写作工具需要一个定价页，展示三档方案。

第一轮 Prompt：

创建一个 SaaS 产品的定价页面。产品是一个 AI 写作工具，目标用户是自媒体运营和小型内容团队。

页面结构：

1. 顶部：标题「选择适合你的方案」，副标题「所有方案均含 7 天免费试用」
2. 月付/年付切换：年付显示 8 折优惠标签
3. 三列定价卡片：
   • Starter：￥49/月，5 万字/月，1 个用户，基础模板
   • Pro（推荐，高亮）：￥149/月，无限字数，5 个用户，高级模板 + SEO 优化
   • Team：￥399/月，无限字数，无限用户，全部功能 + 专属客服
4. 下方功能对比表格
5. FAQ 折叠区域，5 个常见问题

设计风格：简洁，主色 #6366F1，卡片圆角 12px，推荐卡片有紫色边框和「最受欢迎」徽章。使用 Tailwind CSS。

结果：v0 生成了完整的定价页面，布局基本正确，但功能对比表格的样式不够理想。

第二轮 Prompt（修改表格）：

功能对比表格优化：每行一个功能，列对应三个方案。支持的功能显示绿色对勾图标，不支持的显示灰色横杠。表格第一列固定，横向滚动时保持可见。行与行之间用浅灰分隔线。

第三轮 Prompt（补充 FAQ 和响应式）：

FAQ 区域：使用手风琴折叠组件，同一时间只展开一个。每个问题包含标题和 2-3 句回答。

响应式适配：手机端三列卡片改为纵向滑动，推荐卡片排在第一个。对比表格手机端只展示 2 个方案（Starter 和 Pro），Team 方案隐藏并显示「查看完整方案」链接。

最终效果：经过 3 轮迭代，得到了一个完整的定价页，包含切换开关、定价卡片、对比表格、FAQ 和响应式适配。整个过程约 15 分钟。

案例二：用 Cursor 生成用户设置页

背景：在一个 Next.js 项目中，需要添加一个用户设置页面，包含个人信息、通知偏好和安全设置。

第一步：创建 PRD 文档

在 Cursor 中先创建一个简短的需求说明：

用户设置页面需求：

• 左侧 Tab 导航：个人信息、通知设置、安全设置、API Keys
• 个人信息 Tab：头像上传、姓名、邮箱、个人简介（200 字以内）
• 通知设置 Tab：邮件通知开关、产品更新通知、营销邮件、通知频率选择
• 安全设置 Tab：修改密码、两步验证开关、登录设备列表
• API Keys Tab：创建/删除 API Key，显示 Key 和创建时间
• 所有修改需要保存按钮，成功后显示 Toast 提示
• 使用项目已有的 UI 组件库和样式规范

第二步：让 Cursor 读取项目上下文

在 Composer 中用 @ 引用关键文件：

参考 @components/ui/ 目录下的现有组件，创建用户设置页面。页面路由为 /settings，使用项目已有的 Card、Button、Input、Switch、Tabs 组件。表单用 react-hook-form，校验用 zod。

第三步：分 Tab 逐步生成

不要一次生成所有 Tab，而是逐个生成：

先创建「个人信息」Tab 的表单组件，包含头像上传区域（点击上传，支持裁剪）、姓名输入框、邮箱输入框（不可修改，显示「修改邮箱」链接）、个人简介文本域。保存按钮在底部。

生成后检查效果，确认没问题后：

现在创建「通知设置」Tab。每一行是一个通知项，左侧是标题和说明文字，右侧是 Switch 开关。底部有一个通知频率下拉选择（实时/每日摘要/每周摘要）。

依此类推，逐个完成每个 Tab。

第四步：组装页面

把四个 Tab 组件组装到 settings/page.tsx 中，使用左侧 Tab 导航布局。移动端改为顶部水平 Tab。

最终效果：约 30 分钟完成整个设置页面，代码风格与项目一致，复用了已有组件。

七、不同工具的 Prompt 技巧总结

八、检查清单

在宣称页面生成完成之前，逐项检查以下内容：

• 页面目标明确：这个页面要完成什么任务？用户能在 5 秒内理解吗？
• 信息层次清晰：标题 → 副标题 → 正文 → CTA 的层次是否分明？
• 所有区块完整：Hero、功能、定价、FAQ、Footer 等区块是否齐全？
• 响应式适配：在桌面、平板、手机三种宽度下布局是否正确？
• 交互状态覆盖：空状态、加载状态、错误状态、成功状态是否都有处理？
• 无障碍访问：图片有 alt 文本，表单有 label，颜色对比度是否足够？
• 性能合理：图片是否懒加载，组件是否按需加载，有没有不必要的动画？
• SEO 基础：title、meta description、OG 标签是否正确设置？
• 文案无错误：有没有错别字、语法错误、不一致的术语？
• 代码质量：组件是否合理拆分，样式是否复用，有没有硬编码的值？
• 跨浏览器测试：在 Chrome、Safari、Firefox 下显示是否一致？
• 国际化准备：如果有多语言需求，文案是否已提取到 i18n 文件？

九、小结

AI 生成页面不是魔法，而是一种「对话式开发」的工作方式。你负责思考和决策，AI 负责快速执行。核心能力不是工具操作，而是：

1. 把模糊需求翻译成具体描述的能力
2. 判断生成结果质量并给出修改方向的能力
3. 控制迭代节奏，一次只改一个层面的能力

掌握这三项能力，配合 v0、Cursor、Claude Code 这些工具，你可以在一个下午完成过去需要一周的页面开发工作。

参考资料

1. How to prompt v0 - Vercel
2. Text Prompting - v0 Docs
3. Maximizing outputs with v0: From UI generation to code creation
4. Prompt design - Cursor Blog
5. Claude Code 最佳实践
6. v0 Prompting Guide: How to Prompt Vercel v0 (2026)
7. DESIGN in v0, FINISH in Cursor - YouTube
8. How to write effective prompts for AI-powered UI design - Updivision