VibeCoding 课程 V3｜完整知识结构思维导图模板

课程定位与学习收益

开课背景

AI 生成代码成为主流，Vibe Coding 正从新概念转为通用生产力

课程解决教程碎片化、只会生成代码却不会处理真实项目的问题

适合人群

零基础与非技术人员：用自然语言把创意落地

开发者：升级 AI 协作、重构与多工具协同能力

产品、运营、设计与创业者：低成本制作原型并验证商业想法

AI 爱好者与学生：补齐 Skill、MCP、Agent 等编码实践

学习建议

可选补充 HTML、CSS、JavaScript、任一后端语言与 SQL 基础

必备能力是电脑操作、清晰表达需求和持续验证结果

学完收获

熟练使用 Claude Code、Codex 等主流工具

独立开发网站、前后端、小程序、自动化脚本并重构旧项目

提升交付效率、职业竞争力与副业变现能力

Vibe Coding 核心认知

什么是 Vibe Coding

以自然语言描述目标，由 AI 生成、修改和排错代码

人从“写代码的工人”转为“定义需求、验收成品的导演”

基本工作方式

描述需求 → AI 实现 → 观察效果 → 反馈修改 → 持续迭代

重点不在逐行手写，而在需求质量、判断力与结果控制

能做什么

网页应用、企业官网、博客、商城与在线工具

小程序、App、数据处理、自动化脚本与测试工具

PPT 展示页、产品原型、架构图、流程图与动画演示

入门示例

通过自然语言生成“愤怒的小鸟”式拖拽释放网页小游戏

AI 基础概念

LLM

基于海量数据训练的语言模型，可理解并生成文本、代码与多类内容

Token

模型处理文本的计量单位，影响上下文容量、成本与生成效率

Prompt

给 AI 的任务指令；角色、目标、格式和约束决定输出质量

Agent

能自主规划、调用工具、执行任务、检查结果并迭代的 AI 助手

MCP

连接模型与外部工具、数据库和服务的标准化“通用插头”

CMD

用文本命令安装依赖、运行项目、管理文件和查看错误日志

多模态

让 AI 同时理解文本、图片、音频、视频和代码，用截图或草图驱动开发

大模型生态速览

闭源模型

OpenAI GPT 与 o 系列：综合、推理和 Agent 工作流能力突出

Claude 系列：代码生成、长流程执行和长上下文见长

Gemini 系列：多模态、长上下文与端云协同能力强

国内模型：豆包、文心、混元、GLM、Kimi 覆盖中文与行业场景

开源模型

Qwen、DeepSeek、GLM、Llama、Gemma、GPT-OSS 等可下载和本地部署

选择时关注许可证、参数规模、推理成本、代码能力和硬件要求

选择原则

按任务复杂度、上下文长度、速度、成本、隐私和部署方式取舍

Vibe Coding 工具版图

编辑器型工具

Cursor、Windsurf、Trae、Qoder：在 IDE 中完成对话、补全和项目修改

命令行 Agent

Claude Code 与 Codex：面向整个代码库执行分析、开发、测试与重构

智能办公与协作

WorkBuddy、QoderWork：面向办公任务、知识处理和多工具协同

工具选择

根据模型生态、操作习惯、项目规模、扩展能力和成本组合使用

前置环境安装

Git

核心作用

记录版本、创建检查点、对比修改并安全回退

本地命令

init 初始化；config 配置身份；add 暂存；commit 存档

status 查看状态；log --oneline 查看精简历史

远程协作

GitHub、Gitee、GitLab 托管代码，使用 SSH 密钥认证

remote 连接仓库；push 推送；pull 拉取同步

Node.js

为什么需要

提供 JavaScript 运行时与 npm 包管理，是安装多种 AI 编程工具的基础

安装验证

安装稳定版本后检查 node 与 npm 版本，必要时配置镜像

Claude Code 全流程

认识与安装

命令行 AI 编程 Agent，可读取项目、编辑文件、运行命令并处理复杂任务

通过 Node.js/npm 安装，并按环境选择登录或 API 接入方式

模型与 API

可使用官方服务，也可通过国内中转或 CC Switch 配置模型供应商

API Key 应安全保存，避免写入代码仓库

日常使用

在项目目录启动，先说明目标和约束，再让 Agent 检查、实施与验证

用斜杠命令管理上下文、模型、权限和会话

CLAUDE.md

固化项目信息、代码规范、Git 规范和特别注意事项

推荐契约：编码前思考、保持简单、最小改动、目标驱动、及时暴露失败

VS Code 集成

安装 VS Code 与 Claude Code 插件，在编辑器中对话并查看文件修改

