hermoso
Đăng nhập Đăng ký
MCP & CLI
APIBảng giá
Đăng nhập Đăng ký

Tour UI ứng dụng

Ảnh chụp màn hình ứng dụng thật được render bên trong một mockup iPhone bằng CSS (thân bo tròn, viền kim loại, dynamic island, độ chói màn hình), nổi trên một sân khấu mềm mang màu thương hiệu khi tour đi qua các màn hình.

Đây là một trong 13 mẫu quảng cáo HTML gốc trong Hermoso, các định dạng được render từ markup thật bởi trình duyệt thay vì được tạo bởi mô hình. Mẫu này xuất ra video, có 4 ô nội dung để bạn điền, và cần 2 ảnh chụp màn hình ứng dụng từ thương hiệu của bạn trước khi chạy được.

Khi nào nên dùng

Chiến dịch cài đặt ứng dụng và ra mắt phần mềm. Đây là câu trả lời cho phim sản phẩm dành cho thương hiệu ứng dụng, và là cách duy nhất để cho thấy một giao diện mà không cần mô hình bịa ra.

Điều cần làm đúng

Giao diện được render thành DOM từ ảnh chụp màn hình thật của bạn, nên đúng từng pixel và rõ ràng. Hai màn hình là tối thiểu; một tour chỉ có một màn hình là một quảng cáo tĩnh.

Tổng quan định dạng

  • Đầu ra: một video.
  • Ô nội dung: 4, mỗi ô có ngân sách ký tự riêng được suy ra từ bố cục thay vì ước đoán.
  • Tài nguyên cần có: 2 ảnh chụp màn hình ứng dụng.
  • Mã mẫu: app-ui-tour.

Mẫu này được render như thế nào

Không có gì ở đây được tạo bởi mô hình ảnh hay video. Định dạng là một trang HTML tự đủ với hoạt ảnh là hàm thuần của thời gian, không có keyframe CSS, bộ hẹn giờ hay tính ngẫu nhiên. Bộ render bước trang đó từng khung trong Chrome headless, chụp ảnh từng khung, và ghép chúng bằng ffmpeg thành tệp H.264 kết thúc bằng hiệu ứng chuyển mờ sang thẻ kết thúc thương hiệu của bạn.

Từ đó suy ra hai điều. Việc render có tính xác định: cùng đầu vào cho cùng một tệp, nên một định dạng trông đúng hôm qua sẽ trông đúng hôm nay. Và mọi chữ trên màn hình là văn bản thật do trình duyệt render, nghĩa là nội dung chính xác và sắc nét ở mọi độ phân giải. Toàn bộ chỉ tốn vài credit thay vì một lần tạo video, và đó là điều khiến các định dạng này khả thi để chạy với khối lượng lớn.

Một tour cần bao nhiêu màn hình?

Ít nhất hai. Một tour một màn hình là một quảng cáo tĩnh với chiếc điện thoại vẽ bao quanh. Các màn hình là ảnh chụp màn hình thật của bạn, được render thành DOM trình duyệt bên trong một iPhone CSS, nên giao diện vẫn rõ ràng thay vì bị bịa ra.

Cả 13 mẫu được liệt kê tại chỉ mục mẫu quảng cáo gốc, và danh mục rộng hơn nằm ở chỉ mục công thức sáng tạo.

Mẫu tour UI ứng dụng có thể truy cập từ Claude, Cursor, Codex hoặc bất kỳ client MCP nào khác cũng như từ studio web, với cùng nền tảng thương hiệu. Điều khiển một định dạng từ tác tử giải thích cách thiết lập.

Render một quảng cáo định dạng gốc chỉ với vài credit. Gói miễn phí không cần thẻ.

Bắt đầu miễn phí →   Xem giá