ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

‌Vibe Coding(一 VibeCoding理论基础)

‌Vibe Coding(一 VibeCoding理论基础) 第一部分AI编程基础理论学习目标建立对AI辅助编程的系统认知理解核心概念与方法论完成标志能向他人清晰解释什么是 Vibe Coding、Agentic Engineering 和 SDD在正式上手工具之前我们需要先建立认知地图。这就像学开车之前要先了解交通规则一样 —— 你不需要成为交通工程师但至少要知道红灯停绿灯行、靠右行驶这些基本概念。1.1 AI辅助编程全景认知1.1.1 什么是AI辅助编程传统编程是你一行一行地手写代码告诉计算机每一步该怎么做。你需要掌握编程语言的语法、理解算法、记住各种API —— 学习曲线陡峭且耗时漫长。AI辅助编程则完全不同。你用自然语言中文或英文都行描述你想要什么AI帮你把它变成可运行的代码。你的角色从打字员变成了指挥官。维度传统编程AI辅助编程核心技能编程语言语法、算法需求描述、意图表达、结果验证人的角色代码编写者需求定义者 结果审查者关注点“怎么做”How“做什么和为什么”What Why学习周期数月到数年数天到数周出错时自己调试代码用自然语言告诉AI去修复打个比方传统编程就像你自己从头学做一道红烧肉 —— 要学买菜、备料、掌握火候AI编程就像你请了一个专业厨师 —— 你只需要说我想吃红烧肉少放糖多放一点八角厨师帮你做出来你尝一口觉得太咸了再说减少一些盐就行。提示AI编程不是不需要懂任何技术而是大幅降低了入门门槛。随着你的使用越来越深入你会自然而然地积累技术知识。这个过程是边用边学而非传统的先学后用。1.1.2 AI编程的发展历程AI编程并不是突然出现的它经历了一个清晰的演进过程第一阶段智能补全时代2020-2022代表产品GitHub Copilot、TabNine就像手机输入法的联想功能 —— 你打了几个字它猜你接下来要打什么。这个阶段的AI只能帮你补全一行或几行代码依然需要你自己动手写大部分代码。第二阶段对话式编程时代2023-2024代表产品ChatGPT、Claude.aiAI进化成了一个编程顾问。你可以用自然语言问它怎么写一个排序算法它会给你一段完整的代码。但问题是你需要自己把代码复制到项目中、自己处理各种细节AI并不了解你的项目全貌。第三阶段智能体编程时代2024 至今← 我们现在就在这里代表产品Claude Code、Cursor Agent、Qoder、Codex这是一个质的飞跃AI从回答问题进化到了完成任务。你告诉它给我的项目添加一个用户登录功能它会自己去读你的项目代码自己创建需要的文件自己写代码自己运行测试 —— 全程自主完成。这就像从问路人对话式变成了请了一个代驾智能体—— 你只需要说目的地它自己开车到。第四阶段协作工程时代正在形成多个AI智能体组成团队各司其职 —— 一个负责设计架构、一个负责写代码、一个负责测试、一个负责审查代码质量。人类的角色进一步上升为项目总监。第一阶段 第二阶段 第三阶段 第四阶段 AI帮你打字 → AI帮你想方案 → AI帮你做任务 → AI团队帮你做项目 补全 对话 智能体 多智能体协作能力升级能力升级能力升级第四阶段协作工程2025-未来多Agent协同自主架构决策人类架构师审查者第三阶段智能体编程2024 至今Claude CodeCursor Agent自主规划执行验证第二阶段对话式编程2023-2024ChatGPTClaude.ai自然语言→代码块第一阶段智能补全时代2020-2022GitHub CopilotTabNine行级/函数级补全图AI编程四个发展阶段演进示意图1.1.3 AI是如何理解和生成代码的你不需要成为AI专家但理解以下几个核心概念会帮你更好地使用AI工具Token化AI怎么阅读代码AI不是像人一样一个字一个字地读代码它把文本切成一个个小块叫做Token。例如Hello World会被切成Hello和World两个 Token。中文的你好世界可能被切成你好和世界两个 Token也可能被切成更多个。为什么这个概念重要因为AI的计费和能力限制都以 Token 为单位。你发送的内容越长消耗的 Token 越多费用越高。提示简单记住这个换算关系 —— 1 个 Token ≈ 4 个英文字符 ≈ 1-2 个中文字符。一篇 1000 字的中文文章大约是 500-1000 个 Token。上下文窗口AI的工作记忆上下文窗口是AI一次能记住的内容量。这就像你的办公桌大小 —— 桌子越大能同时摊开的文件越多。模型上下文窗口相当于早期模型4K Token一篇短文GPT-5.x / GPT-4o 系列128K Token一本小说到一套资料Claude Sonnet / Opus200K-1M Token一本厚书到一套资料Gemini Pro 系列1M Token 级别一个小型图书馆对于AI编程来说上下文窗口越大越好 —— 因为AI需要同时看到更多项目代码才能做出合理的修改。Claude、Gemini、GPT 等主流模型都在持续扩大上下文窗口。概率生成为什么AI有时会胡说八道AI生成内容的本质是预测概率最高的下一个词。大多数时候它预测得很准但有时候它会一本正经地胡说八道 —— 这被称为“幻觉”Hallucination。例如AI可能信心满满地告诉你某个函数的用法但这个函数根本不存在。这就像一个知识渊博但偶尔会编故事的朋友 —— 大部分时候值得信赖但关键信息你需要自己验证。避坑永远不要100%信任AI生成的代码。尤其是涉及数据库操作、用户认证、支付逻辑等关键代码时一定要仔细检查。信任但验证是AI编程的黄金法则。1.1.4 Vibe Coding感觉驱动的编程新范式Vibe Coding是 AI 大牛 Andrej Karpathy前OpenAI/Tesla AI主管在2025年初提出的概念。他的原话是“完全沉浸在氛围中拥抱指数级增长忘记代码的存在。”翻译成大白话就是不要纠结代码的每一个细节跟着感觉走让AI帮你实现想法。Vibe Coding 的核心原则意图优先先描述你想要什么效果而不是告诉AI怎么写代码快速迭代不追求一次完美拥抱生成 → 测试 → 修正的循环信任但验证相信AI的能力但始终检查关键逻辑上下文经营持续维护和优化提供给AI的背景信息Vibe Coding 适用场景原型开发、概念验证快速把想法变成可运行的东西个人项目、学习项目试错成本低探索性编程不确定最终效果边做边看UI/前端开发可视化反馈快容易判断好不好Vibe Coding 需谨慎的场景注意 生产环境的核心系统银行、医疗等注意 安全敏感代码认证、加密等注意 性能极致要求的场景提示Vibe Coding 不等于乱来。它的精髓在于改变你的关注点—— 从关注代码怎么写转向关注产品好不好用。1.2 Agentic Engineering工程化升级范式1.2.1 为什么纯 Vibe Coding 在大项目中不够用Vibe Coding 对于做小项目、快速原型非常好用但当项目变大变复杂时纯粹的跟着感觉走会遇到麻烦代码质量不可控AI可能写出能跑但很乱的代码积累成技术债务前后矛盾AI在不同对话中可能给出相互冲突的实现方式缺乏全局视角AI可能只关注当前的小任务忽略对整体架构的影响难以协作没有统一规范时多个人或多次会话的代码风格各异这就像建房子 —— 自己搭一个小木屋可以随意发挥Vibe Coding但要建一栋大楼就必须有图纸、有规范、有质检Agentic Engineering。1.2.2 什么是智能体Agent在AI编程的语境中智能体Agent是一个能够自主完成任务的AI系统。它和普通的AI聊天有什么区别维度普通AI聊天智能体Agent行为你问一句它答一句你说一个目标它自己规划并执行多个步骤能力只能生成文字能读写文件、运行命令、搜索代码、调用工具主动性被动回答主动规划、主动发现问题记忆仅限当前对话可以有长期记忆比喻百科全书实习生程序员一个智能体的工作循环是感知 → 推理 → 行动 → 反馈┌─────────────────────────────────┐ │ │ ▼ │ 感知读取项目代码、理解需求 │ │ │ ▼ │ 推理分析问题、制定计划 │ │ │ ▼ │ 行动修改文件、运行命令、安装依赖 │ │ │ ▼ │ 反馈检查结果、发现新问题──────────┘Claude Code 就是一个典型的编程智能体 —— 你告诉它帮我添加一个用户注册功能它会自己读懂项目代码自己创建文件自己写代码并运行测试。1.2.3 智能体协作模式当一个智能体不够用时比如项目特别复杂可以让多个智能体协作各司其职。就像一个公司不是一个人干所有事 —— 有产品经理、有程序员、有测试员、有设计师。领导者-执行者模式Leader-Worker一个老板Agent负责拆分任务和协调多个员工Agent负责执行具体任务。┌──────────┐ │ 领导Agent │ ← 你的需求 │规划分配│ └──┬───┬───┘ │ │ ┌────────┘ └────────┐ ▼ ▼ ┌──────────┐ ┌──────────┐ │编码Agent │ │测试Agent │ │写代码 │ │写测试 │ └──────────┘ └──────────┘Qoder 就是这种模式的典型代表 —— 有 Leader指挥官、Coding开发者、Research研究员、Verify测试员等多个 Agent 角色。管道式协作PipelineAgent按顺序接力就像工厂流水线需求分析Agent → 架构设计Agent → 代码实现Agent → 测试Agent → 部署Agent对等协作Peer-to-Peer多个Agent平等地互相审查就像同事之间互相Code Review。提示对于初学者来说你暂时只需要了解这些概念。在实际使用中Claude Code 是一个单智能体工具一个Agent帮你做所有事已经能完成大多数项目。当项目足够复杂时再考虑 Qoder 等多智能体方案。1.2.4 自主决策与任务分解优秀的AI编程智能体不会一股脑地把所有代码写出来它会像一个经验丰富的程序员一样先思考再行动Plan-Act-Observe-Reflect 循环1. Plan规划 要完成登录功能我需要做这些事...... 2. Act行动 先创建数据库用户表...... 3. Observe观察创建成功了但发现少了一个字段...... 4. Reflect反思我需要修改表结构加上邮箱字段...... 5. 回到 Plan 好的现在继续下一步......任务分解原则 —— MECEMECEMutually Exclusive, Collectively Exhaustive是一个管理咨询中常用的概念意思是相互独立完全穷尽。举个例子把构建一个博客系统分解为构建博客系统 ├── 1. 用户系统注册、登录、个人资料 ├── 2. 文章系统创建、编辑、删除、列表 ├── 3. 评论系统发表、删除、回复 ├── 4. 分类标签创建分类、打标签、按分类筛选 └── 5. 部署上线打包、配置服务器、域名这5个子任务之间互不重叠相互独立合在一起覆盖了博客系统的全部功能完全穷尽。提示在使用 Claude Code 时最佳实践是先让AI制定计划你确认后再执行。而不是一上来就让它开始写代码。这个习惯会大幅减少返工。1.3 规范驱动开发 SDDSpecification-Driven Development1.3.1 为什么AI编程需要规范你有没有过这种经历在淘宝买衣服时你描述我要一件好看的衣服结果收到的和你想的完全不一样这就是沟通不精准导致的。AI编程也是一样。如果你告诉AI帮我做一个网站它可能做出一个和你期望完全不同的东西。“垃圾进垃圾出” —— 模糊的需求必然导致不准确的结果。规范Specification就是你和AI之间的合同它明确地写清楚要做什么功能需求怎么做技术方案做到什么程度质量标准有了这份合同AI才能精准地理解你的意图。1.3.2 需求规范PRD文档PRDProduct Requirements Document产品需求文档描述的是要做什么。用户故事User Story格式作为一个 [角色] 我希望 [功能] 以便 [价值/目的]。例如作为一个博客读者 我希望能按标签筛选文章 以便快速找到我感兴趣的内容。验收标准Acceptance Criteria格式Given前提条件系统中有20篇文章其中5篇标记了Python标签 When操作用户点击Python标签 Then预期结果页面只显示这5篇标记了Python标签的文章用AI辅助生成PRD的Prompt这是一个非常实用的技巧 —— 你可以让AI帮你把模糊的想法变成结构化的需求文档我想做一个个人书签管理工具。 请帮我生成一份完整的PRD文档包含 1. 项目概述一句话描述 2. 目标用户 3. 核心功能列表按优先级排列Must Have / Should Have / Nice to Have 4. 每个功能的用户故事和验收标准 5. 非功能需求性能、安全、兼容性 请用Markdown格式输出。提示在第五部分的项目实操中我们会完整演示如何用这个方法生成PRD文档。1.3.3 技术规范SPEC文档SPECTechnical Specification技术规范文档描述的是怎么做。一个完整的SPEC文档包含模块内容说明系统架构整体架构设计图前后端如何交互技术选型使用什么技术和框架比如 Next.js Prisma SQLite数据模型数据库表结构设计有哪些表、每个表有哪些字段API接口接口定义每个API的URL、请求参数、返回格式目录结构项目文件组织代码放在哪个文件夹让AI从PRD自动生成SPEC的Prompt基于以下PRD文档请生成对应的技术规范文档SPEC [粘贴你的PRD内容] 要求 1. 推荐技术选型并说明理由 2. 设计完整的数据模型包含字段类型和关系 3. 列出所有API接口RESTful风格 4. 给出建议的项目目录结构1.3.4 质量规范质量规范定义了做到什么程度算合格编码规范代码风格统一、命名规则、注释要求测试规范需要覆盖哪些测试场景安全规范输入验证、认证授权、数据保护提示对于初学者来说不需要一开始就写完美的规范文档。从简单的PRD开始随着项目变复杂再逐步完善。规范的核心价值在于 ——让你和AI的沟通更精准。1.3.5 规范文件的组织与管理建议在项目根目录下创建一个specs/文件夹统一管理规范文件my-project/ ├── specs/ │ ├── PRD.md # 产品需求文档 │ ├── SPEC.md # 技术规范 │ ├── ARCHITECTURE.md # 架构设计 │ └── API.md # API 接口文档 ├── src/ # 源代码 ├── CLAUDE.md # 给Claude Code的项目说明详见第二部分 └── package.json规范文件最大的价值之一是 ——可以直接作为AI工具的上下文输入。当你把 SPEC.md 的内容提供给 Claude Code 时它就能精准地按照你的技术方案来写代码。1.4 主流模型系列介绍1.4.1 大语言模型基础知识参数量模型的大脑大小你可能听说过7B模型、“70B模型这样的说法。这里的 B 是 Billion十亿的缩写指的是模型的参数数量。简单理解参数越多模型越聪明”但也越慢、越贵。参数量级能力类比1-7B基础对话、简单代码小学生7-30B较好的编程、推理能力中学生30-70B优秀的编程、复杂推理大学生70B顶级的编程、深度推理研究生提示参数量不是唯一标准。训练数据的质量、训练方法的优化同样重要。有些小参数模型经过精细调优后在特定任务上可以媲美大模型。上下文窗口再次强调的核心概念对AI编程来说上下文窗口直接决定了AI能看到你项目中多少代码。窗口越大AI对项目的理解越全面生成的代码越准确。4K Token ≈ 一个文件 → 只能看到当前文件 32K Token ≈ 几个文件 → 能看到相关的几个文件 128K Token ≈ 一个小项目 → 能理解整个小项目 200K Token ≈ 一个中型项目 → 许多主力模型的长上下文起点 1M Token ≈ 一个大型项目 → Claude / Gemini / GPT 等旗舰模型的超长上下文级别Token 计费你的油费使用AI模型就像开车需要加油 —— Token 就是你的油用多少付多少。费用 输入Token数 × 输入单价 输出Token数 × 输出单价TemperatureAI的创造性开关Temperature 是一个 0-1 之间的参数控制AI回复的随机性Temperature 0每次给出几乎相同的答案最确定性→ 适合代码生成Temperature 1每次答案都不同最随机→ 适合创意写作提示编写代码时通常不需要手动调整 Temperature。Claude Code 默认使用适合编程的低 Temperature 值。1.4.2 Claude 系列AnthropicClaude 是本教程推荐的主力模型由 Anthropic 公司开发。模型上下文速度代码能力推理能力费用档位关键特点Claude Haiku 4.5200K极快良好中等$轻量任务、批处理、低成本Claude Sonnet 4.61M快优秀强$$日常开发主力性价比高Claude Opus 4.71M中等顶级极强$$$复杂规划、架构和疑难问题核心优势超长上下文200K 到 1M随模型不同而变化项目级代码理解能力强代码生成质量在业界领先指令遵循能力精确你说什么它就做什么安全对齐好不容易生成危险代码1.4.3 GPT 系列OpenAI模型定位特点适用场景GPT-5.5最新旗舰推理、编程、多模态综合能力最强复杂开发、架构设计、疑难调试GPT-5.x mini / nano轻量模型速度快、成本低简单任务、批量处理o 系列推理模型深度推理强化数学、算法、复杂推理算法题、复杂约束问题核心优势多模态能力强、工具调用生态成熟和 Codex / ChatGPT / OpenAI API 的集成最完整。适合场景将UI截图转换为代码、需要视觉理解的任务。1.4.4 GLM 系列智谱AI智谱AI的GLM系列配套 CodeGeex 代码助手中文能力和代码能力均衡国内可用。模型特点在 cc 中的角色GLM-4.7智谱当前默认主力模型代码与推理均衡默认占用 Opus / Sonnet 槽位GLM-4.5-Air轻量、高速默认占用 Haiku 槽位GLM-5.1高阶推理模型能力更强需手动覆盖三个槽位才会启用高峰期算 3 倍消耗1.4.5 DeepSeek 系列 国内推荐模型特点适用场景deepseek-v4-pro[1m]DeepSeek 官方 Claude Code 接入示例使用的主力模型通过 Anthropic 兼容端点接入 Claude Codedeepseek-v4-flash轻量高速模型适合 Haiku / Subagent 等轻量槽位注意 模型名与后续变化请以 DeepSeek 官方文档 为准。核心优势极致性价比价格远低于官方 Claude代码能力强接近 Claude Sonnet 水平国内直连注册简单官方为 Claude Code 提供了专用的Anthropic 兼容端点适配度高1.4.6 通义千问系列阿里云模型特点适用场景Qwen-Plus / Qwen-Max均衡性能、中文优化中文项目的日常开发Qwen3-Coder / Qwen-Coder 系列代码专精纯编程任务、代码生成核心优势中文理解能力出色、国内直连、阿里云生态集成。1.4.7 其他值得关注的模型模型开发者特点场景Gemini Pro 系列Google超大上下文、多模态超长代码库分析Kimi / Moonshot 系列月之暗面长上下文、中文好中文长文档处理Llama 系列Meta开源旗舰、可本地部署离线/隐私敏感场景Mistral 系列Mistral AI欧洲开源、代码能力强本地部署替代方案1.4.8 模型选型实战指南1.4.8.1 选型决策树面对一个编程任务时按以下流程选择模型你的任务是什么 │ ├── 简单任务代码补全、格式化、小修改 │ ├── 追求最快速度 → Claude Haiku / GLM-4.5-Air / 本地 Qwen │ ├── 追求最低成本 → DeepSeek API / 本地 Ollama │ └── 完全免费 → 本地 Ollama 模型 │ ├── 日常开发功能实现、Bug修复、代码生成 │ ├── 英文项目 → Claude Sonnet 首选 │ ├── 中文项目 → Claude Sonnet 或 通义千问 / GLM-4.7 │ └── 预算紧张 → DeepSeek V4 / GLM / Kimi │ ├── 复杂任务架构设计、算法难题、疑难Bug │ ├── 深度推理 → Claude Opus / GPT-5.5 / DeepSeek V4 Pro │ └── 超长代码库 → Gemini Pro (1M上下文) │ └── 特殊场景 ├── 离线/隐私要求 → 本地 Ollama Llama/Qwen ├── 截图→代码 → GPT-5.5 / GPT-4o 系列多模态 └── 国内直连要求 → DeepSeek / 千问 / GLM1.4.8.2 成本优化策略策略一分层使用简单任务 ──→ Haiku / GLM-4.5-Air / 本地 Qwen成本$ 日常任务 ──→ Sonnet / DeepSeek V4 Pro 成本$$ 复杂任务 ──→ Opus / GLM-5.1 成本$$$$不要所有任务都用最贵的模型就像不是每次出门都需要打专车。策略二Prompt Cache缓存利用Claude 和 GPT 都支持 Prompt Cache —— 如果你发送的上下文中有大量重复内容如每次都发送同一个 CLAUDE.md后续请求可以复用缓存显著降低重复上下文的输入成本。策略三本地模型补充对于简单的代码格式化、注释生成等任务可以使用 Ollama 部署的本地模型完全免费。一个月的费用预估使用强度推荐模型月费用估算轻度每天1-2小时DeepSeek API / GLM / Kimi¥5-30视模型与套餐轻度Claude Sonnet$10-30约¥70-210中度每天3-5小时Claude Sonnet$30-80约¥210-560重度全天使用Claude Sonnet Haiku$80-200约¥560-14001.4.9 安全与隐私考量方案数据隐私适用场景云端APIClaude/GPT等数据经过服务商服务器一般项目、学习项目本地部署Ollama数据不出本机企业敏感代码、隐私要求高注意使用云端AI服务时你发送的代码会经过服务商的服务器。虽然主流服务商Anthropic、OpenAI承诺不会用用户数据训练模型但如果你在处理高度敏感的代码如核心算法、密钥等建议使用本地部署方案。1.5 本部分小结核心概念回顾概念一句话解释AI辅助编程用自然语言指挥AI写代码人类从写代码变成指挥AI写代码Vibe Coding跟着感觉走的编程方式适合快速原型和小项目Agentic Engineering系统化的AI驱动开发方法适合大型项目Agent智能体能自主规划、执行、验证任务的AI系统SDD规范驱动开发先写规范PRD/SPEC再让AI按规范执行PRD产品需求文档描述做什么SPEC技术规范文档描述怎么做三者的关系Vibe Coding感觉驱动 ↓ 项目变大、需要更多控制 Agentic Engineering系统化方法 ↓ 需要精准的沟通合同 SDD规范驱动开发参考资料尚硅谷AI Coding
返回列表