AI đã tiến gần đến khả năng của con người trong nhiều lĩnh vực, nhưng thiết kế từ lâu vẫn là một trong những lĩnh vực mà AI gặp khó khăn. Tuy nhiên, tôi nghĩ nhiều người hiểu hơi sai về ý nghĩa của việc "thiết kế với AI."
Trong bài viết này, dựa trên bài đăng "How To Actually Design With AI" của Leon Lin (@LexnLin), tôi đã tổng hợp cẩn thận các cách thực tế để tiến hành thiết kế bằng AI.
Ở cuối bài viết, tôi đang tặng một bộ kit hệ thống thiết kế để tạo ra các thiết kế chất lượng cao với Claude.
Bạn có thể nhận nó ở cuối bài viết.
Những điều kiện tiên quyết cần ghi nhớ
"Thiết kế với AI" không có nghĩa là giao phó mọi thứ cho AI. Ý tưởng, định hướng, trực giác và sự sáng tạo cuối cùng đều đến từ bạn. Sẽ dễ hiểu hơn nếu bạn coi AI như một công cụ để "định hình (thực thi)" những điều đó.
Quy trình chung bao gồm 3 bước sau:
- Tự phát triển ý tưởng
- Thu thập cảm hứng
- Chuyển suy nghĩ của bạn thành lời nhắc và để AI tạo ra
Bạn có thể sử dụng bất kỳ công cụ hay môi trường (harness) nào như Cursor, Codex hoặc Claude. Bản chất nằm ở việc "chuyển đổi suy nghĩ của bạn thành hướng dẫn."
AI rất giỏi trong việc thực thi, nhưng nó chưa có khả năng sáng tạo thực sự. Nó hiểu các "quy tắc thiết kế" như khoảng trắng, kiểu chữ, lý thuyết màu sắc và hệ thống phân cấp. Tuy nhiên, nó không thể hiểu được điều gì thực sự "tốt," "độc đáo" hay "có ý nghĩa" — nói cách khác, đó là gu thẩm mỹ.
Đây là khoảng cách lớn nhất. Tại thời điểm này, bạn không thể trao cho AI gu thẩm mỹ thực sự, nhưng bạn có thể giải quyết hạn chế đó bằng cách giả định nó tồn tại.
Phương pháp 1: Sử dụng kỹ năng thiết kế
Đây là cách tiếp cận nhanh nhất. Khi bạn không có thời gian hoặc đang làm một thứ gì đó nhỏ, việc dựa vào các "kỹ năng thiết kế" được chuẩn bị sẵn là hiệu quả.
Ví dụ bao gồm:
- Impeccable (impeccable.style
- Kỹ năng UI của Emil Kowalski (GitHub: emilkowalski/skills)
- Skills.sh
- TasteSkill (tasteskill.dev
Quy trình rất đơn giản:
- Thêm kỹ năng thiết kế
- Cung cấp ngữ cảnh cho AI
- Gửi một vài lời nhắc để AI tạo ra một trang web, ứng dụng hoặc áp phích
- Sửa các vấn đề rõ ràng
- Xuất bản
Kết quả thường là "khá tốt." Chúng có thể trông giống với các thiết kế do AI tạo ra khác, nhưng sử dụng các kỹ năng chất lượng cao sẽ tránh được những thất bại tồi tệ nhất và vẻ ngoài "kiểu AI." Đây là phương pháp mà nhiều người thực sự sử dụng.
Phương pháp 2: Tự thiết kế với AI
Nếu bạn muốn tạo ra một thứ gì đó "thực sự nổi bật," bạn cần đi xa hơn một bước. Bạn muốn người dùng cảm thấy rằng sản phẩm của bạn là "được suy nghĩ kỹ lưỡng" khi họ chạm vào nó — để làm được điều đó, cần có một quy trình có chủ đích hơn.
Dù đó là ứng dụng di động, ứng dụng máy tính, trang web, landing page, bảng điều khiển hay áp phích, trước tiên bạn cần một định hướng rõ ràng. Nếu bạn không biết mình muốn làm gì, AI sẽ không tìm ra nó cho bạn.
Bắt đầu với "Ý nghĩa"
Trước hết và quan trọng nhất, hãy xác định nền tảng. Hãy thử trả lời những câu hỏi này:
- Sản phẩm này dành cho ai?
- Nó giải quyết vấn đề gì?
- Nó nên mang lại cảm giác gì?
- Nó thể hiện điều gì?
Giao diện người dùng phản ánh "ý nghĩa" của một sản phẩm. Hãy viết những điều này ra. Bạn cũng có thể sử dụng AI ở đây, nhưng mẹo là sử dụng nó để đặt câu hỏi cho bạn thay vì thiết kế.
Ví dụ, hãy để AI hỏi bạn:
- Sản phẩm này nói về điều gì?
- Người dùng mục tiêu là ai?
- Bạn muốn truyền tải cảm xúc gì?
- Bầu không khí thương hiệu nên như thế nào?
- Màu sắc và phông chữ nào phù hợp?
- Tối giản / Vui tươi / Cao cấp / Kỹ thuật / Thử nghiệm — hướng đi nào?
Thu thập cảm hứng
Khi đã có định hướng, hãy bắt đầu thu thập các tài liệu tham khảo. Một nguồn mạnh mẽ là Mobbin, nơi có các màn hình sản phẩm thực tế qua nhiều danh mục khác nhau.
Điều quan trọng ở đây không chỉ là nhìn và nghĩ "cái đó đẹp." Hãy tự hỏi tại sao nó đẹp.
- Có phải là bố cục?
- Khoảng trắng?
- Kiểu chữ?
- Cấu trúc?
- Tương tác?
Hãy lưu lại những thứ bạn thích và sắp xếp chúng vào các thư mục như:
- Điều hướng
- Hero
- Giá cả
- Thẻ
- Màn hình di động
- Bảng điều khiển
- Hoạt ảnh
- Kiểu chữ
Dành thời gian để xây dựng thư viện tham khảo của riêng bạn như thế này là cách bạn trau dồi "gu thẩm mỹ."
Các nguồn hữu ích khác bao gồm Pinterest, Cosmos, Awwwards, Webflow Templates, Craftwork, Rebrand Gallery, Component Gallery, Savee và Lummi.
Lưu ý: tránh sao chép toàn bộ thiết kế. Điều quan trọng là kết hợp nhiều ý tưởng và nâng chúng lên thành một thứ phù hợp với sản phẩm của bạn.
Lập bản đồ cấu trúc
Tiếp theo, xác định những gì bạn thực sự cần xây dựng. Đối với một trang web, đó có thể là điều hướng, hero, tính năng, giá cả, lời chứng thực, CTA và chân trang.
Đối với một ứng dụng, đó có thể là onboarding, trang chủ, tìm kiếm, hồ sơ, cài đặt, luồng chính và trạng thái trống.
Mỗi phần cần nội dung rõ ràng. Đối với phần hero, bạn cần tiêu đề, mô tả, CTA và hình ảnh trực quan. AI có thể giúp viết nội dung, nhưng "sự rõ ràng" cuối cùng đến từ bạn.
Xây dựng theo thành phần
Cuối cùng, đến lúc sản xuất. Hãy lấy các ý tưởng riêng lẻ bạn đã tham khảo và xây dựng lại chúng để phù hợp với sản phẩm của bạn.
Thay vì nói "làm một trang web hoàn chỉnh," chìa khóa là nói "dựa trên phong cách này, hãy tạo một phần hero phù hợp với thương hiệu của tôi."
Tiến hành từng bước: Điều hướng → Hero → Thẻ → Nút bấm → Kiểu chữ → Chi tiết. AI làm việc tốt hơn nhiều với các tác vụ nhỏ, và điều này cho phép bạn duy trì quyền kiểm soát.
Tạo tài sản tùy chỉnh
Sử dụng tạo hình ảnh khi cần. Các công cụ tạo hình ảnh hiện đã đủ mạnh. Mẹo là truyền đạt rõ ràng ngữ cảnh như màu sắc, phong cách, bố cục và mục đích.
Tránh sử dụng ảnh stock chung chung. Sử dụng hình ảnh tùy chỉnh tạo ra sự thống nhất xuyên suốt.
Quy trình tổng thể
Tóm lại, quy trình như sau:
- Xác định ý tưởng
- Làm rõ mục đích và người dùng
- Quyết định định hướng thương hiệu
- Thu thập tài liệu tham khảo
- Sắp xếp chúng
- Lập bản đồ cấu trúc
- Tạo các thành phần
- Tạo tài sản
- Thêm tương tác
- Hoàn thiện toàn bộ
Bạn sẽ nhận được kết quả tốt hơn nhiều so với việc tạo bằng một lời nhắc duy nhất.
Phương pháp 3: Sử dụng bảng cảm hứng
Cũng có một "phương án trung gian" nhanh hơn một chút. Thay vì lắp ráp mọi thứ từng cái một, bạn cung cấp cho AI một bộ tham khảo đã được chọn lọc.
Thu thập ảnh chụp màn hình từ Mobbin, Awwwards, Webflow, v.v. và yêu cầu:
Hãy kết hợp phong cách và định hướng của các tài liệu tham khảo này để tạo ra một thiết kế cho sản phẩm của tôi. Tuy nhiên, đừng sao chép chúng một cách chính xác.
Tất nhiên, điều này giả định rằng bạn đã cung cấp đủ ngữ cảnh và để AI đặt câu hỏi trước. Nó nhanh hơn so với làm thủ công nhưng mang lại kết quả tốt hơn nhiều so với một lời nhắc tổng quát.
Tóm tắt 3 phương pháp
- Phương pháp 1: Kỹ năng thiết kế — Nhanh, kết quả khá tốt
- Phương pháp 2: Dựa trên thành phần — Chậm hơn, nhưng chất lượng cao nhất
- Phương pháp 3: Bảng cảm hứng — Cân bằng
Các công cụ hữu ích khác
- Tạo SVG: Các công cụ như Quiver có thể tạo SVG. Vì các phần tử được tách riêng, nên dễ dàng tạo hoạt ảnh hơn.
- Video: Các công cụ như Google Flow. Có thể nâng cấp hero, nền và demo sản phẩm.
- Thư viện hình ảnh: Các nền tảng như Lummi. Nhưng hãy chọn hình ảnh phù hợp với thương hiệu.
- Xếp lớp: Thêm chiều sâu, chuyển động và tương tác bằng cách xóa nền và xếp lớp. Sự tích lũy các chi tiết tạo ra sự khác biệt lớn.
Kết luận
AI không phải là sự thay thế cho suy nghĩ của bạn.
- Làm gì
- Tại sao nó quan trọng
- Nó dành cho ai
- Nó nên mang lại cảm giác gì
Bạn luôn là người quyết định những điều này. AI chỉ thực thi chúng nhanh hơn. Kết quả tốt nhất đến không phải từ lời nhắc tốt hơn, mà từ gu thẩm mỹ tốt hơn.
*Bài viết này được xây dựng lại dựa trên bài đăng X "How To Actually Design With AI" của Leon Lin (@LexnLin).
Tôi đang tặng miễn phí "Claude Design System Kit" trên LINE.
▼ Đăng ký LINE để nhận "Claude Design System Kit"
https://t.co/90omRA4UQ7
Hãy tham gia Open Chat (LINE OpenChat), sau đó từ LINE chính thức được đề cập trong phần ghi chú, hãy gửi:
Design System
và bạn sẽ nhận được ưu đãi.
※ Vui lòng không gửi từ khóa trong chính Open Chat.
Tôi khuyên bạn nên đưa mẫu này vào Claude Design và thử tạo một tài liệu. Chỉ một lần đó thôi cũng đủ giúp bạn cảm nhận được việc sử dụng hệ thống thiết kế.
▼ Đăng ký LINE để nhận "Claude Design System Kit"
