Trang chủ Prompt mẫu

Prompt AI dọn dẹp CSS cũ để code front-end sạch hơn và bớt trùng lặp

aHí
aHí
Cập nhật: • 0 • phút để đọc
Mục lục bài viết

Prompt AI dọn dẹp CSS cũ để code front-end sạch hơn và bớt trùng lặp

Khi nào nên dùng prompt này?

  • Khi bạn cần sắp xếp lại CSS cũ để giảm trùng lặp, dễ đọc và dễ bảo trì hơn nhưng không muốn bắt đầu từ trang trắng.
  • Khi bạn muốn đầu ra bám đúng selector trùng, rule dư thừa và cấu trúc file CSS thay vì nhận câu trả lời quá chung.
  • Khi team cần một bản nháp có thể rà lại, chỉnh tiếp và dùng ngay trong công việc thực tế.

Prompt mẫu

Bạn là front-end engineer chuyên refactor CSS cho dự án bảo trì.
Tôi muốn dùng AI để sắp xếp lại CSS cũ để giảm trùng lặp, dễ đọc và dễ bảo trì hơn.

Bối cảnh:
- Bạn đang tiếp quản một website có file CSS dài, nhiều rule chồng chéo và khó biết nên sửa ở đâu.

Thông tin đầu vào tôi sẽ cung cấp:
- đoạn CSS hiện có: ...
- vấn đề đang gặp: ...
- phần giao diện cần giữ nguyên: ...
- quy ước đặt tên mong muốn: ...
- mức độ refactor cho phép: ...

Yêu cầu thực hiện:
- chỉ ra rule trùng lặp, selector khó hiểu và phần có thể gom nhóm
- đề xuất cấu trúc lại mà không làm thay đổi giao diện ngoài ý muốn
- ưu tiên refactor an toàn, dễ test từng bước
- đánh dấu đoạn nào nên giữ nguyên vì có nguy cơ ảnh hưởng lớn

Đầu ra mong muốn:
- bản CSS đã sắp xếp lại hoặc đề xuất cấu trúc mới
- danh sách vấn đề trong CSS hiện tại
- thứ tự ưu tiên dọn dẹp

Cách điền biến để AI trả lời sát hơn

Bạn nên chuẩn bị trước ít nhất các biến sau:

  • đoạn CSS hiện có
  • vấn đề đang gặp
  • phần giao diện cần giữ nguyên
  • quy ước đặt tên mong muốn
  • mức độ refactor cho phép

Ví dụ áp dụng nhanh

Bối cảnh mẫu

Bạn đang tiếp quản một website có file CSS dài, nhiều rule chồng chéo và khó biết nên sửa ở đâu.

Dữ liệu có thể nhập

  • đoạn CSS hiện có: file style.css khoảng 700 dòng
  • vấn đề đang gặp: nhiều margin, padding lặp và selector quá dài
  • phần giao diện cần giữ nguyên: header, menu mobile và form liên hệ

Đầu ra nên yêu cầu

  • bản CSS đã sắp xếp lại hoặc đề xuất cấu trúc mới
  • danh sách vấn đề trong CSS hiện tại
  • thứ tự ưu tiên dọn dẹp

Mẹo tối ưu để ra kết quả chuẩn ngay từ lần đầu

  • Mô tả rõ đoạn CSS hiện có và vấn đề đang gặp để AI bám đúng bối cảnh
  • Nêu cụ thể mức độ refactor cho phép nếu bạn muốn kết quả ít phải sửa lại
  • Yêu cầu AI nêu giả định hoặc điểm chưa chắc nếu đầu vào còn thiếu

Kết luận

Prompt này giúp bạn nhanh chóng có một bản refactor CSS có định hướng rõ ràng, tập trung vào việc giảm trùng lặp và cải thiện khả năng bảo trì mà không làm vỡ giao diện hiện tại. Khi đầu vào được mô tả cụ thể, AI có thể đóng vai trò như một người “soát lại cấu trúc”, hỗ trợ team dọn dẹp CSS cũ một cách an toàn và hiệu quả.

Đăng nhận xét