Hôm nay, mình sẽ cập nhật cho các bạn một thông tin cực kỳ nóng hổi mà chắc chắn những ai làm về thiết kế UI/UX hay phát triển ứng dụng sẽ không thể bỏ qua. Google vừa cho ra mắt một công cụ AI thiết kế giao diện người dùng có tên là Stick AI. Hiện tại, Stick vẫn đang trong giai đoạn Beta và điều tuyệt vời là hầu như ai cũng có thể sử dụng miễn phí! Tuy nhiên, Stick vẫn chưa khả dụng tại Việt Nam, nên trong bài viết này, mình sẽ hướng dẫn mọi người cách chuyển vùng để có thể trải nghiệm công cụ đầy tiềm năng này.
Giao diện ứng dụng Google Stitches AI
Một điều thú vị về Stick là bạn chỉ cần nhập một prompt (lệnh mô tả) ngắn gọn, và nếu muốn, bạn có thể đính kèm thêm hình ảnh. Sau đó, AI sẽ tự động tạo ra các giao diện ấn tượng cho ứng dụng web hoặc mobile của bạn chỉ trong vài giây. Và hãy nhớ, nó hoàn toàn miễn phí nhé!
Việc bạn cần làm là truy cập vào đường dẫn https://stitch.withgoogle.com hoặc tìm kiếm “Stick AI” trên Google để đến với giao diện chính của Stick.
Cách Truy Cập Stick AI Từ Việt Nam Với VPN
Như đã đề cập, Stick hiện chưa khả dụng tại Việt Nam. Vì vậy, để có thể sử dụng, chúng ta cần chuyển vùng IP sang Mỹ. Đây là cách thực hiện đơn giản:
Đối với người dùng MacBook: Bạn có thể tải ứng dụng Urban VPN từ App Store.
Đối với người dùng Windows: Bạn có thể tìm kiếm Urban VPN hoặc sử dụng kênh mà mình gắn ở dưới phần mô tả của video hướng dẫn này (nếu có).
Cách cài đặt và sử dụng Urban VPN rất đơn giản. Bạn chỉ cần tải về, kích hoạt và chọn vùng mới là Mỹ (United States) là đã có thể truy cập Stick được rồi.
Hướng Dẫn Sử Dụng Stick AI Để Thiết Kế Giao Diện
Sau khi đã truy cập được vào Stick, bạn chỉ việc mô tả ý tưởng mà mình muốn thiết kế, rồi sau đó nhấn nút Generate Design. Stick AI sẽ bắt đầu tạo ra một giao diện mới dựa trên mô tả của bạn. Bạn có thể copy mã code hoặc import sang Figma để chỉnh sửa ngay lập tức.
Bước 1: Đăng Nhập & Nhập Mô Tả
Đầu tiên, hãy truy cập https://stitch.withgoogle.com và chọn đăng nhập. Bạn có thể đăng nhập bằng tài khoản Google của mình, vì đây là công cụ của Google mà.
Ở giữa màn hình sẽ có một khung chat. Tại đây, bạn nhập mô tả vào. Bạn chỉ cần viết nội dung bằng tiếng Anh đơn giản, mô tả rõ ràng yêu cầu của bạn. Ví dụ:
Mình muốn tạo một ứng dụng xem phim, mình sẽ gõ là “Movie Streaming App”.
Nếu muốn chi tiết hơn, bạn có thể mô tả rõ ràng từng phần. Sau khi nhập xong, mình sẽ chọn Mobile (hoặc Web) rồi bấm Generate Design.
Lúc này, Stick sẽ hỏi thêm bạn có muốn ứng dụng phim này gồm những màn hình nào không? Ví dụ như màn hình trang chủ, tìm kiếm, hay chi tiết phim? Mình sẽ nhập là “I want to have these pages: home page, trending film, search page, profile page, film detail review”.
Bước 2: Xem Kết Quả Thiết Kế
Và đây là giao diện mà Stick sẽ trả ra cho chúng ta! Có đầy đủ các trang mà chúng ta đã nhập mô tả. Thật ấn tượng phải không?
Mình sẽ thử thêm một ví dụ nữa là yêu cầu Stick tạo ra một ứng dụng nghe nhạc. Mình chỉ nhập đơn giản là “Music Streaming App”. Cùng chờ đợi kết quả xem nó như thế nào nhé!
Ok, và đây là kết quả! Nó có màn hình tìm kiếm, các gợi ý, các danh mục. Giao diện trông khá giống với Spotify, có cả phần thư viện trên chính màn hình phát nhạc và cài đặt. Khá là ok đó!
Bước 3: Gia Tiếp Với AI Để Chỉnh Sửa & Bổ Sung
Giả sử bây giờ mình muốn tạo thêm một màn hình chia sẻ. Mình sẽ nhập là “Create a new screen for sharing” rồi nhấn Generate xem thử nó sẽ ra cái gì nha.
Ồ, và Stick nó sẽ tạo ra một pop-up như thế này với các tùy chọn chia sẻ như là Copy link, Nhắn tin, Instagram Story, Snapchat, Facebook. Bạn thấy đó, bạn hoàn toàn có thể gia tiếp với AI như một cộng sự thiết kế và nó sẽ giúp bạn tạo ra từng màn hình một cách chi tiết, rất nhanh và tiện cho những ai làm sản phẩm về UI/UX, startup hoặc những bạn còn muốn prototype gấp.
##Tùy Chỉnh & Tích Hợp Figma Với Stick AI
Chỉnh Sửa Trực Tiếp Trên Stick
Nếu bạn muốn thay đổi một số thành phần trong thiết kế, hoàn toàn có thể làm được luôn. Chẳng hạn như mình sẽ bấm vào phần Edit Theme. Ở đây, bạn có thể chọn bảng màu mà mình muốn sử dụng (ví dụ mình sẽ giữ nguyên bảng màu này luôn). Ngoài ra, bạn có thể chuyển qua Light mode hoặc Dark mode, tùy chỉnh độ bo góc của các khối.
Thêm một điểm hay nữa là nếu bạn muốn chỉnh sửa bất kỳ trang nào mà AI đã tạo ra, bạn cũng có thể làm điều đó. Ví dụ, ở trang này, chỉ cần bấm vào nút Edit. Nó sẽ mở ra một phần chat bên cạnh. Ở khung chat đó, bạn lại tiếp tục nhập prompt, mô tả thay đổi mà mình mong muốn. Sau đó, nhấn Enter thì AI nó sẽ cập nhật lại giao diện cho các bạn. Quá tiện đúng không?
Tích Hợp Dễ Dàng Với Figma
Một tính năng cực kỳ đắt giá của Stick là khả năng tích hợp Figma. Nếu bạn muốn đưa thiết kế này sang Figma, chỉ cần copy rồi dán là xong!
Ví dụ như mình muốn copy nguyên trang này, chỉ cần bấm vào nút có biểu tượng Figma ở đây. Đợi một chút, khi Stick báo là thiết kế đã được copy vào clipboard, bạn chỉ cần nhấn Command + V (trên Mac) hoặc Control + V (trên Windows) để dán nó vào Figma.
Sự đặc biệt của Stick so với những công cụ khác là nó không chỉ copy thuần ảnh mà nó còn có thể copy cả một hệ thống thiết kế đúng theo cấu trúc của UI/UX, hỗ trợ cả Auto Layout – một trong những thứ rất quan trọng trong thiết kế UI/UX.
Mình sẽ mở một project trống trong Figma. Đây, đang ở page đầu tiên. Mình sẽ nhấn Command + V. Đây rồi! Thiết kế vừa tạo từ Stick đã nằm gọn ở trong Figma. Bạn sẽ thấy đầy đủ tất cả các section. Muốn chỉnh gì thì cứ chọn vào từng phần cụ thể thôi, ví dụ như chỉnh chữ, bo góc, màu sắc, thay thế hình ảnh. Mọi thứ đều có thể làm trực tiếp trong Figma!
Tổng Kết Về Stick AI
Tóm lại, cách hoạt động của Stick rất đơn giản: bạn chỉ cần một câu tiếng Anh đơn giản, AI sẽ tạo ra giao diện giúp bạn. Sau đó, bạn có thể copy nó sang Figma và sử dụng liền luôn. Nếu mà muốn chỉnh sửa thêm, bạn có thể đổi bảng màu, phong cách bo góc, vân vân. Còn nếu muốn chỉnh một nội dung cụ thể, thì chỉ cần mô tả bằng prompt, còn lại là AI sẽ lo hết cho các bạn.
Stick từ Google là một công cụ thiết kế UI/UX cực kỳ dễ dùng, miễn phí hoàn toàn và rất đáng để các bạn thử nếu bạn đang làm web hay mobile app nha. Mình sẽ để cái link ở trong phần mô tả để các bạn truy cập thử. Cảm ơn các bạn đã xem blog đến đây. Nếu thấy hay thì nhớ đăng ký kênh và hẹn gặp lại các bạn ở bài viết tiếp theo!
