Vibe Coding 教程

Vibe Coding 教程

Vibe Coding(氛围编程/直觉编程)是 2025 年兴起的新兴编程方式:开发者用自然语言描述需求,由 AI 编程工具(如 Claude Code、Codex、Copilot)生成代码,人类只负责评审、调整与把关。它大幅降低了编程门槛,让"想法 → 软件"的距离缩短到几分钟。

核心理念

  • 用自然语言代替语法细节,描述"要什么"而不是"怎么写"
  • AI 负责实现,人负责方向、质量与安全意识
  • 快速迭代:生成 → 运行 → 发现问题 → 让 AI 修改
  • 不追求逐行理解代码,但要能审查关键逻辑

常见工具

  • Claude Code:Anthropic 终端 AI 编程代理
  • OpenAI Codex:OpenAI 编程代理
  • GitHub Copilot:IDE 内 AI 助手
  • Cursor / Windsurf:AI 原生 IDE

本教程将带你用"Vibe"的方式,从想法到上线完成第一个项目。

Vibe Coding 简介

Vibe Coding 简介

Vibe Coding 一词由 Andrej Karpathy 于 2025 年提出,指"顺着直觉与氛围编程"——不再逐行手写代码,而是通过与 AI 对话让软件成型。

它解决什么问题

  • 传统开发:高学习曲线,从语法到框架到部署
  • Vibe Coding:把"编程"变成"描述+验证"
  • 适合:原型验证、个人工具、内部自动化、学习探索

与传统开发的关系

Vibe Coding 不是取代传统开发,而是补充:专业开发者用它提速 3-10 倍;非开发者用它获得"编程超能力"。复杂系统的架构设计、性能调优、安全审计仍需人的专业判断。

典型工作流

1. 描述需求(自然语言,越具体越好)
2. AI 生成代码与文件结构
3. 本地运行验证
4. 提出修改意见(纠错/加功能/改样式)
5. 循环直到满意
6. 审查安全与边界情况后上线

适用场景举例

  • 个人博客/工具箱网站
  • 数据处理脚本与自动化
  • 学习新框架的示例项目
  • 内部管理小系统

Vibe Coding 思维模式

Vibe Coding 思维模式

从"写代码"切换到"Vibe Coding",需要调整思维模式——这是成功的关键。

思维转变

传统思维Vibe 思维
我要写一个循环我要把列表里每一项变成卡片
我要用 X 框架实现这个页面,你推荐什么方案?
先学完教程再动手边做边学,让 AI 解释
代码必须一行行看懂核心逻辑看懂,工具代码信任 AI

描述需求的艺术

  • 具体:"做一个待办清单"→"做一个支持增删改查、本地存储、深色模式的待办清单"
  • 给约束:技术栈、性能要求、兼容性
  • 给示例:参考截图或网址最有效
  • 分步迭代:一次聚焦一个目标

必备的安全意识

  • 不让 AI 生成的代码拿到生产密钥
  • 审查涉及金钱、删除、权限的代码
  • 重要数据先备份再跑新代码

心态

把 AI 当"很聪明但需要盯着的实习生":给它明确任务、验收标准,出问题让它解释并修正,而不是自己重写。

第一个 Vibe Coding

第一个 Vibe Coding

从一个真实小项目开始,体验完整的 Vibe Coding 流程:做一个"番茄钟"网页应用。

Step 1:描述需求

"用 HTML/CSS/JS 做一个番茄钟网页:
- 25 分钟倒计时,结束后提示休息 5 分钟
- 有开始/暂停/重置按钮
- 美观的现代风格,可全屏显示
- 单文件即可"

Step 2:让 AI 生成

在 Claude Code / Codex / Cursor 中输入上述描述,AI 会生成 pomodoro.html 单文件应用。

Step 3:运行验证

# 打开或启动本地服务
open pomodoro.html        # macOS
python3 -m http.server 8000  # 或起个本地服务

Step 4:迭代修改

"加一个进度环动画,倒计时结束后播放提示音,
把 25/5 分钟改成可配置"

Step 5:审查关键逻辑

重点检查:定时器是否正确清理、刷新页面是否重置、音频是否自动播放受限等边界问题。

完成!

约 10 分钟你就拥有一个可用的番茄钟工具。这个流程可以复制到几乎所有个人工具类项目。

提示词（Prompt）工程

提示词(Prompt)工程

在 Vibe Coding 中,提示词质量直接决定输出质量。学会"给 AI 下需求"就是核心生产力。

高质量提示词结构

【角色/背景】你是一个资深前端工程师
【任务】用 React 实现一个商品列表页
【输入数据】商品数组: {id, name, price, image}
【约束】
- 使用 TypeScript + Tailwind
- 支持搜索与价格排序
- 移动端适配
【输出】返回完整的组件代码与依赖说明
【验收】运行 npm start 能直接看到效果

常用技巧

  • 分步骤拆解:大任务拆成小任务逐个完成
  • 提供示例:贴参考代码或截图描述
  • 明确输出格式:代码、文件列表、还是说明文档
  • 要求解释:"解释每部分的作用"便于学习
  • 纠错重来:说明错误现象,附报错信息,让 AI 修复

