Titikey
Trang chủMẹo hayMẫu Câu Lệnh và Cách Tránh Lỗi Khi Tạo Trang Web Bento Grid Động Với ChatGPT, Claude, Gemini

Mẫu Câu Lệnh và Cách Tránh Lỗi Khi Tạo Trang Web Bento Grid Động Với ChatGPT, Claude, Gemini

2/2/2026
实用技巧

Bạn muốn tạo một trang web với hiệu ứng cuộn linh hoạt như trang chủ Apple, nhưng không muốn học lập trình frontend từ đầu? Tôi đề xuất sử dụng sự kết hợp "ba mô hình chatbot viết code + Midjourney tạo hình ảnh", hiệu quả đáng kinh ngạc.

Một quy trình hoàn chỉnh cho cấu trúc trang, hiệu ứng và tài liệu

ChatGPT chịu trách nhiệm dựng khung

Nó viết HTML5 + Tailwind nhanh nhất, phù hợp để thiết lập các yêu cầu cốt lõi như Bento Grid, nền đen với màu nổi #2657FD, tiêu đề số cỡ lớn ngay từ đầu.

Câu lệnh có thể sao chép trực tiếp: Xuất một tệp HTML duy nhất, sử dụng TailwindCSS CDN và JS cần thiết, bố cục Bento Grid, nền đen, điểm nhấn #2657FD, tiêu đề lớn bằng tiếng Việt và chữ nhỏ tiếng Anh, bao gồm placeholder cho biểu đồ nhỏ, không bỏ qua các điểm nội dung quan trọng.

Claude chịu trách nhiệm tối ưu hiệu ứng động

Framer Motion viết bằng CDN dễ chạy nhưng có thể bị giật, Claude giỏi hơn trong việc điều chỉnh kích hoạt cuộn, hoạt ảnh xuất hiện, đường cong chuyển động cho mượt mà (nó cũng thích hỗ trợ bổ sung điều kiện biên).

Gemini chịu trách nhiệm kiểm tra và sửa lỗi

Khi gặp lỗi trình duyệt, kiểu bị ghi đè, hoặc thành phần không căn chỉnh, hãy để Gemini sửa theo quy trình "giải thích từng phần + xác định vấn đề + cung cấp mã thay thế", giúp bạn tiết kiệm thời gian ngồi fix lỗi.

Midjourney chịu trách nhiệm hình ảnh chính

Những hình ảnh chủ đạo như "lõi phản ứng / bùng nổ thiên hà / giải phóng năng lượng" (với nền tối và ánh sáng cực màu) rất phù hợp để Midjourney xử lý, sau đó đưa hình ảnh trở lại ChatGPT để điều chỉnh responsive.

Hai vấn đề nhỏ tôi thường gặp

  • Liên kết CDN do mô hình tạo đôi khi đã hết hạn, nếu web không chạy, đừng lo lắng—chỉ cần thay bằng phiên bản chính thức mới nhất.
  • Đừng lạm dụng hiệu ứng động, Bento Grid càng tối giản càng chuyên nghiệp, nếu không sẽ trông giống slide thuyết trình cũ.

Nếu bạn còn băn khoăn về "cách chọn mô hình / kết hợp câu lệnh / thiết lập tài khoản và công cụ", có thể tham khảo Titikey, tôi cũng thường dùng nó để tiết kiệm thời gian.

Trang chủCửa hàngĐơn hàng