Google Stitch: Từ “vibe design” đến ứng dụng chạy thật — Cẩm nang chi tiết về công cụ thiết kế giao diện miễn phí của Google Labs
Trong thời đại AI có thể viết mã, tạo ứng dụng và thậm chí vận hành cả một dự án phần mềm, khâu thiết kế giao diện vẫn thường là điểm nghẽn. Đó là lúc Google Stitch xuất hiện. Đây không chỉ là một công cụ vẽ wireframe hay mockup thông thường, mà là một môi trường thiết kế giao diện do AI vận hành, nơi bạn mô tả ý tưởng bằng ngôn ngữ tự nhiên và nhận lại các màn hình hoàn chỉnh, có bố cục, màu sắc, phông chữ, và cả mã nguồn thực tế phía sau.
Bài viết này sẽ đi sâu vào toàn bộ hành trình từ khái niệm, giao diện, tính năng, trải nghiệm thực tế cho đến cách bàn giao thiết kế sang một AI coding agent để biến giao diện thành ứng dụng chạy được.
1. Google Stitch là gì?
Google Stitch là một trang web có địa chỉ stitch.withgoogle.com, được phát triển bởi Google Labs — nơi Google thử nghiệm các dự án mới. Công cụ này hoàn toàn miễn phí và chỉ cần một tài khoản Google bình thường, không yêu cầu thẻ tín dụng.
Stitch tập trung làm một việc và làm rất tốt: thiết kế giao diện (các màn hình) của một ứng dụng hoặc trang web. Bạn mô tả những gì mình muốn, và Stitch trả về các màn hình thực tế với bố cục, màu sắc, phông chữ chuẩn chỉnh — không phải bản phác thảo thô. Điều đáng chú ý là phía sau mỗi màn hình là mã nguồn thực tế (real code), để lập trình viên hoặc AI coding agent có thể tiếp quản công việc từ đó.
Nói cách khác, Stitch không chỉ giúp bạn “nhìn thấy” ứng dụng sẽ trông như thế nào, mà còn tạo ra điểm khởi đầu kỹ thuật để đội ngũ phát triển có thể lao vào viết logic.
2. Stitch nằm ở đâu trong hệ thống công cụ AI?
Để hiểu rõ vai trò của Stitch, hãy đặt nó cạnh các công cụ khác:
AI Studio: tạo ra toàn bộ một ứng dụng hoạt động từ câu lệnh.
NCGravity / Anti-Gravity: là nơi tác nhân (agent) xây dựng và thay đổi mã nguồn thực tế trên máy tính của bạn.
Stitch: xuất hiện trước cả hai công cụ trên. Đây là nơi bạn quyết định ứng dụng trông sẽ như thế nào trước khi bất kỳ ai viết mã logic.
Google gọi triết lý này là “vibe design” — thiết kế theo cảm hứng/phong cách. Thay vì tự vẽ các ô vuông và chọn phông chữ, bạn mô tả cảm giác mà ứng dụng nên mang lại, và Stitch sẽ lo phần còn lại.
Có hai bản cập nhật quan trọng đã biến Stitch thành công cụ như ngày nay:
Tháng 3: Stitch chuyển sang infinite canvas (bảng vẽ vô cực), nơi tất cả các màn hình nằm cạnh nhau.
Tháng 5: Stitch Agent ra đời, cho phép thiết kế theo thời gian thực ngay trên bảng vẽ và cho phép bạn điều chỉnh nó trong khi nó đang làm việc.
3. Giao diện và các tính năng cốt lõi
Khi mở Stitch, bạn sẽ thấy một ô nhập prompt lớn. Ở phía dưới, bạn chọn app (ứng dụng điện thoại) hoặc web (trang web) để các màn hình được định kích thước phù hợp cho điện thoại hoặc trình duyệt.
Ở bên phải là model picker (trình chọn mô hình) với hai lựa chọn:
Speed: dùng Gemini 3.5 Flash, chạy nhanh cho các thao tác qua lại liên tục.
Balanced: dùng Gemini 3.8 Flash, chậm hơn một chút nhưng chất lượng tốt hơn.
Các nút chức năng khác bao gồm:
Palette: chọn hệ thống thiết kế (design system) — để Stitch tự chọn từ prompt của bạn hoặc bắt đầu từ các mẫu có sẵn.
Dấu cộng (+): đính kèm điểm khởi đầu như hình ảnh, tệp tin hoặc địa chỉ trang web.
Enhanced Prompt: giúp cải thiện câu lệnh của bạn.
Live Mode: cho phép bạn nói chuyện với Stitch bằng giọng nói, nó sẽ trả lời và thiết kế trong lúc bạn nói.
Khi bạn gửi một prompt, bạn sẽ chuyển đến canvas (bảng vẽ). Các màn hình nằm cạnh nhau và bạn có thể phóng to, thu nhỏ, kéo đi quanh một bảng trắng lớn. Bên phải là các công cụ lựa chọn, đánh dấu, chỉnh sửa trực tiếp, kéo màn hình và hệ thống thiết kế. Các phản hồi của AI hiện ở bên trái, bạn nhập nội dung vào ô phía dưới. Các nút chia sẻ và xuất file nằm ở phía trên.
Công cụ này miễn phí với một lượng credit hàng ngày được làm mới mỗi ngày — tại thời điểm này là 400 credit mỗi ngày.
4. Trải nghiệm thực tế: Thiết kế trang chủ tiệm bánh “Hearth”
Để thấy Stitch hoạt động, hãy thử một ví dụ nhanh. Chọn Web và mô hình Balanced. Prompt là:
“Trang chủ cho một tiệm bánh ở khu phố có tên là Hearth.”
Câu lệnh chỉ cần gồm: mục đích trang web, các phần cần có, và một dòng mô tả cảm giác của nó. Bạn không cần phải chọn phông chữ hay kích thước pixel cụ thể.
Stitch Agent không bắt bạn phải chờ đợi một bức ảnh hoàn chỉnh tĩnh. Bạn sẽ được xem quá trình thiết kế diễn ra: đầu tiên là hệ thống thiết kế (màu sắc, phông chữ), tiếp theo là logo, ảnh chính (hero photo) và sau đó là toàn bộ trang web.
Điểm nổi bật từ bản cập nhật tháng 5: bạn không cần phải đợi nó làm xong mới thay đổi ý định. Trong lúc nó đang chạy, bạn có thể nhập tin nhắn mới:
“Làm cho nó ấm cúng hơn với nền kem ấm và tiêu đề dạng chữ có chân (serif).”
Hãy nhìn vào bảng vẽ: nó không dừng lại và làm lại từ đầu, mà tiếp nhận hướng đi mới ngay lập tức.
Trang hoàn thiện sẽ có: nền màu kem ấm áp, bức ảnh chụp bánh mì tươi lớn, tiêu đề chữ serif “Baked this morning” với nút đặt hàng trước (order ahead) hiển thị ngay bên cạnh, cùng các loại bánh trong ngày ở phía dưới.
Các cách chỉnh sửa
Có 3 cách chỉnh sửa chính:
Direct Edit (Chỉnh sửa trực tiếp): hoàn toàn miễn phí, không cần dùng credit hay viết prompt. Bạn chỉ cần nhấp vào tiêu đề và gõ thẳng văn bản.
Select Tool (Công cụ chọn): nhấp vào một màn hình, nó sẽ hiện thành một thẻ nhỏ trong khung chat để các câu lệnh tiếp theo chỉ áp dụng riêng cho màn hình đó.
Mark Tool (Công cụ đánh dấu): vẽ một hộp khoanh vùng khu vực cụ thể (ví dụ: các thẻ thực đơn) và yêu cầu thay đổi riêng khu vực đó (ví dụ: “Biến thành dạng lưới 2 cột với nhãn ‘hết hàng’ ở một món”).
Tạo biến thể
Khi bạn chưa chắc thiết kế đầu tiên đã hoàn hảo, hãy chọn màn hình, mở mục Generate và chọn Variations. Stitch sẽ tạo ra 3 phiên bản mới với các phong cách khác nhau đặt cạnh bản gốc để bạn so sánh (kiểu tạp chí, kiểu tối giản, kiểu sạp chợ ấm cúng).
Hệ thống thiết kế
Đây là phần quan trọng nhất giúp giữ cho toàn bộ ứng dụng có phong cách nhất quán. Bạn có thể thay đổi màu chủ đạo (seed color), phông chữ, độ bo góc các nút. Khi bạn thay đổi và bấm Save and apply, mọi màn hình sử dụng nó sẽ tự động cập nhật.
Phía sau theme là một tệp có tên là design.md — các quy tắc thiết kế được viết bằng tiếng Anh thông thường (màu nào dùng cho đâu, tiêu đề ra sao, nút bấm hành xử thế nào). Bạn có thể đọc và tự chỉnh sửa tệp này để mang sang dự án khác hoặc đưa cho AI coding agent.
Tạo prototype
Nút Play ở trên cùng mở trình chỉnh sửa prototype để kết nối các màn hình lại với nhau. Nhấp vào nút “Order ahead” và chọn “Imagine new screen”, Stitch sẽ tự động thiết kế màn hình đích mà nút đó dẫn tới mà không cần bạn phải viết prompt. Sau đó chuyển sang chế độ Preview để kiểm tra luồng hoạt động như một khách hàng thực thụ.
Xuất mã nguồn
Mỗi màn hình đều có chế độ xem mã nguồn (Code View — HTML với Tailwind). Bảng Export cho phép bạn:
Gửi màn hình sang Figma
Tải file zip mã nguồn
Sao chép vào clipboard
Chuyển sang các công cụ như AI Studio, Lovable, Bold, Netlify
Hoặc sử dụng MCP để các coding agent như Anti-Gravity đọc trực tiếp dự án Stitch của bạn.
5. Thiết kế một ứng dụng thực tế: “Forecast”
Bây giờ, hãy thử thiết kế một ứng dụng thực tế có tên là Forecast — ứng dụng công thức nấu ăn và danh sách mua sắm tích hợp quy đổi khẩu phần và gom chung nguyên liệu.
Chọn loại App (điện thoại) và mô hình Balanced. Prompt gồm 3 màn hình với mô tả chi tiết cho từng màn hình, kèm theo ví dụ cụ thể cho phần danh sách gộp (ví dụ: “Hành tây: 3 củ từ 2 công thức”).
Ba màn hình hiện ra trên bảng vẽ cùng lúc. Trong lúc nó chạy, bạn tiếp tục ra lệnh:
“Thêm thanh điều hướng dưới cùng (tab bar) với các mục công thức và danh sách mua sắm trên mọi màn hình.”
Kiểm tra ứng dụng
Màn hình công thức hiển thị các thẻ ảnh (gà sốt kem tỏi Tuscan, mỳ ý cà chua phơi nắng) kèm thời gian nấu và khẩu phần.
Màn hình chi tiết có bộ điều chỉnh khẩu phần (serving stepper) để co giãn định lượng nguyên liệu.
Màn hình mua sắm gom nhóm theo khu vực siêu thị (rau củ, sữa...) và gộp hành tây thành một dòng duy nhất từ nhiều công thức khác nhau.
Đổi giao diện
Thay đổi màu sắc chủ đạo từ cam sang xanh lá tươi mát, bấm Save and apply để cập nhật cho toàn bộ ứng dụng.
Sử dụng công cụ Mark để khoanh vùng phần định lượng nguyên liệu và yêu cầu cập nhật khẩu phần từ 4 lên 6 người. Các con số định lượng sẽ tự động được tính toán tỷ lệ lại (ví dụ kem tươi từ 1 cốc thành 1.5 cốc).
Stitch tự động bổ sung một màn hình chế độ nấu ăn rảnh tay (Hands-free cooking mode). Dùng thử trong chế độ Preview, ta thấy màn hình hiển thị từng bước lớn, thanh tiến trình, hẹn giờ và cả điều khiển giọng nói.
6. Bàn giao sang AI Coding Agent (Anti-Gravity)
Stitch tạo ra thiết kế giao diện, nhưng để tính toán toán học thực tế (như quy đổi khẩu phần hay gom nhóm nguyên liệu) chạy được thì cần đến coding agent.
Sử dụng MCP kết nối Stitch với công cụ lập trình Anti-Gravity bằng cách sao chép lệnh từ bảng Export và dán vào Anti-Gravity.
Kèm theo prompt yêu cầu: giữ nguyên thiết kế và hiện thực hóa 3 tính năng:
Bộ tăng giảm khẩu phần tự tính toán.
Nút thêm vào danh sách mua sắm tự động gộp nguyên liệu trùng lặp giống như ví dụ hành tây.
Đảm bảo chạy kiểm thử thành công.
Sau khoảng 8 phút, agent hoàn thành với 13 file được thay đổi, bản dựng sạch sẽ và chạy ứng dụng ở localhost. Kiểm tra tính năng tính toán khẩu phần (từ 4 lên 6 người, lượng gà và hành tự động đổi) và danh sách mua sắm (hành tây tự động gộp từ 2 món), mọi thứ hoạt động chính xác.
Chia sẻ dự án
Sử dụng nút Share, bật chia sẻ để bất kỳ ai có đường link đều có thể xem thiết kế, mã nguồn hoặc remix lại dự án cho riêng họ.
Kết luận
Google Stitch không thay thế lập trình viên hay AI coding agent. Nó làm một việc cụ thể và làm rất tốt: biến ý tưởng giao diện thành màn hình thực tế, có hệ thống thiết kế nhất quán, có prototype, có mã nguồn, và sẵn sàng bàn giao cho các công cụ phát triển.
Với mức giá miễn phí, 400 credit mỗi ngày, cùng khả năng thiết kế theo thời gian thực và chỉnh sửa bằng ngôn ngữ tự nhiên, Stitch đang mở ra một cách làm mới cho cá nhân phát triển độc lập, nhóm sản phẩm, và cả những ai muốn nhanh chóng kiểm chứng ý tưởng ứng dụng.
Nếu bạn đang tìm một điểm khởi đầu cho dự án tiếp theo, hãy thử Stitch. Bạn có thể chỉ cần một câu lệnh — phần còn lại, hãy để “vibe design” lo.
Nhận xét
Đăng nhận xét