Kế Hoạch Khung Giao Diện CRUD & Thành Phần (Trường Hợp Sử Dụng → Màn Hình → Hành Vi Cấp Trường)
Chuyển đổi các câu chuyện người dùng thành bản đồ màn hình, đặc tả biểu mẫu và hành vi thành phần sẵn sàng cho xây dựng nhanh hoặc bàn giao.
Tổng quan prompt
Đối tác AI nổi bật
Mẹo dành cho bạn
Thiết kế thứ tự tab trước; định nghĩa trạng thái trống sớm; chuẩn hóa hành động bảng; ghi chú trạng thái vô hiệu hóa cùng với trạng thái ẩn.
Từ đội ngũ vận hànhNexusAi TechnologyVấn đề được giải quyết
Các nhóm thường bắt đầu mã hóa giao diện người dùng mà không có kế hoạch chung, gây ra việc làm lại. Điều này xác định rõ ràng các màn hình, biểu mẫu và xác thực.
Bản đồ Màn hình
Lộ trình từ danh sách đến chi tiết đến tạo mới.
Đặc tả Thành phần
Bảng, biểu mẫu, bộ lọc và hành động với quy tắc.
Ghi chú RBAC
Trạng thái hiển thị và vô hiệu hóa theo vai trò.
Mẫu Trạng thái
Quy ước trạng thái trống, lỗi và đang tải.
Hướng dẫn prompt AI
Hành động như: Một nhà thiết kế sản phẩm và kiến trúc sư giao diện người dùng cho các ứng dụng kinh doanh nội bộ tập trung vào tốc độ, sự rõ ràng và chất lượng dữ liệu.
Tại sao nhiệm vụ này quan trọng: Các màn hình và quy tắc biểu mẫu rõ ràng giúp giảm thời gian phát triển và giảm lỗi xác thực. Việc lựa chọn thành phần sớm cải thiện tính nhất quán.
Giới hạn quan trọng:
- Ưu tiên nhập dữ liệu bằng bàn phím và các mẫu truy cập được.
- Giữ tiếng ồn hình ảnh thấp; nhấn mạnh xác thực và trạng thái.
- Giả định có thư viện thành phần (ví dụ: React + headless UI) nhưng giữ tính không phụ thuộc vào framework.
Đầu vào người dùng:
- Các câu chuyện người dùng hàng đầu với tiêu chí chấp nhận
- Các thực thể và trường chính với các ràng buộc
- Vai trò và quyền hạn cần thiết
Mục tiêu:
1) Tạo bản đồ màn hình và mô hình điều hướng.
2) Chỉ định biểu mẫu, bảng, bộ lọc và xác thực nội tuyến.
3) Ghi lại quyền theo màn hình và điều khiển.
4) Định nghĩa trạng thái trống/lỗi/đang tải.
Quy trình phân tích:
1) Chuyển đổi câu chuyện thành màn hình và luồng.
2) Với mỗi màn hình, liệt kê các thành phần và quy tắc trường.
3) Định nghĩa cột bảng, sắp xếp, lọc và phân trang.
4) Chỉ định thông báo thành công/lỗi và mẫu hoàn tác/khôi phục.
5) Lập bản đồ hiển thị theo vai trò và trạng thái vô hiệu hóa.
Định dạng đầu ra yêu cầu:
- Bản đồ màn hình
- Thành phần & Hành vi theo màn hình
- Quy tắc xác thực theo trường
- Ghi chú RBAC theo vai trò
- Xử lý trạng thái (trống/lỗi/đang tải)
- Danh sách kiểm tra bàn giao
Kiểm soát chất lượng:
- Mỗi hành động có thay đổi trạng thái hiển thị và xác nhận.
- Tất cả các trường bắt buộc có xác thực nội tuyến và văn bản trợ giúp.
Danh sách kiểm tra xác minh:
- Mỗi câu chuyện có ít nhất một ánh xạ màn hình
- Luồng CRUD có điều hướng và dấu vết nhất quán
Hướng dẫn cuối cùng: Xuất kế hoạch có cấu trúc phù hợp cho việc tạo khung dây nhanh hoặc vé thành phần.
Kết quả kỳ vọng
Bản đồ màn hình: Bảng điều khiển, Danh sách Yêu cầu, Chi tiết Yêu cầu, Yêu cầu Mới, Cài đặt Quản trị. Thành phần: Danh sách Yêu cầu (bảng với các cột: id, tiêu đề, trạng thái, người sở hữu, updated_at; bộ lọc: trạng thái, người sở hữu; hành động: xem, chỉnh sửa). Xác thực: tiêu đề bắt buộc; số lượng là số > 0. RBAC: người yêu cầu tạo; người phê duyệt cập nhật trạng thái; quản trị viên quản lý vai trò. Trạng thái: trống hiển thị CTA; lỗi hiển thị thông báo nội tuyến; đang tải hiển thị khung xương.
Hành trình triển khai
Tạo kế hoạch giao diện trong ChatGPT
Cung cấp các câu chuyện người dùng hàng đầu và ràng buộc trường cho ChatGPT. Chạy prompt để nhận bản đồ màn hình, danh sách thành phần và quy tắc xác thực trong các phần được gắn nhãn.
20 minTạo khung dây độ trung bình thấp
Mở Figma và phác thảo từng màn hình sử dụng danh sách thành phần. Dùng quy tắc xác thực để chú thích các trường và định nghĩa trạng thái lỗi trực tiếp trên khung.
30 minChuyển thành vé thành phần
Xuất các phần vào trình theo dõi vấn đề của bạn dưới dạng các tác vụ: bảng, biểu mẫu, bộ lọc, kiểm tra RBAC. Đính kèm liên kết Figma và sao chép tiêu chí chấp nhận cho mỗi tác vụ.
15 min