Dùng để: Biến mô tả một quy trình thành ứng dụng sơ đồ node chạy được, có kéo thả, thêm xoá và hướng dẫn chạy kèm theo.
Nội dung prompt
VAI TRÒ Bạn là kỹ sư front-end chuyên xây dựng giao diện trực quan hoá quy trình bằng React. Bạn viết mã rõ ràng, dễ bảo trì và luôn kèm hướng dẫn chạy. NHIỆM VỤ Viết một ứng dụng trực quan hoá luồng nghiệp vụ bằng React Flow, dựa trên mô tả ở ĐẦU VÀO. ĐẦU VÀO - Mục đích ứng dụng: [ỨNG DỤNG DÙNG ĐỂ LÀM GÌ] - Các loại node cần có: [VÍ DỤ BƯỚC DUYỆT, GỬI EMAIL, CHỜ XỬ LÝ] - Dữ liệu mỗi node gồm: [VÍ DỤ TÊN, NGƯỜI PHỤ TRÁCH, THỜI GIAN] - Tính năng cần: [VÍ DỤ THÊM NODE, KÉO THẢ, LƯU, XUẤT] - Công nghệ: [VÍ DỤ VITE + REACT + TYPESCRIPT] QUY TẮC 1. Dùng thư viện React Flow cho phần sơ đồ, không tự vẽ lại từ đầu. 2. Tách mã thành các thành phần nhỏ, mỗi thành phần một việc. 3. Quản lý trạng thái node và cạnh rõ ràng, có thêm, xoá và kéo thả. 4. Giao diện chạy tốt trên điện thoại, không tràn ngang. 5. Kèm lệnh cài đặt và lệnh chạy cụ thể. 6. Đánh dấu rõ chỗ cần điền dữ liệu thật, không trộn dữ liệu mẫu vào phần chính. KHUÔN ĐẦU RA 1. Cấu trúc thư mục 2. Mã từng tệp, ghi rõ đường dẫn 3. Lệnh cài đặt và lệnh chạy 4. Gợi ý kiểm thử cho hai tính năng chính 5. Việc nên làm tiếp
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Đừng yêu cầu làm cả ứng dụng trong một lần, dễ ra mã rối. Hãy tách thành các việc nhỏ như dựng khung, thêm node tuỳ chỉnh, rồi mới tới lưu trữ. Nếu dự án đã có sẵn quy ước đặt tên, hãy dán vài đoạn mã mẫu vào đầu vào để trợ lý viết cùng phong cách. Khi mã chạy được, nhờ trợ lý rà lại phần xử lý sự kiện kéo thả, đây là chỗ dễ phát sinh lỗi nhất.
Prompt khác cùng nhóm
Soạn bộ quy tắc code Next.js và React cho dự ánĐưa bối cảnh dự án, nhận bộ quy tắc code Next.js và React rõ ràng kèm lý do để cả nhóm cùng làm theo.Xem promptRà soát dự án phần mềm do AI viết trước khi lên productionĐưa mã nguồn dự án AI viết, nhận báo cáo kiến trúc cho quản lý và danh sách việc kỹ thuật để lên production.Xem promptMổ xẻ một tệp Python từ luồng chạy tới rủi roDán tệp Python, nhận về bản phân tích mục đích, luồng thực thi, luồng dữ liệu, tác dụng phụ và chỗ dễ lỗi.Xem promptLập kế hoạch triển khai tính năng trước khi viết mãMô tả thay đổi mong muốn, nhận về kế hoạch theo bước, danh sách tệp cần sửa và mức tự tin kèm đánh giá rủi ro.Xem promptBiến ý tưởng tính năng thành prompt giao cho AI lập trìnhĐưa ý tưởng còn thô và nhận diện thương hiệu, nhận về prompt hoàn chỉnh để giao thẳng cho AI thiết kế hoặc AI lập trình.Xem promptTái tạo thiết kế website từ ảnh chụpTải ảnh chụp một trang web, nhận về phân tích bố cục, màu sắc, chữ và mã dựng lại giao diện tương tự.Xem promptTối ưu đọc dữ liệu lớn từ SOAP API trong C#Đưa đoạn mã đang đọc phản hồi SOAP, nhận về cách xử lý theo luồng để giảm bộ nhớ và tăng tốc.Xem promptViết mã Python hoàn chỉnh từ mô tảĐưa mô tả bằng lời, nhận về mã Python có chú thích kiểu, docstring, kiểm thử ngắn và ví dụ gọi hàm.Xem promptTối ưu hiệu năng và chất lượng mã PythonĐưa đoạn mã Python, nhận bản nâng cấp có chú thích kiểu, docstring, sửa chuẩn PEP8 và gợi ý tăng tốc mà không đổi kết quả.Xem prompt