Gợi ý tạo thiết kế giao diện APP/trang web bằng Claude 3.7

Ngày cập nhật: 14/03/2025 | Lượt xem: 1109 | Số từ: 677 | Phân loại: Gợi ý AI

Khi lướt qua nền tảng Xiaohongshu, mình đã tình cờ phát hiện một mẫu gợi ý AI rất hay dành cho việc tạo giao diện thiết kế ứng dụng hoặc website. Mẫu này cực kỳ hữu ích và có thể sử dụng trực tiếp trong tính năng Edits của plugin Github Copilot trên VSCode để sinh ra đoạn mã HTML hoàn chỉnh chỉ với một cú click.

Ví dụ cụ thể, nếu bạn muốn phát triển một ứng dụng về phối màu (color harmony), thì bạn có thể áp dụng mẫu gợi ý dưới đây để nhanh chóng tạo ra bản phác thảo thiết kế chi tiết và sẵn sàng triển khai.

Dưới đây là hình ảnh minh họa giao diện trang web được tạo ra:

!Giao diện chính của ứng dụng
!Chi tiết các phần tử UI

Mẫu gợi ý chi tiết

Tôi đang phát triển một ứng dụng về phối màu, và tôi cần một bản thiết kế nguyên mẫu cao cấp (high-fidelity). Xin vui lòng hỗ trợ tôi thiết kế tất cả các màn hình theo những bước sau:

1. Phân tích trải nghiệm người dùng: Hãy xác định chức năng chính và nhu cầu của người dùng, đồng thời phân tích logic tương tác cốt lõi của ứng dụng.
2. Lên kế hoạch giao diện sản phẩm: Với vai trò là một Product Manager, hãy xác định các màn hình quan trọng, đảm bảo kiến trúc thông tin hợp lý. Giao diện chính phải hiển thị đầy đủ nội dung trong một màn hình, thuận tiện cho việc chụp ảnh chia sẻ lên mạng xã hội.
3. Thiết kế UI cao cấp: Với vai trò là một Nhà thiết kế UI, hãy thiết kế các giao diện gần giống với tiêu chuẩn thiết kế iOS/Android thật, sử dụng các thành phần UI hiện đại để mang lại trải nghiệm thị giác tuyệt vời.
4. Triển khai HTML nguyên mẫu: Sử dụng HTML + Tailwind CSS (hoặc Bootstrap) để tạo ra tất cả các màn hình nguyên mẫu. Kết hợp thêm các thư viện như FontAwesome hoặc các thành phần UI mở nguồn khác để làm đẹp giao diện, gần giống thực tế hơn. Tách từng file mã rõ ràng:
   • Mỗi màn hình là một file riêng biệt như home.html, profile.html, settings.html, …
   • File index.html sẽ là điểm khởi đầu, không chứa toàn bộ code mà chỉ nhúng các file con bằng cách sử dụng <iframe>, giúp hiển thị tất cả màn hình ngay trên một trang duy nhất, thay vì chuyển hướng.
5. Tăng tính chân thực:
   • Kích thước màn hình nên mô phỏng theo iPhone 15 Pro, với góc bo tròn để giống giao diện điện thoại thật.
   • Sử dụng các hình ảnh UI chất lượng cao từ nguồn uy tín như Unsplash, Pexels hoặc tài nguyên chính thức của Apple, tránh dùng ảnh placeholder.
   • Thêm thanh trạng thái ở đỉnh (giống iOS) và thanh điều hướng phía dưới (giống Tab Bar của iOS).

Hãy tạo ra toàn bộ mã HTML dựa trên yêu cầu trên, đảm bảo nó có thể sử dụng trực tiếp trong quá trình phát triển.

Những lỗi thường gặp

Trong quá trình sinh mã, đôi lúc bạn sẽ gặp một số vấn đề như sau:

❌ “Xin lỗi, độ dài phản hồi vượt giới hạn. Vui lòng viết lại lời nhắc ngắn gọn hơn.”

Lỗi này xảy ra do giới hạn token hoặc băng thông xử lý của GitHub Copilot. Dù bạn đang dùng gói Pro, vẫn có thể bị giới hạn số lần gọi API hoặc độ dài phản hồi. Đừng lo lắng!

Giải pháp là:

• Nhấn vào nút “Keep” để giữ lại phần code đã tạo.
• Sau đó dán lại toàn bộ câu lệnh gợi ý và gửi tiếp.

GitHub Copilot sẽ tự động tiếp tục sinh phần còn lại mà không trùng lặp với phần trước.

Dựa trên các file đã có, tôi sẽ tạo tiếp các màn hình còn thiếu cho ứng dụng của bạn: saved.html, profile.html, và details.html để hoàn thiện bản phác thảo cao cấp.

Có lẽ đã đến lúc nâng cấp lên gói Business rồi?

❌ “Xin lỗi, yêu cầu của bạn thất bại. Vui lòng thử lại. ID yêu cầu: xxx. Lý do: Kiểm tra quy tắc tường lửa và kết nối mạng, sau đó thử lại. Mã lỗi: net::ERR_HTTP2_PROTOCOL_ERROR.”

Đây là lỗi liên quan đến mạng hoặc server, không nằm trong tầm kiểm soát của bạn. Giải pháp duy nhất là thử lại. Tuy nhiên, đừng nản lòng! Sản phẩm cuối cùng luôn khiến bạn hài lòng nhờ hiệu quả đáng kinh ngạc.

Nếu bạn cũng đang tìm kiếm một công cụ mạnh mẽ để tạo giao diện ứng dụng hoặc website một cách nhanh chóng và chuyên nghiệp, đừng bỏ lỡ mẫu gợi ý này nhé!