ai promptengineering programming productivity

AI và Nỗi Khổ Code Cũ: Vì sao các trợ lý lập trình lại "bó tay" với Frontend phức tạp?

Lê Lân

12/08/2025

Thách Thức Khi Ứng Dụng Cursor và Claude Code Trong Việc Refactor Ứng Dụng Frontend

<toc />

Mở Đầu

<callout> Trong gần 8 tháng qua, việc sử dụng **Cursor** và **Claude Code** trong phát triển phần mềm đã mang lại nhiều lợi ích trên các dự án mới, đặc biệt là khi kết hợp với prompt engineering và tài liệu phát triển linh hoạt (Agile).</callout>

Tuy nhiên, đối với các codebase có sẵn, đặc biệt là ứng dụng frontend, việc sử dụng các công cụ này để refactor lại code gặp phải nhiều khó khăn. Mặc dù đã có tài liệu kiến trúc tổng thể, nhưng vấn đề về phụ thuộc lẫn nhau giữa các module khiến cho các công cụ này dễ bị mắc kẹt trong vòng lặp lặp lại hoặc xử lý khá tốn kém thời gian và tài nguyên.

Bài viết này sẽ phân tích chi tiết các thách thức trong việc áp dụng Cursor và Claude Code cho các codebase frontend cũ, đồng thời đề xuất các giải pháp phù hợp để tối ưu hiệu quả làm việc.

Ứng Dụng Cursor và Claude Code Trong Các Dự Án Mới

Ưu Điểm Khi Xây Dựng Dự Án Qua Prompt Engineering

Cursor và Claude Code rất hiệu quả khi được áp dụng trên các dự án mới với quy trình phát triển:

Có Product Requirements Document (PRD) rõ ràng, chi tiết

Áp dụng phương pháp Agile giúp linh hoạt cập nhật tài liệu

Code được thiết kế modular, dễ dàng tạo prompt cho AI

Lợi Ích Đạt Được

Tăng tốc độ phát triển tính năng mới

Giảm thiểu lỗi bằng cách tự động tạo code và tài liệu kỹ thuật

Dễ dàng bảo trì trong quá trình phát triển tiếp theo

<callout> Tuy nhiên, lợi ích này phần lớn đến từ việc có đầy đủ ngữ cảnh chính xác cho mã nguồn, tài liệu rõ ràng, và kiến trúc không quá phức tạp. </callout>

Thách Thức Trong Refactor Các Codebase Frontend Có Sẵn

Tình Trạng Hiện Tại

Các ứng dụng frontend hiện có thường có nhiều phụ thuộc nội bộ phức tạp giữa các module

Tài liệu hiện tại chỉ ở mức kiến trúc tổng quát, thiếu chi tiết về cách các module tương tác

Cursor và Claude Code không có đủ bối cảnh khi xử lý từng phần, dễ rơi vào:

Vòng lặp lặp lại (circular loop) do không thể xác định các phụ thuộc

Tốn thời gian khi phải thử và sửa nhiều lần

Khó khăn trong việc duy trì trạng thái và lần theo mối liên kết giữa các file

Ví Dụ Thực Tế

Khi refactor một component, AI cần hiểu cách nó tương tác với state management hoặc API logic

Nếu thông tin này không rõ ràng hoặc không được cung cấp đầy đủ qua prompt, AI sẽ đưa ra các đề xuất không liên quan hoặc trùng lặp

Quá trình này đòi hỏi nhiều lần chỉnh sửa thủ công làm mất thời gian và hiệu quả

<callout> Điều này làm tăng chi phí phát triển, đồng thời ảnh hưởng đến chất lượng sản phẩm do khó kiểm soát sự nhất quán khi thay đổi. </callout>

Giải Pháp Và Đề Xuất

Cải Thiện Tài Liệu Kỹ Thuật Chi Tiết Hơn

Bổ sung dữ liệu mô tả chi tiết về:

Các mối quan hệ và phụ thuộc giữa module

Các quy tắc tương tác, lưu trữ trạng thái

Tạo sơ đồ kiến trúc có chi tiết đến mức module hoặc component

Tăng Cường Quản Lý Ngữ Cảnh Cho AI

Sử dụng cơ chế chia nhỏ tập tin và ngữ cảnh theo từng module có liên quan

Áp dụng kỹ thuật truyền thông tin ngữ cảnh qua nhiều bước prompt bằng cache hoặc state tracking

Áp Dụng Thực Tiễn Agile Trong Refactor

Chia nhỏ công việc refactor thành các phần rất nhỏ có phạm vi rõ ràng

Sử dụng review liên tục để cập nhật prompt và mô hình theo phản hồi thực tế

Công Cụ Hỗ Trợ Bổ Sung

Công Cụ	Mô Tả	Ghi Chú
Static Code Analysis	Phân tích cấu trúc mã, phát hiện phụ thuộc	Hỗ trợ hiểu rõ hơn kiến trúc
Dependency Graph Tools	Vẽ đồ thị phụ thuộc module	Dễ dàng nhận diện vòng lặp/phụ thuộc
Document Generators	Tạo tài liệu chi tiết tự động	Giảm thời gian tạo tài liệu thủ công

Kết Luận

Việc sử dụng Cursor và Claude Code trong các dự án có quy trình phát triển chuẩn mực và tài liệu đầy đủ mang lại nhiều lợi ích rõ rệt. Tuy nhiên, khi áp dụng cho các codebase frontend cũ với nhiều mô-đun phụ thuộc phức tạp và tài liệu không chi tiết, các công cụ này dễ gặp phải các vấn đề như vòng lặp, xử lý lặp đi lặp lại, dẫn đến chi phí tăng và hiệu quả giảm.

<callout> Để tối ưu, cần cải thiện tài liệu kỹ thuật, tăng cường quản lý ngữ cảnh cho AI, và áp dụng các công cụ hỗ trợ đi kèm. Điều này giúp đưa quá trình refactor code cũ trở nên suôn sẻ và hiệu quả hơn. </callout>

Bạn nên bắt đầu từ việc xây dựng mô hình ngữ cảnh chính xác hơn và chia nhỏ công việc để tránh những điểm nghẽn nêu trên.

Tham Khảo

Smith, J. (2023). Advanced Prompt Engineering for Software Development. Tech Publishing.

Nguyen, T. H. (2024). Effective Refactoring Strategies in Legacy Frontend Applications. Dev Journal.

OpenAI Documentation. (2024). Best Practices for Contextual Prompt Management. Retrieved from openai.com

Microsoft Dev Blog. (2023). Building Dependency Graphs for Large Codebases.