Tóm tắt nhanh
- Google Stitch 2.0 chuyển sang mô hình không gian làm việc vô hạn chạy trên Gemini 3, hỗ trợ dựng tối đa 5 màn hình cùng lúc mà vẫn giữ phong cách chung.
- Định dạng chuẩn DESIGN.md đóng vai trò như bản hợp đồng kỹ thuật, giúp các công cụ lập trình tự động như Claude Code hiểu đúng màu sắc, khoảng cách và phông chữ thay vì tự ý sáng tạo mã mới.
- Mã nguồn xuất ra từ Stitch vẫn bộc lộ các khuyết điểm cố hữu của AI: xuất hiện tới 246 thuộc tính định kiểu trực tiếp trong thẻ và làm ẩn hoàn toàn menu điều hướng trên thiết bị di động.
- Sự kết hợp giữa công cụ phác thảo giao diện và công cụ dọn dẹp mã nguồn giúp rút ngắn đáng kể thời gian thử nghiệm sản phẩm, nhưng chưa thể thay thế hoàn toàn khâu kiểm duyệt kỹ thuật của lập trình viên.
Cơn sốt xây dựng ứng dụng bằng ngôn ngữ tự nhiên thường vấp phải một rào cản quen thuộc: các công cụ sinh mã nguồn thì viết logic rất nhanh nhưng tạo giao diện rất vụng về, trong khi các công cụ tạo ảnh lại chỉ trả về hình vẽ tĩnh không thể biến thành sản phẩm thực tế. Khi người dùng cố gắng ghép nối nhiều trang web lại với nhau, mỗi lần ra lệnh bổ sung lại khiến phông chữ, bảng màu và khoảng cách lề bị lệch đi một chút.
Sự xuất hiện của Google Stitch 2.0 cùng sự tham gia của các công cụ dòng lệnh như Claude Code đang định hình lại quy trình này. Thay vì để một mô hình duy nhất vừa vẽ vừa viết mã từ đầu đến cuối, quy trình mới chia nhỏ công việc thành ba lớp rõ ràng: lập dàn ý thiết kế chi tiết, trực quan hóa trên không gian đồ họa và đưa mã nguồn vào môi trường dòng lệnh để tinh chỉnh cấu trúc.
Không gian vô hạn: Giữ đồng bộ giao diện đa trang trước khi xuất mã
Ở phiên bản ban đầu ra mắt tại Google I/O 2025, Stitch hoạt động tương tự như một chiếc máy kéo may rủi: người dùng nhập một câu mô tả ngắn và nhận về một khung giao diện duy nhất. Nếu muốn làm thêm trang thứ hai, người dùng phải bắt đầu lại từ đầu và gần như không có cách nào đảm bảo hai trang có cùng một ngôn ngữ thị giác.
Phiên bản Stitch 2.0 cập nhật vào tháng 3/2026 đã chuyển hẳn sang dạng không gian làm việc vô hạn. Điểm cốt lõi ở đây là khả năng đặt tối đa 5 màn hình cạnh nhau trên cùng một mặt phẳng. Dưới sự điều phối của dòng mô hình Gemini 3 (trong đó Gemini 3.8 Flash phụ trách chế độ cân bằng và Gemini 3.5 Flash-Lite xử lý chế độ tốc độ cao), công cụ có thể tham chiếu các thành phần của trang chính để áp dụng trực tiếp cho trang phụ.
Một điểm quan trọng mà người dùng cần lưu ý nằm ở chất lượng câu lệnh đầu vào. Nếu chỉ đưa ra những yêu cầu chung chung như tạo một trang bán hàng hiện đại và bắt mắt, hệ thống sẽ trả về những mẫu giao diện rập khuôn. Ngược lại, khi lập trình viên yêu cầu một mô hình ngôn ngữ lớn khác (chẳng hạn như Claude) đóng vai trò kiến trúc sư để tạo ra một bản đặc tả thiết kế hoàn chỉnh gồm bảng mã màu hex cụ thể, hệ thống lưới 12 cột, tỷ lệ khoảng cách 8px và yêu cầu rõ ràng về việc ưu tiên thẻ HTML ngữ nghĩa, kết quả tạo ra trên màn hình đồ họa sẽ bám sát chuẩn mực chuyên nghiệp hơn rất nhiều.
DESIGN.md: Tệp tài liệu biến bản vẽ AI thành hợp đồng kỹ thuật cho coding agent
Khoảng trống lớn nhất giữa bộ phận thiết kế và đội ngũ phát triển phần mềm từ trước đến nay là khâu bàn giao tài sản số. Đối với các công cụ tạo giao diện bằng trí tuệ nhân tạo, vấn đề này còn trầm trọng hơn khi mô hình xuất mã thường tự ý đặt tên biến, tự chế mã màu và chèn CSS hỗn loạn vào từng dòng HTML.
Stitch 2.0 đưa ra giải pháp giải quyết điểm nghẽn này bằng tệp chuẩn có tên DESIGN.md. Đây là một tệp định dạng Markdown gọn nhẹ chứa toàn bộ thông số kỹ thuật của hệ thống thiết kế: từ bảng mã màu chính, quy tắc hiển thị kiểu chữ, khoảng cách đệm, cho đến các thành phần nút bấm và đường viền. Tệp này cũng có thể được Stitch tự động trích xuất ngược từ bất kỳ đường dẫn website thực tế nào đang hoạt động.
Khi thả tệp DESIGN.md vào thư mục dự án và chỉ định cho Claude Code tham chiếu, công cụ lập trình dòng lệnh này sẽ ngừng việc tự bịa ra các màu sắc ngẫu nhiên. Tệp văn bản thuần đóng vai trò như một bộ khung kiểm soát kỷ luật, buộc các câu lệnh sinh mã tiếp theo phải tuân thủ nghiêm ngặt bảng giá trị đã định sẵn. Ngoài ra, giao thức máy chủ MCP (Model Context Protocol) mà Stitch cung cấp cũng cho phép truyền dữ liệu màn hình trực tiếp vào không gian làm việc của lập trình viên mà không cần tải tệp nén thủ công qua lại.
Mặt trái của mã nguồn xuất sẵn: Thiếu nút di động và lạm dụng định kiểu trực tiếp
Mặc dù phần hình ảnh xem trước trên màn hình máy tính tạo cảm giác một website đã hoàn chỉnh, mã nguồn bên dưới của Stitch 2.0 vẫn bộc lộ những nhược điểm rất lớn khi đưa vào kiểm tra kỹ thuật thực tế.
Trong thử nghiệm dựng trang web Kestrel gồm 6 trang của trang công nghệ XDA Developers, bản xuất mã trực tiếp từ Stitch gặp lỗi nghiêm trọng ở khả năng hiển thị trên thiết bị di động. Đoạn mã CSS đã tự động ẩn thanh menu khi chiều rộng màn hình xuống dưới 768px và định kiểu sẵn cho nút mở rộng ba gạch (hamburger), nhưng phần tử HTML chứa chiếc nút này lại hoàn toàn không được tạo ra. Hậu quả là trên giao diện điện thoại, người dùng không có cách nào để bấm mở các mục điều hướng.
Không dừng lại ở đó, công cụ này xuất ra tới 246 thuộc tính định kiểu trực tiếp (inline style) gắn thẳng vào các thẻ thay vì gom nhóm thành các lớp CSS có thể tái sử dụng. Các liên kết điều hướng giữa các trang cũng bị bỏ quên ở khu vực chân trang của 5 trên tổng số 6 màn hình được tạo.
Bảng đối chiếu dưới đây làm rõ những gì công cụ đồ họa AI tạo ra và những phần việc bắt buộc phải can thiệp bằng dòng lệnh:
| Hạng mục kỹ thuật | Mã nguồn xuất từ Stitch 2.0 | Xử lý qua Claude Code và DESIGN.md |
|---|---|---|
| Quản lý định kiểu CSS | Chèn 246 thuộc tính trực tiếp vào thẻ HTML | Chuyển đổi toàn bộ thành class CSS chuẩn, tách tệp riêng |
| Điều hướng di động dưới 768px | Ẩn menu nhưng thiếu phần tử nút bấm ba gạch | Bổ sung nút bấm và dựng menu thuần CSS hoạt động độc lập |
| Liên kết chuyển trang | Thiếu sót ở phần chân trang của phần lớn các màn hình | Đồng bộ lại toàn bộ thanh điều hướng và liên kết nội bộ |
| Độ tương phản và khả năng tiếp cận | Đạt mức cơ bản theo phác thảo trực quan | Áp dụng chuẩn tương phản màu và viền nét bàn phím theo DESIGN.md |
Số liệu và quan sát kỹ thuật: XDA Developers
Chính sự tương phản này cho thấy vai trò của các công cụ dòng lệnh như Claude Code. Sau khi có tệp DESIGN.md làm chuẩn, việc chuyển giao toàn bộ đoạn mã thô cho mô hình lập trình xử lý giúp dọn dẹp hàng trăm dòng CSS thừa, tái cấu trúc lại thanh điều hướng và bổ sung các tính năng tiếp cận người dùng chỉ trong một phiên làm việc duy nhất.
Lập trình viên và nhà sáng tạo tại Việt Nam tận dụng quy trình này ra sao?
Google hiện đang cung cấp quyền truy cập Stitch 2.0 hoàn toàn miễn phí trên nền tảng web thông qua tài khoản Google cá nhân, với hạn mức tín dụng được làm mới hàng ngày vào lúc 0 giờ theo giờ UTC (tức 7 giờ sáng theo giờ Việt Nam). Người dùng trong nước không gặp phải bất kỳ rào cản địa lý hay yêu cầu thanh toán thẻ quốc tế nào để bắt đầu trải nghiệm.
Đối với các nhóm khởi nghiệp công nghệ, lập trình viên độc lập hoặc các studio quy mô nhỏ tại Việt Nam, quy trình kết hợp này mang lại giá trị rất rõ ràng trong giai đoạn tạo sản phẩm mẫu (MVP). Thay vì mất hàng tuần để thiết kế từng khung màn hình trên Figma rồi mới chuyển sang lập trình viên cắt giao diện, một nhóm nhỏ có thể phác thảo toàn bộ luồng trang web chỉ trong vài giờ với chi phí vận hành gần như bằng không.
Tuy vậy, người làm sản phẩm không nên nhầm lẫn giữa một bản xem trước đẹp mắt và một hệ thống sẵn sàng đưa vào vận hành thương mại. Công cụ đồ họa giải quyết tốt phần cảm hứng và bố cục ban đầu, nhưng khâu tối ưu hóa tốc độ tải trang, tinh chỉnh giao diện tương thích trên từng dòng máy điện thoại và bảo mật dữ liệu vẫn đòi hỏi sự can thiệp của người có chuyên môn kỹ thuật. AI giúp rút ngắn thời gian tạo dựng ban đầu, nhưng trách nhiệm rà soát chất lượng sản phẩm cuối cùng vẫn hoàn toàn thuộc về lập trình viên.
Nguồn tham khảo: XDA Developers, Google Labs Blog
