南川：Vol 49. Vibe Coding 的坑到底有多少？

南川：Vol 49. Vibe Coding 的坑到底有多少？ 南川：Vol 49. Vibe Coding 的坑到底有多少？ Modified July 7, 2025 claude code 在 plan mode 下会主动搜索网页，并给出更加细致的解决方案 ◦ Edit Mode ：适合快速实现已知方案 ◦ Plan Mode ：适合探索性任务和复杂问题 2. 提供外部知识 ： ◦ 将官方文档转为 Markdown 提供给 AI ◦ 明确指出特定平台的最佳实践 我最终同时开着五个窗口，才能边调试边跑通程序 五、 Vibe Coding 的系统化原则 基于这次实践，我总结出以下 Vibe Coding 原则： 原则一：需求表达的艺术 越精确越专业的描述，Vibe Coding 体验越丝滑 • 可以不过分细化初始需求，但要准备好迭代 • 使用专业术语能显著提升 AI 理解准确度 • 语义压缩能力是核心技能 实际经验显示，整体来看，越精确 越专业 的描述，Vibe Coding 的体验越丝滑，AI 有越高概率写出正确的、符合预期的代码。 比如李继刚老师的汉语新解里约定图片生成的风格为蒙德里安风格、归藏老师对广告宣传 html 生成的风格为特斯拉 bento 风格、红杉中国前几天发布的寻找亚太地区 25 岁以下最具潜力的 AI 创新者海报为孟菲斯风格，仅仅几个字，AI 就能理解了，并总能生成符合预期的结果： 语义压缩水平是 prompt 工程师的核心 benchmark 。 • 试完这个神级 Prompt，我发现 Claude3.5 确实就是现在的 No.1。 • 藏师傅的网页生成提示词 3.0 ｜ 原来 Gemini 2.5 Pro 这么强 • 寻找定义下一个 AI 十年的青年力量丨红杉中国联合《麻省理工科技评论》发起「AI25」评选 原则二：问题描述的方法论 清晰描述预期与现实的差距 • 提供具体的输入输出对比 • 即使不知道原因（why），也要准确描述现象（what） • 经验越丰富，问题定位越准确 原则三：AI 的能力边界认知 理解 AI 的优势与局限 • 擅长：快速原型、常见模式、代码生成 • 不擅长：系统集成、特定平台细节、性能优化 • 需要人工：架构决策、用户体验判断 原则四：模式选择的智慧 根据任务特性选择合适的工作模式 • Edit Mode ：适用于明确需求、常见模式、快速迭代 • Plan Mode ：适用于探索性任务、知识盲区、系统集成 • 关键洞察 ：当遇到不熟悉的领域或平台特性时，Plan Mode 能让 AI 主动学习并制定更可靠的方案 实践经验： • 简单功能实现 → Edit Mode • 系统集成挑战 → Plan Mode + 网络搜索 • 性能优化任务 → Plan Mode + 基准测试 原则五：高效协作的技巧 把 AI 当作初级程序员来管理 • 及时纠正过度设计倾向 • 分解复杂任务为简单步骤 • 保持代码简洁性的主导权 • 适时切换工作模式以获得最佳效果 原则六：知识杠杆效应 你的知识是 AI 的放大器 • 领域知识让 AI 输出更专业 • 平台经验避免常见陷阑 • 最佳实践指导 AI 方向 • 知道何时让 AI 自主学习（Plan Mode） 六、深度思考： Vibe Coding 的定位 通过实践，我们可以清晰地看到 Vibe Coding 的能力边界： 类别 Vibe Coding 擅长 ✅ Vibe Coding 不擅长 ❌ 开发任务 • 快速原型开发 • 验证想法可行性 • 生成基础代码框架 • 处理重复性编码 • 复杂的平台特性 • 底层系统交互 • 特定硬件适配 • 跨系统集成 知识应用 • 查找 API 用法 • 实现常见功能模式 • 生成样板代码 • 应用最佳实践 • 创新性解决方案 • 领域特定知识 • 性能极限优化 • 安全漏洞分析 代码质量 • 基础代码重构 • 添加错误处理 • 代码格式规范 • 简单性能优化 • 架构模式选择 • 技术选型决策 • 长期维护规划 • 代码审查判断 用户体验 • 实现功能需求 • 遵循设计规范 • 响应式布局 • 基础交互实现 • 交互流程设计 • 视觉美感判断 • 场景化需求理解 • 用户心理把握 关键洞察 从表格中我们可以看出，Vibe Coding 在 执行层面 表现出色，但在 决策层面 仍需人类智慧。这恰恰定义了未来程序员的角色转变：从执行者到决策者，从编码者到架构师。 七、结论： 程序员的未来 通过这个 SVG 转 PNG 插件的开发过程，我们看到了 Vibe Coding 的真实面貌： 1. 它确实很强大 ◦ 将开发效率提升了数倍 ◦ 让非专业人士也能参与开发 ◦ 降低了创意实现的门槛 2. 但它需要驾驭 ◦ 需要清晰的需求表达能力 ◦ 需要问题诊断与解决经验 ◦ 需要对 AI 能力的准确认知 3. 程序员不会失业，而是进化 ◦ 从代码编写者到 AI 驾驭者 ◦ 从实现细节到架构设计 ◦ 从单打独斗到人机协作 最终感悟 ：Vibe Coding 不是魔法，而是一个强大的工具。它放大了我们的能力，但也放大了我们的局限。掌握它，需要新的技能和思维方式。 在这个 AI 时代，最有价值的不是会写代码，而是知道什么代码值得写，以及如何让 AI 帮我们写得更好。 附录： 最佳实践资源 如果你对 Claude Code 的最佳实践感兴趣，推荐阅读： 1. Claude Code Best Practices Anthropic [4] 2. Claude 4 Prompt Engineering Anthropic Docs [5] 3. How I Use Claude Code Philipp Spiess [6] 同时，欢迎关注我们的工具项目： • claude code manager [7] Claude Code 项目管理工具 让我们一起探索 AI 编程的边界，在 Vibe Coding 的浪潮中找到自己的位置。 手工川 Stay Hungry, Stay Foolish. 精选 真正有价值的内容 为对的人，带来对的启发 在这里遇见高质量的思考 工程 产品 创业 技术实践 设计思维 商业洞察 感谢您的时间！ 如果文章对您有价值，欢迎分享给同行 [1] https://chromewebstore.google.com/detail/claude artifact enhancer/eipafnglebabfokbklohnjpamebcongh?hl=zh cn [2] https://github.com/MarkShawn2020/exts chrome claude artifact enhancer [3] https://cloudconvert.com/svg to png [4] https://www.anthropic.com/engineering/claude code best practices [5] https://docs.anthropic.com/en/docs/build with claude/prompt engineering/claude 4 best practices [6] https://spiess.dev/blog/how i use claude code [7] https://github.com/markshawn2020/vctool claude code manager 🔗 原文链接： https://mp.weixin.qq.com/s/ucMfmsaX... 原创 南川同学 手工川 AI版2025年07月07日 00:50 北京 试完这个神级 Prompt，我发现 Claude3.5 确实就是现在的 No.1。 藏师傅的网页生成提示词 3.0 ｜ 原来 Gemini 2.5 Pro 这么强 寻找定义下一个 AI 十年的青年力量丨红杉中国联合《麻省理工科技评论》发起「AI25」评选 https://mp.weixin.qq.com/s/ucMfmsaX... claude code 在 plan mode 下会主动搜索网页，并给出更加细致的解决方案 ◦ Edit Mode ：适合快速实现已知方案 ◦ Plan Mode ：适合探索性任务和复杂问题 ◦ Edit Mode ：适合快速实现已知方案 ◦ Plan Mode ：适合探索性任务和复杂问题 2. 提供外部知识 ： ◦ 将官方文档转为 Markdown 提供给 AI ◦ 明确指出特定平台的最佳实践 ◦ 将官方文档转为 Markdown 提供给 AI ◦ 明确指出特定平台的最佳实践 我最终同时开着五个窗口，才能边调试边跑通程序 五、 Vibe Coding 的系统化原则 基于这次实践，我总结出以下 Vibe Coding 原则： 原则一：需求表达的艺术 越精确越专业的描述，Vibe Coding 体验越丝滑 • 可以不过分细化初始需求，但要准备好迭代 • 使用专业术语能显著提升 AI 理解准确度 • 语义压缩能力是核心技能 实际经验显示，整体来看，越精确 越专业 的描述，Vibe Coding 的体验越丝滑，AI 有越高概率写出正确的、符合预期的代码。 比如李继刚老师的汉语新解里约定图片生成的风格为蒙德里安风格、归藏老师对广告宣传 html 生成的风格为特斯拉 bento 风格、红杉中国前几天发布的寻找亚太地区 25 岁以下最具潜力的 AI 创新者海报为孟菲斯风格，仅仅几个字，AI 就能理解了，并总能生成符合预期的结果： 语义压缩水平是 prompt 工程师的核心 benchmark 。 • 试完这个神级 Prompt，我发现 Claude3.5 确实就是现在的 No.1。 试完这个神级 Prompt，我发现 Claude3.5 确实就是现在的 No.1。 • 藏师傅的网页生成提示词 3.0 ｜ 原来 Gemini 2.5 Pro 这么强 藏师傅的网页生成提示词 3.0 ｜ 原来 Gemini 2.5 Pro 这么强 • 寻找定义下一个 AI 十年的青年力量丨红杉中国联合《麻省理工科技评论》发起「AI25」评选 寻找定义下一个 AI 十年的青年力量丨红杉中国联合《麻省理工科技评论》发起「AI25」评选 原则二：问题描述的方法论 清晰描述预期与现实的差距 • 提供具体的输入输出对比 • 即使不知道原因（why），也要准确描述现象（what） • 经验越丰富，问题定位越准确 原则三：AI 的能力边界认知 理解 AI 的优势与局限 • 擅长：快速原型、常见模式、代码生成 • 不擅长：系统集成、特定平台细节、性能优化 • 需要人工：架构决策、用户体验判断 原则四：模式选择的智慧 根据任务特性选择合适的工作模式 • Edit Mode ：适用于明确需求、常见模式、快速迭代 • Plan Mode ：适用于探索性任务、知识盲区、系统集成 • 关键洞察 ：当遇到不熟悉的领域或平台特性时，Plan Mode 能让 AI 主动学习并制定更可靠的方案 实践经验： • 简单功能实现 → Edit Mode • 系统集成挑战 → Plan Mode + 网络搜索 • 性能优化任务 → Plan Mode + 基准测试 原则五：高效协作的技巧 把 AI 当作初级程序员来管理 • 及时纠正过度设计倾向 • 分解复杂任务为简单步骤 • 保持代码简洁性的主导权 • 适时切换工作模式以获得最佳效果 原则六：知识杠杆效应 你的知识是 AI 的放大器 • 领域知识让 AI 输出更专业 • 平台经验避免常见陷阑 • 最佳实践指导 AI 方向 • 知道何时让 AI 自主学习（Plan Mode） 六、深度思考： Vibe Coding 的定位 通过实践，我们可以清晰地看到 Vibe Coding 的能力边界： 类别 Vibe Coding 擅长 ✅ Vibe Coding 不擅长 ❌ 开发任务 • 快速原型开发 • 验证想法可行性 • 生成基础代码框架 • 处理重复性编码 • 复杂的平台特性 • 底层系统交互 • 特定硬件适配 • 跨系统集成 知识应用 • 查找 API 用法 • 实现常见功能模式 • 生成样板代码 • 应用最佳实践 • 创新性解决方案 • 领域特定知识 • 性能极限优化 • 安全漏洞分析 代码质量 • 基础代码重构 • 添加错误处理 • 代码格式规范 • 简单性能优化 • 架构模式选择 • 技术选型决策 • 长期维护规划 • 代码审查判断 用户体验 • 实现功能需求 • 遵循设计规范 • 响应式布局 • 基础交互实现 • 交互流程设计 • 视觉美感判断 • 场景化需求理解 • 用户心理把握 类别 类别 Vibe Coding 擅长 ✅ Vibe Coding 擅长 ✅ Vibe Coding 不擅长 ❌ Vibe Coding 不擅长 ❌ 开发任务 开发任务 • 快速原型开发 • 验证想法可行性 • 生成基础代码框架 • 处理重复性编码 • 快速原型开发 • 验证想法可行性 • 生成基础代码框架 • 处理重复性编码 • 复杂的平台特性 • 底层系统交互 • 特定硬件适配 • 跨系统集成 • 复杂的平台特性 • 底层系统交互 • 特定硬件适配 • 跨系统集成 知识应用 知识应用 • 查找 API 用法 • 实现常见功能模式 • 生成样板代码 • 应用最佳实践 • 查找 API 用法 • 实现常见功能模式 • 生成样板代码 • 应用最佳实践 • 创新性解决方案 • 领域特定知识 • 性能极限优化 • 安全漏洞分析 • 创新性解决方案 • 领域特定知识 • 性能极限优化 • 安全漏洞分析 代码质量 代码质量 • 基础代码重构 • 添加错误处理 • 代码格式规范 • 简单性能优化 • 基础代码重构 • 添加错误处理 • 代码格式规范 • 简单性能优化 • 架构模式选择 • 技术选型决策 • 长期维护规划 • 代码审查判断 • 架构模式选择 • 技术选型决策 • 长期维护规划 • 代码审查判断 用户体验 用户体验 • 实现功能需求 • 遵循设计规范 • 响应式布局 • 基础交互实现 • 实现功能需求 • 遵循设计规范 • 响应式布局 • 基础交互实现 • 交互流程设计 • 视觉美感判断 • 场景化需求理解 • 用户心理把握 • 交互流程设计 • 视觉美感判断 • 场景化需求理解 • 用户心理把握 关键洞察 从表格中我们可以看出，Vibe Coding 在 执行层面 表现出色，但在 决策层面 仍需人类智慧。这恰恰定义了未来程序员的角色转变：从执行者到决策者，从编码者到架构师。 七、结论： 程序员的未来 通过这个 SVG 转 PNG 插件的开发过程，我们看到了 Vibe Coding 的真实面貌： 1. 它确实很强大 ◦ 将开发效率提升了数倍 ◦ 让非专业人士也能参与开发 ◦ 降低了创意实现的门槛 ◦ 将开发效率提升了数倍 ◦ 让非专业人士也能参与开发 ◦ 降低了创意实现的门槛 2. 但它需要驾驭 ◦ 需要清晰的需求表达能力 ◦ 需要问题诊断与解决经验 ◦ 需要对 AI 能力的准确认知 ◦ 需要清晰的需求表达能力 ◦ 需要问题诊断与解决经验 ◦ 需要对 AI 能力的准确认知 3. 程序员不会失业，而是进化 ◦ 从代码编写者到 AI 驾驭者 ◦ 从实现细节到架构设计 ◦ 从单打独斗到人机协作 ◦ 从代码编写者到 AI 驾驭者 ◦ 从实现细节到架构设计 ◦ 从单打独斗到人机协作 最终感悟 ：Vibe Coding 不是魔法，而是一个强大的工具。它放大了我们的能力，但也放大了我们的局限。掌握它，需要新的技能和思维方式。 在这个 AI 时代，最有价值的不是会写代码，而是知道什么代码值得写，以及如何让 AI 帮我们写得更好。 附录： 最佳实践资源 如果你对 Claude Code 的最佳实践感兴趣，推荐阅读： 1. Claude Code Best Practices Anthropic [4] 2. Claude 4 Prompt Engineering Anthropic Docs [5] 3. How I Use Claude Code Philipp Spiess [6] 同时，欢迎关注我们的工具项目： • claude code manager [7] Claude Code 项目管理工具 让我们一起探索 AI 编程的边界，在 Vibe Coding 的浪潮中找到自己的位置。 手工川 Stay Hungry, Stay Foolish. 精选 真正有价值的内容 为对的人，带来对的启发 在这里遇见高质量的思考 工程 产品 创业 技术实践 设计思维 商业洞察 感谢您的时间！ 如果文章对您有价值，欢迎分享给同行 [1] https://chromewebstore.google.com/detail/claude artifact enhancer/eipafnglebabfokbklohnjpamebcongh?hl=zh cn [2] https://github.com/MarkShawn2020/exts chrome claude artifact enhancer [3] https://cloudconvert.com/svg to png [4] https://www.anthropic.com/engineering/claude code best practices [5] https://docs.anthropic.com/en/docs/build with claude/prompt engineering/claude 4 best practices [6] https://spiess.dev/blog/how i use claude code [7] https://github.com/markshawn2020/vctool claude code manager 🔗 原文链接： https://mp.weixin.qq.com/s/ucMfmsaX... https://mp.weixin.qq.com/s/ucMfmsaX... 原创 南川同学 手工川 AI版2025年07月07日 00:50 北京 ✏️ 人文与科技 第 49 期 Vibe Coding 的坑到底有多少？ 从一个SVG转PNG插件开发实例看AI编程的真实体验 作者：MarkShawn · 2025 07 06 Vibe Coding Claude Code AI编程 插件开发 开发实践 技术挑战 工程经验 人文与科技 第 49 期 Vibe Coding 的坑到底有多少？ 从一个SVG转PNG插件开发实例看AI编程的真实体验 作者：MarkShawn · 2025 07 06 Vibe Coding Claude Code AI编程 插件开发 开发实践 技术挑战 工程经验 引言： AI 编程的理想与现实 Vibe Coding 正在席卷整个开发者社区。这种"只需描述需求，AI 就能帮你实现"的编程方式，看起来如此美好，以至于让人产生错觉：程序员是否真的要失业了？ 带着这个疑问，我决定通过一个真实的开发案例——开发一个 SVG 转 PNG 的右键菜单插件——来深入体验 Vibe Coding 的实际效果。这个案例虽小，却足以展现 AI 编程的真实面貌。 一、需求的诞生： 从简单开始 1.1 背景故事 我们需要制作一张发布会场景的平面布置图。由于主要关注结构而非渲染效果，我们选择了 Claude App 的 Artifact 功能来生成 SVG 格式的图片。 在 claude app 中绘制 svg 技术洞察 ：Claude 在生成 SVG 方面表现出色。去年我们用它生成人生图腾，效果惊艳。李继刚老师的"汉语新解"项目也是基于 Claude 生成的 SVG 图片在 AI 圈火出了名。 1.2 问题与现有解决方案 Claude 生成的是 SVG 格式，但实际使用中我们需要更通用的 PNG 格式。目前有几种解决方案： 1. 使用我开发的 Chrome 插件 ◦ Claude Artifact Enhancer [1] ◦ 可在 Artifact 内直接下载 PNG ◦ 开源地址 [2] ◦ Claude Artifact Enhancer [1] ◦ 可在 Artifact 内直接下载 PNG ◦ 开源地址 [2] 2. 使用在线转换服务 ◦ 如 CloudConvert [3] ◦ 已转换超过 25 亿个文件，总计 19,847 TB ◦ 如 CloudConvert [3] ◦ 已转换超过 25 亿个文件，总计 19,847 TB 3. 本地转换工具 ◦ 各种桌面应用程序 ◦ 各种桌面应用程序 1.3 新的追求：极致的便利 但作为一个"懒惰"的程序员，我想要更简单的方案： 右键点击 SVG 文件，直接转换为 PNG 。 最终效果：支持右键快速操作 在 Vibe Coding 时代之前，这样的想法可能就止步于想想。但现在不同了—— 只要你有想法，能驾驭 AI 工具，梦想就能实现！ 二、Vibe Coding 实战： 理想很丰满 2.1 需求分析与细化 我们的核心需求很简单：在 Mac Finder 中右键点击 SVG 图片，出现"SVG2PNG"选项。 进一步细化： 功能性需求 ： • 输出高清图片，但文件不要过大 • 保存在当前文件夹，仅改变后缀名 • 支持批量处理（可选） 非功能性需求 ： • 转换速度快，用户无感知 • 错误时给出明确提示 • 操作流程符合直觉 2.2 第一次尝试：惊喜来得如此容易 选择 Claude Code 作为主力工具（目前实际能力最强、效果最稳定），在终端中启动： 专业提示 ：使用 bypass permission 模式可以减少无意义的权限确认，适合熟练用户。 输入需求后，Claude Code 快速响应，仅用一两分钟就完成了开发。右键菜单中出现了"Convert SVG to PNG"选项！ 右键菜单效果 2.3 现实的打击：魔鬼在细节中 然而，点击后弹出错误："服务输入出现问题"。 将错误信息反馈给 Claude Code 后，它迅速修改代码。但修改后，右键菜单选项消失了... 再次反馈，再次修改，终于成功了！ 看起来，Vibe Coding 确实很强大！ 三、深入优化： 经验的价值 3.1 Retina 屏幕适配问题 作为资深工程师，我知道 Mac 的 Retina 显示屏需要双倍分辨率。这个细节，AI 可能不会主动考虑。 通过明确描述问题并提供输入输出对比，Claude Code 很快定位并解决了分辨率问题。 不同模式下的图像效果与大小不一 3.2 用户体验的追求：从"服务"到"快速操作" 我希望功能出现在"快速操作"而非"服务"菜单下。虽然技术上相同，但产品体验不同。 没想到，这个看似简单的需求成了噩梦的开始... 四、挑战与教训： Vibe Coding 的真实面貌 4.1 时间成本的真相 通过我们开发的 claude code manager 工具分析： 结果显示： • 实现核心功能：10 分钟 • 调整为"快速操作"：超过 1 小时 • 总计交互轮次：20+ 次 项目对话历史，/exit 表示重建了一个新的项目重新尝试 4.2 遇到的典型问题 1. 过度工程化 ◦ Claude Code 倾向于添加备用方案 ◦ 自动编写测试用例 ◦ 增加了不必要的复杂性 ◦ Claude Code 倾向于添加备用方案 ◦ 自动编写测试用例 ◦ 增加了不必要的复杂性 2. 分辨率处理不够优雅 ◦ 强制指定固定分辨率（3200x3600） ◦ 应该基于 DPI 动态计算 ◦ 强制指定固定分辨率（3200x3600） ◦ 应该基于 DPI 动态计算 3. 知识盲区 ◦ 对 Mac 系统的"快速操作"了解不足 ◦ 需要开启 Plan Mode 让 AI 主动搜索学习 ◦ 对 Mac 系统的"快速操作"了解不足 ◦ 需要开启 Plan Mode 让 AI 主动搜索学习 4. 需要人工干预 ◦ 及时打断不必要的操作 ◦ 情绪化表达有时有奇效 ◦ 及时打断不必要的操作 ◦ 情绪化表达有时有奇效 4.3 解决策略 1. 配置开发原则 （ /.claude/CLAUDE.md）： 1. 善用不同模式 Plan Mode 的关键作用 ： 重要发现 ：在 Plan Mode 下，Claude Code 会主动搜索网络资源，学习相关知识，然后给出更详细的实施方案。这比 Edit Mode 的"直接上手"策略要靠谱得多。 重要发现 ：在 Plan Mode 下，Claude Code 会主动搜索网络资源，学习相关知识，然后给出更详细的实施方案。这比 Edit Mode 的"直接上手"策略要靠谱得多。 海外博主认为claude code的plan mode被严重低估了