Piny

Piny được tạo ra cho quy trình đã trở nên phổ biến hiện nay: một agent lập trình AI dựng trang và logic, sau đó con người cần tinh chỉnh khoảng cách, kiểu chữ và nội dung mà không phải nhập lại prompt cho từng pixel. Piny cài đặt như một phụ thuộc phát triển và plugin Vite, mở trình biên tập trực quan bên cạnh ứng dụng và cho phép nhấp vào bất kỳ phần tử nào để chọn JSX kết xuất nó. Tại đây bạn điều chỉnh các điều khiển Tailwind về khoảng cách, màu sắc, kiểu chữ, flex và grid theo từng breakpoint và trạng thái bằng chính chủ đề của dự án, sửa văn bản, hình ảnh và liên kết, đồng thời xem cây lớp của một phần tử và các phần tử cha.

Vì Piny sửa mã nguồn thay vì tạo lớp phủ, các thay đổi là thay đổi mã thông thường: agent của bạn nhận ra chúng và không có gì lọt vào bản dựng sản xuất. Nếu agent sửa một tệp trong khi bạn đang sửa nó trong Piny, Piny phát hiện thay đổi và tránh ghi đè. Tính năng "Target this element" sao chép component, tệp và số dòng của một phần tử để bạn chỉ đúng vị trí cho agent ở prompt tiếp theo.

Piny đến từ đội ngũ tạo ra Pinegrow Web Editor, nhưng là sản phẩm riêng với giấy phép riêng. Có gói miễn phí thực sự dùng được, không cần tài khoản và không giới hạn thời gian: nhấp để chọn, cây component, chỉnh nội dung, nhiều khung xem trang, hoàn tác và làm lại. Gói Pro bổ sung điều khiển Tailwind và Grid, trình kiểm tra lớp, chỉnh cấu trúc và props, Content Workspace cho văn bản và dữ liệu trang, cùng thư viện component bạn đăng ký để component của mình hiện ra kèm bản xem trước và preset. Các dự án được hỗ trợ hiện nay là React kết xuất phía máy khách trên Vite 5.2 trở lên; hỗ trợ Astro đang được phát triển và Next.js chưa được hỗ trợ.