30个VibeCoding核心概念

写在最前​

很多产品经理现在最焦虑的事不是需求做不完，是眼睁睁看着身边的人用 AI 两小时搞定一个可运行的原型，自己还在 Axure 里拖拖拽拽画静态线框图。​

​

🦄

Vibe Coding 不是程序员的专属能力。它正在把产品经理从写文档等排期的角色，变成自己验证想法的人。大部分人觉得门槛很高，要学编程，其实恰恰相反，Vibe Coding 的核心能力就是把需求说清楚。这本来就是产品经理最擅长的事。​

​

这个判断不是凭感觉说的。过去半年密集测了十几个 AI 编程工具，帮好几个产品团队搭了内部 MVP，发现一个规律：会用 Vibe Coding 的产品经理，验证速度是不会用的 5 到 10 倍。​

这篇文章把 Vibe Coding 生态里最核心的 30 个概念拆透，不讲代码，只讲产品经理用得上的认知和工具。​

01​

PART​

核心概念​

这一组 5 个概念是 Vibe Coding 的底层逻辑。搞不懂这 5 个，后面所有工具都是瞎用。​

Vibe Coding​

OpenAI 联合创始人 Andrej Karpathy 在 2025 年初提的词。核心意思就是，你用自然语言告诉 AI 你想要什么，AI 替你写代码，你只负责判断结果对不对。​

传统编程是你写每一行代码，Vibe Coding 是你写需求描述，AI 写代码，你验收。​

产品经理用这套东西完全不需要学 Python、不需要学 JavaScript。你需要学的是怎么把需求描述得又准确又完整，跟写 PRD 是一回事。​

Agentic Coding​

Vibe Coding 的进化版本。普通的 AI 辅助编程是你问一句 AI 答一句，Agentic Coding 是 AI 自己规划步骤，自己写代码，自己跑测试，发现 Bug 自己修，整个循环不需要你干预。​

老王实测过好多案例，给 AI 一个完整需求，比如重构一个认证模块，它自己跑了四十多分钟，中间修了三个 Bug，最后交出来的代码直接能合入主干。这种体验和以前那种问一句答一句的辅助工具，完全是两个物种。​

Prompt Engineering​

大部分人以为 Prompt Engineering 就是写提示词。在 Vibe Coding 场景下，Prompt Engineering 是把需求拆解成 AI 能准确理解的结构化描述的能力。​

写得好和写得差的区别有多大？同一个功能需求，用模糊的一句话描述，AI 可能生成 5 个文件，3 个有 Bug。用结构化描述指定技术栈、文件结构、命名规范，AI 一次就能生成能跑的代码。​

产品经理天生就在干这件事，把模糊的业务需求翻译成结构化的表达。以前翻译给开发看，现在翻译给 AI 看。​

上下文工程​

Context Engineering，比 Prompt Engineering 更底层的能力。​

Prompt 是你写的那段话，上下文是 AI 能看到的全部信息，包括你当前打开的代码文件、项目配置、技术文档、规则约束。​

老王踩过很多次这个坑。觉得 AI 生成的代码不好用，第一反应是 Prompt 没写好。实际上 80% 的问题出在上下文没给对。你让 AI 改一个 React 组件，但它看不到你的组件库代码，看不到你的样式规范，它当然写出来的东西和项目风格对不上。​

上下文工程就是精确控制 AI 能看到什么信息、不看到什么信息，让它在正确的背景下工作。​

上下文窗口​

Context Window，AI 一次能处理的信息量上限，用 Token 数来衡量。​

2026 年主流模型的上下文窗口已经到了 100K 到 200K Token，大概相当于一次能看 5 到 10 万字。这意味着 AI 可以一次性理解一个中型项目的大部分代码。​

上下文窗口决定了 AI 能理解多复杂的项目。如果项目代码量超过了上下文窗口，AI 没法一次看到全貌，生成的代码就容易跟已有代码冲突。老王建议产品经理在选 AI 工具的时候，上下文窗口大小是一个硬指标，别只看功能列表。​

​

​

​

02​

PART​

主流工具​

这一组 7 个工具是 2026 年 Vibe Coding 生态里讨论度最高的产品。老王把它们的定位和差异讲清楚，不是让你全都装上，是让你需要时能选对。​

之前写过介绍文章，这里不多做介绍，感兴趣的可以来这里在看：​

AI编程工具全景解读：VS Code、Antigravity、Cursor、Trae、OpenCode、CLI怎么选​

Cursor​

2026 年最热的 AI 原生 IDE。基础是 VS Code，但在上面深度集成了 AI 能力。​

