这是一场 AI 产品经理训练营分享的文字整理。分享的前半部分讲概念：什么是 AI 产品经理，为什么产品经理需要学习 Vibe Coding；后半部分是实操，用 Codex 从零到一做出一个个人网站。
为什么产品经理需要学习 Vibe Coding
我对 AI 产品经理的理解有两个角度。第一个角度是用 AI 来做事的产品经理：现在各种 AI 工具很流行，每个产品经理多少都会用到一些，比如用 AI 写文档、做原型、做设计图，或者直接上手改应用、改前端。第二个角度是负责 AI 产品的产品经理：这类人需要理解模型的能力边界，把 AI 的能力变成用户价值，对 AI 的理解要比普通产品经理更深。不管从哪个角度理解，亲手用 AI 做一个产品，才能真正理解 AI 的能力边界在哪里。
Vibe Coding 直译是氛围编程，意思是用日常语言描述目标和想法，让 Agent 编写代码实现应用，不需要人逐行编写代码。人负责定义需求、规划蓝图、审核结果，Agent 负责实现、调试和优化代码。
为什么需要学习它？以我自己过去的经历为例，传统流程里做一个产品需求，要先做产品调研、写 PRD、画原型图，然后评审两轮：第一轮和领导对齐方向，第二轮和前端、后端、UI 设计宣讲清楚。过程中有摩擦还要反复讨论，一个 PRD 最快也要一个星期，稍大的功能要两三个星期。而在很多初创 AI 公司，如果产品经理同时负责产品设计和前端开发，一个上午就能完成以前需要很长时间打磨的功能，跑出 Demo，再请更了解技术的同事补足短板，功能就可以直接上线。
这意味着 AI 拉高了能力的地板，任何人都可以在几分钟内做出一个够用的产品。同时，现在做产品的关键不是会不会做，而是谁先做出来。SaaS 时代还有技术护城河，有些团队有几百个研发；现在 AI 给人的提效很高，一个人可以顶过去五六个研发，只要不涉及底层大模型，任何产品都可以被快速复刻，大家比拼的是速度、对产品的理解和体验的打磨。
过去常说的是 T 型人才：在一个方向深入，其他方向只到了解的层面。AI 时代更需要的是方块型人才：几乎没有短板，产品的每个流程都能做到八十分，因为 AI 可以补齐短板。从 0 到 1 做过一个产品，就要自己走完设计、开发、宣发和优化的整个流程，这个过程会让人很快成长为方块型人才。在 Anthropic、Cursor 这类 AI Native 公司，设计师已经在向产品经理和工程师的方向延伸；其他岗位也一样，产品经理可以往设计、工程、宣发多走一点。
主流 AI Coding Agent 和模型选择
目前主流的 AI Coding Agent，海外有 Claude Code、Codex 和 Cursor，国内有 Qoder、Trae、CodeBuddy 和 ZCode。想把这些工具用起来，从里面选一个自己喜欢的就可以。
Agent 和普通 AI 对话有什么区别？以 Codex 和豆包举例：和豆包对话时，我们发一条消息，它响应一条消息，中间可能联网查一下。而 Agent 收到一条消息后会执行多步：先理解目标，再调用工具。比如让它查一下今天的天气并写到文档里，它会先查天气，再创建文件写成文档，执行完工具之后还会根据当前情况思考下一步做什么，任务完成后才给出最终响应。我们的一条消息，带动的是它中间的一串实际操作，交付的是一个完整的任务结果。
不同的 Agent，里面的模型可能不一样，模型相当于 Agent 的大脑。现在各家 Agent 的框架能力已经差不多，能力差异主要取决于模型。Claude Code 和 Codex 在海外最火，很大程度上因为它们有自家的模型：Claude 有 Opus 系列，Codex 有 GPT-5.5。国内模型从今年开始能力也慢慢变强，千问、MiniMax、DeepSeek 这些模型对 Agent 的支持都已经不错。
选择模型一般按任务复杂度和性价比。海外模型能力强，但价格贵，订阅门槛也高；国内模型一般比海外便宜 5 到 10 倍，有时甚至能差到 20 倍。
用 Codex 做一个个人网站
实操部分我用 Codex 演示从零到一做一个个人网站。
Codex 的界面很简洁：左边是话题栏，右边是对话框。话题栏里重点看 Project（项目），一个项目实际上就是一个文件夹。Agent 有文件编辑能力，我们输入给它的文件和它输出的文件都放在同一个文件夹里，方便管理。临时的话题可以在 Chats 里直接开启。
对话框下方有几个操作区。最左边是上传文件，比如做个人网站时可以把简历或者过往的图片发给它。然后是权限选择，我一般开 Full access，也就是任何操作都不需要经过我同意。它还有另外两档：一档是任何操作都要经过批准，一档是只有可能破坏文件或者涉及敏感信息的操作才申请批准。我选 Full access 的原因是，如果开前面两档，把它放在那里跑，它跑着跑着就会来要一次批准，很打断节奏。我自己用 Full access 已经一两年，没有遇到过严重的问题。
右边是模型和推理能力的选择。Reasoning 档位调得越高，思考时间越长，输出的思考内容越多，做事情更严谨准确，但时间更长、效率更低。日常任务选 High 就够了，明确知道非常复杂的任务再选 Extra High。Speed 里的 Fast 模式比标准模式快 15 倍，但额度消耗也更高。
做个人网站的第一步，是创建一个项目，指向一个提前建好的空文件夹。然后我没有直接让它开工，而是先让它反问我：「我想做一个个人网站，你需要我的什么信息呢？」这是和 AI 对话的一个技巧：与其自己写很长的提示词，不如让 Agent 来收集上下文。Agent 时代已经可以摒弃过去那种「你是一个某某某，你需要给我什么结构」的复杂提示词，更多时候是和 Agent 一起协作。
这里还可以开启 Codex 的 Plan 模式。开启之后，它不会把所有问题平铺在对话里，而是用表单的形式收集信息：这个网站最想帮你完成什么、主要给谁看、用什么语言，每个问题还会给出推荐选项，逐题回答就可以。
如果过往有存量资料，不需要手动一条条输入。我把自己的 GitHub 个人主页链接直接发给它——注意要发带有昵称的个人主页地址，而不是 GitHub 首页——它就能通过联网调研工具找到我的信息。也可以直接让它联网搜索自己的名字或者昵称，它会像人使用搜索引擎一样，派生关键词、搜索、再读取网页，帮自己快速补充信息。
另外还有一个点：Agent 里每个话题的信息不会传递给另一个话题。想让不同话题有共同的记忆，可以让它把当前做的事情写成项目里的文件。下一次打开新话题时，它会本能地查看这个项目是做什么的，看到之前的文件，就知道我们做过什么。项目目录就是这样充当不同话题之间的共同记忆。
回答完问题之后，Codex 输出了一份完整的建站方案，包括页面结构、视觉方向、实现方式和测试计划。它基于这份方案执行，这份方案相当于产品经理交付的 PRD。
这里顺便解释两种 AI 协作过程中的核心产物。一种是 HTML，网页格式，标签一层层嵌套，放到浏览器里就渲染成可视化页面，适合做给人看的可视化结果。另一种是 Markdown，Codex 交付的方案就是这个格式：井号加文字渲染成大标题，横杠加文字渲染成无序列表。Markdown 过去是程序员写博客用的，它相比 Word 文档有两个好处：源码可读，即使没有渲染也能看清内容；而且节省 Token，装饰样式只需要一个井号。所以即使我们不主动要求，AI 写出来的东西默认也是 Markdown 格式。自己写 PRD 也可以尝试用 Markdown。
需要注意的是，HTML 只能承载比较轻量的网站。比较大的项目一般不会直接写 HTML，因为单文件代码会非常长，通常会选择框架来组织代码，最后打包出来的产物仍然是 HTML，只是 AI 不用直接写那一份 HTML 而已。
用 Skill 让页面稳定做好看
方案确认后，Codex 开始写 HTML，完成后它还会自己做一轮轻量检查，比如请求页面确认结构完整。第一版页面的效果比较一般：左侧的字特别大，右侧的图标也特别大，整体是没有圆角的风格。Codex 默认的 UI 能力没有那么强，但起码有了一个可以打磨的基础页面。
下一步是让它把页面做得好看。我的办法是调用一个自己封装的 Skill：用 @ 符号引用项目里刚生成的 HTML 文件，再让它参考 oil-html 这个 Skill 优化网页。@ 符号不会把文件完整内容写入上下文，而是把路径告诉 Agent，由它自己执行读取文件的工具去查看。
优化后的页面明显清爽了，排版舒服，还有一些小点缀的文字，这些都是我在 Skill 里描述的要求。
Skill 是什么？它的中文意思是技能，本质就是一个文件夹，和我们项目的文件夹一样。Skill 是 Anthropic 前两年推出的，目的是方便分发知识：一份知识可以写成一个文件夹，而文件本来就是操作 Agent 的基本载体。一个 Skill 里固定会有一个 SKILL.md 文件，开头是名字和描述，描述告诉 Agent 什么时候应该调用这个 Skill；底下才是具体内容，内容里还可以让它在需要时再查看其他文件，一层层嵌套。
为什么要这样设计？因为 Agent 有上下文的概念。每个话题都会占用上下文，达到上限之后就发不出消息，需要压缩上下文，也就是把之前的对话总结之后再继续。压缩后的效果不如带着完整信息对话，而且上下文占用越长，Agent 执行任务的准确度越低。这和人查字典一样：只有三个字的字典一眼就能看到答案，一两千字的字典就要找很久。所以对 Agent 来说，最好的交流效果是给它准确且精简的上下文。Skill 的渐进式加载就是为了这一点：默认只读名字和描述，命中了、真正要用的时候才读取详细内容。
Codex 里还可以生成图片，用的是 GPT Image 2 模型，包装在一个叫 imagegen 的内置 Skill 里，输入斜杠搜索 imagegen 就能调用，它会自己写提示词、调用生图工具。我在自己的 Skill 里要求它生成绿底的图片，因为 GPT 的生图模型没办法原生生成透明底的 PNG，只能生成带背景颜色的图；生成绿底之后，再让 Agent 执行脚本把背景抠掉，就像绿幕抠图一样。页面上那个火柴人加小狗的配图就是这么来的：Skill 里描述了要生成一个贴合作品主题的小人，再加一只小狗——因为我自己就有一只小狗。
到这里，这个 HTML 已经有了主题配色、渐变背景、网格纹理和右侧配图，一眼就能看出是我的风格。个人网站要传达的就是这一点：讲清楚自己的独特性和稀缺性。即使还没有丰富的履历，也可以写自己的爱好，把这个网页当作一个产品来打磨，它比简历能展示更丰富、更全面的信息。
联网调研和浏览器自动化
页面风格确定之后，下一步是补充更多个人信息。我先让它联网调研，把公开信息补充到 HTML 里。联网调研是很多 AI Agent 的内置工具，原理和我们自己用搜索引擎一样：搜索关键词，基于结果派生新的关键词，再一步步拓展。它在少数派、掘金、CSDN、B 站这些 SEO 做得比较好的平台搜到了我以前的文章。
联网调研的局限是只能拿到公开信息。海外的 GitHub、Reddit、X 比较好搜，国内互联网相对封闭，更多内容在公众号、小红书、哔哩哔哩这些渠道，很难被搜索引擎拿到。
解决办法是让 Agent 模拟人去操作浏览器。我现在用的浏览器叫 Ego Lite（官网是 lite.ego.app），它是一个适合给 Agent 做自动化操作的浏览器。安装之后，它本质上是一个新浏览器，会把 Chrome 的信息迁移过来，界面和 Chrome 一样，区别是右边有一个 Space 的概念，可以在里面执行自动化操作。安装这个浏览器时，它还会给电脑上的 Agent（不管是 Codex 还是 Claude Code）自动安装一个叫 Ego Browser 的 Skill，告诉 Agent 怎么使用这个浏览器。
我把小红书个人主页的链接发给 Codex，让它查看我最近发布的内容并补充到 HTML 里。执行时，浏览器右上角会出现一个蓝色的标记，表示有自动化任务正在执行；底部有接管和终止任务的按钮，因为这块区域人和 Agent 都可以操作。有些网站有验证码机制，Agent 处理不了的时候，人可以接管处理掉，再交还给 Agent 继续。
Agent 操作浏览器的原理有两种。一种是读取页面上的元素信息，判断哪个元素是视频、哪个是标题，然后决定点击哪里。另一种更兜底的方式是截图：页面结构太复杂、读不懂的时候，就截一张图，利用模型的多模态能力识别图片，理解页面的布局之后再去规划操作。
这里还要提一下幻觉问题。Agent 做调研时，最让人担心的是它明明不知道却瞎编。避免幻觉的最好方式是让它基于现实里的东西回答，并且给出信息来源。Codex 有一个 Source 功能，会列出它参考的公开来源，我们点开链接就能确认信息确实出自那里。
子 Agent 并行和 Sidechat
使用 AI Agent 更多时候是为了解放人的劳动力。Agent 做一件事可能要一两个小时，但人不需要盯着它；而且 Agent 是可以并行的，可以同时跑几个 Agent 分别执行任务。
说到并行，Codex 里有一个子 Agent 的用法。默认情况下它不会主动触发子 Agent，需要在消息里明确要求，比如「你并行三个子 Agent，对这个博主做一个深度调研」。它会把调研拆成三个不重叠的方向：一个调研平台身份和公开资料，一个调研内容主题和近期选题，一个调研项目和技术资产，各自通过 Create an Agent 的工具启动。
子 Agent 相当于主 Agent 的子集：有自己独立的上下文，不复用当前对话的信息，执行完成后把总结交回给主 Agent。它的价值主要有两个。第一个是节省主对话的上下文。比如让主 Agent 自己去找一段代码的位置，中间会读很多无关代码，可能要消耗五万上下文；交给子 Agent 去做，它最后只交回一份总结，主 Agent 这边可能只消耗一万。代价是总的 Token 消耗会多一点，但主 Agent 的上下文增长更慢，执行效果更好。第二个就是并行带来的效率提升，三个方向同时调研，比主 Agent 串行执行快得多。点击子 Agent 的名字，还可以在侧边栏查看它具体的执行情况。
侧边栏里还有一个 Sidechat 功能，通过斜杠开启。它继承主对话的上下文，但在这里问问题不会影响主对话。比如主对话正在开发功能，我突然想问一个和主线无关的技术细节，这种问题写进主对话只会污染上下文——上下文越精简越准确，这类问题就适合放到 Sidechat 里问。也可以让它做一些轻量的活，比如主链路继续开发大功能，Sidechat 里微调某个位置的 UI，实现并行。需要注意的是，Sidechat 是临时对话，过一段时间缓存就会失效；它里面的消息也不能编辑，而主对话里的最后一条消息是可以编辑的。