Bí quyết giúp AI tạo ra các thiết kế đẳng cấp như Netflix

@fuji_ai_
TIẾNG NHẬT2 ngày trước · 14 thg 7, 2026
110K
164
6
0
429

TL;DR

Hướng dẫn này giải thích cách biến đổi các giao diện ứng dụng do AI tạo ra từ nghiệp dư thành các thiết kế chuyên nghiệp bằng cách sử dụng các tài liệu tham khảo UI từ Mobbin thay vì các câu lệnh văn bản mơ hồ.

"Tôi đang làm một ứng dụng với AI, vậy tại sao ứng dụng của tôi trông rẻ tiền thế?"

Nếu bạn từng nghĩ vậy, nguyên nhân không phải là thiếu tài năng. Đó là vì bạn đang yêu cầu thiết kế chỉ bằng "lời nói" suông.

Tôi sẽ nói rõ.

Đây không phải là vấn đề về khả năng.

Đó là vấn đề về "cách bạn giao việc."

※ Khuyên bạn nên lưu bài viết này.

Nhiều người yêu cầu AI như thế này:

"Thiết kế ngầu lên."

"Cho cảm giác hiện đại và phong cách."

"Dùng UI theo xu hướng."

Nhưng thứ nhận lại luôn là một UI an toàn, mơ hồ. Sau đó bạn lại cố sửa bằng nhiều lời hơn và mắc kẹt trong một vòng lặp. Đó là cái vòng luẩn quẩn.

Tôi cũng đã từng như vậy.

Ngày Mà "Tôi Rùng Mình"

Ba tháng trước, tôi đã xây dựng một ứng dụng quản lý công việc cho bản thân bằng Claude Code. Các chức năng hoạt động hoàn hảo. Nhưng ngay khoảnh khắc tôi mở màn hình lên, tôi đã nghĩ:

"Chà, trông giống hệ thống nội bộ công ty năm 2010 quá..."

Các nút bấm quá thô kệch. Lề không đều nhau. Màu sắc là một tông xanh kỳ bí. Nó chạy được, nhưng tôi không muốn cho ai xem. Một cảm giác ớn lạnh chạy dọc sống lưng tôi.

"Chỉ cần trông rẻ tiền thôi là đã khiến nó trông nghiệp dư ngay lập tức."

Tôi cảm nhận sâu sắc điều đó. Thành thật mà nói, cách tôi yêu cầu hồi đó thật đáng xấu hổ. "Hãy tạo một bầu không khí tinh tế như Apple." Tôi chỉ liệt kê những từ trừu tượng mà ngay cả tôi cũng không hiểu hết. Theo góc nhìn của AI, không có tiêu chuẩn nào cho "ngầu." Đó là lý do nó chỉ trả về những UI an toàn, tầm thường.

Tôi hiểu rõ cảm giác đó. Bạn tin rằng nếu bạn dùng đủ nhiều từ, nó sẽ hiểu. Nhưng đó là lối vào của vũng lầy.

Thư Giãn Chỉ Với Một Liên Kết

Bước ngoặt là khi tôi khám phá ra một trang web nhất định: Mobbin.

Đó là một trang web nơi bạn có thể xem một lượng lớn UI từ các ứng dụng đã thực sự được phát hành. Bạn có thể xem Uber Eats và Netflix. Hơn nữa, bạn có thể tìm kiếm theo chức năng, như màn hình đăng nhập, màn hình chính và màn hình thanh toán. Những gì bạn thấy ở đây là các thiết kế thực tế được tạo bởi các nhà thiết kế chuyên nghiệp nước ngoài.

Nói rõ ràng, đây không phải là "ăn cắp." Đó là kỹ thuật "tham khảo" mà các chuyên gia luôn làm. Điều bạn bắt chước không phải là màu sắc hay logo, mà là "triết lý bố cục."

Lần đầu tiên tôi dán một liên kết đến màn hình chính của Netflix và nói với AI: "Hãy tạo thiết kế này bằng cách tham khảo liên kết này" — màn hình đó với nền đen và các hình thu nhỏ phim xếp hàng — tôi đã bị sốc.

Khi tôi nhìn thấy màn hình kết quả, tôi đã bất giác thốt lên: "Khoan, nó làm được cái này rồi sao?"

