Cách thiết kế app đẹp bằng AI
Để có app đẹp từ AI, đừng chỉ yêu cầu "làm cho đẹp". Hãy đưa cho nó những thứ mà một nhà thiết kế cần: hai hoặc ba tham khảo bạn thích, một hướng thiết kế có tên gọi, và các quy tắc cụ thể về chữ, màu và khoảng cách. Sau đó xây dựng một màn hình, chỉnh cho đến khi nó đúng, rồi yêu cầu AI áp dụng cùng hệ thống đó cho các màn hình còn lại. Phần lớn "vẻ AI" đến từ những prompt mơ hồ cho ra kết quả trung bình. Đầu vào cụ thể cho ra thiết kế cụ thể.
Vì sao thiết kế AI trông chung chung
Hãy yêu cầu AI "một dashboard SaaS hiện đại, gọn gàng" và nó sẽ cho bạn mức trung bình của mọi dashboard mà nó từng thấy: cùng một font sans-serif, gradient tím sang xanh, thẻ bo tròn với bóng đổ nhẹ, biểu tượng trong vòng tròn trông như emoji, và phần hero căn giữa ghi "Quy trình của bạn, đơn giản hóa". Không có lựa chọn nào trong số đó sai, nhưng không lựa chọn nào được chọn cho sản phẩm của bạn.
Thiết kế tốt chủ yếu là những quyết định. Việc của bạn là đưa ra một số ít quyết định tạo nên tính cách cho app, còn AI sẽ làm hàng ngàn quyết định nhỏ khác một cách nhất quán.
Bước 1: Thu thập tham khảo trước khi viết prompt
Dành khoảng hai mươi phút để thu thập hai đến bốn tham khảo: app hoặc website có diện mạo phù hợp với sản phẩm của bạn. Nguồn tốt gồm các sản phẩm mà đối tượng của bạn đã dùng, thư viện thiết kế, và website của các công ty trong lĩnh vực liền kề.
Với mỗi tham khảo, hãy viết ra điều gì bạn thích bằng lời đơn giản:
- "Nhiều khoảng trắng, nội dung nằm trong cột hẹp, nhãn xám nhỏ phía trên số lớn."
- "Bảng dày đặc với đường kẻ mỏng, không có bóng thẻ, một màu nhấn cho các hành động."
- "Tiêu đề serif lớn, nền kem ấm, dùng ảnh chụp thay vì minh họa."
Sau đó đưa những mô tả này cho AI, và đính kèm ảnh chụp màn hình nếu công cụ của bạn nhận ảnh. Hãy lấy cảm hứng từ chất lượng, không phải từ sản phẩm: sao chép nguyên bố cục, thương hiệu hay nội dung của công ty khác vừa có rủi ro pháp lý vừa mất uy tín.
Bước 2: Chọn một hướng thiết kế và đặt tên
Hướng thiết kế là một mô tả ngắn về cảm giác tổng thể. Nó cho AI một bộ lọc cho mọi quyết định. Một số hướng hiệu quả:
| Hướng | Lựa chọn thường thấy | Phù hợp với |
|---|---|---|
| Điềm tĩnh và tối giản | Bảng màu trung tính, khoảng cách rộng, một màu nhấn, viền mỏng | Công cụ năng suất, tài chính, sức khỏe |
| Kiểu tạp chí | Tiêu đề serif, tương phản chữ mạnh, ảnh lớn, cột chữ hẹp | Portfolio, ấn phẩm, dịch vụ cao cấp |
| Dày đặc và thực dụng | Hàng gọn, chữ nhỏ, bảng, thao tác bằng bàn phím | Công cụ nội bộ, dashboard, trang quản trị |
| Ấm áp và thân thiện | Hình dạng bo tròn, màu dịu, minh họa, vùng chạm lớn | App tiêu dùng, cộng đồng, giáo dục |
| Táo bạo và đồ họa | Tương phản cao, chữ lớn, khối màu phẳng | Sự kiện, ra mắt, thương hiệu sáng tạo |
Đặt hướng thiết kế vào prompt đầu tiên, cùng với đối tượng sử dụng app:
Xây một app đặt lịch cho một studio yoga độc lập. Hướng thiết kế: điềm tĩnh và tối giản, giống lịch tập in ra. Nền kem ấm, chữ gần đen, một màu xanh sage dịu cho nút và trạng thái được chọn. Serif cho tiêu đề, sans-serif gọn cho nội dung. Khoảng cách rộng, không gradient, không bóng đổ, không emoji. Ưu tiên giao diện điện thoại.
Bước 3: Đặt quy tắc — chữ, màu và khoảng cách
Ba yếu tố này quyết định phần lớn chất lượng thị giác. Nêu rõ chúng là cách cải thiện lớn nhất bạn có thể làm.
Chữ
- Một hoặc hai kiểu chữ. Một font cho tiêu đề và một font cho nội dung, hoặc một họ font với nhiều độ đậm.
- Một thang cỡ chữ. Một số ít kích thước được dùng nhất quán, ví dụ 14, 16, 20, 28 và 40 px, thay vì để mỗi thành phần tự chọn.
- Nội dung dễ đọc. Khoảng 16 px trên web, chiều cao dòng khoảng 1,5, và độ dài dòng khoảng 60–75 ký tự với văn bản dài.
- Thứ bậc qua độ đậm và kích thước, không qua màu. Tiêu đề đậm và lớn hơn; văn bản phụ nhỏ hơn và xám nhạt hơn.
Màu
- Chủ yếu là trung tính. Nền, bề mặt, viền và các sắc xám của chữ làm phần lớn công việc.
- Một màu nhấn cho hành động và trạng thái được chọn. Thêm màu thứ hai chỉ khi nó có vai trò rõ ràng.
- Màu ngữ nghĩa cho thành công, cảnh báo và lỗi, và chỉ dùng cho những việc đó.
- Độ tương phản. WCAG 2 yêu cầu tỷ lệ tương phản tối thiểu 4,5:1 với chữ nội dung thường và 3:1 với chữ lớn. Chữ xám nhạt trên nền trắng thường không đạt; hãy yêu cầu AI kiểm tra.
- Chế độ tối, nếu bạn muốn có, nên được thiết kế có chủ đích thay vì chỉ đảo màu.
Khoảng cách và bố cục
- Một thang khoảng cách như 4, 8, 12, 16, 24, 32, 48, 64 px. Mọi thứ đều bám theo thang này.
- Căn chỉnh. Các mép thẳng hàng; nội dung nằm trên lưới hoặc trong một cột có chiều rộng tối đa nhất quán.
- Sự gần gũi. Những thứ liên quan đặt gần nhau, những thứ không liên quan đặt xa hơn. Chỉ một quy tắc này đã sửa được phần lớn màn hình rối.
- Ít container hơn. Không phải thứ gì cũng cần thẻ. Viền, đường kẻ và khoảng trắng thường nhóm nội dung một cách kín đáo hơn.
Một prompt thiết lập hệ thống này một lần:
Trước khi xây thêm màn hình, hãy thiết lập một hệ thống thiết kế nhỏ và dùng nó ở mọi nơi: thang cỡ chữ 14/16/20/28/40 px, chiều cao dòng nội dung 1,5, thang khoảng cách 4/8/12/16/24/32/48 px, các sắc xám từ gần trắng đến gần đen, một màu nhấn (#3F6B5A) chỉ cho hành động chính, và màu đỏ chỉ cho lỗi. Nút, ô nhập và thẻ nên dùng chung một bán kính bo góc. Kiểm tra mọi chữ đạt độ tương phản WCAG AA.
Nếu bạn làm việc với một công cụ hiểu code, phần này thường trở thành design token (biến CSS hoặc theme Tailwind), nghĩa là các thay đổi sau này chỉ cần làm ở một nơi.
Bước 4: Làm xong một màn hình trước
Đừng tạo mười hai màn hình rồi mới cố sửa tất cả. Hãy chọn màn hình người dùng nhìn thấy nhiều nhất, thường là dashboard hoặc danh sách chính, và chỉnh cho đến khi nó đúng. Sau đó:
Dùng dashboard làm chuẩn cho mọi trang khác: cùng header, khoảng cách, cỡ chữ, kiểu nút và kiểu bảng. Cập nhật các trang Cài đặt và Lịch hẹn để khớp với nó.
Một màn hình tham chiếu đã hoàn thiện truyền đạt gu thẩm mỹ của bạn tốt hơn bất kỳ tính từ nào.
Bước 5: Lặp lại với yêu cầu nhỏ, cụ thể
Phản hồi cho AI hoạt động giống như phản hồi cho một nhà thiết kế junior: cụ thể, mỗi lần một khu vực, và nói rõ điều gì cần giữ.
| Mơ hồ | Cụ thể |
|---|---|
| "Làm đẹp hơn." | "Tăng khoảng cách giữa các phần lên 64 px, đặt tiêu đề trang 40 px, và làm chữ phụ xám vừa phải hơn." |
| "Trông rối quá." | "Bỏ viền thẻ ở hàng số liệu, căn số sang trái, và đặt nhãn phía trên bằng chữ in hoa nhỏ." |
| "Làm nổi bật hơn." | "Chỉ dùng màu nhấn cho nút chính. Nút phụ đổi thành viền." |
| "Cải thiện giao diện điện thoại." | "Trên màn hình điện thoại, xếp bộ lọc vào một bảng mở từ nút Lọc, và biến các hàng bảng thành thẻ." |
Luôn nói thêm điều cần giữ, như "giữ nguyên mọi route, nội dung và tính năng", để một lần chỉnh giao diện không lặng lẽ xóa mất chức năng. Và kiểm tra từng thay đổi trên màn hình cỡ điện thoại trước khi yêu cầu bước tiếp theo; xem cách xây web app thân thiện với điện thoại để biết một giao diện tốt trên màn hình nhỏ trông như thế nào.
Bước 6: Chi tiết tạo nên sự khác biệt giữa tốt và chung chung
Khi cấu trúc đã đúng, những điều nhỏ sau đây làm app trông hoàn thiện:
- Trạng thái rỗng. Người dùng mới chưa có dữ liệu sẽ thấy gì: một giải thích ngắn và một hành động rõ ràng, không phải một bảng trống.
- Trạng thái đang tải. Khung xương (skeleton) có hình dạng giống nội dung, thay vì vòng xoay ở khắp nơi.
- Trạng thái lỗi. Thông báo bằng ngôn ngữ đời thường, đặt cạnh ô đã gây ra lỗi.
- Trạng thái khi di chuột, lấy tiêu điểm và nhấn. Cho mọi phần tử tương tác. Viền tiêu điểm quan trọng với người dùng bàn phím.
- Nội dung thật. Thay "Lorem ipsum" và "Nguyễn Văn A" bằng văn bản và dữ liệu thực tế; nội dung giả che giấu lỗi bố cục.
- Biểu tượng từ một bộ thống nhất, dùng một hoặc hai kích cỡ, với độ dày nét nhất quán.
- Hình ảnh có mục đích. Ảnh thật về sản phẩm, địa điểm hoặc con người tốt hơn ảnh stock chung chung. Khi dùng ảnh stock hoặc ảnh do AI tạo, hãy giữ một phong cách nhất quán.
- Văn bản. Nhãn ngắn và cụ thể ("Đặt lớp", không phải "Gửi") góp phần vào cảm giác chất lượng nhiều hơn bất kỳ lựa chọn màu nào.
Lỗi thường gặp
- Thiết kế lại mọi thứ trong một prompt. Viết lại lớn gây ra hồi quy. Hãy làm từng trang một.
- Quá nhiều màu nhấn. Nếu mọi thứ đều nổi bật thì không có gì nổi bật.
- Căn giữa mọi thứ. Chữ căn giữa khó đọc ngoài tiêu đề; hãy căn trái phần lớn nội dung.
- Chữ nhỏ, tương phản thấp trông thanh lịch trên màn hình lớn nhưng không đọc được trên điện thoại ngoài nắng.
- Trang trí thay cho thứ bậc. Gradient và bóng đổ không thể sửa một màn hình mà hành động quan trọng nhất không rõ ràng.
- Bỏ qua trang đích. Với nhiều sản phẩm, đây là ấn tượng đầu tiên; xem cách xây trang đích có tỷ lệ chuyển đổi cao.
Để có thêm mẫu prompt ngoài thiết kế, đọc cách viết prompt cho công cụ tạo app bằng AI. Nếu sản phẩm của bạn chính là một portfolio thiết kế hoặc nhiếp ảnh, cách xây website portfolio đi sâu hơn về cách trình bày.
Thiết kế với Mythex
Trong Mythex, bạn mô tả thiết kế trong chat, xem nó trong bản xem trước trực tiếp, và kiểm tra khung cỡ điện thoại trước khi thay đổi tiếp theo. Tài liệu có các mẫu ngắn cho việc này: prompt về thiết kế và giao diện về cách nêu rõ điều cần đổi và điều cần giữ, và làm mới giao diện để cập nhật từng trang mà không mất tính năng. Mythex cũng có thể tìm ảnh stock hoặc tạo ảnh trong chat, như ảnh hero, ảnh nền hay ảnh chia sẻ, và đặt vào app khi bạn yêu cầu. Nếu một lượt chỉnh sửa đi sai hướng, hãy quay lại checkpoint trước đó. Hoặc xem các template nếu bạn muốn bắt đầu từ một thiết kế có sẵn rồi điều chỉnh.
Câu hỏi thường gặp
Vì sao app do AI thiết kế trông đều giống nhau?
Vì một prompt mơ hồ nhận về câu trả lời trung bình nhất: cùng font, gradient, thẻ bo tròn và phần hero căn giữa. Hãy đưa cho AI tham khảo, một hướng thiết kế có tên và quy tắc cụ thể về chữ, màu, khoảng cách, thì kết quả sẽ hết chung chung.
Tôi có thể đưa ảnh chụp màn hình cho AI để sao chép phong cách không?
Nhiều công cụ tạo app bằng AI nhận ảnh đính kèm, và ảnh chụp màn hình là cách rõ ràng nhất để thể hiện phong cách. Hãy mô tả điều bạn thích ở nó, như khoảng cách, kiểu chữ, cách dùng màu, thay vì yêu cầu sao chép nguyên sản phẩm của người khác.
Nếu xây app bằng AI thì tôi có cần nhà thiết kế không?
Với phiên bản đầu tiên thì không nhất thiết. Nhà thiết kế đóng góp nhiều nhất khi bạn có thương hiệu cần bảo vệ hoặc sản phẩm phức tạp, nơi quyết định bố cục ảnh hưởng đến việc người dùng thao tác có dễ không. Trước đó, tham khảo rõ ràng và các lần chỉnh nhỏ sẽ cho bạn một giao diện gọn gàng, dễ dùng.
Điều gì làm cho app trông chuyên nghiệp?
Sự nhất quán quan trọng hơn trang trí: một thang cỡ chữ, bảng màu nhỏ dùng có mục đích, khoảng cách theo thang cố định, mép căn thẳng hàng và thứ bậc rõ ràng để điều quan trọng nhất trên mỗi màn hình luôn dễ thấy.