从Cursor到Claude Code，我发现了AI编程的真正价值

这是我新开的一个系列文章，主要探讨 AI 应用的一些想法，例如 AI 搜索、AI 编码，以及用户需要什么样的 Agent 等话题。这些内容基于我实际使用 AI 产品并开发相关 Agent 的经验总结，具有较强的主观性。非常欢迎花时间读完的朋友在留言区表达自己的观点，让我也学习学习，否则这篇文章你也没必要浪费时间看，系列第 1 篇就从 AI 编码开始。

Vibe coding 还是 AI 辅助编程

张小龙说，设计就是分类，我认为写作也是一种分类，有助于定义问题和讨论问题，所以在探讨 AI 编码之前，需要分清出什么时候是在氛围编码（Vibe coding），什么时候是在用 AI 辅助编程。

Vibe coding 这个概念最初来自 Andrej Karpathy，短短不过 4 个月，已经变成 AI 圈耳熟能详的流行语，「 I’m building a project or webapp, but it’s not really coding - I just see stuff, say stuff, run stuff, and copy paste stuff, and it mostly works.」，所以说 Vibe coding 和 AI 辅助编程是关注点完全不同的两件事，最方便的区分方式就是看你关注的的产出物是什么。

AI 辅助编程的核心是帮助专业开发者高效产出高质量、设计优雅、稳定的工程代码，做的最好的当属使用了 Fusion 模型的 Cursor 自动补全功能。

Vibe coding 的核心是通过代码的方式帮助普通知识工作者高效完成任务，产出可以是视频文件（代码调用的是 moviepy 还是调用 ffpemg，我都不 care）、PPT（你的代码方案是用生成 HTML 页面导出 ppt 还是直接 doc2ppt 都没关系），当然大家看到分享最多的还是 HTML 网页做功能承载，不论如何，代码是最不重要的，关键是完成我的目标最重要。

AI 辅助编程

AI 辅助编程正在改变软件开发的方式，但依旧有一些固有局限性：上下文长度受限、缺乏环境感知能力，以及无法胜任需求分析、复杂架构设计和调试等核心任务。

对于专业开发者而言，当前的 AI 辅助编程工具主要分为两种工作模式：同步模式和异步模式。同步模式需要人来实时参与和判断，例如 Cursor 和 Trae 等 IDE 工具；而异步模式则更多应用于 DevOps、运维和测试场景，如 Cursor 1.0 中新增的 BugBot 功能。

通用 Agent 目前还不现实，其更适合特定目标人群（如热衷于 Vibe coding 的用户），相比之下，专注于软件开发生命周期中某一具体环节的垂直化 Agent 机会还比较多。AI 编程的核心能力正朝着两个方向演进：一是提升问题解决能力，例如像 o3 这样的模型已接近顶级程序员水平；二是增强任务执行能力，例如 Claude Code 工具代表了完全自主执行的形态。

AI 编程面临的主要挑战包括基础模型的持续优化、获取充分上下文信息以缩小与人类的信息差，以及从事件流中构建高质量反馈循环。况且在实际应用中，只要需求足够复杂，就仍然需要程序员的介入，并且生成高质量代码的关键在于提供充分的上下文信息，而优秀的现有代码正是最好的上下文来源。

AI 编程是程序员个人能力的放大器，而非替代者，尤其对经验丰富的开发者更为有利。Code review 是程序员不可替代的核心技能之一，无论代码是否由 AI 生成，提交者都必须对其负责。在企业实践中，质量始终是关键需求，大型企业更倾向于利用 AI 辅助单元测试和 Code review，这可能推动测试驱动开发模式的普及（ AI 在这种结构化的开发模式中能发挥更大价值），而测试驱动开发又对开发者要求较高，需在编码前明确任务目标、输入输出及边界情况（它们决定了提示词的质量）。

最后要说的是，AI 生成代码占比这个指标没什么意义，但其变化趋势可以反映 AI 工具在实际开发中的辅助价值。当前，AI 辅助编程仍处于起步阶段，尽管能够显著提高开发效率，但在架构设计、需求理解和质量把控等核心任务上，仍严重依赖程序员的专业判断。

当然，AI 对传统软件工程流程的颠覆也是一个有趣的话题，未来的软件还需要静态 UI 吗，会不会中间抽象层直接消失，直接变成数据驱动的生成式 UI 交互，不再有软件生命周期的概念，即用即生成？欢迎大家在评论区留下自己的看法。

Vibe coding

Vibe coding 的效果因人而异，与工具或角色无关。但擅长 Vibe coding 的用户通常具备两项共性能力：一是准确描述需求的能力，这决定了 AI 是否能够理解并正确实现意图；二是架构能力（即结构化思维），即将复杂系统拆分为松耦合的模块，以便 AI 在单次会话中高效处理。此外，调试能力也是重要附加项，用于快速定位和解决 AI 生成代码中的问题。

Vibe coding 的一大特点是显著降低了编程门槛，使得不懂代码的产品经理和设计师也能借助 AI 编程工具编写程序，尤其是在制作 demo 展示或简单工具时，可以大幅减少对传统代码编写过程的依赖。这种变化主要得益于 Agent 模式的引入，相比基本的补全模式，Agent 模式能够在接收问题后自动生成大量代码，从而提升自动化程度。但 Agent 模式本质上仍是一个高级补全工具，但比传统工具更脆弱，不同背景的人使用 Agent 模式会有完全不同的体验，专业开发者往往能预见潜在的编程问题，天然保持不信任的态度；而对于新手来说，”没有经验对新事物就是最好的经验”——他们可能更容易接受和依赖这些工具。

