Cafeincode

Giao diện trực quan khi làm Spec Driven Development

2 min read 19

sdd-workflow-ui

Đợt nghỉ lễ mình có vibecode nhanh một giao diện để quản lý luồng làm việc khi triển khai dự án theo Spec Driven Development, xem các file markdown ở trong source code dự án thì khó nhìn và khó theo dõi quá nên mình đưa lên giao diện cho dễ xem, dễ đánh giá.

Các bạn có thể xem qua bài viết Spec Driven Development: Workflow với Claude Code trước về cách mình triển khai SDD trong một dự án backend thực tế.

Mình sẽ dùng luôn cái feature-name trong bài demo kia để đưa làm nguồn lên giao diện nhé:

overview

Tổng quan thì sẽ xem được feature mình đang thực hiện đã chạy qua bao nhiêu phase, phase nào hoàn thành, phas nào tiếp tục, summary tổng thể, khi cần chạy chạy lại thì Claude Code chỉ cần đọc summary là hiểu sẽ bắt đầu tiếp từ đâu.

Phase 0 -> Phase 3
Phase 4 -> Phase 7
Phase 8 -> Phase 12
Phase 13 -> Phase 14
Output phase 0
Output phase 1
Output phase 2
Output phase 3
Output phase 4
Output phase 5
Output phase 6
Output phase 7

Trong mỗi phase mình làm thêm khung trả lời này, cho phép review và gửi câu hỏi vào thẳng phiên Claude Code.

Mỗi feature sẽ thực thi trên 1 phiên Claude Code cụ thể, mình cho phép lựa chọn lại phiên đang active, phù hợp với các bạn đang làm nhiều feature cùng lúc chạy ở những phiên độc lập khác nhau.

Khi bấm vào hình con mắt sẽ hiển thị ra phiên Claude Code đang lựa chọn, rất dễ xem và view, kiểm tra.

Thời đại AI đang phát triển quá mạnh rồi, các bạn còn chờ gì nữa mà không hành động đi, tải ngay Claude Code về thực chiến vào các dự án đang làm, đang học luôn nhé.

Xem thêm các bài viết nổi bật bên dưới:

Post Views: 19
«

Claude Code #2: Tip dùng model Opus 4.7 hữu…

Hùng Trần
Apr 18, 2026 3 min read

Kỹ sư phần mềm: Rủi ro không dùng và…

Hùng Trần
Apr 15, 2026 7 min read

Spec Driven Development: Workflow với Claude Code

Hùng Trần
Mar 17, 2026 49 min read