Bỏ qua điều hướng

Prompt miễn phí

Tối ưu bố cục trang đích cho di động

Chuyển bố cục desktop sang mobile gọn, rõ, ưu tiên đọc nhanh và thao tác chạm hiệu quả.

Onter AdminCập nhật 26/09/2026 Mới · Chưa có đánh giá 0 lượt copy
WebsiteChatGPTClaudeGemini

Prompt dùng để làm gì?

Chuyển bố cục desktop sang mobile gọn, rõ, ưu tiên đọc nhanh và thao tác chạm hiệu quả.

Điền thông tin của bạn

Prompt

Bạn là chuyên gia tối ưu bố cục mobile cho landing page. Hãy chuyển thiết kế desktop và các khối nội dung quan trọng thành bố cục di động ưu tiên chuyển đổi, đọc nhanh và thao tác chạm thuận tiện. Đầu vào gồm {{thiet_ke_desktop}}, {{khoi_noi_dung_quan_trong}}, {{hanh_dong_chinh}}, {{han_che_kich_thuoc_man_hinh}}, {{van_de_hien_tai}}, {{muc_tieu_mobile}}. Hãy đề xuất thứ tự khối trên mobile, cách rút gọn từng khối, điểm nào nên giữ nguyên, điểm nào nên ẩn bớt hoặc dời xuống dưới, và cách đặt CTA để người dùng dễ chạm. Nêu rõ nguyên tắc về khoảng cách, kích thước chữ, độ dài đoạn, ưu tiên hình ảnh và xử lý các phần dễ gây tràn màn hình. Kết quả cần là một phiên bản có thể giao ngay cho thiết kế giao diện responsive.
Xem đã lưu

Input mẫu

Thiết kế desktop: hero lớn, banner khuyến mãi, 6 lợi ích, bảng giá, FAQ
Khối nội dung quan trọng: hero, lợi ích, bảng giá, CTA
Hành động chính: đăng ký tư vấn
Hạn chế kích thước màn hình: màn hình điện thoại phổ thông
Vấn đề hiện tại: nội dung quá dài, nút CTA xuống quá thấp
Mục tiêu mobile: người dùng chạm CTA nhanh và hiểu ưu đãi chính

Output mẫu

Thứ tự mobile: Hero ngắn -> CTA -> 3 lợi ích chính -> bảng giá rút gọn -> FAQ thu gọn
Điều chỉnh: giảm chữ hero còn 1 tiêu đề và 1 mô tả, đưa nút CTA lên ngay sau tiêu đề, rút danh sách lợi ích từ 6 xuống 3, bảng giá hiển thị một cột, giữ FAQ dạng accordion

Cách sử dụng

Điền bố cục desktop, các khối quan trọng và vấn đề đang gặp trên điện thoại rồi dán vào công cụ phù hợp. Sau khi có phương án, hãy kiểm tra lại thứ tự khối, độ dài nội dung và vị trí CTA để đảm bảo bản mobile thực sự dễ dùng.

Giải thích cấu trúc

Role: chuyên gia tối ưu responsive cho landing page. Context: mobile cần ít thông tin hơn nhưng vẫn phải giữ mục tiêu chuyển đổi. Task: sắp xếp lại thứ tự khối, rút gọn nội dung và tối ưu thao tác chạm. Constraints: phải cân nhắc giới hạn màn hình, tránh nội dung tràn và CTA quá xa. Output: phương án bố cục mobile có thể triển khai cho thiết kế responsive.

Mẹo sử dụng

  • Đưa CTA quan trọng lên sớm hơn desktop.
  • Rút gọn mỗi khối để đọc lướt trong một màn hình.
  • Dùng accordion cho phần phụ như FAQ hoặc chi tiết dài.
  • Kiểm tra kích thước chạm để tránh nhầm nút trên mobile.

Nguồn và giấy phép

ONTER biên tập · original

Đánh giá prompt

Chọn số sao theo trải nghiệm của bạn. Bạn có thể sửa đánh giá sau một phút.

Prompt liên quan

Tài khoản Onter

Đăng nhập rồi tiếp tục việc đang làm.

Mở trang đăng nhập riêng nếu trình duyệt chưa hiển thị biểu mẫu.

Contact Me on Zalo