Vibe Kanban
Cập nhật: 03/2026
1. Hiện trạng phát triển phần mềm
| Vấn đề | Biểu hiện | Giải pháp của Vibe Kanban |
|---|---|---|
| Mất kiểm soát tổng thể | Không biết agent nào đang làm gì, đã xong đến đâu | Kanban board real-time với status indicator: Running, Idle, Needs Attention |
| Review code phân tán | Phải mở từng terminal, từng IDE tab để xem diff | Changes panel tập trung — diff viewer unified/side-by-side, inline commenting |
| Prompt không nhất quán | Mỗi người viết issue theo cách riêng, agent hiểu sai hoặc thiếu ngữ cảnh | Tags — prompt template tái sử dụng, chèn vào issue bằng @tag_name |
| Không có nơi tổng hợp công việc | Yêu cầu nằm rải rác ở Notion, Jira, Excel, các chat app | Một board duy nhất tổng hợp toàn bộ công việc — đồng bộ real-time, cả team nhìn vào cùng một nguồn |
| Thiếu MCP thiết yếu của project | Mỗi project cần MCP riêng nhưng từng thành viên tự cấu hình — dễ thiếu các MCP căn bản đặc thù với project đó | MCP config gắn theo project trong Settings — cả team dùng chung, không ai bị thiếu |
| Branch management phức tạp | Phải tự tạo worktree, đặt tên branch, chạy lệnh git thủ công cho từng task — dễ nhầm nhánh khi làm song song nhiều việc | Workspace tự động tạo worktree + branch riêng cho mỗi task; push, tạo PR ngay trong giao diện, không cần terminal |
| Bị gắn chặt vào một máy | Agent đang chạy trên máy chính nhưng không thể theo dõi hay can thiệp khi rời khỏi chỗ ngồi | Host/Client model: máy chính là Host, điện thoại hoặc laptop khác đóng vai Client — kết nối từ xa để xem và điều khiển workspace mà không cần chạy lại instance mới |
2. Kiến trúc và tính năng cốt lõi
Vibe Kanban là công cụ quản lý tác vụ dạng kanban được thiết kế dành riêng cho developer làm việc với AI coding agent với triết lý cốt lõi: "Describe the work, review the diff, ship it."
2.1 Kiến trúc hai lớp: Issues + Workspaces
Issues — đại diện cho công việc cần làm (bug, feature, task):
- Tiêu đề, mô tả chi tiết, status, priority, assignee, tags
- Sub-issues để phân rã tác vụ phức tạp
Workspaces — môi trường thực thi tác vụ:
- Tự động tạo git worktree trong
.vibe-kanban-workspaces/ - Tự động tạo branch với prefix chuẩn (ví dụ:
vk/abc123-task-name) - Khởi động coding agent ngay trong worktree đó
- Một issue có thể kết nối với nhiều workspace, hữu ích khi xử lý feature lớn và cho phép chạy nhiều coding agent song song.
2.2 Tính năng nổi bật
Preview & Browser Testing:
- Tích hợp dev server ngay trong giao diện
- Click-to-component (Inspect mode) — click vào element trên UI, thông tin component tự động gửi vào chat agent (hỗ trợ React, Vue, Svelte, Astro and plain HTML)
- DevTools tích hợp (Console, Network, Elements, Resources, Sources, Info) — powered by Eruda
Inline Code Review:
- Hover vào dòng code → thêm comment → agent đọc và xử lý trong session tiếp theo
- Hiển thị GitHub PR review comments inline (toggle được)
Sessions — Quản lý context window:
- Mỗi workspace có nhiều session độc lập (dùng khi context window gần đầy)
- Các session dùng chung file nhưng không chia sẻ lịch sử hội thoại
- Chạy song song nhiều session với các agent khác nhau (Claude Code cho backend, Gemini cho frontend)
MCP Server tích hợp: Vibe Kanban tự expose MCP server — cho phép coding agent bên trong quản lý issue và workspace trực tiếp qua tool call:
{
"mcpServers": {
"vibe_kanban": {
"command": "npx",
"args": ["-y", "vibe-kanban@latest", "--mcp"]
}
}
}
VSCode Extension:
Extension ID: bloop.vibe-kanban — hỗ trợ VSCode, Cursor, Windsurf. Cung cấp Logs View, Diffs View, Processes View, Task Management ngay trong IDE.
3. Cách sử dụng Vibe Kanban hiệu quả
3.1 Quy trình làm việc chuẩn
Tạo Issue (mô tả rõ yêu cầu)
↓
Tạo Workspace (chọn agent + repo)
↓
Agent tự động code trên worktree riêng
↓
Review Changes + Inline Comment
↓
Gửi feedback cho agent (nếu cần sửa)
↓
Tạo Pull Request / Merge
3.2 Viết Issue hiệu quả
Issue là ngữ cảnh duy nhất mà agent nhận được khi bắt đầu workspace. Viết issue rõ ràng = agent làm đúng ngay lần đầu. Về bản chất, issue chính là prompt gửi tới agent — vì vậy áp dụng các framework prompt engineering sẽ cho kết quả tốt nhất.
Cấu trúc issue nên có (theo RACE Framework):
- Tiêu đề ngắn gọn:
[Feature] Tạo Button component - Nội dung issue: viết theo XML tags —
<role>,<action>,<context>,<expectation>
Ví dụ issue hoàn chỉnh cho tác vụ tạo UI component:
<role>Senior React developer chuyên component architecture</role>
<action>
Tạo Button component dùng chung cho toàn app
</action>
<context>
- Cần đọc các components hiện có trong src/components/ui/ để đồng bộ patterns
- Styling: Tailwind CSS, không dùng inline style
- Không thêm dependency mới
</context>
<expectation>
- Hỗ trợ variant: primary, secondary, ghost
- Props: size (sm/md/lg), disabled, loading (hiển thị spinner, block click)
- TypeScript với proper interface cho props
- Export default + named export, hỗ trợ className prop để override style
- File output: src/components/ui/Button.tsx
- Acceptance criteria:
- [ ] Render đúng với 3 variant
- [ ] Prop loading hiển thị spinner, disable click
- [ ] Không có TypeScript error
</expectation>
Dùng Tags để lưu template tái sử dụng: vào Settings → General → Tags → tạo tag new_ui_component, new_feature, v.v. → chèn vào issue bằng @new_ui_component
Ví dụ tag new_ui_component chứa sẵn phần khung RACE để điền nhanh:
<role>Senior React developer chuyên component architecture</role>
<action>
Tạo [TÊN_COMPONENT] component
</action>
<context>
- Cần đọc các components hiện có trong src/components/ui/ để đồng bộ patterns
- Styling: Tailwind CSS, không dùng inline style
- Không thêm dependency mới
</context>
<expectation>
- [YÊU_CẦU_CỤ_THỂ]
- TypeScript với proper interface cho props
- Export default + named export
- File output: src/components/ui/[tên-component].tsx
- Acceptance criteria:
- [ ] Render đúng các variant/props
- [ ] Không có TypeScript error
- [ ] Responsive trên mobile
</expectation>
3.3 Quản lý nhiều Agent song song
- Mỗi issue độc lập nên có thể chạy nhiều workspace cùng lúc mà không conflict
- Workspace sidebar hiển thị trạng thái real-time — kiểm tra
Needs Attention(biểu tượng bàn tay) để biết agent đang chờ phê duyệt - Khi context window gần đầy (context gauge cao) → tạo session mới thay vì tiếp tục session cũ
3.4 Quy trình Review Code
- Đợi agent chuyển sang trạng thái Idle
- Mở Changes panel — xem toàn bộ diff theo file tree
- Hover vào dòng có vấn đề → click icon comment → viết nhận xét cụ thể
- Gửi message tổng hợp cho agent: "Hãy xử lý các review comment"
- Lặp lại đến khi hài lòng → tạo PR
Chuyển đổi chế độ diff: Cmd/Ctrl + K → "Toggle Diff View Mode" (unified ↔ side-by-side)
3.5 Kiểm thử trên trình duyệt
- Cấu hình dev server trong Settings → Repos (ví dụ:
npm run dev) - Mở workspace → click "Start dev server"
- Preview tự động load URL được detect từ stdout
- Dùng Inspect mode (crosshair) để click vào component — thông tin tự động điền vào chat
- Chuyển sang Mobile mode để test responsive
3.6 Phím tắt quan trọng
| Tác vụ | Phím tắt |
|---|---|
| Mở Command Bar | Cmd/Ctrl + K |
| Tạo workspace mới | Cmd/Ctrl + K → n → Enter |
| Tạo Pull Request | Cmd/Ctrl + K → pr → Enter |
| Toggle Changes panel | Cmd/Ctrl + K → changes → Enter |
| Toggle Preview panel | Cmd/Ctrl + K → preview → Enter |
| Tạo Issue | I C |
| Đổi Status | I S |
| Đổi Priority | I P |
| Multi-select (range) | Shift + Click |
| Select all | Cmd/Ctrl + A |