Tạo UI Mockups Di Động Nhanh Chóng Với Nano-Banana

Giới thiệu

Trong quá trình phát triển ứng dụng di động, việc biến những ý tưởng mơ hồ thành các hướng dẫn UI cụ thể là một thách thức quen thuộc mà nhiều lập trình viên gặp phải. Mặc dù các phương pháp truyền thống như vẽ phác thảo trên giấy, wireframes hay sử dụng Figma đều hiệu quả, nhưng chúng thường tốn thời gian để thiết lập và học hỏi. Đó là lý do tại sao công cụ Gemini 2.5 Flash Image (hay còn gọi là "nano-banana") lại trở thành một người bạn đồng hành đáng tin cậy cho những ai cần một cách nhanh chóng để tạo ra các mockup UI.

Trong bài viết này, tôi sẽ chia sẻ một quy trình làm việc dựa trên prompt để tạo ra các mockup iOS chất lượng cao với bốn màn hình hiển thị hành trình người dùng hoàn chỉnh. Bạn sẽ nhận được một bản hướng dẫn prompt mà bạn có thể tái sử dụng, ba tùy chỉnh sẵn có (Thể dục, Nấu ăn, Quản lý tài chính cá nhân) và các mẹo thực tế để điều chỉnh đầu ra trong khi tránh các cạm bẫy phổ biến.

Nano-Banana Là Gì?

Gemini 2.5 Flash Image, hay còn gọi là nano-banana, là mô hình tạo hình ảnh của Google được phát hành vào cuối tháng 8 năm 2025. Nó được tối ưu hóa cho tốc độ và sự đồng nhất, hoạt động tốt đặc biệt với các prompt có cấu trúc mô tả cách bố trí, khung thiết bị và các ràng buộc nội dung.

Bạn có thể sử dụng nano-banana tại Google AI Studio: Google AI Studio

Tại Sao Nên Sử Dụng Prompt Đầu Tiên?

Cách tiếp cận dựa trên prompt mang lại tốc độ và sự rõ ràng, giúp tạo ra các màn hình thực tế trong vòng vài phút, lý tưởng cho việc brainstorming và các cuộc trò chuyện với các bên liên quan. Phương pháp này có chi phí thấp vì bạn có thể khám phá các khái niệm mà không cần thiết lập các tệp thiết kế hay thư viện. Nó cũng khuyến khích tư duy theo hành trình, buộc bạn phải suy nghĩ rõ ràng về luồng thay vì chỉ nhìn vào các màn hình riêng lẻ.

Mẫu Prompt Cho Mockup 4 Màn Hình

Sử dụng mẫu prompt dưới đây để tạo ra một hình ảnh với bốn màn hình iPhone được sắp xếp theo chiều ngang, thể hiện một hành trình người dùng từ trái sang phải. Thay thế các trường trong dấu ngoặc vuông bằng thông tin của ứng dụng của bạn.

<Tạo một hình mockup ứng dụng iOS chuyên nghiệp>
cho thấy chính xác 4 màn hình iPhone được sắp xếp theo chiều ngang trong một hình ảnh độ phân giải cao. Các màn hình thể hiện một hành trình người dùng hoàn chỉnh cho một ứng dụng [Loại Ứng Dụng].

<TÙY CHỈNH CỤ THỂ ỨNG DỤNG>
Cốt lõi ứng dụng: [Người dùng nhập cốt lõi của ứng dụng]
Các tính năng chính:
1. [Người dùng nhập tính năng 1, ví dụ: Bảng điều khiển]
2. [Người dùng nhập tính năng 2, ví dụ: Hình ảnh]
3. [Người dùng nhập tính năng 3, ví dụ: Biểu đồ]
4. [Người dùng nhập tính năng 4, ví dụ: Nhật ký]
Chủ đề hình ảnh: [Người dùng nhập chủ đề, ví dụ: Chủ đề cam và đen năng động, kiểu chữ sans-serif đậm, thiết kế có độ tương phản cao, hình ảnh truyền cảm hứng]
Đối tượng mục tiêu: [Người dùng nhập đối tượng, ví dụ: Đối tượng từ 20-40 tuổi]
<KẾT THÚC TÙY CHỈNH>