Mặc dù đó là ứng dụng của tôi, nó đã có cảm giác cao cấp của Netflix. Chất lượng mà tôi không thể đạt được sau hàng chục yêu cầu bằng lời nói đã đạt được chỉ trong một lần với một liên kết duy nhất. Trước khi cảm thấy vui, tôi cảm thấy một sự kiệt sức.

"Tất cả thời gian tôi đã lo lắng để làm gì..."

Hãy nói về con số:

  • Thời gian lo lắng về thiết kế: Từ 2 giờ xuống còn 10 phút.
  • Số lần làm lại: Từ 5 lần xuống còn 1 lần.
  • Và mức độ kết quả cao hơn hẳn trước đây.

Thời gian lo lắng giảm xuống, và chất lượng tăng lên. Một sự đảo ngược hoàn toàn đã xảy ra.

Nội Dung Chính | Mẫu Thực Tế để Sử Dụng Mobbin

Dưới đây là các bước cụ thể. Tất cả những gì bạn làm là "chuẩn bị một tài liệu đặc tả và dán liên kết Mobbin vào đó." Sau đó chỉ cần để Claude Code đọc nó và xây dựng.

Đây là một ví dụ prompt:

text
1# Tổng Quan Ứng Dụng
2- Tên Ứng Dụng: MyFit
3- Mô tả một câu: Ứng dụng ghi nhanh nhật ký tập luyện
4- Đối tượng mục tiêu: 20-30 tuổi, tập thể dục 2-3 lần/tuần
5
6# Chức Năng Chính
7- Đăng nhập / Đăng ký
8- Trang chủ (Hiển thị thực đơn hôm nay)
9- Nhập nhật ký tập luyện
10- Lịch sử/Biểu đồ để kiểm tra tiến độ
11- Hồ sơ / Cài đặt
12
13# Tham Khảo Thiết Kế
14Vui lòng tham khảo UI của các ứng dụng sau. Tôi muốn tông màu, lề, bảng màu và cách sử dụng phông chữ gần với mức này.
15- Bầu không khí tổng thể: (Liên kết Mobbin)
16- Màn hình đăng nhập: (Liên kết Mobbin)
17- Màn hình chính: (Liên kết Mobbin)
18
19# Yêu Cầu
20Vui lòng đề xuất một chính sách thiết kế dựa trên những điều trên trước khi bắt đầu triển khai.

Hiệu quả: AI có thể chia sẻ "cái gì và ở mức độ nào" để tạo ra ngay từ đầu. Các kết quả mơ hồ biến mất.

3 Mẹo Để Tăng Độ Chính Xác Lên Mức Tối Đa

  1. Dán liên kết riêng cho từng màn hình. Đừng chỉ dùng một cái. Mobbin cho phép tìm kiếm theo chức năng. Cung cấp liên kết riêng cho "Màn hình đăng nhập là cái này" và "Màn hình chính là cái này." Hiệu quả: Độ chính xác cao hơn đáng kể so với việc chỉ cung cấp một liên kết tổng hợp.
  1. Thêm lời về "những gì bạn muốn nó bắt chước." Nếu bạn chỉ dán một liên kết, nó có thể chỉ nhặt màu sắc. Vì vậy, hãy nói rõ ràng. Ví dụ hướng dẫn: "Vui lòng tham khảo khoảng cách lề, bảng màu và cách sử dụng phông chữ." Hiệu quả: AI sẽ không bỏ lỡ những điểm cần xem xét.
  1. Đừng để nó xây dựng ngay lập tức; hãy yêu cầu nó "đề xuất chính sách trước." Thống nhất hướng đi một lần. Ví dụ hướng dẫn: "Trước khi triển khai, vui lòng đề xuất một chính sách thiết kế." Hiệu quả: Các lần làm lại sau đó gần như biến mất hoàn toàn.

Trả Lời Câu Hỏi "Chẳng phải là sao chép sao?"

Khi tôi giới thiệu phương pháp này, tôi thường được hỏi: "Liệu có ổn về bản quyền không?"

Tôi hiểu mối lo ngại đó. Hãy phân biệt hai điều này:

◯ Những thứ bạn có thể tham khảo ("Quy ước" thiết kế):

  • Các mẫu bố cục
  • Cách sử dụng lề
  • Triết lý bảng màu

✕ Những thứ bạn không được lấy (Tài sản riêng của công ty):

  • Logo / Tên thương hiệu
  • Ảnh / Biểu tượng
  • Khẩu hiệu

