Tạo Prototype Nhanh Từ Yêu Cầu Khách Hàng

Một prototype giao đúng hạn giúp ký được hợp đồng tiếp theo. Một prototype trễ deadline demo thì mất nó. Với Sun Agent Kit, bạn đưa tài liệu yêu cầu, danh sách chức năng và mockup màn hình của khách hàng vào một thư mục, trỏ /sk:brainstorm vào đó — agent đọc mọi thứ, trích xuất yêu cầu, xác định các khoảng trống và khuyến nghị stack. Từ đó, /sk:bootstrap scaffold dự án và các chu kỳ /sk:plan + /sk:cook theo từng tính năng đưa nó đến hoàn chỉnh trước buổi gặp khách hàng.

Tổng Quan

Mục tiêu: Đi từ brief của khách hàng đến một prototype hoạt động, sẵn sàng để demo trong chưa đầy một ngày
Thời gian: 2–4 giờ (so với 2–3 ngày thủ công)
Agents sử dụng: planner, implementer, reviewer
Commands: /sk:brainstorm, /sk:research, /sk:ui-ux-pro-max, /sk:bootstrap, /sk:plan, /sk:cook, /sk:code-review, /sk:git

Yêu Cầu Trước Khi Bắt Đầu

• Sun Agent Kit đã cài đặt (hướng dẫn cài đặt)
• Node.js 18+ hoặc Bun runtime đã sẵn sàng
• Tài liệu khách hàng đã đặt trong thư mục dự án — requirement spec, danh sách chức năng, danh sách màn hình, ghi chú cuộc họp (PDF, Markdown, Word hoặc văn bản thuần đều được)
• Git đã khởi tạo trong thư mục đích (git init)
• Một deadline demo rõ ràng để brainstorm agent có thể cân bằng giữa phạm vi và tốc độ

Quy Trình Từng Bước

Bước 1: Brainstorm Từ Tài Liệu Khách Hàng

/sk:brainstorm "read ./docs/client-brief/ — this contains the client's requirement spec, feature list, and screen mockups for a personal task manager. Brainstorm what's missing, suggest the fastest stack for a 3-day prototype, and flag any scope risks"

Điều gì xảy ra: Agent sẽ:

1. Đọc tất cả file trong đường dẫn được chỉ định — PDF, Markdown, hình ảnh, bảng tính — và trích xuất yêu cầu, chức năng và mô tả màn hình
2. Xác định các khoảng trống trong tài liệu khách hàng: thiếu edge case, luồng người dùng chưa định nghĩa, yêu cầu mơ hồ
3. Brainstorm thêm các tính năng hoặc cải tiến mà khách hàng có thể chưa nghĩ đến
4. Khuyến nghị một stack được tối ưu hóa cho tốc độ prototype dựa trên timeline
5. Xuất ra danh sách tính năng đã xác nhận, quyết định stack và danh sách câu hỏi cần làm rõ với khách hàng

Bước 2: Xác Nhận Lựa Chọn Stack

/sk:research "best lightweight stack for a task manager prototype — compare Node.js/Express vs Next.js for speed of prototyping, Bull queue vs cron for email reminders"

Điều gì xảy ra: Agent sẽ:

1. So sánh các stack ứng viên theo tốc độ prototype, độ trưởng thành của hệ sinh thái, và độ phức tạp tích hợp
2. Xem xét Bull queue vs. cron cho email reminders — nêu bật sự đánh đổi về tính bền vững của queue và hành vi retry
3. Trả về khuyến nghị có xếp hạng kèm các lưu ý tích hợp cho stack đã chọn
4. Xác nhận hoặc thách thức khuyến nghị stack của brainstorm dựa trên yêu cầu đã trích xuất từ tài liệu khách hàng

Bước 3: Chọn Phong Cách Thiết Kế

/sk:ui-ux-pro-max "personal task manager SaaS — recommend style, color palette, and typography for a professional prototype"

Điều gì xảy ra: Agent sẽ:

1. Truy vấn cơ sở dữ liệu thiết kế — 50+ phong cách, 161 bảng màu, 57 cặp font — lọc theo loại sản phẩm của bạn
2. Khuyến nghị hướng phong cách nhất quán (ví dụ: minimalism với bảng màu SaaS và cặp font sạch sẽ)
3. Xuất ra các design token cụ thể: màu chính/phụ, font stack, hệ thống spacing và hướng dẫn style cho component
4. Ngữ cảnh này được truyền tiếp vào /sk:cook — implementer agent áp dụng các lựa chọn này thay vì dùng style mặc định

Bước 4: Scaffold Dự Án

/sk:bootstrap "personal task manager: Next.js, PostgreSQL, Prisma, NextAuth for user auth, task CRUD with deadlines and priorities, Bull queue for email reminders, dashboard page"

Điều gì xảy ra: Agent sẽ:

1. Tạo cấu trúc thư mục, route stub và database schema phù hợp với danh sách tính năng của bạn
2. Cài đặt và cấu hình Next.js, Prisma, NextAuth, Bull và tất cả các dependencies cần thiết
3. Tạo .env.example, docker-compose.yml cho Postgres local, và các Prisma migration
4. Chạy kiểm tra TypeScript ban đầu để xác nhận scaffold biên dịch sạch trước khi bạn viết một dòng logic nào

Bước 5: Lên Kế Hoạch Từng Tính Năng

/sk:plan "Feature 1: user auth + task CRUD. Feature 2: email reminders with Bull queue. Feature 3: dashboard with task statistics"

Điều gì xảy ra: Agent sẽ:

1. Đọc codebase đã scaffold và ánh xạ các tính năng vào cấu trúc file được tạo ra
2. Viết file phase tập trung cho từng tính năng trong thư mục plans/ — mỗi file có tasks, acceptance criteria và file ownership
3. Giải quyết các dependency giữa các tính năng (auth phải xong trước tasks, tasks trước dashboard)
4. Giữ mỗi file phase gọn gàng để /sk:cook có phạm vi hẹp, rõ ràng cho từng vòng

Bước 6: Triển Khai Từng Tính Năng

/sk:cook plans/{timestamp}-personal-task-manager/phase-01-auth-tasks.md

Lặp lại cho phase-02-email-reminders.md và phase-03-dashboard.md.

Điều gì xảy ra: Agent sẽ:

1. Đọc file phase và triển khai từng task theo thứ tự dependency
2. Viết service logic, API routes, database queries và UI components cho tính năng
3. Chạy typecheck và linting sau mỗi file để phát hiện lỗi trước khi chúng tích lũy
4. Báo cáo hoàn thành với danh sách file đã thay đổi và bất kỳ sai lệch nào so với kế hoạch

Bước 7: Code Review Theo Phạm Vi Prototype

/sk:code-review --pending

Điều gì xảy ra: Agent sẽ:

1. Đọc tất cả file đã thay đổi kể từ commit cuối
2. Áp dụng góc nhìn prototype — crash, broken routes và các bug cản trở demo được ưu tiên
3. Bỏ qua các vấn đề production (rate limiting, giá trị mặc định phân trang, test coverage đầy đủ) trừ khi chúng phá vỡ demo
4. Xuất ra danh sách ưu tiên các vấn đề kèm khuyến nghị sửa chữa, sắp xếp theo tác động đến demo

Bước 8: Commit Baseline Prototype

/sk:git cm

Điều gì xảy ra: Agent sẽ:

1. Stage tất cả file đã thay đổi, tuân theo .gitignore (.env bị loại trừ tự động)
2. Viết commit message theo quy ước tóm tắt trạng thái prototype
3. Tạo commit baseline để bạn có thể branch từ đó cho các vòng lặp phản hồi của khách hàng

Ví Dụ Hoàn Chỉnh: Prototype Task Manager Cho Demo Thứ Hai