Cursor 跟普通 IDE 装个 AI 插件完全不是一回事。它能理解你整个项目的代码结构，你在对话框里说一句把登录页的表单验证逻辑改成手机号加验证码模式，它能同时改 3 个文件，改完直接能跑。​

老王见过不少非技术背景的产品经理用 Cursor 直接搭原型，效率很夸张。它把编程开发从按键盘打字变成了按自然语言下达指令。​

Claude Code​

Anthropic 出品的终端 AI 编程 Agent。不是一个 IDE，是一个跑在命令行里的 AI 工程师。​

Claude Code 的强项是复杂任务。给它一个大需求，比如重构这个项目的认证模块，从 Session 切换到 JWT，它会自己分析代码库，制定计划，逐步改造，跑测试，修问题。​

开发者社区里 Claude Code 的口碑非常好，主要原因是它处理大型项目的上下文理解能力很强，不容易在多文件改造中丢失之前的代码逻辑。​

GitHub Copilot​

微软出品的 AI 编程助手，企业场景的标配。​

Copilot 嵌在 VS Code 里，最核心的功能是实时代码补全。你写了一行代码的开头，它自动补完后面。2026 年 Copilot 也有了 Agent 模式，但它最大的优势还是覆盖面广，几乎所有编程语言都支持，企业合规和安全认证做得最全。​

Bolt.new​

在浏览器里打开就能用的 Vibe Coding 平台。输入一句话描述，比如做一个黄色背景的待办事项 App，它直接生成完整的前端应用，在浏览器里就能预览和修改。​

Bolt.new 的用户画像很有意思，大量非技术背景的创业者、产品经理、设计师在用它。因为完全不需要在本地装任何开发环境，打开网页就能开始。老王拿它做过好几个内部 Demo，几分钟出一个能点能用的页面，拿去给老板汇报比 PPT 强得多。​

Antigravity​

Google DeepMind 出品的 Agent-first IDE。跟其他工具最大的区别是它有一个 Manager View，可以同时指挥多个 AI Agent 并行工作。​

Cursor 是你和一个 AI 工程师一对一协作，Antigravity 是你当项目经理，同时给 3 到 5 个 AI 工程师派活。一个在写前端，一个在写后端，一个在跑测试，并行推进。​

老王用它主要是为了能够使用 Claude Code 而不被封禁，而且它的价格相对来说是比较优惠的。但最让我无法忍受的是，它经常报错，而且不能完全自主的控制整机的权限。​

Trae​

字节跳动出品的 AI IDE。核心功能叫 Builder Mode，你给它一个大需求，它自动拆解成多个子任务，管理任务之间的依赖关系，然后按顺序执行。​

Trae 支持同时选多个 AI 模型，比如用 Claude 处理逻辑复杂的部分，用 GPT 处理文案生成的部分，根据任务特点选最合适的模型。​

Codex App​

OpenAI 出品的自主编程 Agent。Codex 的定位是 AI 软件工程师，不是辅助工具，是独立工作的角色。​

它能长时间自主运行。给它一个需求，它可能连续工作几个小时，中间自己做任务分解、写代码、跑测试、发现问题修复问题，最后交出一个可以合入代码库的成果。配置方式是在项目里放一个 AGENTS.md 文件，告诉它项目规范和约束。​

​

​

03​

PART​

关键功能模式​

工具知道了，还得知道工具里最关键的功能模式。这 8 个概念是日常用 Vibe Coding 工具时接触最多的操作方式。​

Composer 模式​

Cursor 里最有价值的功能。普通的 AI 对话是你问一句它答一句，改一个文件。Composer 是你描述一个完整需求，AI 一次性改多个文件。​

老王经常拿它做这种事，把侧边栏导航从固定模式改成可折叠模式。Composer 会同时改布局组件、样式文件、状态管理代码，改完就是一个完整的可运行变更。不用一个文件一个文件地指挥。​

Agent 模式​

Cursor 和 Copilot 都有的自治模式。在 Agent 模式下，AI 不只是改代码，它会自动搜索项目代码、执行终端命令、运行测试、分析报错、修改代码、再次运行，形成闭环。​

和普通对话模式的区别是，普通模式下 AI 改完代码就停了，等你手动运行和检查。Agent 模式下 AI 自己跑、自己检查、自己修，直到任务完成或者遇到它解决不了的问题。​

Agent Team​

Claude Code 在 2026 年推出的旗舰功能。一个主 Agent 接到你的任务后，给自己拆分成多个子任务，然后生成多个子 Agent 并行执行。​

比如你让它给管理后台加一个数据导出功能，主 Agent 可能拆成三个子任务分给三个子 Agent，一个写 API 接口，一个写前端按钮和弹窗，一个写导出格式转换逻辑，三个同时干，最后主 Agent 合并结果。​