Mang tài sản độc đáo của một công ty về là không được. Hãy thay thế chúng bằng tài sản của ứng dụng riêng bạn. Các quy ước UI và mẫu bố cục là "khuôn mẫu" được chia sẻ trong toàn ngành. Tham khảo các khuôn mẫu là hoàn toàn bình thường. Nếu bạn lo lắng, chỉ cần thêm một lưu ý cho AI.

Ví dụ hướng dẫn: "Tham khảo cấu trúc, nhưng thay đổi bảng màu và logo thành thương hiệu của tôi."

Điều này đảm bảo nó không trở thành một bản sao toàn bộ.

3 Cạm Bẫy Mà Người Mới Thường Mắc Phải

AI không biết nhìn vào đâu trên trang được liên kết. Nếu bạn không bổ sung bằng "bắt chước cảm giác lề này" hoặc "dùng tông màu này," kết quả sẽ bị mờ nhạt.

Nếu bạn cung cấp một số gu thẩm mỹ hoàn toàn khác nhau, AI sẽ lấy giá trị trung bình. Kết quả là, bạn nhận được một thứ tầm thường, chẳng giống ai. Bí quyết là thu hẹp xuống còn 1-2 gu thẩm mỹ.

Khi mẫu đã được tạo ra lần đầu, hãy tinh chỉnh trong khi vẫn cho xem cùng một tham khảo.

Ví dụ hướng dẫn: "Mở rộng lề này một chút nữa" hoặc "Làm cho nút bấm gần với hình dạng trong liên kết này hơn."

Với 2-3 lần như vậy, nó đột nhiên trông chuyên nghiệp. Hầu hết những người bỏ cuộc nói "nó trông không giống" chỉ là không làm giai đoạn đánh bóng cuối cùng này.

Có thể sử dụng Mobbin miễn phí không?

Đối với những ai đang nghĩ "Tôi sẽ mở nó ngay bây giờ," đây là một lưu ý trung thực về giá cả. Bạn có thể bắt đầu sử dụng Mobbin bằng cách tạo một tài khoản miễn phí (không cần thẻ tín dụng). Cần đăng ký miễn phí để xem. Kết luận, phiên bản miễn phí là quá đủ cho những gì bạn sẽ làm hôm nay. Với đăng ký miễn phí, bạn có thể thấy UI của Netflix và Uber Eats ngay lập tức. Sao chép liên kết của màn hình bạn quan tâm và đưa nó cho AI. Phương pháp này hoạt động hoàn toàn với điều đó.

Nếu sau này bạn muốn sử dụng nó sâu hơn, bạn có thể cân nhắc Pro lúc đó. Để tham khảo, đây là 4 hạn chế chính của phiên bản miễn phí:

  • Bạn chủ yếu thấy các ứng dụng được thêm gần đây (thư viện đầy đủ là Pro).
  • Chức năng "Flows" (Luồng) bị hạn chế nhiều.
  • Tải xuống hàng loạt nhiều màn hình là Pro.
  • Lưu bộ sưu tập bị giới hạn ở 3 cái.

Đây là những thứ quan trọng sau khi bạn đã "bị cuốn hút." Hiện tại, hãy thử dán một màn hình với $0. Nếu bạn muốn sử dụng nghiêm túc, nó được mở khóa với gói Pro trả phí (khoảng $10/tháng, thanh toán hàng năm). Đó là giai đoạn chúng ta đang nói đến. Hãy dùng thử miễn phí trước. Nếu chưa đủ, hãy cân nhắc trả phí. Đó là cách tiếp cận đúng đắn.

Điểm Khác Biệt Duy Nhất Giữa Người Giỏi Và Người Không Giỏi

Đọc đến đây, một số bạn hẳn đã nhận ra. Sự khác biệt không phải là "khả năng tạo ra." Đó là "khả năng tìm ra."

Công việc thực tế được tạo ra bởi các nhà thiết kế hàng đầu nằm rải rác khắp internet. Không cần phải vắt óc suy nghĩ từ con số không. Chỉ cần tìm thứ gì đó tốt và đưa nó cho AI.

