第三章. ViBe KanBan 任务管理进阶

我们将分四个阶段掌握任务管理：

阶段一：任务创建的三种方式（10 分钟）

• 手动创建任务
• 使用 Task Tags 插入模板
• 通过 MCP 批量创建任务

阶段二：任务尝试（Task Attempts）机制（8 分钟）

• 理解 Task Attempts 的设计理念
• 何时需要创建新的 Attempt
• 切换 Agent 与 Base Branch

阶段三：子任务（Subtasks）的应用（10 分钟）

• 将复杂任务拆解为子任务
• 子任务的分支继承与合并策略
• 父任务与子任务的依赖关系

阶段四：任务状态流转与自动化（7 分钟）

• 理解任务生命周期
• 配置 GitHub Integration 自动同步 PR
• 任务完成后的通知机制

3.1. 任务创建的三种方式

Vibe Kanban 提供了三种任务创建方式，分别适用于不同的开发场景。

3.1.1. 手动创建：使用任务表单

这是最直接的任务创建方式，适合单个任务的快速创建。

步骤 1：打开任务创建对话框

在项目看板页面，点击右上角的 “+” 按钮（或使用快捷键 C）。

步骤 2：填写任务基本信息

任务创建对话框包含以下字段：

步骤 3：编写任务描述

任务描述是 Agent 理解需求的唯一依据，必须清晰、具体、可执行。

❌ 错误示例（过于模糊）：

1

实现登录功能

这个描述缺少关键信息：

• 登录方式是什么？（邮箱、手机号、第三方登录？）
• 需要实现哪些功能？（记住密码、忘记密码？）
• UI 设计是什么样的？

✅ 正确示例（清晰具体）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

## 任务目标
实现用户登录页面，支持邮箱 + 密码登录。

## 功能需求
1. 登录表单包含以下字段：
   - 邮箱输入框（必填，需验证邮箱格式）
   - 密码输入框（必填，最少 8 位）
   - "记住我" 复选框
   - "忘记密码" 链接

2. 表单验证规则：
   - 邮箱格式：使用正则表达式验证
   - 密码强度：至少包含一个大写字母、一个小写字母、一个数字

3. 登录成功后：
   - 将 JWT Token 存储到 localStorage
   - 跳转到 `/dashboard` 页面

4. 登录失败时：
   - 显示错误提示（"邮箱或密码错误"）
   - 输入框标红

## 技术要求
- 使用 React Hook Form 管理表单状态
- 使用 Zod 进行表单验证
- 使用 Axios 调用后端 API：`POST /api/auth/login`
- 使用 TailwindCSS 实现 UI

## 验收标准
- [ ] 表单验证正常工作
- [ ] 登录成功后正确跳转
- [ ] 登录失败时显示错误提示
- [ ] 代码通过 ESLint 检查

任务描述的最佳实践：

步骤 4：选择执行 Agent

在 “Agent” 下拉菜单中，选择适合当前任务的 Agent。

步骤 5：创建并启动任务

填写完成后，你有两个选择：

点击 “Create & Start” 后，Vibe Kanban 会：

1. 创建任务分支（如 feature/user-login）
2. 创建 Worktree
3. 执行 Setup Scripts
4. 启动 Agent

3.1.2. 使用 Task Tags 插入可复用模板

在实际开发中，我们经常会遇到相似的任务（如 “修复 Bug”、“实现 CRUD 接口”）。为了避免重复编写任务描述，Vibe Kanban 提供了 Task Tags 功能。

什么是 Task Tags？

Task Tags 是预定义的文本片段，可以在任务描述中通过 @tag_name 语法快速插入。

步骤 1：创建 Task Tag

打开 Vibe Kanban 设置页面，点击左侧菜单的 “Task Tags”。

点击 “Add Tag” 按钮，创建一个新的 Tag。

示例 1：Bug 修复模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

## Bug 描述
[简要描述 Bug 现象]

## 复现步骤
1. 打开页面 [URL]
2. 点击 [按钮]
3. 观察到 [错误现象]