Tình huống: Khách hàng gửi một requirement spec (PDF), danh sách chức năng (spreadsheet) và mockup màn hình (Figma export) vào sáng thứ Hai cho ứng dụng quản lý công việc cá nhân. Họ muốn xem demo vào thứ Tư. Bạn đưa các file vào ./docs/client-brief/ và bắt đầu.

Sáng thứ Hai bạn chạy:

# 1. Đưa tài liệu khách hàng vào brainstorm — nó đọc mọi thứ và lấp đầy khoảng trống
/sk:brainstorm "read ./docs/client-brief/ — this contains the client's requirement spec, feature list, and screen mockups for a personal task manager. Brainstorm what's missing, suggest the fastest stack for a 3-day prototype, and flag any scope risks"

# 2. Xác nhận khuyến nghị stack
/sk:research "best lightweight stack for a task manager prototype — compare Node.js/Express vs Next.js for speed of prototyping, Bull queue vs cron for email reminders"

# 3. Chọn phong cách thiết kế trước khi scaffold
/sk:ui-ux-pro-max "personal task manager SaaS — recommend style, color palette, and typography for a professional prototype"

# 4. Scaffold với stack đã xác nhận
/sk:bootstrap "personal task manager: Next.js, PostgreSQL, Prisma, NextAuth for user auth, task CRUD with deadlines and priorities, Bull queue for email reminders, dashboard page"

# 5. Lên kế hoạch từng tính năng như một phase riêng biệt
/sk:plan "Feature 1: user auth + task CRUD. Feature 2: email reminders with Bull queue. Feature 3: dashboard with task statistics"

# 6. Triển khai từng tính năng
/sk:cook plans/{timestamp}-personal-task-manager/phase-01-auth-tasks.md
/sk:cook plans/{timestamp}-personal-task-manager/phase-02-email-reminders.md
/sk:cook plans/{timestamp}-personal-task-manager/phase-03-dashboard.md

# 7. Review theo phạm vi prototype — chỉ crash và demo blocker
/sk:code-review --pending

# 8. Commit baseline
/sk:git cm

Kết quả: Đến chiều thứ Hai, bạn đã có một prototype hoạt động chạy local — đăng nhập, tạo task với deadline và ưu tiên, một Bull queue kết nối email reminder, và một dashboard hiển thị thống kê task. Mọi tính năng đều truy ngược được về tài liệu gốc của khách hàng. Bạn demo vào thứ Tư với hai ngày đầy đủ để dự phòng cho phản hồi của khách hàng.

So Sánh Thời Gian

Các Phương Pháp Tốt Nhất

1. Xác định rõ phạm vi prototype trong brainstorm ✅

Nói với agent “demo-ready” chứ không phải “production-ready”. Bước brainstorm tồn tại để vạch ra ranh giới đó — sử dụng nó để loại bỏ các tính năng không phù hợp với deadline trước khi scaffold được xây dựng.

2. Chọn phong cách thiết kế trước khi scaffold ✅

Chạy /sk:ui-ux-pro-max sau khi brainstorm xác nhận loại sản phẩm. Phong cách, bảng màu và typography được chọn sẽ truyền vào mỗi chu kỳ /sk:cook — chọn trước giúp tránh giao diện prototype kiểu “Tailwind mặc định”.

3. Dùng chu kỳ plan + cook theo từng tính năng ✅

Một lần chạy cook khổng lồ trên codebase không có phạm vi tạo ra kết quả không tập trung. Giữ mỗi file phase cho một tính năng duy nhất để implementer agent có phạm vi hẹp, có thể review được cho mỗi lượt.

4. Cho code-review biết ngữ cảnh prototype ✅

Truyền ngữ cảnh với review: “đây là prototype cho demo khách hàng, không phải code production”. Reviewer agent điều chỉnh góc nhìn của nó — bug cấp crash trước, hardening production hoãn lại.

5. Đặt tất cả tài liệu khách hàng vào một thư mục trước khi brainstorm ✅