CC Switch 多模型管理

工具作用

集中管理 Claude Code、Codex 等客户端的供应商、API Key 与模型切换

接入 DeepSeek

新建供应商并填写 API 地址、密钥和模型映射

非原生协议需开启本地路由，完成 Responses 与 Chat Completions 转换

接入火山方舟 Coding Plan

配置方舟服务、对应模型与认证信息，按套餐选择编码模型

使用要点

切换前核对协议、模型名与上下文窗口，并保护密钥和本地代理端口

Skill 能力扩展

什么是 Skill

以 SKILL.md 封装专业知识、步骤和约束，让 Agent 按稳定流程完成特定任务

存放位置

用户级用于跨项目复用，项目级用于绑定当前仓库的专属规范

安装与使用

从技能仓库安装合适 Skill，阅读说明后以明确任务触发

Skills 采用渐进式加载，减少上下文占用并提高结果一致性

自定义 Skill

用 YAML 元数据声明名称与描述，在正文中写清触发条件、流程、输入输出和验证

Git 自动提交规范

触发后依次检查状态、审查差异、生成清晰提交信息并确认结果

只提交本次相关内容，不泄露密钥，不混入无关改动

MCP 工具协同

核心价值

把 AI 与浏览器、数据库、API 等外部能力连接起来，扩展可执行边界

chrome-devtools-mcp

让 Agent 检查页面、操作浏览器、读取控制台与网络信息并辅助调试

mysql-mcp-server

让 Agent 在受控连接下查询或操作 MySQL，支持数据相关开发任务

安全原则

最小权限配置、区分读写操作、保护凭据并对高风险动作人工确认

数据库实践

MySQL

适合多人协作和服务端项目，掌握 INSERT、SELECT、UPDATE、DELETE

完成下载安装、服务启动、连接配置与基础数据管理

SQLite

轻量、单文件、免服务，适合本地工具、原型和小型应用

使用命令行或程序驱动建库、建表、查询与更新

Vibe Coding 使用方式

先定义数据模型和约束，再让 AI 生成迁移、CRUD 与连接代码

验证 SQL、备份数据，避免让 Agent 在未知范围直接执行破坏性操作

项目实战一：AI 学习交流论坛

项目启动

明确论坛目标、技术边界与初始环境，建立可回退的 Git 基线

原型与需求

先产出页面原型，再拆解用户角色、核心功能、数据结构与验收标准

规则与上下文

准备 CLAUDE.md，以 12 条行为契约约束思考、修改、测试和检查点

执行计划

将需求拆为可验证的小步骤，明确依赖关系和阶段性交付物

功能开发

按计划逐项实现、运行和检查；未完成时保留上下文与清晰续作入口

Codex 全流程

认识与安装

Codex CLI 是面向本地代码库的 AI Agent，可分析、编辑、运行和验证项目

安装 CLI 后在项目目录启动，完成认证与首次会话

斜杠命令

用命令切换模型、查看状态、控制会话并管理执行过程

AGENTS.md

为 Codex 提供项目背景、工程规范、边界和验证要求

行为准则强调想清楚再写、简单优先、外科手术式改动和目标驱动

Codex Skill

与 Claude Code 采用相同 SKILL.md 标准，但用户级与项目级存放目录不同

接入 DeepSeek

通过 CC Switch 配置供应商、模型映射并开启 Codex 本地路由

进入 Codex 后确认实际模型与推理配置

Codex App

使用桌面端获得对话、文件浏览、任务执行与结果审查的一体化体验

项目实战二：自营超市微信小程序

开发工具准备

下载并安装微信开发者工具，登录后创建或导入小程序项目

开发者身份

注册小程序账号并获取 AppID；无正式账号时可用测试号体验

Agent 上下文

准备 AGENTS.md 与所需 Skill，声明小程序规范、目标和限制

产品原型

规划首页、分类、商品详情、购物车、订单与个人中心等核心体验

需求分析

拆解用户流程、功能范围、数据模型、云能力与验收标准

计划与开发

按优先级列出迭代计划，逐模块开发、预览、调试并验证完整购物链路

课程方法论总结

需求先行

把目标、背景、范围、约束、交付格式和成功标准说清楚

上下文工程

用 CLAUDE.md、AGENTS.md、Skill 与 MCP 提供稳定知识和工具能力

小步迭代

先做最小可用版本，再通过效果反馈逐轮完善

工程化护栏

依靠 Git 检查点、测试、日志、权限控制和人工验收降低风险

人机分工

AI 负责高效执行，人负责方向、取舍、质量、安全与最终责任