## 预期行为
[描述正确的行为]

## 实际行为
[描述当前的错误行为]

## 环境信息
- 浏览器：Chrome 120
- 操作系统：Windows 11
- 项目版本：v1.2.3

## 错误日志
[粘贴控制台错误信息]

## 修复建议
[可选：提供修复思路]

示例 2：CRUD 接口模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

## 接口需求
实现 [资源名称] 的 CRUD 接口。

## 接口列表
1. **创建资源**
   - 路径：`POST /api/[resource]`
   - 请求体：`{ name: string, description: string }`
   - 响应：`{ id: number, name: string, description: string, createdAt: string }`

2. **查询资源列表**
   - 路径：`GET /api/[resource]`
   - 查询参数：`page`, `pageSize`, `keyword`
   - 响应：`{ data: [], total: number }`

3. **查询单个资源**
   - 路径：`GET /api/[resource]/:id`
   - 响应：`{ id: number, name: string, description: string }`

4. **更新资源**
   - 路径：`PUT /api/[resource]/:id`
   - 请求体：`{ name: string, description: string }`
   - 响应：`{ id: number, name: string, description: string, updatedAt: string }`

5. **删除资源**
   - 路径：`DELETE /api/[resource]/:id`
   - 响应：`{ success: true }`

## 技术要求
- 使用 Express Router
- 使用 Prisma ORM 操作数据库
- 添加参数验证（使用 Zod）
- 添加错误处理中间件

## 验收标准
- [ ] 所有接口通过 Postman 测试
- [ ] 单元测试覆盖率 > 80%
- [ ] API 文档已更新

步骤 2：在任务描述中使用 Task Tag

创建任务时，在描述框中输入 @，Vibe Kanban 会自动弹出 Tag 列表。

选择 @bug_report 后，模板内容会自动插入到描述框中。你只需要填写具体的 Bug 信息即可。

Task Tags 的高级用法：

技巧 1：嵌套 Task Tags

你可以在一个 Task Tag 中引用另一个 Task Tag。

1
2
3
4
5

## 任务描述
@bug_report

## 修复方案
@code_review_checklist

技巧 2：使用变量占位符

在 Task Tag 中使用 [变量名] 作为占位符，提醒自己填写具体内容。

1
2
3
4
5
6
7
8

## 接口路径
POST /api/[资源名称]

## 请求体
{
  "[字段1]": "string",
  "[字段2]": "number"
}

3.1.3. 通过 MCP 批量创建任务

当你需要创建大量相似的任务时（如将一个 Epic 拆解为 10 个 Story），手动创建会非常低效。Vibe Kanban 提供了 MCP（Model Context Protocol）集成，允许 AI Agent 自动创建任务。

什么是 MCP？

MCP 是一个标准化的协议，允许 AI Agent 调用外部工具。Vibe Kanban 既是 MCP Client（可以调用其他 MCP Server），也是 MCP Server（可以被其他 AI 工具调用）。

使用场景：

步骤 1：配置 Vibe Kanban 作为 MCP Server

以 Claude Code 的配置文件（~/Library/Application Support/Claude/claude_desktop_config.json），添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  "mcpServers": {
    "vibe_kanban": {
      "args": [
        "/c",
        "npx",
        "-y",
        "vibe-kanban@latest",
        "--mcp"
      ],
      "command": "cmd"
    },
  }
}

重启 Claude Code 后，你会在工具列表中看到 Vibe Kanban 的 MCP 工具。

步骤 2：使用 Claude Code 批量创建任务

在 Claude Code 中，输入以下提示词：

1
2
3
4
5
6
7
8

我有一个 PRD 文档（见附件），请帮我将其拆解为多个可执行的任务，并使用 Vibe Kanban MCP 工具创建这些任务。

要求：
1. 每个任务的标题格式为 "Story X: [功能名称]"
2. 任务描述包含：功能需求、技术要求、验收标准
3. 所有任务的 Base Branch 为 `main`
4. 前端任务使用 GEMINI_FLASH Agent
5. 后端任务使用 CLAUDE_CODE Agent

