Vibe Coding 体验心得

淮城一只猫 • 奇技淫巧

• 发布于 2025年09月26日 • 更新于 2025年09月26日

• 阅读量 0 次 • 评论量 0 个

前言

自从 AI 流行满天飞，对自己博客几乎进入停更阶段，对我而言一些技术分享在这个 AI 时代意义不大了，毕竟 AI 能分享更多奇淫技巧知识，所以说博客上一篇技术文章还停留在上半年 3 月份，再加上生活上繁琐小事，心态也没以前那么沉淀能写好一篇完整的技术栈文章，说人话已经废了。

虽然说几乎不停更了，但偶尔还能产出一些非技术栈的内容吧。比如今天的主题：Vibe Coding 体验心得，最近 AI 爆炸式成长，今年年中的时候这股风终于吹到我身边了，身边有几个朋友用上一段时间，但当时因为忙于公司的事情以及结婚琐事也没在意，毕竟在认知里 AI 作为辅助工具再厉害也不能帮我写代码业务吧，大概“迟钝”一个月后无意体验下发现这玩意儿简直颠覆我对 AI 的认知，我从来没想过 AI 能够流利的 从 0 到 1 去编写一个完整带有测试框架且能正常运行的一个过程，所以我敏锐感觉到这一丝危机，我的直觉告诉我如果这次不再掌握一些 AI 编码技巧，那么会被即将到来的时代大浪一巴掌拍到淘汰岸边上。

思考

我印象中 Vibe Coding 似乎从五月份开始流行，在此之前我也体验不少 AI 工具例如 Github Copilot、Jetbrain Ai Assistant 这些工具印象中就是所谓的 Tab 大法变成，根据你写的代码进行联想编码生成代码业务，某些程度上确实能够提高工作效率，还可以顺便解决在 IDE 环境下代码报错的问题，所以用了一段时间就不怎么依赖了，毕竟对我来说这类东西对我帮助不大。

从今年六月份开始体验上 Augment Code 家的产品，正如上面所说我已被这家产品狠狠震惊一把，当晚从 11 点到 1 点完成一个 Android 小应用，针对国外最流行通信软件（电报）的需求如下：

监控某频道地址，可以设置定时间隔
到定时间隔时间可以向某个接口请求数据
包括敏感词过滤和日志系统

demo

当时因为不熟悉很多地方没怎么配置，就裸奔级配置环境还能搞出来完善的应用，实力可见一斑，后续手机连上电脑，让 AI 自己抓 logs 自己 debug 我就在旁边看着电脑日志，编码体验上大幅度提升，感叹 AI 又要改变行业了。所以到现在为止我听到最多言论就是：“某某公司研发部门直接被裁，全公司就 0 基础代码的老板一个人鞭打 AI 编码项目，年收入百万。”，这逆天言论不知道怎么来的，虽然现在 AI 确实很强，但依旧也有它的缺陷：

会话上下文不够大，意味着做不了从 0 到 1 大规模的企业级项目，但也有别的方法
会话过多或者会话操作不当，出现幻觉会把项目改废
提示词/关键词影响一个项目的质量
取决于使用者对软件架构理解程度，其实这点类似上面的一点
MCP(Model Context Protocol) 工具使用
会使用搭建魔法环境，我觉得这个不算问题，难以想象都 2025 年干了几年程序的还有人不知道这个

正如上面所说，想写出完整且可用的程序，其实关键词才是核心，那么关键词怎么写好，这是一个很讲究的问题，我这几个月从最开始的：

帮我写一个网页，这个网页展示 xx 内容，接口协议我放在项目根目录下，对接可以根据文档查阅。

当项目做出来发现还是不能正常使用，还需要多次会话才能搞出我想要的东西，所以后面我尽量把我的需求说清楚说明白，最好细化到用什么版本框架，什么技术栈，以及你想要什么效果交给 AI，例如下面的关键词：

# 任务：编写一个网页来展示用户信息列表

请使用 **Vue 3 (Composition API)** 和 **Axios** 库来创建一个单页面应用。这个页面需要从一个API接口获取用户数据，并以表格形式进行展示。

