Từ khóa gợi ý AI phát triển website bằng Claude
Ngày cập nhật: 2025-03-22 | Lượt xem: 462 | Số từ: 691 | Phân loại: Từ khóa
Tìm kiếm
Trước đây mình đã từng chia sẻ các từ khóa để Claude 3.7 tạo giao diện thiết kế UI cho ứng dụng hoặc website, nhưng lần này thì đơn giản và trực tiếp hơn nhiều – mình sẽ yêu cầu AI tự động tạo một trang web có khả năng tương thích trên điện thoại di động ngay lập tức.
Thực tế là trong vòng một tuần trước, mình chỉ làm được một lượng nhỏ công việc phát triển website, nhưng giờ nhờ AI, toàn bộ có thể hoàn thành chỉ trong 5 phút! Không những nhanh chóng mà cả về mặt thẩm mỹ, trải nghiệm người dùng và tính năng chi tiết đều vượt xa những gì mình từng viết tay 😢. Thậm chí, khi chờ đợi AI tạo ra mã nguồn, mình còn đi tắm rửa một cách thư giãn nữa 🍃. Thật sự phải nói rằng, thời đại này quá tuyệt vời rồi!
Lần này, mình lấy việc tái thiết kế lại blog cá nhân của mình làm ví dụ minh họa.
Mình muốn xây dựng một website blog cá nhân dành cho lập trình viên, cần hỗ trợ hiển thị tốt trên điện thoại di động. Bây giờ hãy giúp mình tạo toàn bộ mã nguồn HTML cho tất cả các giao diện theo các bước sau:
- Phân tích trải nghiệm người dùng: Trước tiên hãy phân tích các chức năng chính và nhu cầu của người dùng, xác định logic tương tác cốt lõi. Gồm có trang chủ với danh sách bài viết, trang chi tiết bài viết, trang phân loại/Tag và trang chỉnh sửa bài viết.
- Quy hoạch giao diện sản phẩm: Vai trò như một nhà quản lý sản phẩm, hãy xác định các giao diện quan trọng, đảm bảo kiến trúc thông tin hợp lý và dễ sử dụng.
- Thiết kế giao diện cao cấp: Với vai trò của một nhà thiết kế giao diện (UI Designer), hãy thiết kế các màn hình gần giống tiêu chuẩn thiết kế web thực tế, sử dụng các thành phần giao diện hiện đại, mang lại trải nghiệm thị giác tốt nhất.
- Triển khai bằng HTML: Sử dụng HTML kết hợp Bootstrap 5 để tạo mọi giao diện, đồng thời tận dụng FontAwesome hoặc các component UI miễn phí khác để làm cho giao diện trở nên đẹp mắt và chân thực hơn. Hãy chia nhỏ mã nguồn thành các file rõ ràng, giữ cho cấu trúc mạch lạc.
- Tách biệt từng giao diện: Mỗi trang web nên được lưu dưới dạng một file HTML riêng biệt, ví dụ như index.html, article.html… Trong đó index.html là điểm khởi đầu chính của website.
- Cải thiện hiệu ứng chân thực: Ưu tiên tối ưu trải nghiệm trên điện thoại di động trước, sau đó mới đến máy tính, đảm bảo khả năng tự điều chỉnh (responsive) hoàn hảo.
- Sử dụng hình ảnh chất lượng cao: Thay vì dùng hình ảnh placeholder, hãy sử dụng những hình ảnh thật từ các nguồn uy tín như Unsplash, Pexels hay tài nguyên UI chính thức của Apple.
Hãy tuân thủ đầy đủ các yêu cầu trên để tạo ra một tập hợp mã nguồn HTML hoàn chỉnh và chuyên nghiệp.