让 Claude Code 变成 24 小时全自动开发引擎!VIBE-Claude-Plugin 开源实战

一条/vibe命令,让 Claude Code 变成 24 小时全自动开发引擎!VIBE-Claude-Plugin 开源实战

我开源了一个 Claude Code 插件VIBE-Claude-Plugin,让 Claude Code 从"问答式代码助手"升级成"能主动澄清需求、规划架构、模块化交付的工程系统"。本文带你 5 分钟跑通完整工作流,并分享我在开发过程中踩过的 14 个真实坑。


📑 目录

  • 一、为什么我要做这个插件
  • 二、它和普通代码生成有什么不一样
  • 三、5 分钟安装教程
  • 四、实战演示:一条命令跑通全流程
  • 五、核心架构:22 个 Skill 模块的全链路编排
  • 六、企业级工程化的四个关键设计
  • 七、安全审查:AI 必须自己装工具,绝不静默降级
  • 八、我踩过的 14 个坑,希望你不再踩
  • 九、适合谁用 / 不适合谁用
  • 十、项目地址与后续规划

一、为什么我要做这个插件

用过 Claude Code 的同学应该都有这个感受:单次任务它很强,但任务一长就崩

具体表现:

  • 需求还没对齐就开始写代码,写到一半发现方向错了
  • 一个上下文里塞了 10 个模块,改着改着就互相冲突
  • 前后端契约飘移,到联调时才发现字段对不上
  • 修一个 bug 顺手破坏了另一个功能
  • 长时间运行后 AI 开始"上下文溢出",胡言乱语

Claude Code 本身是优秀的通用 Agent,但它缺的不是"写代码的能力",而是**“工程化的流程”**。

VIBE-Claude-Plugin就是来补这一块的。它不是 prompt 包,不是单次生成器,而是一套文档驱动 + 模块化交付 + 长链路自动推进的工程化工作流。


二、它和普通代码生成有什么不一样

维度普通 AI 代码生成VIBE-Claude-Plugin
输入必须写一条专业、完整的 prompt一句模糊的中文想法就行
需求阶段用户自己想清楚AI 主动追问,把模糊需求问明白
文档产物没有PRD / 架构 / 数据库 / API / tasks.md
编码方式一大坨代码一次性吐出来按最小模块逐个实现
长链路执行跑两步就停下无人值守循环到交付
测试/审查/安全全靠用户自己加内置完整工作流

最直观的体验差异是:你不需要先写出一条专业的 prompt,只需要说出你想做什么

/vibe 帮我做一个深色工业风的待办事项网站,后端用 Node.js 存 SQLite,按钮要有物理反馈感。

然后它就会问你:“主题色你想偏蓝还是偏绿?”“要不要做用户登录?” 把需求问清楚后,再开始干活。


三、5 分钟安装教程

方式一:通过 Marketplace 安装(推荐)

打开~/.claude/settings.json,加入:

{"extraKnownMarketplaces":{"vibe":{"source":{"source":"github","repo":"xushuodasd/VIBE-Claude-Plugin"}}}}

重启 Claude Code,然后在聊天框输入:

/plugininstallvibe-claude-plugin@vibe

方式二:Git 克隆到插件目录(更稳)

如果方式一报错,直接克隆整个仓库到插件目录:

Windows PowerShell:

New-Item-ItemType Directory-Force-Path"$env:USERPROFILE\.claude\plugins"|Out-Nullgit clone https://github.com/xushuodasd/VIBE-Claude-Plugin.git"$env:USERPROFILE\.claude\plugins\vibe-claude-plugin"

macOS / Linux:

gitclone https://github.com/xushuodasd/VIBE-Claude-Plugin.git ~/.claude/plugins/vibe-claude-plugin

验证安装

彻底重启Claude Code(Ctrl+C退出后重新claude启动),然后执行:

/plugins

列表里能看到vibe-claude-plugin就说明装好了。

