Thử dùng Google Stitch: Tạo giao diện App quản lý danh mục tài sản kĩ thuật số
Hướng dẫn thực hành từng bước cách dùng Google Stitch để tạo giao diện ứng dụng theo dõi và quản lý danh mục tiền mã hóa, từ viết prompt, chọn chế độ thiết kế đến xuất code và đưa sang Figma.
QUILIX AI Insights là newsletter chia sẻ về chủ đề AI. Tại đây, bạn sẽ tìm được nhiều tin tức, kiến thức, kỹ năng AI được cập nhật liên tục mỗi ngày.
Lời nói đầu
Đây là một bài viết hay mình vô tình đọc được bên Codeacademy, sẵn đây dịch qua tiếng Việt và lan tỏa tới mọi người tinh thần cùng thực hành với AI thôi nhé!
Mình hoàn toàn không cổ súy hay tuyên truyền về đầu tư Crypto gì đâu. Tiền ảo lừa đảo đấy :)))
Xem lại bài viết về Google Stitch:
Mục lục
Giới thiệu về bài thực hành
Trong bài viết này, mình sẽ hướng dẫn cách dùng Google Stitch để thiết kế giao diện cho một ứng dụng di động theo dõi và quản lý danh mục tiền mã hóa mang tên CryptoTrack. Đây là ví dụ thực hành cụ thể, đi từng bước từ lúc đăng nhập cho đến lúc xuất thiết kế hoàn chỉnh.
Ứng dụng CryptoTrack mà mình sẽ thiết kế gồm các thành phần chính: tổng quan danh mục đầu tư, biểu đồ phân bổ tài sản, danh sách tiền tệ đang tăng hoặc giảm mạnh, biểu đồ giá theo thời gian, và bảng tin tức thị trường. Đây là một ứng dụng theo dõi tiền mã hóa hoàn chỉnh, phù hợp để minh họa toàn bộ khả năng của Google Stitch.
Yêu cầu trước khi bắt đầu
Chỉ cần một tài khoản Google là đủ. Google Stitch là công cụ hoạt động hoàn toàn trên trình duyệt web, không cần cài đặt phần mềm hay có kiến thức lập trình và thiết kế từ trước.
Truy cập tại: stitch.withgoogle.com
Đăng nhập và làm quen giao diện Google Stitch
Sau khi vào stitch.withgoogle.com và đăng nhập bằng tài khoản Google, giao diện Stitch hiện ra khá gọn gàng. Điểm đầu tiên cần chú ý là lựa chọn bố cục: Web hoặc Mobile. Vì mình đang thiết kế ứng dụng di động theo dõi tiền mã hóa, hãy chọn Mobile để canvas thiết kế hiển thị theo tỉ lệ màn hình điện thoại.
Việc chọn đúng bố cục ngay từ đầu quan trọng vì nó ảnh hưởng đến cách Stitch tạo ra các thành phần giao diện. Chế độ Mobile sẽ tạo ra nút bấm to hơn, thanh điều hướng ở dưới cùng, và khoảng cách giữa các phần tử phù hợp với ngón tay chạm màn hình thay vì con trỏ chuột.
Hai chế độ thiết kế trong Google Stitch
Google Stitch cung cấp hai chế độ làm việc khác nhau, phù hợp với hai tình huống sử dụng phổ biến nhất khi bắt đầu thiết kế giao diện.
Chế độ Standard - Gemini 2.5 Flash
Nhập mô tả bằng văn bản, Stitch tạo giao diện ngay lập tức. Tốc độ nhanh, hỗ trợ tối đa 350 lần tạo thiết kế mỗi tháng. Phù hợp để thử nhiều ý tưởng khác nhau trong thời gian ngắn.
Chế độ Experimental - Gemini 2.5 Pro
Upload hình phác thảo tay hoặc ảnh chụp màn hình, Stitch phân tích và tạo giao diện dựa trên hình đó. Chất lượng cao hơn, hỗ trợ 50 lần tạo mỗi tháng. Phù hợp khi đã có ý tưởng rõ ràng về bố cục.
Trong bài hướng dẫn này, mình sẽ thực hành cả hai chế độ với cùng một mục tiêu là tạo màn hình dashboard cho ứng dụng CryptoTrack, để bạn thấy rõ sự khác biệt về quy trình và kết quả giữa hai cách tiếp cận.
Tạo giao diện app bằng chế độ Standard
Chế độ Standard là điểm bắt đầu lý tưởng cho người mới dùng Stitch vì không cần chuẩn bị gì thêm ngoài việc mô tả bằng lời những gì mình muốn thấy trên màn hình.
Bước 1: Chọn Mobile và chế độ Standard
Chuyển toggle sang Standard, chọn bố cục Mobile. Canvas sẽ hiển thị theo kích thước màn hình điện thoại và ô nhập prompt xuất hiện phía dưới.
Bước 2: Xác định các thành phần giao diện cần có
Trước khi viết prompt, hãy liệt kê rõ ràng những thành phần giao diện cần xuất hiện trên màn hình và lý do vì sao mỗi thành phần cần có mặt. Việc này giúp prompt của bạn cụ thể và có cấu trúc hơn, thay vì mô tả chung chung.
Với ứng dụng CryptoTrack, các thành phần cần thiết gồm:
🔔Thanh điều hướng trên cùngHiển thị tên app và biểu tượng thông báo, giúp người dùng nhận biết ứng dụng và truy cập cảnh báo giá
💼Thẻ tổng quan danh mụcTổng giá trị đang nắm giữ và phần trăm thay đổi, giúp người dùng nắm bắt tình hình ngay khi mở app
🥧Biểu đồ tròn phân bổ tài sảnThể hiện trực quan tỉ lệ Bitcoin, Ethereum và các token khác trong danh mục
📊Khu vực tiền tệ trendingCuộn ngang, hiển thị ảnh coin, tên, giá và phần trăm thay đổi có màu xanh đỏ
📈Lưới tiền tệ tăng mạnh và giảm mạnhHai cột so sánh nhanh để ra quyết định giao dịch
📉Biểu đồ giá theo thời gianĐường giá lịch sử của token được chọn để phân tích xu hướng
📰Bảng tin tức thị trườngTiêu đề và hình thumbnail, cập nhật thông tin mới nhất từ thị trường tiền mã hóa
🧭Thanh điều hướng dưới cùngĐiều hướng giữa các trang Trang chủ, Danh mục, Thị trường và Cài đặt
Bước 3: Viết prompt và tạo thiết kế
Sau khi đã có danh sách thành phần cụ thể, chuyển danh sách đó thành một đoạn mô tả chi tiết bằng tiếng Anh và nhập vào ô prompt. Dưới đây là prompt mình dùng để tạo màn hình dashboard cho CryptoTrack:
Prompt cho Standard Mode
Design a mobile dashboard screen for a cryptocurrency tracking app called CryptoTrack. The screen should have a top navigation bar with the app name on the left and a notification bell on the right. Add a summary card at the top showing total portfolio value and a percentage change. Below that, include a pie chart showing how the portfolio is distributed across Bitcoin, Ethereum, and other tokens. Add a horizontal scrollable section for trending cryptocurrencies, with coin icons, names, prices, and color-coded % change (green/red). Below that, create a two-column grid for top gainers and losers. Include a line chart to show the price trend of selected cryptocurrencies over time. Add a news feed section with crypto headlines and thumbnails, and finish with a bottom navigation bar for Home, Portfolio, Market, and Settings. Use a dark theme with rounded corners and modern UI elements.Nhập prompt vào ô nhập liệu và nhấn nút “Generate designs”. Stitch sẽ phân tích mô tả và tạo ra bản thiết kế giao diện di động trong vài giây.
Bước 4: Xem xét và đánh giá kết quả
Sau khi xem kết quả, cần kiểm tra xem tất cả các thành phần đã yêu cầu có xuất hiện đầy đủ chưa. Từ lần thử với prompt trên, kết quả thu được bao gồm:
Các thành phần được tạo đúng: thẻ tổng quan danh mục, khu vực tiền tệ trending và lưới tiền tệ tăng giảm đều xuất hiện đúng vị trí. Giao diện tối với thiết kế bo góc hiện đại được áp dụng nhất quán.
Một số điểm cần điều chỉnh: tên app được căn giữa thay vì bên trái theo yêu cầu, Stitch tạo biểu đồ cột thay vì biểu đồ tròn cho phân bổ tài sản, một số biểu tượng trong thanh điều hướng hiển thị dưới dạng placeholder.
Lưu ý quan trọng
Những điểm chưa chính xác này là điều bình thường với bất kỳ công cụ AI tạo giao diện nào. Chúng hoàn toàn có thể sửa bằng cách tinh chỉnh prompt hoặc chỉnh sửa thêm trong Figma sau khi xuất.
Bước 5: Tinh chỉnh prompt để cải thiện kết quả
Để cải thiện các điểm chưa đúng ý, thêm hướng dẫn cụ thể hơn vào prompt và tạo lại. Dưới đây là các câu lệnh tinh chỉnh tương ứng với từng vấn đề:
Sửa vị trí tên app: “Place the app name CryptoTrack on the left side of the top navigation bar, not centered.”
Chỉ định loại biểu đồ: “Use a circular pie chart, not a bar graph, to show portfolio breakdown by crypto asset.”
Làm rõ biểu tượng: “Add bottom nav icons for Home, Portfolio, Market, and Settings with visible labels.”
Cải thiện bảng tin: “Display news section with thumbnail images on the left and crypto headlines on the right in a vertical list format.”
Tinh chỉnh màu sắc: “Apply a slightly transparent background to the nav bar and use subtle neon accent colors for trending coins.”
Mỗi lần điều chỉnh prompt và nhấn Generate, Stitch tạo lại thiết kế hoàn toàn mới dựa trên hướng dẫn đã cập nhật. Quá trình lặp lại này không mất nhiều thời gian và không cần vẽ lại thủ công.
Tạo giao diện app bằng chế độ Experimental
Chế độ Experimental cho phép bắt đầu từ một bản phác thảo hình ảnh thay vì mô tả bằng văn bản. Đây là lựa chọn tốt khi bạn đã có ý tưởng rõ ràng về bố cục và muốn Stitch hiện thực hóa đúng cấu trúc đó.
Bước 1: Chọn Mobile và chế độ Experimental
Chuyển toggle sang Experimental và chọn bố cục Mobile. Giao diện lúc này có thêm khu vực để upload hình ảnh.
Bước 2: Chuẩn bị và upload wireframe
Chuẩn bị một bản phác thảo tay trên giấy hoặc vẽ kỹ thuật số. Bản phác thảo chỉ cần thể hiện bố cục cơ bản của các thành phần, không cần chi tiết hay thẩm mỹ cao. Wireframe cho CryptoTrack cần có:
Thanh trên cùng với tên app và biểu tượng thông báo
Thẻ tổng quan danh mục và biểu đồ tròn phân bổ tài sản
Khu vực cuộn ngang cho coin đang trending
Lưới hai cột cho tiền tệ tăng mạnh và giảm mạnh
Khu vực bảng tin tức với thumbnail và tiêu đề
Thanh điều hướng dưới cùng với bốn biểu tượng
Sau khi có phác thảo, chụp ảnh rõ nét hoặc scan rồi upload vào Stitch. Thêm prompt ngắn để hướng dẫn thêm về phong cách:
Prompt kèm theo wireframe
Generate a mobile crypto dashboard UI based on the uploaded wireframe. Use a dark theme with rounded cards, including charts, news, and navigation sections.Bước 3: Xem kết quả từ chế độ Experimental
Stitch phân tích wireframe và tạo giao diện theo đúng cấu trúc bố cục đã phác thảo. Kết quả từ chế độ Experimental thường bám sát bố cục gốc hơn so với chế độ Standard, nhưng vẫn có thể cần điều chỉnh thêm một số chi tiết như nhãn, biểu tượng hoặc khoảng cách.
Wireframe càng rõ ràng và chi tiết thì kết quả Stitch tạo ra càng chính xác. Nếu kết quả chưa đúng ý, thử vẽ wireframe kỹ hơn hoặc thêm mô tả cụ thể hơn vào prompt kèm theo.
Xuất thiết kế sang Figma và lấy code
Sau khi hài lòng với thiết kế, Google Stitch cung cấp hai lựa chọn xuất phù hợp với hai hướng làm việc khác nhau.
Xuất sang Figma để tiếp tục chỉnh sửa
Nếu muốn hoàn thiện thiết kế thêm, như điều chỉnh khoảng cách, thay đổi font chữ, hoặc cộng tác với team thiết kế, hãy xuất sang Figma:
Nhấn nút “Copy to Figma” ở phía trên thiết kế đã tạo
Mở file Figma, chọn khung muốn paste vào
Nhấn Ctrl+V (Windows) hoặc Cmd+V (Mac) để dán thiết kế vào
Lưu ý: Tính năng “Copy to Figma” hiện chỉ có trong chế độ Standard. Nếu đang dùng chế độ Experimental, nút này sẽ không xuất hiện.
Lấy code HTML, CSS để bắt đầu lập trình
Nếu muốn bắt đầu phát triển trực tiếp từ thiết kế, Stitch có thể xuất code lập trình sẵn dùng:
Nhấp trực tiếp vào bản thiết kế đã tạo
Hộp thoại xuất hiện, chọn tab “Code”
Copy đoạn code HTML và CSS và dán vào trình soạn thảo code như VS Code
Tính năng xuất code hoạt động được ở cả hai chế độ Standard và Experimental, và đây là điểm khác biệt quan trọng so với nhiều công cụ thiết kế AI khác. Code xuất ra từ Stitch là điểm khởi đầu tốt để phát triển giao diện tĩnh trước khi thêm logic vào phía sau.
Cách viết prompt hiệu quả cho Google Stitch
Chất lượng thiết kế mà Stitch tạo ra phụ thuộc rất nhiều vào cách bạn mô tả yêu cầu. Dưới đây là các thành phần cần có trong một prompt tốt.
Xác định mục đích của màn hình
Nêu rõ loại màn hình đang thiết kế để Stitch chọn đúng kiểu bố cục. Ví dụ: “Design a mobile dashboard screen for a cryptocurrency tracking app” cho biết rõ đây là màn hình tổng quan cho ứng dụng di động theo dõi tiền mã hóa.
Liệt kê các thành phần giao diện cần có
Đặt tên cụ thể từng thành phần muốn xuất hiện. Dùng các thuật ngữ giao diện quen thuộc như navigation bar, summary card, pie chart, scrollable section, two-column grid, news feed. Càng cụ thể thì kết quả càng sát ý.
Có thể bạn quan tâm:
Mô tả bố cục và cấu trúc
Cho biết các thành phần nằm ở đâu trên màn hình: trên cùng, dưới cùng, bên trái hay bên phải. Mô tả cách sắp xếp như nằm ngang, cuộn dọc, lưới hai cột. Ví dụ: “a horizontal scrollable section” khác với “a vertical list”.
Chỉ định phong cách và màu sắc
Nêu rõ theme màu và phong cách thiết kế. Ví dụ: “Use a dark theme with rounded corners and modern UI elements” hay “Apply blue and green color scheme with minimal design”. Không mô tả phong cách thì Stitch sẽ tự chọn theo mặc định.
Dùng màu sắc để mã hóa trạng thái
Với ứng dụng tài chính, nên chỉ rõ màu đại diện cho tăng và giảm: “color-coded % change (green for positive, red for negative)”. Điều này giúp Stitch tạo ra giao diện trực quan và nhất quán với quy ước trong ngành tài chính.
Tổng kết
Qua bài thực hành tạo giao diện ứng dụng CryptoTrack với Google Stitch, có thể thấy rõ hai cách tiếp cận thiết kế khác nhau: Chế độ Standard phù hợp khi bắt đầu từ ý tưởng và mô tả bằng văn bản, còn chế độ Experimental phù hợp khi đã có bản phác thảo bố cục cụ thể muốn hiện thực hóa.
Cả hai chế độ đều có thể tạo ra giao diện di động có cấu trúc tốt trong vài giây, kết hợp với khả năng tinh chỉnh qua prompt và xuất sang Figma hoặc lấy code để phát triển tiếp.
Đây là quy trình phù hợp với cả người mới bắt đầu thiết kế lẫn developer cần tạo giao diện nhanh mà không có sẵn đội thiết kế.
Bài hướng dẫn này dựa trên thông tin từ Codecademy: Design Mobile App UI with Google Stitch. Để thực hành ngay, truy cập stitch.withgoogle.com.
Xem lại bài viết:
Theo dõi mình ở các mạng xã hội khác:
TikTok | YouTube | Facebook | Instagram | X | Threads
