非技术人的 Vibe Coding 实战：用自然语言让 Cursor 帮你搭内部工具

01 痛点钩子

很多产品或运营同学卡在同一个地方：你知道需求应该长什么样，但你无法把它快速变成可演示页面。每次都要排研发，验证周期又长又贵。

02 结果预告

读完这篇，你可以在 30 分钟内让 Cursor 生成一个可运行的内部工具初版（含表单、列表和筛选），并且知道怎么迭代成可交付版本。

03 工具简介

Vibe Coding 不是“不会代码也能写系统”的神话，而是用自然语言把需求拆成可执行任务。Cursor 在这里扮演“实现助手”，你扮演“业务导演”。

04 实战演示

先在 Cursor 里新建空项目，把下面 Prompt 贴进去执行。

你是资深全栈工程师，请为我生成一个“销售线索管理”内部工具 MVP，要求：
1) 技术栈：Next.js App Router + TypeScript + Tailwind
2) 页面：
   - 首页：关键指标卡（新增线索、跟进中、已签约）
   - 线索列表页：表格 + 搜索 + 按阶段筛选
   - 线索详情页：可编辑字段（公司、联系人、阶段、下次跟进时间）
3) 交互：
   - 所有筛选支持 URL 参数同步
   - 提供“新增线索”弹窗表单
   - 表单校验失败给出可读错误
4) 代码要求：
   - 目录结构清晰
   - 组件可复用
   - 提供 mock 数据
   - 最后输出“下一步可接入真实数据库”的改造步骤
请先输出实现计划，再分文件给代码。

你会得到一个可运行的业务骨架，然后再按业务规则追加字段，不要一开始就追求“完美架构”。

示例输入

业务目标：让销售主管用一个页面查看线索状态。
必须字段：公司、联系人、阶段、负责人、下次跟进时间、备注。
阶段选项：新线索、已联系、方案中、已签约、暂缓。
首版数据：先用 8 条 mock 数据，不接数据库。

首版验收结果

生成的 MVP 至少应该包含：

• 一个线索列表页，能看到所有 mock 线索。
• 一个阶段筛选控件，切换后 URL 参数同步变化。
• 一个新增线索弹窗，必填项为空时给出错误提示。
• 一个详情入口，能查看单条线索的关键字段。
• 一段“下一步接数据库”的改造说明。

如果 Cursor 只给了静态页面，没有筛选、弹窗或校验，就把上面的验收结果原样贴回去，让它补齐缺失项。

05 避坑提示

• 不要一次塞 20 个需求，先把单个流程跑通。
• Prompt 里必须给“页面 + 交互 + 数据字段”，否则结果会空泛。
• 每次改动后让 AI 输出“变更说明”，避免自己忘记上下文。

交付前检查清单

• 每个按钮都能点击，不是只有视觉样式。
• 表单错误文案能被业务同事看懂。
• 列表为空时有空状态，不是空白页面。
• mock 数据字段和真实业务字段同名，后续接数据库时不用大改。
• README 或页面内说明写清楚“当前是 mock 数据，不是生产系统”。

06 进阶拓展

下一篇建议直接衔接 Hermes Agent 落地销售线索调研流程，把“页面搭建”升级为“流程自动化”。

07 落地流程图

08 指标与验收

• 从想法到可点击 Demo 的时间是否缩短到 1 天内。
• 业务方、设计和工程是否能围绕同一个 Demo 讨论，而不是只看文字需求。
• Demo 是否只用于需求验证，进入生产前仍需工程重写或严格审查。
• 高风险交互、权限和数据写入动作是否经过人工复核，不能只凭生成结果判断。
• 每次生成结果是否有验收清单，避免看起来能跑但流程不完整。

09 来源与延伸阅读

• https://www.cursor.com/
• https://docs.github.com/en/copilot
• https://www.anthropic.com/news

10 本文加工判断

本文把 AI 编程工具、产品原型和企业需求评审加工成一个非技术团队可运行的 Demo 流程。适合产品、运营和销售在早期验证想法；不适合直接把生成代码上线到生产系统，也不适合绕过设计、工程和安全评审。

更新记录：2026-06-30 补充示例输入、首版验收结果和交付前检查清单。