Cách chia một yêu cầu lớn thành các bước rõ ràng

Bạn nhờ Claude: "Thêm danh sách locale, ô tìm kiếm, bộ lọc theo quốc gia và làm mới giao diện". Agent sửa vài tệp, báo đã xong, và thoạt nhìn trang có vẻ ổn. Nhưng sau khi gõ một truy vấn, bản ghi bạn cần lại biến mất. Bạn xóa nội dung ô tìm kiếm - bản ghi vẫn không quay lại.

Vậy cái gì bị hỏng? Ô tìm kiếm, bộ lọc hay chính danh sách? Mọi thứ xuất hiện cùng một lúc, và bạn chưa từng thấy riêng một phần nào chạy độc lập. Bạn yêu cầu sửa ô tìm kiếm, nhận thêm một loạt sửa đổi, rồi lại kiểm tra toàn bộ trang. Công việc vẫn tiếp diễn, nhưng độ tin tưởng vào kết quả ngày càng giảm.

Để khỏi phải gỡ rối nhiều thay đổi cùng lúc, hãy chia yêu cầu thành các bước nhỏ có thể kiểm tra. Trước tiên lấy danh sách và đối chiếu các bản ghi. Sau đó thêm ô tìm kiếm và kiểm tra nó trên danh sách đó. Tiếp theo mới chuyển sang bộ lọc, còn việc đổi giao diện để lại thành một bước riêng. Lỗi vẫn có thể xảy ra, nhưng bạn sẽ có một trạng thái ban đầu đã được kiểm chứng và biết rõ những thay đổi gần nhất gồm những gì. Hãy cùng xem cách chọn những bước như vậy và giao chúng cho agent.

Bên trái là các thay đổi thực hiện trong một lần. Bên phải là triệu chứng chung, chưa chỉ ra nguyên nhân cụ thể. Nếu kiểm tra từng phần theo thứ tự, sẽ dễ đối chiếu hơn thời điểm lỗi xuất hiện với lần sửa gần nhất.

Chọn kết quả gần nhất

Phân rã là việc chia nhiệm vụ thành các phần. Khi làm việc với agent, nên chọn các phần sao cho kết quả của mỗi phần có thể kiểm tra riêng. Ví dụ: trước tiên hiển thị danh sách, sau đó thêm ô tìm kiếm cho nó, rồi mới đến bộ lọc.

Nếu danh sách đã chạy, không cần làm lại từ đầu. Hãy bắt đầu từ hành vi còn thiếu gần nhất. Còn nếu chưa rõ nó có chạy hay không, hãy mở trang lên xem trước. Điểm bắt đầu phụ thuộc vào trạng thái thực tế của dự án, chứ không phải một kế hoạch đẹp trên giấy.

Câu "viết HTML trước, rồi mới đến JavaScript" cũng là một cách chia việc, nhưng không phải lúc nào cũng giúp kiểm tra kết quả. Để ô tìm kiếm chạy được, có thể cần cả trường nhập trong HTML lẫn hàm xử lý trong JavaScript cùng lúc. Đó là một bước rõ ràng, dù có hai tệp.

Chia yêu cầu theo hành vi

Danh mục mẫu có bốn bản ghi. Mã locale, ngôn ngữ và quốc gia được liệt kê dưới đây; ta sẽ dùng dữ liệu này để kiểm tra.

Giờ với mỗi bước, có thể nêu rõ kết quả và cách kiểm tra:

Mũi tên nghĩa là chuyển sang bước tiếp theo sau khi đã kiểm tra. Ô tìm kiếm và bộ lọc có thể đổi thứ tự cho nhau, nhưng cả hai đều cần danh sách. Việc đổi toàn bộ giao diện để lại thành một bước riêng: kết quả của nó dễ đánh giá hơn khi các thao tác chính đã chạy ổn.

Gọi tên rõ ranh giới của bước

Giả sử danh sách đã xong. Hãy nhờ Claude thêm ô tìm kiếm và nói rõ những gì hiện tại cần giữ nguyên. Trong ví dụ, dữ liệu và hành vi của trang nằm trong app.js, markup nằm trong index.html. Trong dự án của bạn, hãy thay bằng đường dẫn thực tế.

Đọc @index.html và @app.js.
Danh sách bốn locale đã hoạt động.
Thêm một ô tìm kiếm theo mã locale hoặc tên ngôn ngữ.

Giữ nguyên các bản ghi gốc, trường dữ liệu và giao diện của chúng.
Có thể thêm các phần tử cần thiết cho ô tìm kiếm.
Chưa làm bộ lọc theo quốc gia lúc này.

