1. 什么是Vibe Coding它不是新工具而是一种开发节奏的重新定义“Vibe Coding”这个词最近在开发者社区里频繁出现但它本身并不是某个具体软件、插件或平台的官方名称。我第一次在 Discord 的一个前端小组里看到这个词有人发了一段 30 秒的屏幕录制VSCode 窗口左侧是 GitHub Copilot 的实时建议气泡右侧是 Claude Code 的对话面板底部终端正自动运行npm run dev而用户只敲了不到 5 行主逻辑代码——整个过程没有切出编辑器、没查文档、没翻 Stack Overflow连console.log都是 Copilot 补全的。评论区刷屏“This is vibe coding.”后来我陆续在 Reddit 的 r/programming、Hacker News 的 weekly threads、甚至几个独立开发者博客里反复见到类似描述。它指的是一种高度协同、低上下文切换、强意图驱动的现代编码工作流你不再“写代码”而是“引导代码生成”像指挥一支由多个 AI 编程助手组成的微型团队——Copilot 负责补全、Claude Code 负责解释与重构、OpenClaw 负责执行 CLI 命令与环境操作而你本人则聚焦在“问题定义”“边界校验”和“价值判断”这三个不可替代的环节上。关键词里的VSCode是这个工作流的事实标准载体不是因为它技术最强而是它的扩展生态、调试集成、终端嵌入能力以及对 LSPLanguage Server Protocol和 LLM 工具链的开放支持让它成了目前最成熟的“AI 编程协作者调度中心”。而Copilot、Claude Code、OpenClaw这三者恰好覆盖了 Vibe Coding 的三个核心动作层理解层Copilot基于当前文件上下文 光标位置做毫秒级局部补全推理层Claude Code接受自然语言指令做跨文件分析、函数重写、测试生成、文档补全执行层OpenClaw把“帮我部署到 Vercel”“重命名所有 test 文件为 spec”这类高阶指令翻译成真实 shell 命令并安全执行。这不是“懒人编程”恰恰相反它对开发者的基础能力要求更高——你得清楚知道什么时候该让 Copilot 补全什么时候必须自己写能一眼识别 Claude Code 给出的“看似合理但逻辑错位”的重构建议更得明白 OpenClaw 执行rm -rf node_modules前为什么必须先确认当前目录是否在项目根路径。我带过两个实习生一个 Python 基础扎实但没用过 Copilot另一个会调各种模型 API 却连git rebase -i都不熟——前者两周内就跑通了整套 Vibe Coding 流程后者卡在“为什么 OpenClaw 拒绝执行我的命令”上整整三天。原因很简单Vibe Coding 不降低门槛它只是把门槛从“语法记忆”转移到了“意图表达精度”和“执行风险预判力”上。所以如果你搜的是“vibe coding 安装”或“vibe coding 下载”那注定找不到安装包——它是一套可配置、可裁剪、可演进的工作流范式。本文接下来要做的就是带你从零搭建一套稳定、可控、真正能落地的 Vibe Coding 环境不堆概念不讲玄学每一步都对应一个真实开发场景每一个配置项都有明确的取舍理由。你不需要成为 AI 专家但得愿意花 20 分钟认真读完这一页配置说明——因为后面省下的可能是你未来三个月每天重复的 15 分钟机械操作。2. 工作流设计逻辑为什么是 Copilot Claude Code OpenClaw 这个组合2.1 三者分工不是随意拼凑而是基于“认知负荷拆解”的工程选择很多初学者一上来就想“把所有 AI 都装上”结果 VSCode 卡顿、建议弹窗打架、终端输出混乱最后放弃。我试过把 Cursor、Tabnine、CodeWhisperer、Ollama 本地模型全塞进一个工作区实测下来不仅没提效反而让每次保存文件都变成一次小型系统压力测试。真正的 Vibe Coding 不是“越多越好”而是“刚好够用、各司其职、互不干扰”。我们来拆解这个黄金三角组合背后的底层逻辑GitHub Copilot 是“肌肉记忆延伸”它不负责思考只负责把“你脑子里已经成型的那半句代码”快速补全。比如你输入fetchUser(它立刻给出(id) axios.get(/api/users/${id})你写const result await db.query(它马上接上SELECT * FROM users WHERE status $1。它的优势在于极低延迟100ms、强上下文感知能读取当前文件、相邻函数、甚至注释劣势是无法处理跨文件逻辑或需要外部知识的问题。它就像你右手的延伸你动念头它就动手指。Claude Code 是“第二大脑”当你面对一个模糊需求——比如“把这段 React 类组件改成函数组件并加上 TypeScript 类型”——Copilot 会卡住因为它不知道“类组件”长什么样也不知道“TypeScript 类型”该加在哪里。这时 Claude Code 就派上用场你选中代码块右键 → “Ask Claude”输入自然语言指令它会返回完整重写后的代码、修改说明、甚至潜在风险提示。它不抢你的键盘但帮你完成“需要暂停、思考、查阅资料”的那部分脑力劳动。我把它固定在 VSCode 右侧边栏和终端并排这样一眼就能看到它的响应不用切 Tab。OpenClaw 是“自动化执行臂”前两者都在“产出品”而 OpenClaw 解决的是“交付动作”。比如你刚用 Claude Code 生成了一组测试用例现在需要① 创建__tests__目录② 把测试文件存进去③ 运行npm test -- --watch④ 如果失败自动打开 Jest 输出。这些步骤对人类来说琐碎且易错但对 OpenClaw 来说就是一条openclaw run test:setup命令的事。它背后是一套 YAML 定义的 Skill技能每个 Skill 封装了 Shell 命令、条件判断、错误重试、用户确认等逻辑确保“执行”这件事本身是可预测、可审计、可回滚的。提示不要试图让 Copilot 做 Claude Code 的事比如让它“解释这段代码为什么报错”也不要让 Claude Code 做 OpenClaw 的事比如让它“帮我删掉 dist 目录”。越界使用不仅效率低还会放大幻觉风险。我见过太多人让 Copilot 生成rm -rf *命令结果删掉了整个 home 目录——这种事本该由 OpenClaw 的safe-rmSkill 加上路径白名单校验来兜底。2.2 为什么不是其他组合——来自真实踩坑的对比验证为了验证这个组合的合理性我花了三周时间横向测试了 7 种主流替代方案记录每种组合在 5 个典型场景下的表现满分 10 分场景Copilot Claude Code OpenClawCopilot CursorClaude Code Ollama本地Copilot CodeWhisperer仅用 Copilot新建 React 组件并添加基础 hooks9.5Claude 生成骨架OpenClaw 创建文件运行 lint7.0Cursor 自动补全快但无跨文件结构生成6.5Ollama 响应慢类型推断不准8.0AWS 服务依赖强国内网络不稳定5.0需手动写 import、useState、useEffect修复 ESLint 报错如 missing-deps10.0Copilot 实时提示Claude 解释原理OpenClaw 批量修复6.5Cursor 建议常漏掉 deps 数组7.0本地模型对 ESLint 规则理解弱7.5建议正确率尚可但无解释4.0靠猜或查文档从 Markdown 文档生成 API 接口代码9.0Claude 解析文档结构Copilot 补全细节OpenClaw 生成路由测试5.5Cursor 无法解析非代码块6.0Ollama 对 Markdown 解析能力有限6.5CodeWhisperer 不支持文档输入3.0纯手写一键部署到 Vercel 并获取 URL10.0OpenClaw Skill 封装 vercel cli自动登录部署复制 URL4.0Cursor 无 CLI 集成5.0需手动配置 vercel.json3.0CodeWhisperer 不支持2.0全程命令行重构函数提取公共逻辑为 hook8.5Claude 准确识别可提取点Copilot 补全 hook 内容OpenClaw 创建文件更新引用7.0Cursor 建议常破坏原有调用链6.0Ollama 生成 hook 类型错误率高5.0CodeWhisperer 无重构能力1.0纯手动数据背后是更关键的结论Copilot 和 Claude Code 的能力存在明显互补性而非重叠。Copilot 强在“局部精准”Claude Code 强在“全局理解”二者叠加才能覆盖从“单行补全”到“模块重构”的完整光谱。而 OpenClaw 的不可替代性在于——它把“AI 生成的结果”和“真实世界的动作”之间那道鸿沟用可配置、可验证的 Skill 填平了。没有它你永远在“复制粘贴 → 手动保存 → 切终端 → 输入命令 → 查看输出”这个循环里打转。2.3 为什么 VSCode 是唯一推荐载体——不是情怀是工程现实你可能会问为什么不用 JetBrains 系列IntelliJ/PyCharm它们的 AI 插件生态也很强。答案很实在VSCode 的扩展机制对多模型协同的支持是目前所有 IDE 中最成熟、最透明、最易调试的。以 Copilot 为例JetBrains 的 Copilot 插件是黑盒封装你无法控制它的上下文窗口大小、无法禁用特定文件类型的建议、无法查看它实际发送给服务器的 prompt。而 VSCode 的 Copilot 扩展你可以在settings.json里精确配置editor.suggest.showInlineDetails: false, copilot.advanced: { debug: true, inlineSuggest.enable: true, ignoreFiles: [**/node_modules/**, **/dist/**] }更重要的是VSCode 的“多语言服务器 多 AI 助手”共存模式已被大规模验证。你可以同时启用Python 的 Pylance提供类型检查TypeScript 的 TypeScript Server提供智能跳转Copilot提供补全Claude Code提供对话OpenClaw提供 CLI它们各自监听不同的事件onType,onCommand,onDidSaveTextDocument通过 VSCode 的 Extension API 注册独立的激活逻辑互不抢占资源。我在一台 16GB 内存的 MacBook Pro 上同时开启这五个扩展内存占用稳定在 1.2GBCPU 峰值不超过 35%。而同样配置下IntelliJ 启动后基础内存就占 2.8GB再开两个 AI 插件风扇直接起飞。还有一个常被忽略的优势VSCode 的 Settings Sync 机制让 Vibe Coding 环境可以真正“随身携带”。你今天在公司配好的 Copilot 快捷键、Claude Code 的默认模型、OpenClaw 的常用 Skill只要登录 GitHub 账号换台电脑点几下就能完全复现。我上周去客户现场演示用客户的 Windows 笔记本5 分钟内就拉起了和我本地一模一样的工作流——这在 JetBrains 生态里至今没有稳定可靠的跨平台同步方案。3. 核心组件安装与配置拒绝“一键脚本”只讲关键参数与避坑点3.1 VSCode 基础环境从下载到中文界面的 7 个必调设置别跳过这一步。很多人以为“VSCode 就是装个编辑器”结果后续所有 AI 插件都卡顿、乱码、建议失效根源往往就在这最初的 7 个设置里。我用的是 VSCode 1.892024 年 6 月最新稳定版以下配置全部实测有效下载与安装官网地址https://code.visualstudio.com/ 注意认准visualstudio.com不是任何带vscode-前缀的仿冒站macOS 用户务必下载.zip版而非.pkg版——.pkg会强制安装到/Applications导致某些 CLI 工具如code命令权限异常.zip版解压后拖入 Applications 即可code命令自动可用。Windows 用户勾选“Add to PATH”和“Register Code as an editor for supported file types”否则后续 OpenClaw 无法调用 VSCode 打开文件。首次启动后的 6 个关键设置通过Cmd/Ctrl ,打开设置界面Files: Auto Save→ 设为afterDelay默认 1000ms可接受避免 Copilot 在你打字中途疯狂保存触发 ESLint。Editor: Font Size→ 设为14AI 生成的代码常含长变量名太小看不清。Workbench: Color Theme→ 推荐Default Dark深色主题对长时间盯屏幕更友好且 Copilot 的绿色建议高亮在深色背景下最清晰。Workbench: Icon Theme→ 设为Minimal减少侧边栏图标干扰让注意力集中在代码和 AI 面板上。Extensions: Auto Update→设为falseAI 插件更新频繁自动更新可能导致兼容性问题比如某次 Copilot 更新后Claude Code 的快捷键冲突。我习惯每周五下午手动检查更新。Security: Allowed URIs→ 添加https://*.github.com,https://*.anthropic.com,https://*.openclaw.dev这是 OpenClaw 调用外部 API 时必需的白名单漏掉会导致 Skill 执行失败并静默退出。注意设置里搜索telemetry把Telemetry: Enable Crash Reporter和Telemetry: Enable Telemetry全部关掉。不是 paranoid而是 Copilot 和 Claude Code 本身已上传足够多上下文没必要再让 VSCode 传一份诊断日志。中文界面设置非简单装插件很多人装了“Chinese (Simplified) Language Pack”发现菜单是中文了但 Copilot 的建议还是英文。这是因为 Copilot 的语言模型是按用户系统语言识别的不是按 VSCode 界面语言。正确做法是macOS系统设置 → 通用 → 语言与地区 → 将“简体中文”拖到最顶部Windows设置 → 时间和语言 → 语言 → Windows 显示语言 → 选择“中文简体”然后重启 VSCode。此时 Copilot 的建议会优先返回中文注释如// 获取用户列表Claude Code 的对话也默认用中文。3.2 GitHub Copilot学生认证、模型切换与防误触的 3 层防护Copilot 是 Vibe Coding 的“第一触点”配置不当整个工作流就卡在起点。以下是经过 12 个项目验证的最优配置学生认证实操指南2024 年 6 月后仍有效访问 https://education.github.com/ 用学校邮箱edu.cn / ac.uk / edu.au 等注册。上传学生证或在读证明PDF/JPG需含姓名、学校公章、有效期。审核通常 2 小时内完成。关键一步认证通过后不要直接点“Activate Copilot”而是先去 https://github.com/settings/billing 在 “GitHub Copilot” 区域点击 “Change plan” → 选择 “Free for students” →确认。这一步漏掉账户会默认续费年度订阅$100/年。验证是否生效VSCode 里Cmd/Ctrl Shift P→ 输入Copilot: Toggle Copilot如果状态栏显示 “Copilot (Student)” 即成功。模型切换与性能调优Copilot Chat 专用Copilot Chat 默认用gpt-4-turbo但国内访问延迟高、响应慢。实测deepseek-v4-for-copilot-chat即 DeepSeek-Coder-V2-236B在代码理解任务上更稳安装插件在 VSCode 扩展市场搜索Copilot Chat安装官方版。配置模型Cmd/Ctrl ,→ 搜索copilot chat model→ 在Copilot Chat: Model下拉框中选择deepseek-v4-for-copilot-chat。重要参数在settings.json中添加copilotChat.model: deepseek-v4-for-copilot-chat, copilotChat.maxTokens: 2048, copilotChat.temperature: 0.3temperature: 0.3是关键——太高0.7会让模型“自由发挥”生成不可靠代码太低0.1又过于死板。0.3 是生成质量与确定性的最佳平衡点。防误触的三层防护血泪教训第一层禁用自动触发settings.json中添加editor.inlineSuggest.enabled: false。Copilot 的 inline suggest代码行内灰色提示极易误触尤其在快速敲击时。改为显式触发Cmd/Ctrl Enter唤出建议面板。第二层限定文件类型添加copilot.ignoreFiles: [**/*.md, **/README.md, **/package-lock.json]。Markdown 和 lock 文件不是代码Copilot 的建议毫无意义还拖慢性能。第三层敏感目录隔离在项目根目录创建.copilotignore文件写入/node_modules /dist /build /venv这能阻止 Copilot 在这些目录下加载上下文节省内存避免建议污染。3.3 Claude Code本地化部署、中文优化与 Skill 调用的硬核配置Claude Code 不是简单装个插件就行。Anthropic 官方未提供 VSCode 插件社区方案多为代理或 Webview 封装稳定性差。我采用的是Claude Code 的 VSCode 原生客户端方案基于 Anthropic 官方 API VSCode Extension SDK 自研已稳定运行 8 个月。安装与认证绕过官网中文版陷阱官网中文版claude.code.cn是第三方镜像API 延迟高、Token 限制严。必须用国际版https://claude.ai注册后在Settings → API Keys → Create Key生成一个 key记为ANTHROPIC_API_KEY。VSCode 扩展市场搜索Claude Code安装由anthropic-community发布的版本非其他同名插件。首次启动按Cmd/Ctrl Shift P→Claude: Configure API Key粘贴ANTHROPIC_API_KEY。验证新建一个.ts文件输入// TODO: 实现一个深拷贝函数选中此行右键 →Ask Claude。如果 3 秒内返回 TypeScript 代码即成功。中文优化与上下文管理决定生成质量的核心在settings.json中强制指定中文claudeCode.defaultModel: claude-3-haiku-20240307, claudeCode.systemPrompt: You are a senior TypeScript developer. Always respond in Chinese. Prioritize correctness over brevity. When generating code, include JSDoc comments and type safety., claudeCode.maxContextTokens: 8192claude-3-haiku是目前性价比最高的模型响应快2s、成本低$0.25/1M tokens、中文理解准确。maxContextTokens: 8192是关键——默认 4096 不够处理中大型文件设为 8192 后Claude 能完整读取一个 500 行的 React 组件再生成重构建议。上下文裁剪技巧Claude 的 token 限制是硬伤。我写了个小脚本放在项目根目录的scripts/cut-context.js// 当前文件超过 300 行时自动截取光标附近 200 行送入 Claude const fs require(fs); const lines fs.readFileSync(process.argv[2], utf8).split(\n); const cursorLine parseInt(process.argv[3]); const start Math.max(0, cursorLine - 100); const end Math.min(lines.length, cursorLine 100); console.log(lines.slice(start, end).join(\n));然后在 Claude Code 的设置里把claudeCode.contextCommand设为node scripts/cut-context.js ${file} ${lineNumber}。这样既保证上下文相关性又不超 token。Skill 调用让 Claude 不止于“回答”还能“做事”Claude Code 本身不执行命令但可通过 OpenClaw 的 Skill 间接调用。例如你想让 Claude “帮我生成 Jest 测试”它返回代码后你只需右键 →OpenClaw: Run Skill→ 选择jest:generate-testOpenClaw 就会创建__tests__/目录把 Claude 返回的代码存为xxx.test.ts运行npm test xxx.test.ts并展示结果这个 Skill 的 YAML 定义如下存为~/.openclaw/skills/jest-generate-test.yamlname: jest:generate-test description: Generate and run Jest test for current file steps: - name: Create test directory command: mkdir -p __tests__ - name: Save test code command: echo {{input}} __tests__/$(basename {{file}} .ts).test.ts - name: Run test command: npm test -- --testPathPattern__tests__/$(basename {{file}} .ts).test.ts{{input}}是 Claude 返回的内容{{file}}是当前文件路径。这种模板化设计让“AI 生成”和“人工执行”的边界无比清晰。3.4 OpenClaw本地部署、Skill 开发与延迟问题的终极解法OpenClaw 是 Vibe Coding 的“执行引擎”但也是最容易出问题的一环。网上教程常教你npm install -g openclaw结果装完发现命令不存在——因为 OpenClaw 的 CLI 工具链和 VSCode 插件是分离的且 CLI 依赖 Rust 编译环境。本地部署全流程macOS/Linux 亲测安装 Rustcurl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh然后重启终端。安装 OpenClaw CLIcargo install openclaw-cli不是 npm。验证openclaw --version应返回0.12.3。安装 VSCode 插件扩展市场搜OpenClaw安装openclaw-dev.openclaw。关键链接在 VSCode 设置里找到OpenClaw: Cli Path填入~/.cargo/bin/openclawmacOS/Linux或%USERPROFILE%\.cargo\bin\openclaw.exeWindows。这是插件调用 CLI 的桥梁填错则所有 Skill 无法执行。解决“OpenClaw 为什么会延迟”——直击网络与缓存双瓶颈延迟主要来自两处网络 DNS 解析OpenClaw 默认调用api.openclaw.dev国内 DNS 解析慢。解决方案在~/.openclaw/config.yaml中添加api: base_url: https://api-cn.openclaw.dev # 使用国内镜像节点Skill 缓存缺失每次执行 Skill 都要重新下载依赖。解决方案启用本地缓存openclaw cache enable openclaw cache set-dir ~/.openclaw/cache此后所有 Skill 的 Docker 镜像、Node.js 依赖都会本地存储首次执行可能 5 秒第二次起 300ms。开发你自己的 Skill一个真实案例自动格式化 JSON 配置我们常遇到package.json被多人编辑后格式混乱。手动prettier --write package.json太麻烦。用 OpenClaw 写个 Skill创建~/.openclaw/skills/format-json.yamlname: format:json description: Format JSON files with Prettier triggers: - file: *.json steps: - name: Check if prettier exists command: which prettier on_failure: Install Prettier first: npm install -g prettier - name: Format current file command: prettier --write {{file}}在 VSCode 里打开任意.json文件右键 →OpenClaw: Run Skill→format:json。进阶添加triggers后只要保存.json文件Skill 就自动执行。这才是真正的“无感自动化”。4. 实战工作流从新建项目到上线的 5 个关键环节拆解4.1 新建项目告别create-react-app用 Vibe Coding 一键初始化传统方式npx create-react-app my-app→ 等 3 分钟 → 进入目录 →npm start→ 看白屏。Vibe Coding 方式全程 47 秒且自动生成符合团队规范的代码结构。第一步VSCode 里Cmd/Ctrl Shift P→OpenClaw: Run Skill→ 选择project:init-react这个 Skill 的 YAML 定义如下name: project:init-react description: Initialize a React project with TypeScript, ESLint, Prettier, and Vite steps: - name: Create Vite project command: npm create vitelatest {{input}} -- --template react-ts - name: Install dependencies command: cd {{input}} npm install - name: Install dev tools command: cd {{input}} npm install -D eslint prettier typescript-eslint/eslint-plugin typescript-eslint/parser - name: Setup ESLint config command: cd {{input}} npx eslint --init{{input}}是你输入的项目名如my-dashboard。执行后OpenClaw 自动创建目录、安装依赖、初始化 ESLint。第二步进入项目用 Claude Code 生成首页骨架打开src/App.tsx删除所有内容输入// TODO: 创建一个仪表盘首页包含1. 顶部导航栏Logo 用户头像2. 左侧菜单Dashboard, Reports, Settings3. 主内容区欢迎语 今日统计卡片选中此注释右键 →Ask Claude。Claude 在 2.3 秒内返回完整 React 组件含useState、useEffect、响应式布局且所有 CSS 类名遵循 BEM 规范header__logo,menu__item。第三步用 Copilot 补全交互逻辑在src/App.tsx里把光标放在// TODO: 处理菜单点击这行Copilot 立即建议const [activeMenu, setActiveMenu] useStatestring(Dashboard); const handleMenuClick (menu: string) setActiveMenu(menu);接着输入div classNamemenu__item onClick{() handleMenuClick(Copilot 补全Dashboard并自动为其他菜单项生成相同逻辑。第四步OpenClaw 一键启动并打开浏览器Cmd/Ctrl Shift P→OpenClaw: Run Skill→dev:startSkill 内容name: dev:start steps: - name: Start dev server command: npm run dev - name: Open browser command: open http://localhost:5173执行完毕浏览器自动打开首页已渲染。实操心得这个流程里你真正敲键盘的时间不到 15 秒。其余全是“确认”和“选择”。Vibe Coding 的核心价值正在于把“机械劳动”压缩到极致把“决策时间”释放出来——比如当 Claude 返回的导航栏代码里user avatar是用img标签还是svg图标这个选择才真正体现你的专业判断。4.2 日常开发如何用三者协同完成一个“用户登录”功能以实现一个带 JWT 验证的登录表单为例展示 Vibe Coding 如何把 2 小时的工作压缩到 12 分钟需求定义Claude Code 的主场新建src/features/auth/LoginForm.tsx输入// TODO: 实现登录表单包含邮箱输入框、密码输入框、登录按钮、错误提示区域。提交时调用 /api/login 接口成功后跳转到 /dashboard失败显示后端返回的错误信息。Ask Claude它返回一个完整的LoginForm组件含useState管理表单、useEffect处理跳转、fetch调用 API并自动添加zod表单验证即使你没提 zodClaude 基于 TypeScript 最佳实践主动引入。接口联调Copilot 的精准补全在LoginForm内光标放在fetch(/api/login, {后Copilot 立即建议method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ email, password })接着输入const response awaitCopilot 补全fetch(...)并自动添加if (!response.ok) throw new Error(...)错误处理。错误处理增强Claude Code 的深度推理选中整个fetch块右键 →Ask Claude→ 输入“增强错误处理如果后端返回 401清空本地 token如果返回 422解析 errors 字段并显示在对应输入框下方”。Claude 返回修改后的代码精确插入if (response.status 401) localStorage.removeItem(token)和动态错误渲染逻辑。测试覆盖OpenClaw Claude Code 联动Cmd/Ctrl Shift P→OpenClaw: Run Skill→test:generate-loginSkill 定义name: test:generate-login steps: - name: Generate test file command: echo {{claude_output}} src/features/auth/LoginForm.test.tsx - name: Run test command: npm test -- --testPathPatternLoginForm.test.tsx其中{{claude_output}}是 Claude 生成的测试代码你提前让 Claude 写好“为 LoginForm 写 Jest 测试覆盖成功登录、邮箱错误、密码错误三种场景”。提交前检查OpenClaw 的自动化守门Cmd/Ctrl Shift P→OpenClaw: Run Skill→pr:checkSkill 执行npm run lint检查代码风格npm run type-check检查 TypeScript 类型git diff --staged检查是否有意外修改如果全部通过自动打开 GitHub PR 模板否则高亮失败项。整个过程你没有一次打开浏览器查文档没有