CÁC THÔNG SỐ THỊ GIÁC CHI TIẾT:
Khung thiết bị: iPhone 15/16 Pro Max hiện đại với Dynamic Island, màn hình không viền, không có nút home
Độ phân giải màn hình: Hiện thị chất lượng cao, rõ nét với 2796×1290 pixel mỗi màn hình
Bối cảnh nền: Độ mờ nhẹ với gradient hoặc phông nền studio chuyên nghiệp phù hợp với chủ đề ứng dụng
Ánh sáng: Ánh sáng mềm, đều với bóng tối tối thiểu để trình bày chuyên nghiệp

YÊU CẦU UI/UX:
Các thành phần gốc iOS 17+ sử dụng ngôn ngữ thiết kế SwiftUI
Phông chữ hệ thống (SF Pro) với hệ thống phân cấp kiểu chữ thích hợp
Khoảng cách nhất quán theo hướng dẫn giao diện người dùng của Apple (hệ thống lưới 8pt)
Các yếu tố tương tác rõ ràng (nút, công tắc, trường văn bản)
Khu vực an toàn và thanh trạng thái được thực hiện đúng
Cấu trúc tab hoặc điều hướng hiển thị khi thích hợp
Nội dung thực tế, có ý nghĩa (không sử dụng lorem ipsum) - sử dụng các ví dụ thực tế liên quan đến ứng dụng
Luồng hình ảnh rõ ràng từ trái sang phải thể hiện sự tiến bộ của người dùng

CẤU TRÚC VÀ PHONG CÁCH:
Sắp xếp 4 mockup iPhone theo hàng ngang với khoảng cách đều
Mỗi màn hình được gán nhãn với chức năng của nó ở trên hoặc dưới
Bảng màu nhất quán trên tất cả các màn hình
Sử dụng độ sâu và bóng tối để tạo hình ảnh mockup chuyên nghiệp
Bao gồm các chỉ báo hoạt ảnh nhẹ nhàng khi có liên quan (như gợi ý chuyển tiếp)
Hiển thị các trạng thái khác nhau (trạng thái trống, trạng thái đầy, lựa chọn hoạt động)

ĐỊNH DẠNG ĐẦU RA:
Hình ảnh gộp lại, độ phân giải tối thiểu, chất lượng trình bày chuyên nghiệp phù hợp cho việc gửi lên App Store hoặc tài liệu thuyết trình cho nhà đầu tư.

Cách Sử Dụng Mẫu Prompt

Định nghĩa hành trình bằng cách chọn bốn trạng thái kể một câu chuyện đồng nhất (ví dụ: Tổng quan → Chi tiết → Chỉnh sửa → Xác nhận). Điền phần TÙY CHỈNH CỤ THỂ ỨNG DỤNG với nội dung cụ thể, thực tế—tránh hoàn toàn việc sử dụng lorem ipsum. Tạo và đánh giá kết quả bằng cách kiểm tra sự đồng nhất giữa các màn hình về kiểu chữ, khoảng cách, màu sắc và dữ liệu. Lặp lại với các chỉnh sửa nhỏ bằng cách điều chỉnh chủ đề, độ tương phản, hoặc độ dày của nội dung và thắt chặt hệ thống phân cấp kiểu chữ. Khi bạn có một phiên bản rõ ràng, xuất hình ảnh cho tài liệu thuyết trình, tóm tắt, hoặc khởi động thiết kế.

Ba Tùy Chỉnh Sẵn Có

1) Ứng Dụng Theo Dõi Thể Dục

Sử dụng đoạn mã này để thay thế phần <TÙY CHỈNH CỤ THỂ ỨNG DỤNG> trong mẫu.

<Tạo một hình mockup ứng dụng iOS chuyên nghiệp>
cho thấy chính xác 4 màn hình iPhone được sắp xếp theo chiều ngang trong một hình ảnh độ phân giải cao. Các màn hình thể hiện một hành trình người dùng hoàn chỉnh cho ứng dụng theo dõi thể dục.