⚠️关键提醒:必须克隆整个仓库,不能只复制skills/目录!否则/vibe命令不会出现。这是新手 90% 会踩的第一个坑。


四、实战演示:一条命令跑通全流程

步骤 1:用信任模式启动(减少权限打断)

claude--trust

步骤 2:触发/vibe

/vibe 我要做一个 SaaS 管理后台,深色风格,后端 Node.js + PostgreSQL,要有 RBAC 权限、单元测试和部署文档。

步骤 3:阶段一 · 需求对齐(AI 会主动提问)

AI 此时会扮演产品经理 + 架构师

  • 它会追问你:“要不要支持多租户?”“前端用 React 还是 Vue?”
  • 敲定后生成这些文档:
    • 📄 PRD(需求文档)
    • 🏗️ 架构设计
    • 🗄️ 数据库设计
    • 🔌 API 接口文档
    • tasks.md任务清单

最后它会问你:“是否可以开始全自动开发?”

你回复:“可以,开始吧”

步骤 4:阶段二 · 无人值守开发(AI 彻底闭嘴)

一旦你同意,AI 就化身研发总监 + 打工人的结合体:

  • 🔇彻底静默:不再问你任何问题,遇到报错自己修复
  • 🔄工作流循环:切分支 → 查 API 文档 → 写最小模块代码 → 跑测试 → 查安全漏洞 → 加 UI 动效 →git commit→ 在tasks.md打勾 → 下一个任务

你可以去喝杯咖啡,直到它把交付报告打印在屏幕上

步骤 5:上下文溢出了怎么办?

跑很久以后如果感觉 AI 变慢或胡言乱语,输入:

/clear

然后说一句:“读取 tasks.md,继续全自动开发”。它会瞬间满血复活,找回研发总监的状态继续干活。


五、核心架构:22 个 Skill 模块的全链路编排

插件参考了superpowers的设计模式,把软件工程生命周期拆成 22 个独立 Skill,由vibe-autopilot统一调度:

vibe-claude-plugin/ ├── .claude-plugin/ # 插件元数据 ├── commands/vibe.md # /vibe 命令入口 └── skills/ # 22 个全链路技能 ├── vibe-autopilot/ # 🔥 自动驾驶主引擎 ├── vibe-analyze-req/ # 新项目需求分析 ├── vibe-analyze-new/ # 已有项目分析 ├── vibe-architecture/ # 架构设计 ├── vibe-database/ # 数据库设计 ├── vibe-plan/ # 任务拆解 ├── vibe-frontend/ # 前端开发 ├── vibe-backend/ # 后端开发 ├── vibe-test/ # 测试 ├── vibe-review/ # 代码审查 ├── vibe-security/ # 安全审查 ├── vibe-ui-design/ # UI 设计 ├── vibe-ui-beautify/ # UI 美化与动效 ├── vibe-deploy/ # 部署 ├── vibe-integrate/ # 集成 └── ... (共 22 个)

核心模块速览

模块技能作用
调度中枢vibe-autopilot自动驾驶主流程
需求分析vibe-analyze-req/vibe-analyze-new新项目与已有项目需求分析
架构设计vibe-architecture/vibe-database架构和数据设计
交付实现vibe-frontend/vibe-backend最小模块编码
质量保障vibe-test/vibe-review测试与代码审查
安全审查vibe-security4 层安全扫描
视觉体验vibe-ui-design/vibe-ui-beautifyUI 设计与动效美化

💡注意命名区分

  • /vibe是用户输入的公开入口命令
  • vibe-autopilot是被/vibe调起的内部自动驾驶引擎

这两个名字不要混用,否则会以为/vibe-autopilot是个能直接执行的命令。


六、企业级工程化的四个关键设计

1. 文档驱动(Document-Driven)

所有编码动作(vibe-frontend/vibe-backend)前必须先验证对应的 API 接口文档存在

做到:无文档不开发,有文档 100% 对齐契约