系统提示(项目级)

在 CLAUDE.md / AGENTS.md 中写项目约定(技术栈、目录规范、禁止事项),让 AI 始终遵循。

避坑

  • 避免一句话描述模糊需求("做个网站"太宽泛)
  • 涉及数据安全时明确"禁止把密钥写入代码"
  • 复杂逻辑要求 AI"先解释方案再写代码"

Vibe Coding 实战项目

Vibe Coding 实战项目

用一个"个人 RSS 阅读器"项目串联全部技能,体验从需求到部署的完整 Vibe 流程。

需求描述

"做一个个人 RSS 阅读器:
- 纯前端,用 localStorage 保存订阅列表
- 输入 RSS 地址可订阅
- 列表展示每源最新 10 条,点击进详情
- 支持标记已读、删除订阅
- 深色现代 UI"

迭代清单

  1. 生成基础页面结构与订阅管理
  2. 接入 RSS 解析(用 rss2json 或 CORS 代理)
  3. 处理加载状态与错误提示
  4. 美化 UI,加响应式与动画
  5. 本地验证通过后部署到 GitHub Pages / Vercel

部署

# 推到 GitHub
git init && git add . && git commit -m "rss reader"
git push origin main

# 启用 GitHub Pages 或导入 Vercel 即可上线

项目复盘

  • 哪些是 AI 一次生成的?哪些需要多次迭代?
  • 哪里出了 bug?为什么?下次怎么描述更准?
  • 是否引入了不需要的依赖?能否简化?

复盘是 Vibe Coding 能力成长的关键,每完成一个项目都会明显变强。

GitHub Copilot 入门教程

GitHub Copilot 入门教程

GitHub Copilot 是 GitHub 与 OpenAI 合作的 AI 编程助手,深度集成在 VS Code、JetBrains 等 IDE 中,支持代码补全、聊天、自动修复等功能。

安装配置

# VS Code
扩展市场搜索 "GitHub Copilot" → 安装
登录 GitHub 账号 → 授权订阅(Pro/Business/Free 试用)

核心能力

  • 代码补全:输入注释或函数名,自动补全实现
  • Copilot Chat:对话式提问,解释代码、重构、写测试
  • Inline Chat:选中代码直接让 AI 修改
  • 自动修复:根据报错信息给出修复方案
  • Commit 信息生成:根据 diff 生成提交信息

日常使用示例

# 写注释让 AI 补全
// 计算两个日期的间隔天数,返回整数
function daysBetween(date1, date2) { ... }  // AI 自动补全

技巧

  • 注释越具体,补全越准确
  • 先写测试或接口签名,再让 AI 实现
  • 用 Chat 解释不熟悉的代码块
  • 检查并理解 AI 生成的代码,不盲信

注意事项

涉及专有代码与敏感信息时关闭 Copilot 建议或使用企业版(提供 IP 与代码匹配过滤)。

Reasonix 入门教程

Reasonix 入门教程

Reasonix(示例中为虚构/演示名称的 AI 编程工具)代表了新一代"推理型"编程助手:它不仅生成代码,还会先规划方案、分析边界条件再实现,特别适合复杂任务。

与传统补全型工具的区别

能力补全型推理型
输入注释/上下文自然语言需求
输出局部代码完整方案+多文件实现
复杂度中低中高
自主性辅助可自主执行(跑测试/改文件)

典型工作流

1. 描述项目目标与验收标准
2. 工具先输出实现计划(文件结构、技术选型、风险点)
3. 确认后逐个文件实现
4. 自动运行测试/构建,反馈结果
5. 你审查改动,继续迭代

使用要点

  • 给出明确的"完成定义"(DoD)
  • 让工具先解释计划再动手
  • 通过代码评审确认核心逻辑
  • 配合版本控制(git)随时回退

这类工具把 Vibe Coding 的体验又推进了一步:从"改代码"升级为"管项目"。

ZCode 入门教程

ZCode 入门教程

ZCode(示例中为虚构/演示名称)代表"零代码/低代码 + AI"融合工具:通过对话即可生成网站、自动化流程或应用,适合非技术用户快速搭建可用产品。

适用人群

  • 非程序员:快速实现内部工具与个人项目
  • 产品经理:生成原型供讨论
  • 开发者:快速搭骨架再手写增强

典型场景

  • 企业官网/落地页(拖拽 + AI 生成文案与区块)
  • 数据表单与简单后台
  • 业务流程自动化(邮件、通知、数据同步)
  • 内部知识库与协作面板

与 Vibe Coding 的衔接

低代码工具生成后,往往提供"导出代码"或"自定义代码"入口:先低代码搭好 80%,再用 AI/手写补足 20% 的定制逻辑,这是当前高效的混合工作流。

选型建议

  • 重定制与长期维护 → 选代码方案(Vibe Coding)
  • 快速交付与少维护 → 选低代码平台
  • 两者结合:平台负责界面,代码负责逻辑

Vibe Coding 与低代码并不矛盾——目标都是"以更低成本创造软件价值"。

第 1 / 9 节