Trong kỷ nguyên thiết kế hiện đại, ranh giới giữa code và giao diện đang dần mờ đi. Nếu bạn là một designer muốn hiện thực hóa ý tưởng ngay lập tức, hoặc một developer muốn tạo ra các UI/UX tinh tế mà không mất hàng giờ căn chỉnh CSS, bài viết này dành cho bạn.
Hôm nay, chúng ta sẽ khám phá sự kết hợp bùng nổ giữa Antigravity và Stitch – bộ đôi giúp bạn biến lời nói thành sản phẩm hoàn thiện chỉ trong vài phút.
1. Antigravity là gì? Sức mạnh của trình duyệt thế hệ mới
Antigravity không chỉ là một trình duyệt; nó là một môi trường làm việc tích hợp (Workspace) được tối ưu hóa cho tốc độ và khả năng tùy biến cực cao. Được xây dựng trên nền tảng Chromium nhưng được tinh chỉnh để loại bỏ mọi rào cản, Antigravity mang lại trải nghiệm mượt mà đúng như cái tên của nó – “Chống lại trọng lực”.
Các tính năng nổi bật của Antigravity:
Hiệu suất cực cao: Tối ưu hóa tài nguyên hệ thống, giúp việc chạy các ứng dụng thiết kế web nặng nề trở nên nhẹ nhàng.
Giao diện Canvas-first: Khác với trình duyệt truyền thống, Antigravity cho phép bạn sắp xếp các tab và cửa sổ theo dạng không gian (spatial), giúp quan sát toàn bộ dự án cùng lúc.
Hỗ trợ Developer Tools chuyên sâu: Các công cụ inspect và console được tích hợp sâu, giúp việc debug thiết kế diễn ra tức thì.
Khả năng mở rộng (Extensibility): Hỗ trợ mạnh mẽ các plugin và giao thức mới, tiêu biểu là MCP (Model Context Protocol).
2. Stitch MCP: Tool AI cho thiết kế
Stitch là một giải pháp dựa trên giao thức MCP (Model Context Protocol). Hiểu đơn giản, Stitch đóng vai trò như một cầu nối thông minh, cho phép các mô hình ngôn ngữ lớn (LLM) truy cập trực tiếp vào ngữ cảnh dự án, file cục bộ và công cụ thiết kế của bạn.
Các tính năng cốt lõi của Stitch:
Hiểu ngữ cảnh sâu: Stitch không chỉ đọc text; nó hiểu cấu trúc của một file thiết kế, từ hệ thống màu (color palette) đến các component React/Tailwind.
Tương tác thời gian thực: Cho phép AI thực hiện các thay đổi trực tiếp trên code hoặc file thiết kế khi bạn đưa ra câu lệnh (prompts).
Tính nhất quán: Đảm bảo các thiết kế mới tạo ra luôn tuân thủ theo phong cách (style guide) hiện có của dự án.
Hỗ trợ đa nền tảng: Hoạt động mượt mà trong các môi trường hỗ trợ giao thức MCP.
3. Hướng dẫn cài đặt Stitch MCP trên Antigravity
Để hai công cụ này “về chung một nhà”, bạn cần thực hiện các bước sau:
Bước 1: Chuẩn bị môi trường
Tải và cài đặt phiên bản Antigravity mới nhất từ trang chủ.
Đảm bảo bạn đã có sẵn tài khoản hoặc API Key của Stick
Tạo KEY của Stich và điền vào thông tin của MCP trên theo link: https://stitch.withgoogle.com/settings?pli=1
4. Quy trình thiết kế từng bước với Stitch MCP trên Antigravity
Đây là phần thú vị nhất. Hãy cùng tạo ra một giao diện Landing Page cho một ứng dụng công nghệ.
Bước 1: Khởi tạo ý tưởng (The Prompt)
Trong giao diện Antigravity, bạn mở thanh chat AI (đã tích hợp Stitch). Gõ yêu cầu:
Thiết kế một ứng dụng web tạo lì xì Tết Việt Nam bằng AI kết hợp Stitch MCP
Chủ đề giao diện: màu vàng chủ đạo, hoa mai, hoa đào và hoạ tiết Tết Việt Nam.
Chức năng chính
1. Chụp ảnh
Cho phép người dùng mở camera và chụp ảnh.
Ảnh được chèn vào khung lì xì (portrait frame).
Người dùng có thể tải ảnh lì xì đã tạo về máy (PNG).
2. Tuỳ chỉnh lì xì
Chọn màu lì xì: đỏ, vàng, pastel, gradient
Chọn lời chúc (font thư pháp, hiện đại, dễ thương)
Chọn hoạ tiết:
Hoa mai
Hoa đào
Hình con ngựa (zodiac)
Hoạ tiết truyền thống Việt Nam
3. Tích hợp Gemini AI Prompt
Cho phép nhập Gemini API key
Người dùng nhập prompt để:
Tạo lời chúc mới
Tạo hoạ tiết mới
Thay đổi layout lì xì (dọc, ngang, hiện đại)
Gemini tạo asset SVG/PNG và text động
Yêu cầu giao diện
Phong cách Tết Việt Nam, hiện đại, vui tươi
Banner lớn với hoa mai và hiệu ứng ánh kim
Khu vực preview lì xì realtime
Panel chỉnh sửa màu, text, layout, hoạ tiết
Nút download ảnh
Responsive mobile + desktop
Hiệu ứng
Hoa mai rơi
Hạt vàng lấp lánh
Animation chuyển layout mượt
Tổng thể: sang trọng, ấm áp, mang bản sắc văn hoá Việt Nam.
Bước 2: AI phân tích và dựng khung (Wireframing)
Stitch sẽ truy cập vào thư viện component bạn có hoặc sử dụng Tailwind CSS để dựng nhanh cấu trúc HTML/React. Nhờ Antigravity, bạn sẽ thấy kết quả hiển thị ngay lập tức ở cửa sổ bên cạnh (Side-by-side preview).
Bước 3: Tinh chỉnh chi tiết
Bạn có thể ra lệnh trực tiếp trên vùng chọn:
“Đổi font chữ tiêu đề sang Inter, kích thước 64px.”
“Thêm hiệu ứng glassmorphism cho các card trong phần Features.”
“Stitch, hãy căn chỉnh lại padding để đạt tỉ lệ vàng.”
Bước 4: Kiểm tra khả năng đáp ứng (Responsive check)
Sử dụng công cụ đa màn hình của Antigravity để xem thiết kế hiển thị như thế nào trên iPhone, iPad và Desktop cùng lúc. Nếu có lỗi, chỉ cần nói: “Sửa lỗi tràn layout trên thiết bị di động” và Stitch sẽ tự xử lý code CSS.
5. Kết quả và Mockup thiết kế
Sau quá trình trên, chúng ta thu được một sản phẩm không chỉ đẹp về thị giác mà còn “sạch” về mã nguồn.
Đặc điểm của sản phẩm cuối cùng:
Giao diện: Animation
Trải nghiệm: Tốc độ phản hồi cực nhanh do code được tối ưu bởi AI.
Tính đồng nhất: Mọi khoảng cách (margin/padding) đều tuân theo hệ thống lưới chặt chẽ.
Sau đó tôi sử dụng Antigravity để thực hành code một ứng dụng web và sử dụng Stitch MCP để code ra ứng dụng chạy ở local như sau:
Kết luận
Sự kết hợp giữa Antigravity và Stitch MCP không chỉ đơn thuần là dùng AI để vẽ hộ bạn. Đó là một phương thức làm việc mới: Thiết kế thông qua hội thoại và tư duy logic. Bạn không còn phải vật lộn với từng pixel, thay vào đó, bạn đóng vai trò là một “đạo diễn thiết kế”, nơi AI là người thực thi tận tụy và chính xác.
Công nghệ này giúp giảm 70% thời gian từ lúc nảy sinh ý tưởng đến khi có bản demo hoàn chỉnh. Nếu bạn chưa thử, hãy bắt đầu ngay hôm nay để không bị bỏ lại phía sau trong cuộc đua sáng tạo này.
Và tôi thấy sử dụng Stitch dễ dàng hơn so với Figma Make
