Phác Thảo Bố Cục Tailwind Từ Ảnh Chụp Màn Hình (Khoảng Cách, Lưới và Token)
Nhận công thức bố cục ưu tiên Tailwind với khoảng cách, lưới và ánh xạ token trực tiếp từ ảnh chụp màn hình của bạn.
Tổng quan prompt
Mẹo dành cho bạn
- Khóa một thang đo khoảng cách và không thay đổi giữa trang. - Tách nhóm class lặp lại thành các thành phần có thể tái sử dụng. - Thêm chú thích trong JSX để nhóm ý định tiện ích.
Từ đội ngũ vận hànhNexusAi TechnologyVấn đề được giải quyết
Loại bỏ sự đoán mò về nhịp khoảng cách và lựa chọn lưới, tránh các lần chỉnh sửa theo kiểu dò tìm từng pixel.
Ánh xạ token
Ánh xạ khoảng cách từ ảnh chụp màn hình sang thang đo Tailwind.
Lưới đáp ứng
Xác định cột/khoảng cách theo từng điểm ngắt.
Công thức tiện ích
Nhóm class sẵn sàng dán theo vùng.
Ghi chú xung đột
Nêu bật các khả năng xung đột tiện ích sớm.
Hướng dẫn prompt AI
Hành động như: Một kiến trúc sư frontend chuyên về Tailwind CSS và hệ thống đáp ứng.
Tại sao nhiệm vụ này quan trọng: Quy tắc khoảng cách và lưới nhất quán giúp ngăn ngừa sự hỗn loạn trong bố cục và làm cho các thành phần có thể tái sử dụng trên nhiều trang.
Ranh giới quan trọng:
- Ưu tiên sử dụng tiện ích Tailwind hơn CSS tùy chỉnh trừ khi có lý do rõ ràng.
- Sử dụng thang đo 4/8px trừ khi có thang đo thương hiệu được cung cấp.
- Bao gồm các quyết định ưu tiên di động trước các điểm ngắt lớn hơn.
Đầu vào của người dùng:
- Liên kết ảnh chụp màn hình hoặc mô tả văn bản ngắn gọn
- Các token khoảng cách/kiểu chữ đã biết (nếu có)
- Các điểm ngắt cần thiết (sm/md/lg/xl)
Mục tiêu:
1) Đề xuất chiều rộng container, số cột và khoảng cách.
2) Định nghĩa token khoảng cách cho padding, margin và khoảng cách.
3) Cung cấp ví dụ tiện ích cho các vùng chính (header, thẻ, bảng, sidebar).
4) Nêu các thay đổi đáp ứng theo từng điểm ngắt.
Quy trình phân tích:
1) Xác định mật độ và nhịp từ ảnh chụp màn hình.
2) Ánh xạ ước lượng pixel sang tiện ích Tailwind gần nhất.
3) Phác thảo chuỗi className ví dụ cho từng vùng.
4) Đánh dấu bất kỳ token nào thiếu trong hệ thống thiết kế.
Định dạng đầu ra yêu cầu:
- Tokens: giả định về khoảng cách và kiểu chữ
- GridPlan: container, cột, khoảng cách, điểm ngắt
- UtilitiesByRegion: ví dụ className cho từng vùng chính
- Notes: nơi có thể cần CSS tùy chỉnh
Kiểm soát chất lượng:
- Không kết hợp các tiện ích mâu thuẫn cho cùng một thuộc tính.
- Giữ thứ tự class dễ đọc: bố cục → khoảng cách → màu sắc → kiểu chữ.
Danh sách kiểm tra xác minh:
- Mỗi vùng có thể thu gọn mượt mà ở sm không?
- Khoảng cách/padding có nhất quán giữa các phần tử cùng cấp không?
Hướng dẫn cuối cùng: Cung cấp Tokens, GridPlan, UtilitiesByRegion và Notes trong các phần riêng biệt, tối ưu để sao chép/dán vào mô tả PR.
Kết quả kỳ vọng
Tokens: - Khoảng cách: 4, 6, 8, 10, 12 (Tailwind: 1, 1.5, 2, 2.5, 3) GridPlan: - Container: max-w-7xl mx-auto px-6 sm:px-4 - Cột: lg:grid lg:grid-cols-12 lg:gap-6 UtilitiesByRegion: - TopBar: flex items-center justify-between py-3 border-b - Card: rounded-lg p-4 sm:p-5 shadow-sm bg-white Notes: - Cắt avatar cần object-cover và rounded-full.
Hành trình triển khai
Tạo kế hoạch Tailwind trong ChatGPT
Cung cấp cho ChatGPT liên kết ảnh chụp màn hình, các điểm ngắt bạn hướng tới và bất kỳ token thương hiệu nào. Yêu cầu Tokens, GridPlan, UtilitiesByRegion và Notes. Sao chép các tiện ích được đề xuất cho từng vùng.
8 minPhác thảo các vùng trong trình soạn thảo của bạn
Trong VS Code, dựng khung JSX cho từng vùng chính và dán nhóm className từ UtilitiesByRegion. Chỉ điều chỉnh khi có xung đột hoặc thiếu token, giữ các thay đổi có chú thích.
15 minKiểm tra trên màn hình nhỏ trước
Mở bản mẫu trong công cụ phát triển trình duyệt, thử các kích thước sm và md, ghi chú các vấn đề về wrap/flex. Đưa các lỗi không khớp trở lại prompt để nhận sửa chữa chính xác.
10 min