尚硅谷大模型Vibe Coding零基础实战教程

Vibe Coding的核心要义是：你不需要懂代码语法，只需懂“逻辑流程”和“清晰表达”。下面是一份可以直接上手的零基础实战指南。

一、三款工具的角色分工（零基础先看这）
工具 定位 最适合零基础做什么？
Cursor 日常驾驶舱（IDE编辑器） 写代码、改代码、读代码、解释代码，全程对话式操作
Claude Code 终端里的“工程师”（命令行Agent） 负责大规模文件修改、项目初始化、依赖安装、Git提交
Codex（OpenAI） 轻量级“外脑”（API或Web Chat） 快速算法验证、正则表达式、SQL生成等碎片化需求
💡 零基础最佳组合：Cursor写/改 + Claude Code跑流程 + Codex查漏补缺。

二、零基础第一步：环境搭建（10分钟）

1. 安装Cursor（最简单）
   去官网下载安装包，双击安装。

打开后，用Google/GitHub账号登录（免费版足够起步）。

设置中文界面：Ctrl+Shift+P → 输入 Configure Display Language → 选中文。

2. 安装Claude Code（需要Node.js）
   先安装Node.js（官网下载 LTS版本，一路“下一步”）。

打开终端（Mac的“终端”或Windows的“命令提示符”），输入：

bash
npm install -g @anthropic-ai/claude-code
安装成功后，输入 claude 并登录你的Anthropic账号。

3. Codex无需安装
   直接浏览器访问 Codex Web 界面，用OpenAI账号登录即可。

三、零基础实战：做一个“个人记账本”网页（全过程）
场景目标
一个HTML页面，能记收入和支出，数据保存在浏览器本地（不用数据库）。

阶段1：用Cursor“空手起家”
操作：

打开Cursor，新建文件夹 my-money，用Cursor打开该文件夹。

按下 Ctrl+K（或 Cmd+K）打开对话输入框。

输入以下中文指令（这就是Vibe Coding的“魔法咒语”）：

“帮我创建一个记账本HTML文件，包含：

一个输入金额的框、一个选择收入/支出的下拉菜单、一个备注输入框、一个‘记录’按钮

下方显示所有记录列表，每条记录显示时间、类型、金额、备注

顶部显示当前总余额（收入-支出）

数据用localStorage保存，刷新页面不丢失

样式美观，用卡片风格，适合手机查看”

点击发送，Cursor会生成一个完整的 index.html 文件（通常还附带CSS和JS都在一个文件里）。

右键该文件 → 选择 Open with Live Server（需先安装Live Server插件），在浏览器看到你的第一个网页。

🧠 零基础心法：你不需要懂localStorage或addEventListener，你只需要知道“我要保存数据”和“我要显示列表”这两个逻辑。

阶段2：用Claude Code做“全局修改”
假设你想给这个记账本增加“删除单条记录”和“清空所有数据”功能。

操作：

在终端中，进入到你的项目文件夹：

bash
cd my-money
输入 claude 启动Claude Code。

在Claude Code中输入：

“请修改index.html，增加以下功能：

每条记录右侧增加一个‘删除’按钮，点击后删除该条记录

列表下方增加一个‘清空全部’按钮，点击前需要弹出确认框

删除或清空后，余额自动更新”

Claude Code会直接修改你的文件，并告诉你改动了几行、改动了哪里。你只需刷新浏览器即可看到效果。

🧠 零基础心法：Claude Code擅长“跨多处修改”，比如同时改HTML结构、JS函数和CSS样式，你只管描述“要什么”，它管“怎么改”。

阶段3：用Codex解决“小卡点”
当你在使用过程中遇到不懂的“小问题”，比如：

“我想让金额数字显示为红色负数和绿色正数”

“我想导出一份CSV备份”

操作：

打开Codex Web界面，直接输入你的需求，它会给你一段可复制的代码片段。

把这段代码复制到Cursor中，粘贴到合适位置（如果不确定位置，可以把整个文件贴给Cursor，问它“这段代码插在哪里？”）。

🧠 零基础心法：Codex适合“一次性问答”，不需要它管理整个项目，只求快速答案。

四、零基础必学的3条“Vibe Coding咒语公式”
场景 万能句式模板
新建功能 “在[文件名]中增加一个[功能描述]，触发方式为[点击/输入]，影响[哪个区域]”
修改逻辑 “把[现有功能]的[某一步]改成[新方式]，同时保持[某个部分]不变”
排查问题 “为什么[某个操作]后，[某个现象]没有发生？请修复并说明原因”
五、零基础必须避开的3个坑（2026最新教训）
坑 表现 对策
AI“过度发挥” AI把你一个HTML拆成Vue项目，引入一堆依赖 指令中加一句 “保持单一HTML文件，不要引入外部框架”
上下文遗忘 改了几轮后，AI忘了最初的设计 用Cursor的 Ctrl+Shift+L 把当前文件加入上下文，或告诉AI“请先通读整个文件再修改”
数据错乱 localStorage数据结构被覆盖 改数据逻辑前，让AI “先保留现有数据格式，只新增字段”
六、学习路径建议（按周推进）
第1周：只用Cursor，完成3个单页面工具（记账本、待办清单、便签板）。

第2周：引入Claude Code，尝试在现有项目中批量修改样式（如统一换主题色）。

第3周：用Codex辅助，学习读懂AI生成的代码（不求会写，但求看懂每一块是干嘛的）。

第4周：尝试同时打开三个工具，针对同一个需求，比较哪个生成的方案你更喜欢——这就是Vibe Coding的“审美训练”。

如果你今天就想动手，强烈建议先完成阶段1的记账本，它只需要一个浏览器和Cursor，10分钟内能看到成品。完成后如果想进一步增加“数据图表统计”功能，我可以继续为你提供针对性的指令模板。😊

本作品采用《CC 协议》，转载必须注明作者和本文链接