<TÙY CHỈNH CỤ THỂ ỨNG DỤNG>
Cốt lõi ứng dụng: Ứng dụng theo dõi thể dục cá nhân và lập kế hoạch tập luyện với huấn luyện viên AI
Các tính năng chính:
1. Bảng điều khiển - Tóm tắt hoạt động hàng ngày, calo tiêu thụ, số bước, nhịp tim
2. Thư viện bài tập - Video hướng dẫn, thói quen tùy chỉnh, mức độ khó
3. Biểu đồ tiến trình - Xu hướng cân nặng, tăng sức mạnh, số liệu cơ thể theo thời gian
4. Nhật ký hoạt động - Lịch sử tập luyện, kỷ lục cá nhân, huy hiệu thành tích
Chủ đề hình ảnh: Chủ đề cam và đen năng động, kiểu chữ sans-serif đậm, thiết kế có độ tương phản cao, hình ảnh truyền cảm hứng với các điểm nhấn gradient
Đối tượng mục tiêu: Những người quan tâm đến sức khỏe từ 20-40 tuổi
<KẾT THÚC TÙY CHỈNH>

2) Ứng Dụng Công Thức Nấu Ăn

Sử dụng đoạn mã này để thay thế phần trong mẫu.

<Tạo một hình mockup ứng dụng iOS chuyên nghiệp>
cho thấy chính xác 4 màn hình iPhone được sắp xếp theo chiều ngang trong một hình ảnh độ phân giải cao. Các màn hình thể hiện một hành trình người dùng hoàn chỉnh cho ứng dụng công thức nấu ăn.

<TÙY CHỈNH CỤ THỂ ỨNG DỤNG>
Cốt lõi ứng dụng: Trình tổ chức công thức thông minh với lập kế hoạch bữa ăn và tạo danh sách mua sắm
Các tính năng chính:
1. Dòng công thức - Các công thức được chọn hàng ngày với bộ lọc chế độ ăn và gợi ý theo mùa
2. Lập kế hoạch bữa ăn - Lịch xem hàng tuần với tính năng kéo và thả để sắp xếp bữa ăn
3. Danh sách mua sắm - Danh sách thực phẩm tự động được tạo theo các phần của cửa hàng
4. Sách công thức của tôi - Bộ sưu tập công thức cá nhân với công thức gia đình và ghi chú
Chủ đề hình ảnh: Tông màu đất ấm với các điểm nhấn xanh lá cây, tiêu đề kiểu serif thanh lịch, nền ảnh thực phẩm, bố cục thẻ tối giản
Đối tượng mục tiêu: Những người yêu thích nấu ăn và đam mê ẩm thực từ 25-50 tuổi
<KẾT THÚC TÙY CHỈNH>

3) Ứng Dụng Quản Lý Tài Chính Cá Nhân

Sử dụng đoạn mã này để thay thế phần trong mẫu.

<Tạo một hình mockup ứng dụng iOS chuyên nghiệp>
cho thấy chính xác 4 màn hình iPhone được sắp xếp theo chiều ngang trong một hình ảnh độ phân giải cao. Các màn hình thể hiện một hành trình người dùng hoàn chỉnh cho ứng dụng quản lý tài chính cá nhân.

<TÙY CHỈNH CỤ THỂ ỨNG DỤNG>
Cốt lõi ứng dụng: Trình quản lý tài chính cá nhân thông minh với thông tin chi tiêu và theo dõi đầu tư dựa trên AI
Các tính năng chính:
1. Tổng quan - Số dư tổng, tóm tắt chi tiêu hàng tháng, trạng thái ngân sách, hóa đơn sắp tới
2. Giao dịch - Danh sách chi tiêu được phân loại với logo thương nhân, tìm kiếm và bộ lọc
3. Phân tích - Biểu đồ phân tích chi tiêu, xu hướng phân loại, tiến độ mục tiêu tiết kiệm
4. Đầu tư - Hiệu suất danh mục đầu tư, danh sách theo dõi cổ phiếu, tài sản tiền điện tử, tin tức thị trường
Chủ đề hình ảnh: Màu xanh hải quân chuyên nghiệp và các điểm nhấn vàng, các họa tiết hình học sạch sẽ, hình ảnh trực quan dữ liệu tài chính với hiệu ứng glassmorphism, thiết kế tạo niềm tin
Đối tượng mục tiêu: Các chuyên gia trẻ và nhà đầu tư từ 25-45 tuổi
<KẾT THÚC TÙY CHỈNH>