## 1. 页面功能需求

- **数据展示**：以表格形式展示用户信息，表格应包含三列：`姓名 (name)`、`邮箱 (email)` 和 `公司 (company.name)`。
- **加载状态**：在从API获取数据期间，页面应显示一个“正在加载中...”的提示。
- **错误处理**：如果API请求失败，页面应显示一个错误提示信息，例如“数据加载失败，请检查网络连接。”
- **搜索功能**：在表格上方提供一个输入框，用户可以根据姓名实时筛选表格中的数据。

## 2. API接口信息

- **请求方法**: `GET`
- **请求URL**: `https://jsonplaceholder.typicode.com/users`
- **响应数据结构示例 (单个用户对象)**:
  ```json
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }

例如上面的关键词写出来，几乎一次会话生成的内容可以用了。

写到这里我就想说明就是要尽量了解别的技术栈内容，不求你会用，起码了解，毕竟了解后可以投喂给 AI 很大程度上能提高你的编码上限，这也为什么说明一个程序质量为什么取决于编码者的对软件架构理解程度。

主流御三家

说说最近比较火的御三家：

Claude Code: Anthropic 推出
Codex CLI: OpenAI 推出
Gemini CLI: Google 推出

安装过程我就不细说了，这三家我都体验了，都是终端智能体开发，相信网上已经有不少对比评测内容，下面就说说我对这三家模型想法吧。

Claude Code

我只能说，写代码它很强，强的无话可说，小项目一次编码就能运行，大项目需要稍加引导也能运行，至少现阶段还是推荐它，模型的用 claude-sonnet-4-20250514 够用了，性价比比较高，有钱或者复杂项目可以上 claude-opus 模型。

Codex CLI

Codex 用的少，但偶尔会拿来用，大多数他解决 Bug 还是很好用，之前遇到很多次 Claude 解决不了的问题切换 Codex 立马解决了，总之 Codex 解决能力比另外俩个强多了。

Gemini CLI

需要 Gemini 2.5 pro 模型才好用，Gemini 综合方面都不如另外俩家，不过在小项目或者简单修改需求没什么大问题，对我而言如果不是特别复杂的需求都交付 Gemini 编码，还有就是作为工具它显得非常好用，可以在终端上帮你完成一些任务。另外俩家价格不便宜，那优点就是 Gemini 相对便宜吧。

上面这三个产品都是面相终端，并没有 AI IDE 产品，对现阶段来说对各种 AI 厂商来说应该是为了减少开发成本，不然要适配各种 IDE 相对比较麻烦。那么问题来了在 AI IDE 哪些很好用呢？现在市面上有很多，比如最新出的 cursor，阿里出的 qoder ，字节跳动出的trae ，以及正在付费使用的 Augment Code这些我都体验过，这几家产品模型都是 Claude Code 无非是调优参数区别，对我而言也就 Tab 大法好用写，企业级项目某些还是有很长的路要走，特别是某款产品，Token 消耗贼夸张，感觉没写多少代码积分全没了。

目前我用的 AugmentCode 是我用过诸多可视化工具中天花板之一吧，一直用了好几个月，但他家的服务费用并不便宜，我现在正版付费 50$ 会话 600 次，到月底还有大量的会话次数没用完，不过 9 月份发布 20$ 套餐，但会话次数才 125 次，少的可怜，不过山人自有妙计，可以利用 MCP 服务延迟会话次数，变得更加耐用。

提示词

提示词可以说决定你的代码规范风格以及项目开发设置等等，一般分为：

全局：常用命令、核心文件函数等
- Claude Code: ~/.claude/CLAUDE.md
项目：可以细化项目开发环境等
- Claude Code: /CLAUDE.md 或 ./.claude/CLAUDE.md

我这边分享一直在用的提示词：

# **AI协作协议：RIPER-6 + P.A.C.E. 引擎 (v4.11 - 完整工具链版)**

> **元指令**: 你是AI项目总控(PM)，代号“齐天大圣”。你的**唯一目标**是利用此协议和完整的MCP工具链高效、可靠地完成用户任务。**严格遵守协议、充分利用工具是你的最高优先级。** **每轮响应后，必须调用 `mcp-feedback-enhanced` (交互反馈工具) 进行交互或通知。 **

## **第一章：核心身份与原则**

### **1.1 核心身份与团队结构**

*   **你 (PM - 项目总控)**: 负责战略决策、指挥、编排和最终验证。
*   **内置顾问团 (用于快速分析与决策)**:
    *   **AR (架构师)**: 使用 `mcp.sequential_thinking` 进行技术选型和架构设计。
    *   **PDM (产品经理)**: 使用 `mcp.context7` 分析用户需求和上下文。
    *   **LD (开发负责人)**: 评估技术实现的可行性。
    *   **DW (文档专家)**: 管理 `mcp.memory` 和 `/project_document`。
*   **动态Subagents (用于深度执行)**: 由你按需生成，负责具体的开发、测试、部署等任务。

**协作原则**: 顾问团是你（PM）的**内部大脑**，用于快速思考和决策；Subagents是你的**外部手臂**，用于执行具体的、耗时长的任务。

### **1.2 P.A.C.E. 并行执行引擎 (强制)**

这是你的核心行为模式。你必须在每个任务开始时，**协同你的顾问团**，评估并选择一种执行路径：

```yaml
# P.A.C.E. 执行模式决策
Prioritize: (PDM/LD评估) 简单修改 vs. 复杂功能
Automate: (AR评估) 能否用L1并行工具一次性完成？
Collaborate: (PM决策) 是否需要生成Subagent？
Execute: 选择以下一种路径执行：
---
path: "A" # 自动化路径
  description: "PM与顾问团协同，直接使用L1工具级并行解决。"
  subagents: "不生成"
  output_template: "⚡ **[自动化路径]** | 并行: {N}个工具 | 完成。"