Ngay cả lúc này khi bạn nghĩ "Tôi sẽ làm sau" và đóng trang này lại, một người khác cũng đã đọc bài này đang mở Mobbin. Họ đang đưa những màn hình đẳng cấp Netflix cho AI. Ngày mai, ứng dụng của người đó sẽ xuất hiện trên dòng thời gian của bạn. Sự khác biệt không phải là gu thẩm mỹ. Đó là liệu bạn có hành động hay không trong 10 phút này.

Gu thiết kế không phải là tài năng. Đó là "hành động" tìm một ví dụ tốt và đưa nó đi, việc mà ai cũng có thể làm.

Tổng Kết

  • Thời gian lo lắng: "2 giờ → 10 phút." Số lần làm lại: "5 lần → 1 lần."
  • Chìa khóa là cung cấp các màn hình tham khảo theo chức năng và thêm lời về "những gì cần bắt chước."
  • Đừng nhắm đến sự hoàn hảo trong một lần; hãy trau chuốt trong 2-3 vòng trong khi vẫn cho xem cùng một tham khảo.

Không cần giải thích dài dòng. Chỉ có một việc cần làm. Mở Mobbin, chọn một màn hình từ một ứng dụng bạn thích, và dán liên kết đó vào AI. Chỉ cần làm vậy, màn hình bạn đã lo lắng suốt 2 giờ sẽ ra trong 10 phút.

Giữa người kết thúc với con số không và người làm ít nhất một việc. Bạn sẽ là ai? Bạn không cần "gu thẩm mỹ" nữa. Lần tới khi bạn cho người khác xem ứng dụng của mình, người đó sẽ nhìn vào màn hình và nói:

"Khoan, cái này giống Netflix quá... Bạn tự làm cái này à...?"

Bạn không cần tài năng. Bạn chỉ cần một tab Mobbin duy nhất được mở hôm nay.

Cuối Cùng

Tôi đăng tải về những cách sử dụng AI mà "chỉ cần biết là đã khác." Khoảng cách mà bạn đang bị bỏ lại phía sau có thể được lấp đầy ngay từ hôm nay. Và một điều nữa. Để đảm bảo bạn không chỉ "đọc xong là xong" về cách sử dụng AI như tôi đã viết trong bài viết này, tôi hiện đang phân phối 32 phần thưởng siêu xa xỉ miễn phí trong thời gian có hạn.

藤原弘人@AI起業家 - inline image

Các phần thưởng bao gồm:

  • Hướng dẫn đầy đủ về ChatGPT / Claude Code / Codex / Gemini
  • Lộ trình kiếm tiền với AI để kiếm 1 triệu yên/tháng, bản đồ ngành có lợi nhuận, bảng giá đơn vị, dữ liệu thị trường
  • Hướng dẫn thực tế về tạo video AI, tác nhân AI, vibe coding, v.v.
  • 100 ví dụ trường hợp sử dụng AI, và nhiều hơn nữa...

Tổng cộng 32 món, hơn 860 trang. Và tất cả đều miễn phí. Bạn thậm chí không cần phải tham gia hội thảo hay tư vấn cá nhân miễn phí để nhận tất cả. Nghe có vẻ như nói dối, phải không? Nhưng đó là sự thật. Cách nhận chúng rất đơn giản. Bắt đầu bằng cách tham gia LINE Open Chat bên dưới.

Bạn có thể vào từ đây.

Tuy nhiên, 32 phần thưởng siêu xa xỉ này chỉ có trong thời gian có hạn. Tôi chưa quyết định thời hạn, nhưng khi kết thúc, nó sẽ kết thúc mà không báo trước. Hầu như ai cũng quên mất "Tôi sẽ làm sau." Hãy nhận chúng khi bạn còn có thể. Để tôi nói lại một lần nữa. Liệu bạn có thể kiếm tiền với AI hay không không phải do tài năng quyết định. Đó là liệu bạn có thể học theo đúng thứ tự hay không. Thứ tự đó đều nằm trong 32 phần thưởng này.

Viết lại trong YouMind

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
Dành cho nhà sáng tạo

Biến Markdown của bạn thành bài viết 𝕏 gọn gàng

Khi bạn đăng bài viết dài của riêng mình, việc định dạng hình ảnh, bảng và khối mã cho 𝕏 rất mệt mỏi. YouMind biến cả bản nháp Markdown thành một bài viết 𝕏 gọn gàng, sẵn sàng để đăng.

Thử Markdown sang 𝕏

Thêm pattern để giải mã

Bài viết viral gần đây

Khám phá thêm bài viết viral