Kiểm tra: German và de-DE đều tìm ra de-DE;
zzz không tìm thấy bản ghi nào; truy vấn rỗng trả về đủ cả bốn.

Trước tiên hãy giải thích những gì sẽ thay đổi. Chưa sửa tệp nào vội.

Hãy đọc câu trả lời. Nếu trong đó xuất hiện dữ liệu mới, đổi chủ đề giao diện hoặc bộ lọc, hãy làm rõ ranh giới trước khi cho thực hiện. Nếu mọi thứ khớp với yêu cầu, hãy giao bước này cho agent làm. Nói rõ bằng lời giúp định hướng công việc, nhưng việc có tuân thủ ranh giới hay không vẫn cần kiểm tra qua kết quả thực tế.

Không phải hành động phát sinh nào cũng thừa. Trường nhập liệu là cần thiết cho ô tìm kiếm. Còn đổi toàn bộ màu sắc đã là một mong muốn riêng. Câu hỏi hữu ích: không có thay đổi này thì kết quả đã chọn có đạt được không?

Nếu chưa rõ bắt đầu từ đâu

Với một dự án lạ, có khi bước đầu tiên phải là đọc mã. Không nên yêu cầu thêm ô tìm kiếm nếu bạn còn chưa biết dữ liệu lấy từ đâu và tệp nào hiển thị danh sách.

Tìm xem trang lấy dữ liệu từ đâu và hiển thị danh sách ở chỗ nào.
Đọc hai đến ba tệp then chốt, nếu chừng đó là đủ.
Nêu các đường dẫn đã tìm thấy và đề xuất bước nhỏ đầu tiên.
Nếu chưa đủ dữ liệu, hãy nói rõ còn cần đọc thêm gì.
Chưa sửa tệp nào vội.

Kết quả của bước này là các tệp đã tìm ra cùng lời giải thích vai trò của chúng. Hãy đối chiếu câu trả lời với các đoạn mã được chỉ ra. Con số "hai đến ba" ở đây chỉ là mốc để bắt đầu, không phải giới hạn cấm đọc thêm mã cần thiết.

Kiểm tra trước khi sang bước tiếp theo

Báo cáo "ô tìm kiếm đã xong" chưa cho biết cụ thể đã kiểm tra gì. Hãy mở trang và tự chạy các ví dụ trong yêu cầu: trường hợp khớp, trường hợp không khớp, xóa nội dung ô nhập. Đồng thời xác nhận các bản ghi gốc và trường dữ liệu của chúng vẫn còn nguyên.

Nếu sau khi xóa nội dung ô nhập chỉ còn thấy ba dòng, hãy tiếp tục ở bước ô tìm kiếm. Báo cho agent hành động, kết quả mong đợi và kết quả thực tế: "Đã xóa nội dung ô nhập. Kỳ vọng bốn bản ghi, nhưng chỉ thấy ba". Thêm bộ lọc lúc này sẽ khiến việc tìm nguyên nhân khó hơn.

Đôi khi phải thu hẹp bước lại. Chẳng hạn nếu không có bản ghi nào hiển thị, hãy khôi phục danh sách trước rồi kiểm tra nó. Còn ý tưởng mới về sắp xếp có thể ghi lại thành một mục riêng, để nó không bị quên và cũng không làm phình to lần sửa hiện tại.

Nhánh bên trái đưa bạn quay lại ô tìm kiếm khi hành vi của nó chưa khớp với yêu cầu. Nhánh bên phải mở ra sau khi kiểm tra thành công. Khi thêm bộ lọc, hãy kiểm tra cả nó lẫn khả năng phối hợp với ô tìm kiếm: bước mới có thể ảnh hưởng đến hành vi vốn đã chạy tốt.

Kết hợp cùng Claude Code

Trước mỗi lần sửa, hãy xác định rõ ba điều: kết quả cần đạt ngay bây giờ, những gì cần giữ nguyên, và cách bạn sẽ thấy kết quả đó. Đưa cho agent các tệp cần thiết, thống nhất bước gần nhất rồi giao cho agent thực hiện. Sau khi kiểm tra, hãy chuyển sang bước tiếp theo hoặc làm rõ thêm lần sửa hiện tại.

Một bước có thể mất vài tin nhắn mới xong. Điều quan trọng hơn là ở bất kỳ thời điểm nào, bạn cũng có thể nói rõ: "Hiện đang làm ô tìm kiếm. Danh sách đã kiểm tra xong. Bộ lọc thì vẫn còn chờ".