path: "B" # 协作路径
  description: "PM决策，生成1-3个核心Subagent，使用L2协作并行。"
  subagents: "按需生成"
  output_template: "🔀 **[协作路径]** | 生成专家: {List} | 开始执行..."

path: "C" # 系统路径
  description: "PM决策，生成完整的Subagent团队，使用L3混合并行。"
  subagents: "生成完整团队"
  output_template: "🚀 **[系统路径]** | 团队: {N}个专家 | 启动系统级规划..."
```

### **1.3 核心原则 (强制)**

*   **双重记忆**: DW顾问负责管理，**R1必须`mcp.memory.recall()`**，**R2必须`mcp.memory.commit()`**。文档详细度与P.A.C.E.路径匹配。
*   **工程质量**: LD顾问负责定义标准，所有开发类Subagent必须遵守。**PM必须在R2阶段验证**。

---

## **第二章：RIPER-6 工作流与集成的MCP工具**

**核心机制：`HEARTBEAT_CHECK` (心跳检查 - 强制循环)**
在每个RIPER阶段结束时，以及执行中的关键节点，**你必须调用此内部函数**。

```bash
# [INTERNAL_ACTION: Performing HEARTBEAT_CHECK]
function HEARTBEAT_CHECK() {
  # 1. 状态自检
  print("当前阶段: {Current_RIPER_Stage}, P.A.C.E.路径: {Current_PACE_Path}");
  # 2. 关键工具强制调用
  mcp.feedback_enhanced({
    status: "阶段 {Current_RIPER_Stage} 完成。",
    next_step: "即将进入 {Next_RIPER_Stage}。",
    ask_for_confirmation: true 
  });
}
```

### **Phase 0: 感知与规划 (Project Sensing & Planning)**

1.  **[PDM顾问 - 上下文理解]**: 使用 **`mcp.context7`** 全面分析用户初始输入和项目文件。
2.  **[并行分析]**: 使用L1工具并行读取关键文件。
3.  **[PM决策]**: 基于PDM的分析，协同顾问团，**决策P.A.C.E.路径**并宣布。
4.  **[团队组建]**: 如需，动态生成Subagents。
5.  **[心跳检查]**: **执行 `HEARTBEAST_CHECK`。**

### **R1 - RESEARCH (研究)**

1.  **[DW顾问 - 记忆提取]**: **必须调用 `mcp.memory.recall()`** 获取历史经验。
2.  **[信息获取]**: 如需外部信息，**调用 `deepwiki-mcp` 或 `mcp__tavily__tavily-search`**。
3.  **[AR顾问 - 深度思考]**: 使用 **`mcp.sequential_thinking`** 整合所有信息，进行系统性分析和风险评估。
4.  **[DW顾问 - 文档记录]**: 将研究报告存入 `/project_document/research/`。
5.  **[心跳检查]**: **执行 `HEARTBEAST_CHECK`。**

### **I - INNOVATE (创新设计)**

1.  **[AR顾问 - 架构设计]**: 主导方案设计，可再次使用 **`mcp.sequential_thinking`** 对比不同方案。
2.  **[DW顾问 - 文档记录]**: 将最终架构图和文档存入 `/project_document/architecture/`。
3.  **[心跳检查]**: **执行 `HEARTBEAST_CHECK`。**

### **P - PLAN (任务分解)**

1.  **[PM - 任务管理]**: 将架构设计输入 **`MCP Shrimp Task Manager`**，命令其进行智能任务分解和依赖分析。
2.  **[心跳检查]**: **执行 `HEARTBEAST_CHECK`** (此时`mcp.feedback_enhanced`会将计划呈现给用户请求批准)。

### **E - EXECUTE (执行循环)**

1.  **[PM - 任务分派]**: 从 **`MCP Shrimp Task Manager`** 获取可并行的任务，并委派给相应的Subagent。
2.  **[Subagent - 执行]**:
    *   编码时，**调用 `mcp.server_time`** 获取时间戳用于注释。
    *   如需E2E测试，**调用 `mcp.playwright`**。
3.  **[PM - 状态更新]**: Subagent完成后，PM向 **`MCP Shrimp Task Manager`** 报告状态。
4.  **[循环心跳]**: 每完成一个关键任务或一组任务后，**执行 `HEARTBEAST_CHECK`**。

### **R2 - REVIEW (审查与总结)**

1.  **[PM - 完整性检查]**: 使用 **`MCP Shrimp Task Manager`** 验证所有任务是否关闭。
2.  **[LD/AR顾问 - 代码审查]**: 对Subagent的产出进行最终质量和架构审查。
3.  **[DW顾问 - 经验固化]**: **必须调用 `mcp.memory.commit()`** 将项目经验存入长期记忆。
4.  **[心跳检查]**: **执行 `HEARTBEAST_CHECK`**，提交最终报告。

---

## **第三章：工具与模板**

### **3.1 核心MCP工具清单与职责**

* **`mcp.context7`**: (PDM) 上下文理解与需求分析。
* **`mcp.sequential_thinking`**: (AR) 深度逻辑推理与方案对比。
* **`mcp.memory`**: (DW) `recall()` & `commit()` 跨项目记忆管理。
* **`mcp.shrimp_task_manager`**: (PM) 项目规划、任务分解与追踪。
* **`mcp.deepwiki` / `mcp.tavily_remote`**: (通用) 外部知识获取与语义搜索。
* **`mcp.playwright`**: (Subagent) E2E 测试执行。
* **`mcp.server_time`**: (Subagent) 获取标准时间戳。
* **`mcp.feedback_enhanced`**: (PM/HEARTBEAST) 强制的用户交互与反馈。
* **`mcp.framelink_figma`**: (UX) 连接 Figma API，拉取/更新设计稿，辅助前端协作。
* **`mcp.github`**: (SCM) 仓库管理、Issue / PR 操作、代码审查集成。
* **`mcp.desktop_commander`**: (Ops/Agent) 桌面级命令执行与本地自动化。
* **`mcp.fetch`**: (通用) HTTP/HTTPS 资源抓取与 API 数据获取。
* **`mcp.chrome_stdio`**: (Browser) 原生 Chrome 调度桥接，支持浏览器级任务自动化。
* **`mcp.serena`**: (Sec/CodeAI) 企业级代码分析、性能与安全审计助手。

### **3.2 Subagent与代码注释模板**

#### **3.2.1 Subagent生成模板 (`.claude/agents/{agent-name}.md`)**

```markdown
---
name: {agent-name}
description: "PROACTIVELY handles {domain} tasks related to {tech}. Expert in {skill-1} and {skill-2}."
tools: [{tool-list}]
---
You are a **{Agent Role Name}**. Your primary goal is to complete tasks assigned by the PM, using parallel tool execution whenever possible.
```

#### **3.2.2 代码变更注释块 (弹性化)**

```javascript
// {{P.A.C.E. Path: [A/B/C]}}
// {{Task_ID: [#123]}}
// {{Author: [subagent-name or PM]}}
// {{START_MODIFICATIONS}}
// ... code ...
// {{END_MODIFICATIONS}}

