DragCSS sao chép các chỉnh sửa CSS hình ảnh vào các lời nhắc sẵn sàng cho AI cho các nhà phát triển
DragCSS - Sao chép các thay đổi CSS trực quan cho AI & Copilot, từ dragcss.com, là một tiện ích mở rộng Chrome ghi lại các chỉnh sửa kiểu trong trình duyệt và chuẩn bị chúng cho các trợ lý lập trình AI. Nó ghi lại "diff" CSS được tạo ra trong quá trình sửa đổi trực tiếp và tạo ra các bản sao với một cú nhấp chuột được định dạng cho ChatGPT, GitHub Copilot, Claude và các mô hình tương tự. Các nhà phát triển và nhà thiết kế frontend sử dụng LLMs nhận được sự chuyển giao nhanh hơn từ thử nghiệm trực quan sang cập nhật mã do AI điều khiển. Nó phù hợp với các nhóm lặp đi lặp lại một cách trực quan và dựa vào các mô hình ngôn ngữ.
DragCSS giải quyết khoảng cách giữa phong cách trực tiếp và chỉnh sửa mã hỗ trợ AI
Công cụ này ghi lại những thay đổi theo thời gian thực mà bạn thực hiện trong trình duyệt và bảo tồn các thuộc tính chính xác đã được thêm, xóa hoặc thay đổi. Đầu ra đã ghi lại được trình bày dưới dạng khác biệt ngắn gọn thay vì một bản sao toàn bộ stylesheet, vì vậy nhà phát triển có thể dán một hướng dẫn tập trung vào một cuộc trò chuyện AI mà không cần phải sao chép CSS bằng tay. Cách tiếp cận này nhắm đến giai đoạn quy trình làm việc giữa thí nghiệm trực quan và cam kết mã.
Nó định dạng các khác biệt CSS cụ thể để giảm ma sát cho LLMs
DragCSS chuyển đổi các chỉnh sửa trình duyệt thành định dạng thân thiện với AI và cung cấp một cú nhấp chuột để sao chép đầu ra đó. Tiện ích mở rộng liệt kê các khai báo đã thay đổi và nhóm nhiều chỉnh sửa thành một lời nhắc duy nhất, vì vậy trợ lý có thể thấy ngữ cảnh và phạm vi. Các mục tiêu được hỗ trợ bao gồm các trợ lý dựa trên văn bản phổ biến:
- ChatGPT
- GitHub Copilot
- Claude
Tích hợp với DevTools giữ quy trình làm việc trong trình duyệt
Tiện ích mở rộng cắm vào Chrome DevTools, vì vậy việc ghi lại diễn ra ở nơi mà các nhà phát triển đã kiểm tra phong cách thay vì trong một ứng dụng riêng biệt. Giao diện vẫn không gây chú ý cho đến khi được gọi, và việc tổng hợp các chỉnh sửa tránh việc sao chép và dán lặp lại. Bởi vì tiện ích mở rộng chỉ ghi lại các thuộc tính CSS tiêu chuẩn, các nhà phát triển vẫn phải xác minh đầu ra của AI khi ánh xạ các thay đổi vào các mẫu hoặc hệ thống xây dựng cụ thể của dự án.
Tính tương thích tập trung vào các trình duyệt Chromium và quy trình làm việc CSS tiêu chuẩn
DragCSS nhắm đến Chrome và các trình duyệt dựa trên Chromium khác như Edge, Brave và Vivaldi, vì vậy nó phù hợp với các nhóm sử dụng động cơ đó để phát triển và kiểm tra. Nhà phát triển định dạng khác biệt để sử dụng với bất kỳ trợ lý AI dựa trên văn bản nào, nhưng tiện ích mở rộng không thực hiện chuyển đổi mã; nó cung cấp ngữ cảnh có cấu trúc cho LLM và dựa vào trợ lý và nhà phát triển để dịch các chỉnh sửa đó thành mã sẵn sàng cho kho lưu trữ.
Công cụ thực tiễn cho các nhà phát triển ưu tiên hình ảnh sử dụng LLMs, với sự đánh đổi rõ ràng
DragCSS là một lựa chọn thực tiễn cho các nhà phát triển frontend và nhà thiết kế kết hợp phong cách trong trình duyệt với các mô hình ngôn ngữ để cập nhật mã nguồn, vì nó rút ngắn khoảng cách giữa nguyên mẫu và lời nhắc. Mong đợi sự phụ thuộc vào trợ lý AI đã chọn và đánh giá của con người, và xác minh mã đã chuyển đổi trước khi cam kết. Mẹo: dán sự khác biệt vào cuộc trò chuyện AI của bạn với hướng dẫn chuyển đổi rõ ràng và chạy các bài kiểm tra đơn vị hoặc hình ảnh trước khi hợp nhất.