2. 最小模块化(Minimal Modularization)

系统必须拆解为最小单元,例如:单一按钮组件、单独的数据持久层 DAO。

每个最小模块分配一次独立开发上下文,开发完成后再组合,避免记忆混乱。

3. 严格分层架构

  • 前端Pages → Components → Hooks → API Clients
  • 后端Controller → Service → Repository → Model

不允许跨层调用,保证代码可维护性。

4. 子智能体开发(Subagent Delegation)

由于 AI 上下文窗口的限制,让单个 AI 处理整个项目必然出现幻觉。

vibe-autopilot在调度时,对每个最小模块分配一次独立开发上下文,开发完成后再组合。这是企业级开发的关键设计。


七、安全审查:AI 必须自己装工具,绝不静默降级

这是我踩过最深的坑之一,单独拿出来说。

之前的版本有什么问题?

vibe-security/SKILL.md引用了npm auditsemgrepgitleaks等开源安全扫描工具,但插件本身:

  • ❌ 没有提供任何工具安装脚本
  • ❌ 没有工具可用性检测机制

用户系统里大概率没装这些工具,AI 执行扫描命令会直接报错,然后静默降级为纯 AI 审计,但报告中完全不体现降级状态。

实际效果:已知 CVE 扫不到、硬编码密钥扫不到、SAST 规则匹配跑不了,只剩 AI 逐行看代码的业务逻辑审计。给用户一种"做了完整安全扫描"的错觉。

现在怎么解决?

核心原则:用户不应手动安装任何工具,AI 负责装好一切。必须全装好才能跑,不存在降级模式。

新版本的vibe-security工作流:

  1. Step 0 · 工具可用性检测:执行任何扫描命令前,先检测工具是否安装,缺失时 AI 立即执行安装命令
  2. 层层解决依赖:semgrep 缺失 → 需要 pip → pip 缺失 → 需要 Python → AI 执行brew install python/apt install python3-pip/winget install Python.Python.3
  3. 装不上必须告诉用户:如果 AI 尝试了所有安装方式仍然失败,必须停下来明确告诉用户卡在哪个工具、失败原因、需要执行什么命令解决。绝不静默跳过,绝不假装扫过了
  4. 扫描报告头部包含工具可用性矩阵:每个工具标注 OK / INSTALLED,并附工具自动安装日志(初始状态、安装命令、最终状态)

4 层安全防御栈

┌─────────────────────────────────────────┐ │ Layer 1: 依赖漏洞扫描 (npm audit / pip-audit) │ ├─────────────────────────────────────────┤ │ Layer 2: 静态分析 SAST (semgrep) │ ├─────────────────────────────────────────┤ │ Layer 3: 密钥扫描 (gitleaks) │ ├─────────────────────────────────────────┤ │ Layer 4: AI 业务逻辑审计 │ └─────────────────────────────────────────┘

经验教训:单纯依靠 AI 审计会漏掉所有已知 CVE 漏洞,必须把开源工具和 AI 结合起来,才能做到全面扫描。


八、我踩过的 14 个坑,希望你不再踩

开发这个插件的过程中,我记录了 14 个真实踩坑,全部沉淀在AI_DEVELOPMENT_DOC.md里。挑几个最痛的分享:

坑 1:技能包安装 ≠ 插件安装

skills/单独复制到~/.claude/skills,只能让部分技能被自然语言命中,但commands/下的 slash command 不会生效,/vibe完全不出现。

解法:必须按标准插件安装到~/.claude/plugins/vibe-claude-plugin,包含整个仓库。

坑 2:commands/vibe.mdfrontmatter 格式不兼容

如果 frontmatter 格式不对,Claude Code 直接不注册/vibe

解法:采用纯 Markdown 说明文档格式,和本机已验证可用的插件命令保持一致。

坑 3:技能加载路径过深