Đưa requirement spec, danh sách chức năng, mockup màn hình và ghi chú cuộc họp vào một thư mục duy nhất (ví dụ: ./docs/client-brief/). Brainstorm agent đọc tất cả trong đường dẫn — file nằm rải rác trên máy đồng nghĩa với yêu cầu bị bỏ sót.

6. Bỏ qua brainstorm và bootstrap mà không đọc tài liệu khách hàng ❌

/sk:bootstrap "build a task app" tạo ra skeleton chung chung không phù hợp với yêu cầu thực tế của khách hàng. Đưa tài liệu gốc của khách hàng vào /sk:brainstorm trước — nó trích xuất những gì khách hàng viết, xác định thiếu sót và tạo danh sách tính năng dựa trên bằng chứng.

7. Đánh bóng prototype lên mức production ❌

Rate limiting, test coverage đầy đủ, giá trị mặc định phân trang và i18n không có chỗ trong một sprint prototype. Công việc đó thuộc về Bắt Đầu Dự Án Mới sau khi khách hàng ký duyệt.

Xử Lý Sự Cố

Vấn đề: Bootstrap chọn sai stack

Giải pháp: Brainstorm agent có thể chưa trích xuất đủ chi tiết từ tài liệu khách hàng. Chạy lại /sk:brainstorm với ràng buộc chặt hơn — trỏ nó đến file cụ thể: "read ./docs/client-brief/tech-requirements.pdf and pick a stack that matches the client's existing infrastructure". Sau đó chạy lại /sk:bootstrap với stack đã xác nhận.

Vấn đề: Plan tạo ra quá nhiều task cho mỗi feature phase

Giải pháp: Phạm vi tính năng trong prompt plan của bạn quá rộng. Thu hẹp xuống một vertical slice duy nhất: /sk:plan "Feature 1: NextAuth email/password login and Prisma user table only". Chạy /sk:plan cho từng tính năng riêng biệt thay vì liệt kê cả ba trong một prompt.

Vấn đề: Cook đi lệch khỏi kế hoạch

Giải pháp: Luôn truyền đường dẫn file phase rõ ràng vào cook — không phải mô tả văn bản về những gì bạn muốn. /sk:cook plans/{timestamp}-personal-task-manager/phase-01-auth-tasks.md neo agent vào spec đã viết. Prompt văn bản tạo ra sự drift trong diễn giải.

Vấn đề: Code review gắn cờ quá nhiều vấn đề cho một prototype

Giải pháp: Nhắc nhở nó về ngữ cảnh trong lệnh: /sk:code-review --pending "this is a prototype for a client demo — flag crashes and broken routes only, defer production hardening". Reviewer agent điều chỉnh tiêu chuẩn theo mục đích đã nêu.

Vấn đề: Giao diện prototype trông chung chung dù đã dùng cook

Giải pháp: Bạn đã bỏ qua bước chọn phong cách thiết kế. Chạy /sk:ui-ux-pro-max với loại sản phẩm của bạn trước chu kỳ /sk:cook tiếp theo — nó truy vấn 50+ phong cách và 161 bảng màu để khuyến nghị hướng thiết kế nhất quán. Implementer agent sẽ tự động áp dụng các lựa chọn này.

Bước Tiếp Theo

• Đề Xuất Upsale Khách Hàng — biến engagement prototype thành hợp đồng dài hơn
• Di Chuyển Dự Án — khi prototype cần chuyển sang stack production
• Bắt Đầu Dự Án Mới — con đường production đầy đủ khi bạn vượt qua giai đoạn prototype
• Thêm Tính Năng Mới — mở rộng prototype với các tính năng bổ sung

Điểm chính: Bắt đầu từ tài liệu gốc của khách hàng, không phải tóm tắt trong đầu bạn — /sk:brainstorm đọc các file, trích xuất yêu cầu và lấp đầy khoảng trống. /sk:ui-ux-pro-max thiết lập hướng thiết kế. /sk:bootstrap scaffold dự án, và các chu kỳ /sk:plan + /sk:cook theo từng tính năng giao hàng trước buổi gặp khách hàng.