需要注意的是，不应将 Vibe coding 神化，认为它可以解决所有问题。其核心在于人机协作：AI 负责执行代码生成，而人类则专注于需求理解、架构设计和质量把控。在这一新的编程范式下，价值不再体现在编写代码的速度和数量上，而是体现在对问题的深度理解、系统设计的合理性，以及对 AI 输出结果的判断和优化能力上。

下面分享两个 Vibe coding 的实践案例。

Vibe coding 用于设计

说出来你可能不信，我用 Vibe coding 最高频的场景就是做设计稿，把大象装进冰箱，只需要四步。

Step 1. AI 生成 HTML 设计稿

这个网站收集了很多直接生成好看的 UI 效果的提示词 👉 UI Prompt Explorer，但对于我这种懒人，更喜欢用这篇文章分享的思路 【升级版】一句话生成高保真 app 原型图！Cursor + Claude 3.7 Sonnet 让设计师危险了？

我想开发一个{类似小宇宙的播客 app}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。
拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。

• index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
• 真实感增强：
  • 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
  • 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
  • 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
    请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。

Step 2. html.to.design 插件

html.to.design 是一款 Figma 插件工具，能将任何网页快速导入为可编辑的 Figma 设计稿。 支持完整导入网页 HTML 与 CSS，并自动生成可编辑图层、文字/颜色样式和 Auto Layout 布局。

Step 3. Figma 完善设计

交给专业的设计师做。

Step 4. Design2Code

Seal D2C 是网易云音乐推出的一款设计稿一键转代码工具，支持在 Figma 和 MasterGo 上使用。它能够将设计稿智能生成可用于生产环境的前端代码，支持多端框架，包括 React、React Native、Vue 和 微信小程序，不过这种工具局限性也比较大，产出物离正经的软件代码还有距离。不过这个流程也正在被重构，Figma 正在通过 Dev Mode Model Context Protocol (MCP) Server 向 AI 工具（如 Cursor、Claude Code）开放设计数据，使 AI 能精准读取颜色、尺寸等设计细节，增强「设计转代码」质量。同时，Figma 也推出了 Make 和 Sites Code Layers 等 AI 驱动工具，目标是降低纯 UI 图转为网站或原型的门槛，专门面向设计师的 Vibe coding 工具。

Vibe coding 用于大型项目

对于喜欢在开源项目基础上定制功能的我来说，Vibe coding 带来了显著的效率提升。过去修改大型项目通常需要一周或更长时间，包括梳理源码、理解架构和开发新功能。现在通过以下优化工作流，这一过程可以压缩到半天：

1. 使用工具 repo2txt 将 GitHub 项目代码转换为纯文本格式（推荐使用 DeepWiki，效果更佳）。
2. 将生成的纯文本文件存储到新建的 wiki 文件夹中。
3. 定义任务提示词，明确描述目标功能的修改需求，并详细记录涉及的每一步操作，包括跨多个文件的修改。
4. 将任务提交给 Gemini 进行分析与处理（以 wiki 文件夹作为上下文）。Gemini 会返回带有文字说明和修改结果的内容（这一步充分利用 Gemini 近乎无损的 1M 上下文窗口的优势）。
5. 复制 Gemini 的输出内容，作为上下文提交给 Claude Code 完成最终的代码编写。
6. 再启动项目，想实现的功能就可以跑了。（没用过Claude Code的，强烈推荐去用下，就是比较费 token💰，所以在步骤 4 需要用免费的 Gemini 制定修改计划）。

Vibe coding 用于一切

谈到 Vibe coding，就不得不提到当前炙手可热的工具 Cursor。关于 Cursor 的教程已经数不胜数，这里不再赘述。但我推荐两个免费且优质的资源：Cursor 101 和 cursor.directory，它们的质量远超市面上一些收费教程。

我想进一步探讨的是 Cursor 在编码之外的应用，以及它所代表的未来可能性——这远远超越了 AI 驱动的集成开发环境（IDE）。正如之前提到的，Vibe coding 的核心并不在于编码本身，而是通过代码作为中介支持多种形式的结果产出。例如，你可以将 Cursor 用作写作工具，利用其基于 Codebase Indexing 技术的强大检索能力，精准召回知识库中的任何片段细节，这种功能甚至优于许多专门设计的知识管理工具。撰写完成的文章还可以通过 Cursor 的 Agent 模式直接生成播客，或者转换为其他媒介形式。

更进一步，或许有一天，Cursor 会演进为一个名为 VibeX的工具，允许用户创建一种全新的媒介形式。这种媒介将以 VibeX 编码为基础，融合图表、声音、3D 模型等多种元素，以最适合表达单点信息的方式呈现内容。它将不再是单一的视频、音频或图片，而是一种高度组合化的表达形式。这种表达形式让用户能够：

• 视觉上观察抽象概念
• 听觉上感受波动特性
• 理性上理解数学公式
• …

每个元素都针对传达特定信息维度而优化，形成比单一媒介更丰富的认知体验，超越传统的”写文章 → 录音频 → 做视频”的线性创作模式。

延伸阅读

1. Coding-Agent 进化论：深度对话中美 Agent 创业者、阿里研究员和投资人
2. 2025 年 AI coding 将如何演进
3. What role does LLM reasoning play for software tasks?

如果觉得内容不错，欢迎点个关注，分享和在看～，点击阅读原文获得更好阅读体验。