Claude 会分析 PRD 文档，然后调用 Vibe Kanban 的 create_task MCP 工具批量创建任务。

步骤 3：验证任务创建结果

回到 Vibe Kanban 看板，你会看到 Claude 自动创建的所有任务。

MCP 批量创建的优势：

3.2. 任务尝试（Task Attempts）机制

在实际开发中，一个任务可能需要多次尝试才能完成。例如：

• 第一次尝试使用 Gemini，但生成的代码质量不佳
• 第二次尝试切换到 Claude Code，重新实现

Vibe Kanban 的 Task Attempts 机制允许你在不创建新任务的情况下，重新执行同一个任务。

3.2.1. 理解 Task Attempts 的设计理念

核心概念：

• 一个 Task 可以有多个 Attempts（尝试）
• 每个 Attempt 对应一个独立的 Worktree 和 Git 分支
• 只有最新的 Attempt 会被合并到主分支

关系图：

为什么需要 Attempts？

3.2.2. 何时需要创建新的 Attempt

场景 1：Agent 生成的代码质量不佳

假设你创建了一个任务 “实现商品列表页”，使用 Gemini 执行。但 Agent 生成的代码存在以下问题：

• UI 布局不符合设计稿
• 缺少错误处理
• 代码风格不统一

此时，你可以创建一个新的 Attempt，重新执行任务。

步骤 1：打开任务详情

点击任务卡片，进入任务详情页面。

步骤 2：点击 “New Attempt”

在任务详情页面右上角，点击 “New Attempt” 按钮。

步骤 3：配置新的 Attempt

在弹出的对话框中，你可以修改以下配置：

步骤 4：启动新的 Attempt

点击 “Create & Start” 后，Vibe Kanban 会：

1. 创建新的任务分支（如 feature/product-list-attempt-2）
2. 创建新的 Worktree
3. 执行 Setup Scripts
4. 启动新的 Agent

关键点：

• 旧的 Attempt 不会被删除，你可以随时查看其代码
• 新的 Attempt 会从 Base Branch 重新开始，不会继承旧 Attempt 的代码

场景 2：切换技术方案

假设你最初计划使用 REST API 实现后端接口，但在开发过程中决定改用 GraphQL。此时，你可以创建一个新的 Attempt，切换 Base Branch 到包含 GraphQL 配置的分支。

步骤 1：准备新的 Base Branch

1
2
3
4
5
6
7
8

# 在主项目中创建 GraphQL 配置分支
git checkout -b feature/graphql-setup
# 安装 GraphQL 依赖
pnpm add apollo-server graphql
# 提交配置
git add .
git commit -m "feat: add GraphQL setup"
git push origin feature/graphql-setup

步骤 2：创建新的 Attempt

在任务详情页面，点击 “New Attempt”，将 Base Branch 修改为 feature/graphql-setup。

步骤 3：更新任务描述

在任务描述中，明确说明使用 GraphQL 实现：

1
2
3
4

## 技术要求
- 使用 Apollo Server 实现 GraphQL API
- 定义 User 类型和 Query
- 实现 `users` 和 `user(id: ID!)` 查询

场景 3：对比不同 Agent 的效果

如果你想对比 Gemini 和 Claude Code 在同一个任务上的表现，可以创建两个 Attempts。

步骤 1：创建 Attempt 1（Gemini）

• Agent: GEMINI_FLASH
• 任务描述：保持不变

步骤 2：创建 Attempt 2（Claude Code）

• Agent: CLAUDE_CODE
• 任务描述：保持不变

步骤 3：对比代码质量

在任务详情页面，你可以切换不同的 Attempts，查看它们生成的代码。

对比维度：

3.2.3. Attempts 的分支管理策略

每个 Attempt 对应一个独立的 Git 分支，分支命名规则如下：

1

feature/[task-name]-attempt-[number]

示例：

合并策略：