Mẹo Chất Lượng và Điều Chỉnh

Giữ cho nội dung thực tế bằng cách thay thế các giá trị mẫu bằng nội dung cụ thể, liên quan đến lĩnh vực như ngày tháng, tên, số tiền và hình ảnh. Đảm bảo phân cấp bằng cách yêu cầu một hệ thống phân cấp kiểu chữ rõ ràng sử dụng SF Pro và hạn chế chiều dài dòng—ví dụ, giữ tiêu đề dưới 30 ký tự. Tăng độ tương phản nếu kết quả trông nhạt nhòa bằng cách yêu cầu sử dụng màu sắc có độ tương phản cao, chú ý đến WCAG. Thắt chặt khoảng cách bằng cách bao gồm lưới 8pt và khoảng cách nhất quán trong các prompt, đồng thời yêu cầu không gian âm nhiều hơn nếu các bố cục cảm thấy chật chội. Kiểm soát độ dày bằng cách giới hạn nội dung trên mỗi màn hình từ sáu đến tám yếu tố khác nhau. Gắn kết hành trình bằng cách rõ ràng gán nhãn mỗi màn hình trong prompt và yêu cầu nhãn trên các mockup. Lặp lại nhẹ nhàng, thay đổi một biến số tại một thời điểm—màu sắc, độ dày dữ liệu, hoặc phong cách thành phần—trước khi tạo lại.

Câu Hỏi Thường Gặp (FAQ)

Tại sao lại là bốn màn hình?
Bốn màn hình đủ để thể hiện bối cảnh → khám phá → tập trung → cam kết mà không làm cho người xem cảm thấy choáng ngợp, và định dạng này vừa vặn một cách gọn gàng trong một hình ảnh rộng cho các tài liệu thuyết trình. Ngoài ra, AI sinh tạo có khả năng ít hơn để tạo ra sự đồng nhất khi tạo ra các hình ảnh riêng biệt.

Khi Nào Nên Sử Dụng Nano-Banana So Với Công Cụ Thiết Kế

Sử dụng nano-banana cho các ý tưởng ban đầu và sự đồng thuận khi bạn cần hình ảnh thực tế nhanh chóng để khám phá các hướng đi, đồng nhất với các bên liên quan, hoặc khởi động các cuộc thảo luận mà không cần mở Figma hoặc Sketch. Nó đặc biệt nổi bật khi bạn muốn trình bày một luồng người dùng từ trái sang phải (hướng dẫn → duyệt → chi tiết → hành động) trong một hình ảnh đồng nhất.

Đối với các thông số kỹ thuật và tính tương tác, hãy chuyển sang Figma/Sketch/XD để có thông số của các thành phần, mã kiểu chữ, khả năng phản hồi và nguyên mẫu tương tác, và tham khảo Hướng Dẫn Giao Diện Người Dùng của Apple (HIG) để có các mẫu chính xác cho nền tảng và khả năng tiếp cận. Hãy coi nano-banana như một cách để trực quan hóa, sau đó xác thực màu sắc/độ tương phản và các mục tiêu cảm ứng theo WCAG và HIG trong công cụ thiết kế hoặc triển khai của bạn. Tóm lại, tạo ra để quyết định hướng đi và thiết kế để củng cố triển khai.

Kết luận

Nano-banana mở ra một cách mới để thiết kế UI. Các mockup dựa trên prompt sẽ không thay thế các hệ thống thiết kế, nhưng chúng rất tuyệt vời để thúc đẩy động lực. Sử dụng mẫu để định hình một hành trình, tạo ra các màn hình đáng tin cậy, và sau đó chuyển hướng đi chiến thắng vào Figma hoặc mã.

Theo Dõi Tôi Trên X

Tôi chia sẻ những hiểu biết về các công cụ và xu hướng phát triển AI trên X:
X → X

Tài Liệu Tham Khảo

Hướng dẫn AI của Google:
Google AI Studio
Hướng dẫn Giao diện Người dùng của Apple (HIG):
Apple HIG