这种模式模拟的是一个技术 Lead 带几个工程师的协作方式。速度比单 Agent 快很多，不存在排队等待。老王觉得这个模式对产品经理理解协作效率很有启发，以前你给开发排的那些串行任务，很多其实可以并行。​

Superpower​

AI 编码工具的增强能力集合。2026 年的 AI 编程工具能做的事已经远超写代码本身。​

Antigravity 的 Agent 可以打开浏览器，像用户一样点击、滑动、输入，测试你的网页功能是否正常，然后截图作为验证证据带回来给你看。Cursor 可以自动执行终端命令安装依赖包。Codex 可以自己创建 PR 提交代码。​

老王最看重的一点是，产品经理关心的验证环节，比如这个按钮点了有没有反应、表单提交后数据有没有存对，AI 都可以自己去测了。以前你得等开发部署完自己去点，现在 AI 替你点，还给你截图留证。​

Tab 补全​

所有 AI 编程工具最基础的功能。你在编辑器里打字，AI 在光标后面实时显示灰色的建议代码，按 Tab 就接受。​

Tab 补全不需要你描述需求，AI 根据你当前的代码上下文自动预测你接下来要写什么。有经验的使用者写代码速度能快 2 到 3 倍，大部分重复性代码按 Tab 就出来了。​

Inline Chat​

在代码编辑器里，选中一段代码，直接在那个位置跟 AI 对话。比如选中一个函数，输入加一个参数校验，手机号必须 11 位数字，AI 直接就地修改。​

不用切到单独的对话窗口，不用复制粘贴代码，上下文完全精准。操作节奏非常快，改完一个接着改下一个。​

Cursor Rules​

每个项目都有自己的编码规范，用的框架版本、命名习惯、文件结构惯例不一样。Cursor Rules 是一个配置文件，放在项目目录里，告诉 AI 这个项目的规矩。​

比如你在 Cursor Rules 里写本项目使用 Tailwind CSS，组件使用函数式写法，文件名使用 kebab-case，AI 后续生成的所有代码都会遵守这些规则。​

老王用下来最大的感受是，给 AI 的约束越明确，产出越可控，跟管理人一样。很多人抱怨 AI 写的代码风格乱，不是 AI 的问题，是你没给它立规矩。​

@ 引用​

在 Cursor 等工具的对话框里，输入 @ 可以精确指向某个文件、文件夹、甚至某一段代码。​

AI 的上下文窗口有限，不可能一次看完整个项目的所有代码。@ 引用让你主动告诉 AI 看这几个文件就够了，AI 的注意力更集中，生成的代码更精准。​

跟给开发讲需求一样，你去看一下订单模块的代码，然后在那个基础上加一个退款接口，这种指令比加一个退款接口有效得多。老王的习惯是每次对话都 @ 相关文件，不让 AI 在整个项目里瞎找。​

​

​

04​

PART​

UI 设计网站​

写完代码还得有界面。这 5 个网站是 Vibe Coding 生态里跟 UI 设计直接相关的平台，产品经理用得最多。​

Figma（figma.com）​

设计工具的绝对霸主，2026 年市场份额超过 70%。​

2026 年 Figma 内置了 AI 功能 Figma Make，可以用文字描述直接生成 UI 组件和布局。你在 Figma 里输入一个深色主题的用户列表页，左边筛选器、右边数据表格、上方搜索栏，它会按照你现有的设计系统生成对应的 UI。​

产品经理用 Figma 不是新鲜事，但 Figma Make 真正改变的是速度。以前画一个中等复杂度的页面要半天，现在 10 分钟出初版，剩下的时间调细节。​

Lovable（lovable.dev）​

用一句话生成一个完整的可运行 App。跟 Bolt.new 类似，但 Lovable 在 UI 设计还原度上做得更好。​

它内置了大量现代 UI 模板和组件，生成的界面不是那种粗糙的 Demo 风格，而是接近正式上线水准的设计。支持实时预览和修改，改完一键部署上线。​

老王拿 Lovable 验证过一个内部工具的想法，上午有了思路，下午就给老板看了一个能点能用的产品。整个过程没有写一行代码，没有求设计师帮忙，没有等开发排期。这种速度放在两年前想都不敢想。​

Framer（framer.com）​

高保真网页设计工具，设计完直接一键发布上线。​

Framer 的 AI 功能可以根据文字描述生成完整的网页设计，包括布局、排版、响应式适配。它最大的优势是设计即上线，你在 Framer 里做好的网页就是最终上线的版本，不需要开发再按照设计稿重新写代码。​

