vibe-coding-cn/workflow.md

开发工作流

本文档描述 Obsidian + Vibe Kanban + Claude Code 三者协作的工作流程

三者角色定位

角色	定位	特点
Obsidian	设计中心	批量规划、可视化设计、长期文档
Vibe Kanban	任务中心	状态管理、进度追踪、快速创建
Claude Code	执行中心	连接两者，执行开发

任务创建的两种路径

路径 A：从 Kanban 直接创建（快速任务）

用户在 Kanban 创建任务
         ↓
Claude Code 读取任务
         ↓
Claude Code 查阅 Obsidian 文档理解上下文
         ↓
执行开发
         ↓
更新 Kanban 状态

适用场景：bug 修复、小功能迭代、不需要详细设计的任务

路径 B：从 Obsidian Canvas 批量创建（规划任务）

用户在 Obsidian Canvas 设计架构
         ↓
添加任务卡片（带 project/depends 字段）
         ↓
Claude Code 解析 Canvas
         ↓
同步到对应的 Kanban 项目
         ↓
按依赖顺序执行开发
         ↓
更新 Kanban 状态

适用场景：新功能规划、前后端联动开发、批量任务创建

数据同步方向

从 → 到	方式	说明
Obsidian → Kanban	手动命令	Canvas 任务卡片同步到看板
Kanban → Claude	自动读取	开发时读取任务列表
Claude → Kanban	自动更新	完成后更新任务状态
Obsidian → Claude	只读查阅	读取架构文档理解需求

三者关系

┌─────────────────────────────────────────────────────────────────┐
│  Obsidian (文档中心 - 单一数据源)                                  │
│  路径: /Users/jamesw/dev_workspace/vibe-coding-cn/tg-live-game   │
│  ├── 架构设计 (*.canvas)                                         │
│  ├── 需求文档                                                    │
│  └── 任务卡片 → 同步到 Kanban                                     │
└─────────────────────────────────────────────────────────────────┘
                         ↓ 读取文档 / 同步任务
┌─────────────────────────────────────────────────────────────────┐
│  Vibe Kanban (任务管理)                                           │
│  ├── tg-live-game-hono: 7c6bb2ce-90a2-4e96-bc04-5facdcdb337f    │
│  ├── tg-live-game-web:  32214e97-f833-485f-8c7c-cf4d82327e0b    │
│  └── 任务状态: todo → inprogress → inreview → done               │
└─────────────────────────────────────────────────────────────────┘
                         ↓ 领取任务 / 执行开发
┌─────────────────────────────────────────────────────────────────┐
│  Claude Code (代码开发)                                           │
│  启动目录: /Users/jamesw/dev_workspace/frontend/tg-live-game/    │
│  ├── tg-live-game-hono/  (后端)                                  │
│  └── tg-live-game-web/   (前端)                                  │
└─────────────────────────────────────────────────────────────────┘

多项目协作工作流

场景：同时设计前后端功能

当一个功能需要前后端同时开发时（如"用户列表"功能）：

1. Obsidian 设计阶段
   ├── 在 canvas 画架构图
   └── 创建两个关联的任务卡片
       ├── 任务20260103-01-hono (后端 API)
       └── 任务20260103-01-web  (前端页面)

2. 任务同步阶段
   ├── 解析任务卡片的 project 字段
   ├── hono 任务 → tg-live-game-hono Kanban
   └── web 任务 → tg-live-game-web Kanban

3. Claude Code 开发阶段
   ├── 在父目录 tg-live-game 启动
   ├── 读取关联任务，理解依赖关系
   ├── 先开发后端 (depends 优先)
   └── 再开发前端

4. 代码提交阶段
   ├── cd tg-live-game-hono && git commit
   └── cd tg-live-game-web && git commit

任务卡片格式

单项目任务

任务YYYYMMDD-NN

任务标题

project: tg-live-game-hono

1. 需求描述
2. 具体要求

关联任务（前后端）

后端任务:

任务YYYYMMDD-NN-hono
─────────────────
后端：用户列表 API

project: tg-live-game-hono
related: 任务YYYYMMDD-NN-web

1. 实现 GET /api/users
2. 返回分页数据

前端任务:

任务YYYYMMDD-NN-web
─────────────────
前端：用户列表页面

project: tg-live-game-web
related: 任务YYYYMMDD-NN-hono
depends: 任务YYYYMMDD-NN-hono

1. 调用用户列表 API
2. 表格展示用户数据

字段说明

字段	含义	用途
project	目标 Kanban 项目名	决定任务创建到哪个看板
related	关联任务编号	表示任务之间的关系
depends	依赖任务编号	表示需要先完成的任务

文件路径映射

位置	路径	用途
Obsidian 项目文档	vibe-coding-cn/tg-live-game/	架构设计、需求文档
Obsidian 后端文档	vibe-coding-cn/tg-live-game/tg-live-game-hono/	后端架构
Obsidian 前端文档	vibe-coding-cn/tg-live-game/tg-live-game-web/	前端架构
代码父目录	frontend/tg-live-game/	Claude Code 启动位置
后端代码	frontend/tg-live-game/tg-live-game-hono/	Hono API
前端代码	frontend/tg-live-game/tg-live-game-web/	Vue 应用

Claude Code 启动说明

# 多项目开发（推荐）
cd /Users/jamesw/dev_workspace/frontend/tg-live-game
claude

# 单项目开发（仅后端）
cd /Users/jamesw/dev_workspace/frontend/tg-live-game/tg-live-game-hono
claude

# 单项目开发（仅前端）
cd /Users/jamesw/dev_workspace/frontend/tg-live-game/tg-live-game-web
claude

交替式开发模式（批量任务）

当 Obsidian 一次性创建多个前后端任务，需要交替开发和验证时：

依赖链设计

用 depends 字段串联任务，形成执行顺序：

任务01-hono (后端 API A)     ← 无依赖，最先执行
    ↓
任务01-web  (前端调用 A)     depends: 任务01-hono
    ↓
任务02-hono (后端 API B)     depends: 任务01-web
    ↓
任务02-web  (前端调用 B)     depends: 任务02-hono
    ↓
...

Canvas 中的表示

┌──────────────────┐     ┌──────────────────┐
│ 任务01-hono      │ ──→ │ 任务01-web       │
│ 后端：用户列表   │     │ 前端：用户列表   │
│ project: hono    │     │ depends: 01-hono │
└──────────────────┘     └──────────────────┘
                              │
                              ↓ depends
┌──────────────────┐     ┌──────────────────┐
│ 任务02-hono      │ ──→ │ 任务02-web       │
│ 后端：用户详情   │     │ 前端：用户详情   │
│ depends: 01-web  │     │ depends: 02-hono │
└──────────────────┘     └──────────────────┘

执行顺序

Claude Code 按 depends 链自动排序执行：

1. 任务01-hono → 开发后端 API A
2. 任务01-web → 开发前端调用 A，验证
3. 任务02-hono → 开发后端 API B
4. 任务02-web → 开发前端调用 B，验证

相关文档

• [[architecture-v1]] - 整体系统架构
• [[tg-live-game-hono/_project]] - 后端项目配置
• [[tg-live-game-hono/workflow]] - 后端开发工作流
• [[tg-live-game-web/_project]] - 前端项目配置