只有最新的 Attempt 会被合并到主分支。旧的 Attempts 会被保留在 Git 历史中，但不会影响主分支。

清理旧的 Attempts：

如果你确定不再需要旧的 Attempts，可以手动删除它们的分支：

1
2
3
4
5

# 删除本地分支
git branch -D feature/user-login-attempt-1

# 删除远程分支
git push origin --delete feature/user-login-attempt-1

3.3. Story 驱动的子任务拆解模式

在 Vibe Kanban 中，最优雅的协作方式不是让 AI 去操作看板，而是让 AI 在代码仓库中写规划文档，Vibe KanBan支持创建子代理

那么我们的思路就是，让主代理负责将需求PRD文档拆分为Epic（大型任务清单），再将大型任务清单整理为依赖关系清晰的Story故事集合

我们利用 Git Worktree 的特性，让主任务（Epic）的 Agent 直接在项目中创建一个 stories/ 目录，并将复杂的 Epic 拆解为多个按顺序编号的 Story 文件（如 1-1-setup.md, 1-2-nav.md）。用户只需要看着这些文件，手动分发任务即可。

3.3.1. 核心流程：Epic -> Stories -> Tasks

这种模式的核心在于：用文件来管理任务依赖。

1. Epic (规划者)：拥有完整的 Git Worktree，它不写代码，只负责规划，在 stories/ 目录下生成 Markdown 文件。
2. Stories (文件)：以 阶段-序号-名称 命名（如 1-1, 2-1），天然决定了执行顺序。
3. Task (执行者)：用户根据 Story 文件手动创建任务，AI 执行时直接读取对应的 Story 文件作为需求。

3.3.2. 实战：拆解 Todo 模块

假设我们有一个空的 React 项目，现在要实现 Todo 模块。

步骤 1：启动规划任务

创建一个名为 [Epic] Todo 模块规划 的任务并启动。在 Chat 中输入以下指令（这是你的核心 Prompt）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Role
你是一个 Tech Lead。

# Goal
请将当前项目的 Todo 模块需求拆解为具体的 User Stories。

# Action
请在项目根目录下创建 `stories/todo/` 文件夹。
然后在此文件夹下生成一系列 Markdown 文件，文件名必须严格遵循 `阶段-序号-功能.md` 的格式（例如 `1-1-types.md`）。

# Rules
1. **阶段划分**：
   - 1-x：基础建设（无依赖，可并行）
   - 2-x：核心功能（依赖 1-x）
   - 3-x：集成与页面（依赖 2-x）

2. **内容要求**：
   - 每个文件必须包含：目标、依赖的文件、允许修改的文件范围。
   - 并在文件中明确写出："前置依赖：Story 1-1" 这样的字样。

请直接生成文件，不要写任何代码实现。

步骤 2：AI 生成 Story 文件

AI 会在你的项目中生成如下文件结构。因为都在同一个 Git Worktree 中，你可以直接在左侧文件树看到它们：

1
2
3
4
5
6
7

stories/todo/
├── 1-1-types.md       (定义 Todo 接口)
├── 1-2-utils.md       (创建 ID 生成器工具)
├── 2-1-input.md       (开发输入组件，依赖 1-1)
├── 2-2-list.md        (开发列表组件，依赖 1-1)
└── 3-1-integration.md (在 App.tsx 集成，依赖 2-1, 2-2)

步骤 3：用户手动分发 (The Human Loop)

这一步由你控制节奏，既灵活又安全：

1. 并行阶段 1：你看到 1-1 是第一阶段，直接创建两个 Vibe Kanban 任务，把这两个文件的内容分别贴进去（或者告诉 AI 读取这个文件）。
2. 并行阶段 2：等阶段 1 完成后，你基于1-1创建 2-1 和 2-2 任务。由于都在一个仓库里，执行阶段 2 的 Agent 能直接读取到阶段 1 提交的代码。
3. 收尾阶段 3：最后创建 3-1 任务进行集成。

3.3.3. 这种模式的巨大优势