一句话生成落地页原型

这条链路解决什么问题

产品方向定了、目标用户画像有了，现在需要一个能看能点的落地页原型——拿去给团队评审、给投资人演示，或者直接上线做第一波测试。从零开始写代码太慢，纯设计稿又不能交互。这条链路的思路是：先用 AI 快速拉出能看的版本，再接入真实工程做成能用的版本。

第一步 ChatGPT：把模糊需求变成页面蓝图

具体操作

给 ChatGPT 一个结构化的 prompt：

"我要做一个 [产品类型] 的落地页，目标用户是 [XX]，核心转化动作是 [注册/下载/咨询]。请帮我规划页面结构，列出从上到下每个区块的名称、内容要点和 CTA。参考风格：[贴 1-2 个参考链接]"

关键技巧

• 转化动作必须先定：是让用户注册？下载？加微信？填表单？这个决定页面的整体结构和信息优先级。
• 区块不要超过 6 个：Hero → 痛点/价值 → 功能展示 → 社会证明（案例/评价）→ 定价（如果有） → CTA。超过 6 个区块用户大概率不会滚到底。
• 让 ChatGPT 直接写每个区块的文案：不只是列结构，让它把每个区块的标题和正文都写出来。后面丢给 v0 生成时，有文案比没文案效果好很多。

这步的产出

一份页面蓝图：6 个区块，每个区块有标题、正文文案和 CTA 描述。

第二步 v0：10 分钟拉出第一版页面

具体操作

1. 打开 v0.dev
2. 把 ChatGPT 输出的页面蓝图直接贴进去，可以加一句："用 Next.js + Tailwind CSS 实现，响应式设计，风格参考 [贴参考截图或链接]"
3. v0 会生成一版可预览的页面代码
4. 在预览里看整体结构和视觉，不满意的部分直接在对话里追问修改

关键技巧

• 贴参考截图比纯文字描述有效得多：如果你有心仪的页面风格，截图贴给 v0，它能更准确地理解你要的气质。
• 先看骨架再调细节：第一版不要纠结按钮颜色和字体大小。先看区块顺序对不对、信息层级清不清楚、核心 CTA 够不够突出。
• 分区块迭代：如果整体方向对但某个区块不满意，告诉 v0 "只修改第三个区块，改成 XX 风格"，比每次重新生成整个页面高效。
• 导出代码看一眼：v0 生成的代码默认是 React + Tailwind。导出前看一下代码结构是否合理——组件有没有拆分、样式有没有硬编码。如果后面要接入真实项目，代码质量直接影响后续工作量。

这步的产出

一版可预览的页面，区块结构和视觉方向已经基本确定。

第三步 Cursor：接入真实项目

什么时候需要这步

如果页面只是用来内部讨论或给投资人看 demo，停在 v0 就够了。如果要上线跑数据、要接真实 API、要处理表单提交和数据库，就需要 Cursor 接手。

具体操作

1. 把 v0 导出的代码复制到你的项目里（或者用 v0 的"Add to Codebase"功能）
2. 在 Cursor 里打开项目，Ctrl+L 打开 Chat
3. 按优先级处理：

• 先替换假数据为真实内容（产品截图、真实文案、客户 logo）
• 再接表单提交逻辑（连接 API 或第三方表单服务）
• 然后处理响应式细节（手机端的间距、字号、按钮大小）
• 最后做交互（滚动动画、按钮状态、加载反馈）

关键技巧

• 用 @file 引用 v0 的代码：告诉 Cursor "看一下这个文件，帮我把里面的 placeholder 数据替换成真实内容"
• 表单提交是最容易忘的：很多人做完页面忘了接表单。如果 CTA 是注册或联系，表单提交逻辑必须跑通——接 API、发邮件通知、写数据库，至少要做一个。
• 手机端一定要自己测：在浏览器里用开发者工具模拟手机不够，一定要用真手机看一次。间距、字号和按钮的点击面积经常有问题。

这步的产出

一个跑在真实项目里的落地页，表单能提交、数据是真实的、手机端看过没问题。

第四步 Replit Agent：快速分享可运行版本

什么时候用

需要给不会跑本地项目的人（老板、客户、投资人）看一个在线可访问的版本。

具体操作

1. 在 Replit 里导入项目代码
2. 让 Replit Agent 帮你处理环境配置和依赖安装
3. 一键部署，拿到一个可分享的 URL

关键提醒

• 这步是为了快速分享演示，不是替代正式部署。
• 如果项目要正式上线，应该走你的标准部署流程（Vercel、Netlify 或自己的服务器）。

时间分配参考

精简版

如果只是内部讨论页面方向：ChatGPT + v0，20 分钟搞定。只有确认要上线时才进入 Cursor 工程阶段。