18/06/2026 · 3 phút đọc
Agentic AI workflow cho frontend developer
Một khung làm việc thực dụng để dùng AI Agent trong code review, refactor và delivery frontend.
Vì sao cần workflow rõ ràng
AI Agent mạnh nhất khi được đặt trong một quy trình có ranh giới rõ: biết đọc ngữ cảnh nào, được phép sửa phần nào, phải kiểm chứng bằng lệnh nào và báo cáo rủi ro ra sao. Nếu chỉ dùng agent như một hộp chat viết code, kết quả thường nhanh lúc đầu nhưng khó kiểm soát khi dự án lớn dần.
Với frontend production, workflow tốt nên ưu tiên ba việc: giảm thời gian tìm hiểu codebase, giữ chất lượng thay đổi, và tạo bằng chứng rằng thay đổi đã được kiểm tra.
Khung làm việc đề xuất
Một vòng agentic coding nên đi theo thứ tự:
- Đọc tài liệu dự án, rule của repository và các entry point liên quan.
- Dùng code graph hoặc search có mục tiêu để xác định blast radius.
- Viết plan ngắn trước khi sửa nếu phạm vi chạm nhiều module.
- Chỉnh code theo diff nhỏ, giữ đúng ownership của app, feature, component và service.
- Chạy lint, typecheck, build hoặc test phù hợp với mức rủi ro.
- Review lại diff như một reviewer độc lập trước khi kết luận.
Điểm quan trọng là agent không nên đoán kiến trúc. Agent phải để codebase hiện tại chỉ đường trước, rồi mới chọn abstraction.
Prompt nên chứa gì
Một prompt tốt cho AI Agent cần nói rõ mục tiêu, tiêu chí hoàn thành, phạm vi được phép sửa và lệnh kiểm chứng mong muốn. Với UI, nên mô tả cả audience, responsive behavior, accessibility và visual constraints.
Ví dụ:
Refactor blog detail page to read markdown from src/content/blog.
Keep the route server-rendered, add SEO metadata, and verify with pnpm build.
Do not introduce client fetching unless required for interaction.
Prompt này đủ cụ thể để agent không tự đẩy dữ liệu blog xuống Client Component hoặc thêm state library không cần thiết.
Review loop
Sau khi agent viết code, đừng chỉ nhìn kết quả chạy được. Hãy review theo các câu hỏi:
- Có duplicate service, hook hoặc utility nào vừa được tạo không?
- Dữ liệu server có bị đưa xuống client quá sớm không?
- Metadata, sitemap và trạng thái lỗi đã được xử lý chưa?
- Diff có chạm vào file không liên quan không?
- Lệnh kiểm chứng có thật sự bao phủ thay đổi không?
AI Agent giúp tăng tốc, nhưng review loop mới là phần biến tốc độ thành chất lượng.
Khi nào không nên dùng agent tự động
Không nên giao agent tự động các thay đổi chưa rõ ý định sản phẩm, thay đổi bảo mật nhạy cảm, migration dữ liệu lớn hoặc refactor chưa có tiêu chí dừng. Trong các trường hợp đó, dùng agent để đọc code, lập phương án và liệt kê rủi ro sẽ an toàn hơn là yêu cầu sửa trực tiếp.
Kết luận
Agentic AI không thay thế engineering judgment. Nó khuếch đại quy trình hiện có. Nếu workflow của đội đã có tài liệu, boundary và verification tốt, agent sẽ giúp giảm thời gian thao tác lặp lại. Nếu workflow mơ hồ, agent chỉ làm mơ hồ nhanh hơn.