这是 vibe coding 系列的第 2 篇（系列总览）。照着本文做完，你会得到和我开发简单书房时一样的环境：Claude Code + 5 个插件 + 浏览器 MCP + 一份写好的规则文件。
准备什么
| 项目 | 说明 |
|---|---|
| Claude 账号 | 订阅 Claude Pro / Max，或者在 Anthropic Console 开通 API（按量计费）。登录时二选一 |
| 电脑 | macOS、Linux 直接装；Windows 推荐用 WSL（下面有步骤），我就是这么用的 |
| Node.js | 用来运行 chrome-devtools MCP；建议装 LTS 版本 |
| Google Chrome | 让 Claude 操作浏览器时用 |
| Git | 管理代码版本，Claude 会帮你提交 |
第一步：安装 Claude Code
Windows：先装 WSL
在「终端（管理员）」或 PowerShell（管理员）里执行，然后重启电脑：
wsl --install
重启后会自动装好 Ubuntu，按提示设置用户名和密码。之后在开始菜单打开 Ubuntu，下面的命令都在这个窗口里执行。
不想用 WSL 也可以直接在 Windows 上装，见官方文档。WSL 的好处是和 Linux 服务器、Docker 的环境一致，NAS 相关的脚本也能直接跑。
安装
macOS / Linux / WSL 里执行官方安装脚本：
curl -fsSL https://claude.ai/install.sh | bash
或者已经装了 Node.js 的，用 npm 安装：
npm install -g @anthropic-ai/claude-code
登录并开始
进入你的项目目录，运行：
cd ~/projects/my-app
claude
第一次运行会让你选择登录方式（Claude 订阅账号或 API Key），按提示在浏览器里完成登录。看到输入框就可以直接用中文说话了。
几个常用命令（在 Claude Code 的输入框里输入）：
| 命令 | 作用 |
|---|---|
/init |
读一遍项目，自动生成 CLAUDE.md 初稿 |
/plugin |
浏览、安装、管理插件 |
/mcp |
查看 MCP 连接状态 |
/model |
切换模型 |
/doctor |
检查安装是否正常 |
更新 Claude Code：
claude update。
第二步：安装插件
插件给 Claude 装上「工作方法」。下面是我常开的 5 个，在 Claude Code 的输入框里依次输入即可。插件来自不同的「插件市场」，所以先添加市场，再安装插件。
superpowers：开发流程（必装）
让 Claude 先问清需求、写设计、拆计划、先写测试再实现、最后审查。整个系列的核心。
/plugin marketplace add anthropics/claude-plugins-official
/plugin install superpowers@claude-plugins-official
security-guidance：安全提醒
写到登录、权限、文件路径这类涉及安全的代码时给出提醒。和 superpowers 在同一个市场：
/plugin install security-guidance@claude-plugins-official
frontend-design：界面设计
做页面时让设计更讲究，避免千篇一律的「AI 风」。
/plugin marketplace add anthropics/claude-code
/plugin install frontend-design@claude-code-plugins
andrej-karpathy-skills：编码守则
一组让 AI 少犯错的守则：先想清楚、只做必要的改动、不顺手乱改。
/plugin marketplace add forrestchang/andrej-karpathy-skills
/plugin install andrej-karpathy-skills@karpathy-skills
claude-hud：状态栏
在终端底部显示上下文用了多少、当前在做什么，方便判断什么时候该让它收尾、什么时候该开新对话。
/plugin marketplace add jarrodwatts/claude-hud
/plugin install claude-hud@claude-hud
/claude-hud:setup
装完后输入 /reload-plugins（或退出重开 claude），再输入 /plugin 能看到已启用的插件就好了。
第三步：认识 skill
插件里装的能力叫 skill（技能），本质是一份份写给 Claude 的工作说明。superpowers 里最常用的几个：
| skill | 什么时候用 | 做什么 |
|---|---|---|
| brainstorming | 要做新功能时 | 一次问一个问题，把需求问清楚，复述给你确认 |
| writing-plans | 设计确认后 | 把设计拆成小任务，写明改哪些文件、怎么测试 |
| executing-plans | 开始实现 | 按计划逐个任务完成，记录进度 |
| test-driven-development | 写任何代码时 | 先写测试并确认它失败，再写代码让它通过 |
| systematic-debugging | 遇到 bug | 先找到根本原因再动手，不靠猜 |
| verification-before-completion | 宣布完成前 | 没有测试结果或运行证据，不许说「好了」 |
| requesting-code-review | 功能做完 | 另开一个审查员把所有改动从头看一遍 |
| finishing-a-development-branch | 收尾 | 跑完整测试，问你合并、提 PR 还是先留着 |
怎么用：大多数时候不用管，Claude 会根据你说的话自动选用。比如你说「我想加一个装到手机桌面的功能」，它会自己进入 brainstorming。
想指定某个技能，可以直接输入它的名字，比如：
/superpowers:brainstorming 我想给书库加一个按作者筛选的功能
也可以写自己的 skill：在 ~/.claude/skills/技能名/SKILL.md 里用文字写清楚「什么时候用、怎么做」，Claude 就会照做。比如把「发版的步骤」写成一个 skill，以后说一句「发版」就够了。
第四步：接上浏览器（chrome-devtools MCP）
MCP 是给 Claude 接外部工具的接口。这一个让 Claude 能自己打开 Chrome、点按钮、截图、量尺寸、看报错。在终端（不是 Claude 的输入框）里执行：
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
然后重开 claude，输入 /mcp，看到 chrome-devtools 显示已连接就好了。
WSL 用户还需要在 Ubuntu 里装一个 Chrome（Windows 11 的 WSL 可以直接弹出 Linux 程序的窗口）：
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb
试一下：对 Claude 说「打开 https://www.example.com 截个图给我看」。它能做到哪些事，见《浏览器篇》。
第五步：写 CLAUDE.md
每次新开对话，Claude 都不记得之前的事。CLAUDE.md 是它每次启动都会先读的规则文件，分两种：
- 项目里的
CLAUDE.md（项目根目录）：写这个项目的事实。用/init让 Claude 生成初稿，再补充。 - 你自己的
~/.claude/CLAUDE.md：写你的个人守则，所有项目都生效。
项目的 CLAUDE.md 里通常写：
- 项目是什么、用了哪些技术
- 常用命令（怎么启动、怎么测试、怎么构建）
- 目录结构、关键文件在哪
- 约定（比如接口返回什么格式、界面配色只能用主题变量、包管理器用哪个）
个人守则可以直接参考我的这份（节选）：
## 核心原则
- 使用中文交流：所有回答、说明、结论一律用中文
- 简单优先：以最小改动达成目标，避免过度设计
- 解决根本原因：不做临时修复
- 修改前先阅读：理解现有代码后再修改，不凭猜测编写
## 安全规则
- 不得把 .env、密码、API Key 等敏感信息输出到文件、日志、提交记录或界面
- 破坏性操作（删除文件、修改数据库、强制推送）执行前必须展示内容并获得确认
## 工作流程
- 3 步以上的任务，先在 tasks/todo.md 写成勾选清单，随时更新进度
- 验证功能正常之前不标记完成，用测试或日志证明
- 收到 bug 报告时自主调查并修复，但不做超出范围的改动
规则不用一次写全。用的过程中发现它总犯同一个错，就加一条。
另外 Claude Code 有自动记忆：踩过的坑、你的偏好会被记下来，下次自动想起。你也可以直接说「记住：以后推送都由我来」。
装好了，然后呢
环境就绪。下一篇《提要求篇》讲怎么跟 Claude 说话，以及一个功能从想法到发版的完整流程。