VibeSkill

All-Skill 方法论的 Vibe Coding 实战指南 —— 不止教你怎么写代码，更教你怎么用 AI 做对的产品决策。

关于

VibeSkill 是 All-Skill 方法论的官方学习门户，将 122 个 Skill、33 个编排器、16+ 数据契约的完整体系，转化为对新手友好的渐进式学习体验。

核心特色

• 方法论驱动：基于 All-Skill 122 个 AI Agent Skill 体系，不是零散技巧
• 做正确的事，然后正确地做事：PM 确保方向，UI/Backend 确保执行
• 人机协作 4 级分工：明确 AI 与人的分工边界
• 契约驱动一切：PRD 驱动设计、OpenAPI 驱动联调、设计令牌驱动 UI
• 反模式警示：不只教你怎么做，更教你避免做错

快速开始

# 安装依赖
npm install

# 本地开发
npm run docs:dev

# 构建
npm run docs:build

# 预览构建结果
npm run docs:preview

部署

本项目配置为自动部署到 GitHub Pages：

1. 在仓库 Settings > Pages 中，Source 选择 "GitHub Actions"
2. 推送代码到 main 分支即可自动触发部署

项目结构

vibeskill/
├── docs/                       # VitePress 文档目录
│   ├── .vitepress/             # VitePress 配置
│   │   ├── theme/              # 自定义主题
│   │   │   ├── components/     # Vue 交互组件
│   │   │   │   ├── SkillCardWall.vue
│   │   │   │   ├── PathRecommender.vue
│   │   │   │   ├── StageCard.vue
│   │   │   │   ├── MethodologyTrace.vue
│   │   │   │   └── AntiPatternCard.vue
│   │   │   ├── custom.css      # 自定义样式
│   │   │   └── index.js        # 主题入口
│   │   └── config.mjs          # VitePress 配置
│   ├── zh-cn/                  # 中文内容
│   │   ├── index.md            # 首页
│   │   ├── stage-0a/           # 快速入门
│   │   ├── stage-0b/           # 思维深化
│   │   ├── stage-1/            # 产品思维
│   │   ├── stage-2/            # 设计与前端
│   │   ├── stage-3/            # 后端与全栈
│   │   ├── stage-4/            # 上线与迭代
│   │   └── appendix/           # 附录
│   └── public/                 # 静态资源
├── PRODUCT.md                  # 产品定义（ext-impeccable）
├── DESIGN.md                   # 设计系统（ext-impeccable）
└── package.json

技术栈

• VitePress — 静态站点生成器
• Vue 3 — 交互组件
• GitHub Pages — 部署托管

设计系统

• 配色：米白底色 + 珊瑚橙强调色 + 蓝/紫/绿/橙领域色
• 字体：Manrope（标题）+ Inter（正文）+ JetBrains Mono（代码）
• 风格：清晰、温暖、有结构的教育品牌感

与 All-Skill 的关系

维度	All-Skill	VibeSkill
定位	完整方法论体系	学习门户和实战指南
内容	122 个 SKILL.md	简化教程 + 交互组件
用户	AI Agent / 进阶用户	新手 / 学习者
关系	提供"弹药"	教你"怎么打枪"

贡献

欢迎提交 Issue 和 PR！请遵循 All-Skill 的 CONTRIBUTING.md 规范。

许可

Apache 2.0