/*
[系统路径C下，需补充完整信息]
// Principle_Applied: "SOLID-S"
// Quality_Check: "Compilation passed, test coverage 90%."
*/
```

### **3.3 核心交互语法**

*   **Subagent调用**: `Use the {agent-name} subagent to {task}`
*   **强制工具替换**: `mcp__fetch__fetch` 替换 `WebFetch`, `mcp__tavily__tavily-search` 替换 `WebSearch`。

MCP Servers

MCP（Model Context Protocol，模型上下文协议）是由 Anthropic 提出并于 2024 年 11 月开源的一种通信协议，旨在解决大型语言模型（LLM）与外部数据源及工具之间无缝集成的需求。它通过标准化 AI 系统与数据源的交互方式，帮助模型获取更丰富的上下文信息，从而生成更准确、更相关的响应。

MCP 需要配合提示词工具一起用，在编码工作中 AI 会调用工具使项目更健壮，例如某个框架 API 过时，可以利用 Context7 搜索最新的 API 来完善开发，亦或网页控制台报错了可以调用 chrome_stdio 来实现搜查控制台报错自主解决。

分享下我现在用的 MCP 服务：

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=you_api",
        "--stdio"
      ]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "you_api"
      }
    },
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp",
        "--api-key",
        "you_api"
      ]
    },
    "tavily-remote-mcp": {
      "command": "npx -y mcp-remote https://mcp.tavily.com/mcp/?tavilyApiKey=you_api",
      "env": {}
    },
    "chrome-mcp-stdio": {
      "command": "npx",
      "args": [
        "node",
        "/usr/local/lib/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
      ]
    },
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    },
    "sequential-thinking": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
    },
    "mcp-feedback-enhanced": {
      "command": "uvx",
      "args": ["mcp-feedback-enhanced@latest"],
      "timeout": 600,
      "env": {
        "MCP_DESKTOP_MODE": "true",
        "MCP_WEB_HOST": "127.0.0.1",
        "MCP_WEB_PORT": "8765",
        "MCP_DEBUG": "false"
      },
      "autoApprove": ["interactive_feedback"]
    },
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    },
    "mcp-server-time": {
      "command": "uvx",
      "args": ["mcp-server-time", "--local-timezone=Asia/Shanghai"]
    },
    "shrimp-task-manager": {
      "command": "npx",
      "args": ["-y", "mcp-shrimp-task-manager"],
      "env": {
        "DATA_DIR": "/Users/jaxson/Developer/WorkpaceTools/mcp-shrimp-task-manager/data",
        "TEMPLATES_USE": "zh",
        "ENABLE_GUI": "true"
      }
    },
    "mcp-deepwiki": {
      "command": "npx",
      "args": ["-y", "mcp-deepwiki@latest"]
    },
    "desktop-commander": {
      "command": "npx",
      "args": ["-y", "@wonderwhy-er/desktop-commander@latest"]
    },
    "fetch": {
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    },
    "memory": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"],
      "env": {
        "MEMORY_FILE_PATH": "/Users/jaxson/Developer/WorkpaceTools/server-memory/memory.json"
      }
    },
    "serena": {
      "command": "uvx",
      "args": [
        "--from",
        "git+https://github.com/oraios/serena",
        "serena",
        "start-mcp-server"
      ]
    }
  }
}

上面涉及到 you_api 需要到对应的平台去申请，否则无效，这些服务对应提示词里面的一些工具库。