Phân Tích Bố Cục Ảnh Chụp Màn Hình (Ảnh → Kế Hoạch DOM → Bản Đồ Thành Phần)
Nhanh chóng chuyển đổi bất kỳ ảnh chụp giao diện người dùng nào thành bản đồ thành phần có cấu trúc với các phần, thứ bậc và kế hoạch DOM bước đầu sẵn sàng cho việc lập trình.
Tổng quan prompt
Mẹo dành cho bạn
- Giữ tên thành phần ổn định qua các sprint để tránh thay đổi không cần thiết. - Ghi lại UI lặp lại như một prop biến thể sớm. - Xác nhận các hiệu ứng tương tác (hover, focus, nhấn) với thiết kế. - Bắt đầu các stub Storybook chỉ với props cần thiết cho ảnh chụp màn hình.
Từ đội ngũ vận hànhNexusAi TechnologyVấn đề được giải quyết
Tăng tốc giai đoạn khó khăn nhất ban đầu: chuyển đổi hình ảnh thành cấu trúc thành phần và kế hoạch bố cục rõ ràng mà không cần phỏng đoán.
Phân tích thứ bậc
Chuyển hình ảnh thành cây thành phần và các vùng.
Lập kế hoạch props/state
Xác định đầu vào rõ ràng và bề mặt sự kiện.
Ghi chú bố cục đáp ứng
Đề xuất mẫu grid/flex theo điểm ngắt.
Sổ rủi ro
Đánh dấu các tương tác chưa rõ để xác nhận sớm.
Hướng dẫn prompt AI
Hành động như: Một kỹ sư frontend cao cấp và kiến trúc sư hệ thống giao diện người dùng.
Tại sao nhiệm vụ này quan trọng: Bắt đầu từ một ảnh chụp màn hình thường dẫn đến các thành phần tùy tiện, lệch tên gọi và phải làm lại. Một bản đồ rõ ràng giảm thiểu sự mơ hồ và tăng tốc quá trình lập trình.
Giới hạn quan trọng:
- Giả định sử dụng React + Tailwind hoặc CSS Modules.
- Ưu tiên thẻ HTML có ngữ nghĩa và vai trò ARIA khi cần thiết.
- Không sáng tạo thêm tính năng sản phẩm vượt quá những gì ảnh chụp màn hình thể hiện.
Thông tin đầu vào của người dùng:
- Liên kết hoặc mô tả ảnh chụp màn hình
- Ràng buộc thương hiệu (nếu có): thang đo khoảng cách, họ font chữ, màu chính/phụ
- Điểm ngắt mục tiêu (ví dụ: sm, md, lg, xl)
Mục tiêu:
1) Xác định các vùng bố cục (đầu trang, điều hướng, chính, thanh bên, chân trang, hộp thoại).
2) Đề xuất cây thành phần với tên gọi, mục đích và khả năng tái sử dụng.
3) Phác thảo props/state, phụ thuộc dữ liệu và bề mặt sự kiện.
4) Gợi ý nhóm tiện ích Tailwind hoặc lớp CSS cho bố cục chính.
Quy trình phân tích:
1) Phân tích thứ bậc hình ảnh: mẫu lưới so với flex, nhịp độ khoảng cách, vai trò kiểu chữ.
2) Phác thảo ranh giới thành phần dựa trên sự lặp lại và điểm tương tác.
3) Xác định props cho sự biến đổi (văn bản, biểu tượng, hình ảnh, kích thước, biến thể).
4) Ghi chú nhu cầu truy cập (điểm mốc, nhãn, thứ tự lấy nét).
Định dạng đầu ra yêu cầu:
- ComponentTree: danh sách gạch đầu dòng các thành phần có phân cấp
- ComponentSpecs: cho mỗi thành phần: mục đích, props, state, aria/roles
- LayoutPlan: chiến lược grid/flex với ghi chú về khoảng cách, padding và điểm ngắt
- Risks: giả định và các khu vực cần xác nhận với bên liên quan
Kiểm soát chất lượng:
- Tên gọi nhất quán và mô tả rõ ràng (PascalCase cho thành phần).
- Tránh thành phần lồng sâu khi có thể dùng mẫu slot/child.
Danh sách kiểm tra xác minh:
- Mỗi thành phần có thể render độc lập trong Storybook không?
- Props có tối giản nhưng đầy đủ cho tái sử dụng không?
Hướng dẫn cuối cùng: Tạo ComponentTree, ComponentSpecs, LayoutPlan và Risks dưới dạng các phần riêng biệt, rõ ràng, sẵn sàng giao cho lập trình viên.
Kết quả kỳ vọng
ComponentTree: - AppLayout - TopBar - SideNav - ContentArea - StatsCard (x3) - DataTable LayoutPlan: - Ngoài cùng: grid-cols-[auto,1fr] với gap-6 trên lg; thu gọn SideNav dưới md. ComponentSpecs: - Props của StatsCard: title, value, delta, icon, variant. Risks: - Hành động trên hàng bảng chưa rõ ràng (biểu tượng hay văn bản).
Hành trình triển khai
Phác thảo bản đồ thành phần trong ChatGPT
Mở ChatGPT và dán liên kết ảnh chụp màn hình cùng các ràng buộc về khoảng cách/kiểu chữ của thương hiệu. Yêu cầu ComponentTree, ComponentSpecs, LayoutPlan và Risks. Mong đợi một cấu trúc phân cấp rõ ràng và kế hoạch DOM bước đầu để bạn sao chép vào tài liệu lập kế hoạch.
10 minTạo stub Storybook
Trong trình soạn thảo của bạn (ví dụ VS Code), tạo các thành phần React trống từ ComponentTree và thêm các câu chuyện Storybook cơ bản với props từ ComponentSpecs. Điều này biến kế hoạch thành các placeholder chạy được để bạn có thể thêm mã vào.
20 minXác nhận giả định với nhóm
Chia sẻ phần Risks và liên kết Storybook với PM/nhà thiết kế. Ghi lại các quyết định (ví dụ tên biến thể, điểm ngắt) trực tiếp trong props thành phần để khóa giao diện trước khi lập trình.
15 min