Claude Code 识别自定义 skill 时强依赖目录结构。如果结构嵌套过深,或SKILL.md头部 YAML 元数据缺失,技能无法加载。

解法:所有技能必须在skills/一级子目录下,每个SKILL.md都有标准 YAML Frontmatter(包含namedescription)。

坑 4:长链路开发的上下文遗忘

24 小时全链路编程中,AI 进行到后期(如部署、交付)时,容易遗忘早期(如需求分析、架构设计)的约束条件。

解法:在工作流前置步骤中,强制要求 AI 读取并检查先前的产物文档(PRD、架构设计文档),以此重新加载上下文。

坑 5:前端动画性能爆炸

vibe-ui-beautify大量使用 CSS 动画或 JavaScript 物理引擎时,容易掉帧卡顿。

解法:优先用transformopacity等硬件加速属性;弹簧阻尼推荐Framer Motion并开启layout/will-change;低端设备做降级处理。

坑 6:对外命令名和内部引擎名混用

vibe-autopilot是内部技能名,/vibe是用户输入命令。早期文档混着写,用户误以为/vibe-autopilot能直接执行,导致首轮试用失败。

解法:所有对外文档统一口径——/vibe是公开入口,vibe-autopilot是内部引擎。

其余 8 个坑涉及 GitHub 国际化、开源协作模板、demo 资产标准等,详见仓库AI_DEVELOPMENT_DOC.md


九、适合谁用 / 不适合谁用

✅ 适合

  • 想让 Claude Code 更少人工盯守的开发者
  • 希望 AI 先把需求问明白再开发的产品经理
  • 本身不是专业开发者,但希望把想法落成项目的人
  • 想要 PRD + 架构 + 任务清单 + 编码一体化的团队
  • 中大型任务希望按最小模块逐步推进的人

❌ 不适合

  • 只想要一个简单 prompt 包的人
  • 偏向一次性快速代码生成的人
  • 不接受 AI 主动追问、希望完全听命执行的人

十、项目地址与后续规划

📦 项目地址

GitHub:https://github.com/xushuodasd/VIBE-Claude-Plugin

License:MIT(随便用,欢迎 Star ⭐)

🚀 后续规划

  • 自动化测试强化:增加 Jest/Cypress 自动化配置脚手架生成
  • MCP 深度集成:结合 Model Context Protocol,把技能升级为可自动调用数据库或 CI/CD 接口的执行体
  • 演示素材建设:补充 30~90 秒短视频、GIF 和真实案例
  • 安全工具链扩展:从 Node.js/Python/Go 扩展到 Rust(cargo audit)、Java(OWASP Dependency-Check)、Ruby(bundle audit)

🤝 如何贡献

欢迎提 Issue 和 Pull Request,优先级最高的贡献方向:

  • 更稳定的自动化约束
  • 更顺滑的安装体验
  • 更强的案例和演示素材
  • 更清晰的工作流文档

写在最后

如果你也用 Claude Code,但苦于:

  • 任务一长就失控
  • 需求反复重写
  • 上下文经常溢出
  • 想要工程化流程但不知道从哪开始

不妨花 5 分钟装上VIBE-Claude-Plugin试试。用一句模糊的中文想法,换一个能持续交付的工程系统

仓库地址:https://github.com/xushuodasd/VIBE-Claude-Plugin

如果对你有帮助,欢迎Star ⭐ + Fork 🍴 + 转 Issues,让更多被 Claude Code 长任务折磨的同学看到。


相关阅读推荐

  • Claude Code 官方文档
  • Model Context Protocol (MCP) 介绍
  • 多智能体协作的工程化实践
  • 文档驱动开发(DDD)方法论

📌作者注:本文所有内容基于VIBE-Claude-Plugin实际开发经验整理。文中提到的 14 个坑、4 层安全防御栈、22 个 Skill 模块均为当前版本真实存在的设计。如果你在安装或使用过程中遇到任何问题,欢迎在 GitHub Issues 反馈,我会持续优化。