很多产品团队用 Framer 做落地页。传统流程是设计师画稿、前端开发、测试、上线，至少一周。用 Framer 一个下午搞定。​

Google Stitch（stitch.google）​

Google 出品的 AI 设计助手。跟 Figma 和 Framer 不同的是，Stitch 的定位是从意图到代码的全链路。最近刚更新新的版本，实现design.md保持色调一致的能力，王炸功能。​

你描述你的产品意图和用户场景，Stitch 帮你做 UI 设计，然后直接生成可用的前端代码。它特别擅长理解行业特定的 UI 模式，比如你说电商的商品详情页，它知道要有轮播图、价格区域、规格选择、加购按钮这些标准模块。​

Canva（canva.com）​

不只是做海报的工具了。2026 年的 Canva 通过 Magic Studio 系列 AI 功能，已经能生成网页、社交媒体内容、演示文稿，甚至简单的落地页。​

老王用 Canva 最多的场景是快速出公众号封面、产品介绍图、功能对比图。输入一句话描述，选个模板，30 秒出图。不需要会 PS，不需要求设计师帮忙。​

​

​

05​

PART​

部署·域名·后端·邮件​

代码写好了，界面设计好了，接下来就是让用户能访问到。这 5 个网站覆盖了从部署上线到域名配置、后端服务、邮件发送的完整闭环。​

Vercel（vercel.com）​

Vibe Coding 项目部署的首选平台。Vercel 是 Next.js 框架的官方部署服务。​

核心体验是极简，你把代码推送到 GitHub，Vercel 自动检测到更新，自动构建，自动上线。从推送代码到用户能访问，通常不到 2 分钟。​

每次推送代码都会自动生成一个预览链接，你可以把链接发给同事看最新版本，不用每次都演示。老王搭的几个内部工具全部署在 Vercel 上，免费额度对个人项目和 MVP 验证完全够用。​

GitHub （pages.github.com）​

GitHub 自带的免费静态网站托管服务。适合个人作品集、项目文档、产品介绍页这类不需要后端逻辑的网站。​

优势是完全免费，配置极简。你在 GitHub 仓库的设置里开启 Pages，选择一个分支，网站就在线了。域名格式是 yourname.github.io，也可以绑你自己的域名。​

很多产品经理用 GitHub Pages 发布自己的作品集和知识库。不用买服务器，不用配数据库，一分钱不花就有了自己的线上网站。​

Cloudflare（cloudflare.com）​

域名注册加 CDN 加速加网站托管三合一的平台。​

Cloudflare 注册域名是成本价，不像有些平台第一年便宜续费翻倍。Pages 功能可以托管静态网站，Workers 可以跑服务端逻辑，全球节点覆盖让你的网站在全世界加载速度都快。​

老王的域名都在 Cloudflare 管。你用 Vibe Coding 做了一个产品，需要给它配一个正式域名，Cloudflare 从注册域名到 DNS 解析到 HTTPS 证书，一站全搞定。​

Supabase（supabase.com）​

2026 年最火的开源后端即服务平台。数据库、用户登录认证、文件存储、实时订阅，一个平台全包了。​

Vibe Coding 场景下 Supabase 的价值特别大。AI 生成的前端代码需要把数据存到某个地方、需要用户注册登录、需要上传文件。以前这些都得自己写后端服务，现在接 Supabase 的 API 就行。​

它用的是 PostgreSQL 数据库，标准 SQL 查询，AI 代码生成工具对 SQL 的支持非常好，几乎不会出错。这是它被 Vibe Coding 社区广泛采用的重要原因。​

Resend（resend.com）​

2026 年最流行的开发者邮件发送服务。用户注册验证邮件、密码重置邮件、订单确认邮件、通知邮件，都通过 Resend 发送。​

传统的邮件服务配置极其复杂，域名验证、SPF 记录、DKIM 签名、退信处理，随便一个环节出问题邮件就进垃圾箱。Resend 把这些复杂性封装掉了，几行代码接入，邮件送达率就有保障。​

老王提一个实用建议，做 MVP 时如果涉及发邮件的功能，不用纠结技术难度大不大，直接跟开发说用 Resend 接一下，半天搞定。知道这个工具存在，就省了一轮需求沟通的时间。​

​

​

06​

PART​

最后​

Vibe Coding 对产品经理最大的影响不是让你变成程序员，而是让你有了直接验证想法的能力。​

以前你有一个功能假设，要写 PRD、排期、等开发、等测试，两周后才能看到结果。现在用 Cursor 或者 Bolt.new，当天下午就能看到一个能用的原型，当天晚上就能拿给用户试。​

这 30 个概念不需要全记住。工具类的知道有哪些选项、各自什么定位就够了。​