Học thiết kế nhanh nhất là học từ trang người khác làm tốt. Bài này dạy bạn cách mổ xẻ một trang thành ba lớp: khối nội dung, đặc điểm thị giác và các mảnh tái sử dụng. Sau đó bạn biến những gì quan sát được thành đoạn mô tả mà AI hiểu được.
Tham khảo khác với sao chép
Bạn học bố cục, nhịp điệu, cách sắp xếp thông tin của trang mẫu. Bạn không lấy nguyên logo, hình ảnh, câu chữ hay thương hiệu của người ta. Luyện tập bằng cách dựng lại một trang để hiểu cách nó vận hành là bình thường, nhưng sản phẩm bạn đưa ra công chúng phải mang nội dung và nhận diện của riêng bạn.
Ba lớp phân tích
Lớp 1: cấu trúc
Vẽ ra giấy các khối từ trên xuống: thanh điều hướng, vùng giới thiệu lớn (hero), danh sách tính năng hoặc sản phẩm, phần đánh giá, lời kêu gọi hành động, chân trang. Chỉ cần các hình chữ nhật có nhãn.
Lớp 2: thị giác
Ghi lại những thứ đo đếm được: màu chủ đạo và nền, kiểu chữ, độ bo góc của nút và thẻ, độ đậm của bóng đổ, nhịp khoảng cách giữa các khối. Bài 1 và bài 2 là bộ kính để nhìn lớp này.
Lớp 3: component
Component (thành phần giao diện) là mảnh dùng lại nhiều lần như nút, thẻ sản phẩm, ô nhập, thanh tab. Hãy liệt kê chúng, vì AI viết code theo component sẽ gọn và dễ sửa hơn nhiều.
Dịch thành lời cho AI
AI không “thấy” thiết kế trong đầu bạn. Câu “làm giống trang đó” cho kết quả mơ hồ. Một mô tả tốt có đủ ba phần: cấu trúc, thông số thị giác, danh sách component.
Prompt mơ hồ
- “Làm trang bán đồ handmade cho đẹp”
- AI tự đoán mọi thứ
- Mỗi lần chạy ra một kiểu
Prompt có phân tích
- Liệt kê 6 khối theo thứ tự
- Nêu màu, font, bo góc, khoảng cách
- Kể tên component cần có
Ví dụ: trang bán đồ handmade
Bạn xem một trang bán gốm thủ công mà mình thích. Bạn ghi: bố cục gồm hero ảnh lớn bên trái và chữ bên phải; lưới sản phẩm 3 cột; một khối câu chuyện thương hiệu; chân trang đơn giản. Thị giác: nền kem, chữ nâu, nút bo tròn nhẹ, khoảng cách rộng rãi. Component: thẻ sản phẩm, nút mua, huy hiệu “Mới”. Đưa ba ý này vào prompt, kết quả sát ý bạn hơn hẳn.
Thử ngay
Tôi sẽ mô tả một trang tham khảo. Hãy dựng trang tĩnh HTML + CSS
cho shop [tên shop] bán [mặt hàng], dùng nội dung của tôi, không
dùng tên hay hình của trang mẫu.
Cấu trúc: [liệt kê khối]
Thị giác: [màu, font, bo góc, khoảng cách]
Component: [liệt kê]
Trước khi code, hãy nhắc lại bạn hiểu thế nào để tôi xác nhận.Mẹo
Đoạn cuối của prompt (“nhắc lại bạn hiểu thế nào”) giúp bạn bắt hiểu lầm sớm, trước khi AI viết cả trăm dòng code.
Một lưu ý nhỏ: đừng phân tích khi đang mở sẵn công cụ AI trong đầu. Hãy làm phần phác khối bằng bút và giấy trước. Việc vẽ tay buộc bạn nhìn kỹ từng khối, và bạn sẽ phát hiện ra những điều mà liếc mắt thông thường bỏ sót, chẳng hạn trang dành hẳn một khối cho đánh giá khách hàng ngay sau phần giới thiệu, hay nút kêu gọi lặp lại ở cuối trang.
Ghi nhớ
- Học bố cục và cách trình bày, không lấy thương hiệu hay hình ảnh của người khác.
- Phân tích ba lớp: cấu trúc, thị giác, component.
- Prompt tốt mô tả cụ thể thay vì “làm cho đẹp”.
- Yêu cầu AI nhắc lại cách hiểu trước khi code.