Cách kết nối Antigravity và Stitch thông qua MCP

Tóm tắt nhanh
Kết nối Google Stitch với Antigravity IDE qua MCP giải quyết bài toán kinh điển nhất của quy trình thiết kế đến lập trình: khoảng cách giữa bản thiết kế và code thực tế. Thay vì copy màu hex và spacing thủ công, agent trong Antigravity đọc trực tiếp "DNA thiết kế" từ Stitch theo thời gian thực qua MCP, sau đó tạo component React với Tailwind hoàn hảo đến từng pixel thông qua vòng lặp Stitch Loop: thiết kế, code, xác minh trực quan rồi tự sửa theo token gốc. Ở đây đưa ra toàn bộ quy trình từ tạo API key, cấu hình MCP, chạy vòng lặp, đến đóng gói DESIGN.md thành skill Antigravity tái sử dụng cho các dự án sau.
Khi bạn đã biết Google Stitch và Antigravity IDE rồi thì rất muốn kết hợp hai công cụ này với nhau để thay vì thiết kế giao diện xong rồi ngồi dịch thủ công từng màu sắc, font chữ và khoảng cách sang code, Google vừa công bố quy trình kết nối Google Stitch với Antigravity IDE qua MCP để agent tự đọc "DNA thiết kế" và viết code React hoàn hảo đến từng pixel. Bài này hướng dẫn toàn bộ quy trình, từ tạo thiết kế đến đóng gói thành skill tái sử dụng cho các dự án sau.
Tại sao cần kết nối Stitch với Antigravity qua MCP?
Vấn đề kinh điển của quy trình thiết kế đến lập trình là khoảng cách giữa hai bên: designer tạo ra giao diện đẹp trong Figma hay Stitch, lập trình viên nhận file rồi phải tự diễn giải màu sắc, khoảng cách, font và hành vi. Kết quả thường là code trông "gần giống" thay vì "đúng pixel".
MCP (Model Context Protocol) giải quyết khoảng cách này bằng cách cho phép Antigravity đọc trực tiếp siêu dữ liệu thiết kế từ Stitch theo thời gian thực, thay vì bạn phải xuất file hay copy mã màu thủ công. Agent không "đoán" thiết kế mà đọc đúng token gốc, tức là màu chính xác theo mã hex, spacing theo giá trị pixel, font theo tên thực và component theo cấu trúc thực của dự án.
Bước 1: Tạo thiết kế trong Google Stitch
Trước khi kết nối, cần có một dự án thiết kế trong Stitch làm nguồn thông tin gốc hoặc nếu có file Figma đã thiết kế sẵn rồi thì tải lên làm thiết kế cho dự án. Mình đã có bài trước đây nói rõ về Stitch rồi mọi người có thể tham khảo ở đây hoặc nếu đã có web, app đã chạy rồi thì có thể sử dụng tính năng redesign của Stitch.
Sau khi Stitch tạo ra giao diện thì nhớ chia từng phần ví dụ như trang chủ, tin tức, sản phẩm trước khi chuyển sang Antigravity. Đặt tên dự án rõ ràng vì tên này sẽ được dùng để gọi qua MCP. Ví dụ: LaunchPad.
Bước 2: Tạo API key và cấu hình MCP trong Antigravity
Tạo API key từ Stitch
Trong Stitch, nhấp vào ảnh hồ sơ góc trên bên phải, chọn Stitch settings, vào phần API key rồi nhấn Create key. Sao chép key ngay vì nó chỉ hiển thị một lần và lưu vào nơi an toàn.

Kết nối MCP trong Antigravity
Mở Antigravity IDE, vào Agent Manager (CMD+E trên Mac hoặc CTRL+E trên Windows), tạo workspace mới đặt tên ví dụ LaunchPad-Project và trỏ về thư mục local của dự án. Sau đó chúng ta có hai cách để thực hiện
Cách đầu tiên là prompt thẳng cho AI agent tự thực hiện các bước kết nối Antigravity tới Stitch thông qua MCP ví dụ “"Tôi đã có API key từ Stitch là đây [API key của Stitch] thực hiện các bước kết nối tới Stitch qua MCP và cuối cùng kiểm tra lại các kết nối.". Từ đó AI agent sẽ tự thực hiện các bước còn việc của chúng ta là ngồi chờ và accept các bước nếu AI agent cần cấp quyền.
Cách thứ hai thì chúng ta sẽ thực hiện thủ công các bước nhưng đừng lo lắng vì các bước thực hiện khá đơn giản và nhanh, mình đã thử và làm hoàn toàn nhanh hơn so với agent trong Antigravity vì thực sự cứ chạy một bước lại phải Retry trong Antigravity rất khó chịu. Các bước như sau:
- Trong Agent Manager, chọn MCP Servers
- Tìm kiếm "Stitch" và nhấn Install
- Dán API key vào trường cấu hình khi được hỏi

Kiểm tra các dự án Stitch đã kết nối thành côngNếu agent trả về tên dự án LaunchPad thì kết nối đã thành công.
Bước 3: Vòng lặp Stitch Loop từ thiết kế đến code
Đây là phần cốt lõi của quy trình và cũng là điểm khác biệt lớn nhất so với cách làm truyền thống. Google gọi đây là "Stitch Loop" vì nó tạo ra vòng lặp liên tục giữa thiết kế và code thay vì một chiều từ designer sang developer.
Giai đoạn tìm nạp ngữ cảnh thiết kế
Trong cuộc trò chuyện Antigravity, gõ lệnh để agent tìm nạp toàn bộ DNA thiết kế:
Agent sẽ gọi Stitch qua MCP, lấy toàn bộ token thiết kế bao gồm bảng màu hex, thang font, giá trị spacing, tên component và cấu trúc layout rồi lưu vào file DESIGN.md trong thư mục dự án của bạn. File này trở thành nguồn thông tin duy nhất mà mọi component sẽ tham chiếu.

Giai đoạn tạo code
Sau khi có DESIGN.md, giao cho agent xây dựng từng phần theo đúng token thiết kế:
Agent tạo cấu trúc dự án React với Tailwind, viết từng component dựa trên token trong DESIGN.md, không dùng giá trị cứng. Điều này đảm bảo code và thiết kế luôn đồng bộ.
Giai đoạn xác minh "Vibe Check"
Antigravity có trình duyệt tích hợp cho phép agent mở localhost và so sánh trực quan với bản thiết kế Stitch gốc. Gõ:
Agent liệt kê chính xác những điểm sai lệch và tự sửa theo token gốc. Đây là vòng lặp Stitch Loop: thiết kế trong Stitch, code trong Antigravity, xác minh qua trình duyệt, sửa theo token, lặp lại cho đến khi pixel-perfect.
Bước 4: Đóng gói DESIGN.md thành skill tái sử dụng
Đây là phần mọi người không hay để ý nhưng quan trọng nếu bạn làm nhiều dự án. File DESIGN.md được tạo ra từ quy trình trên chứa toàn bộ hệ thống thiết kế của một dự án cụ thể, nhưng bạn có thể đóng gói nó thành một skill Antigravity để tái sử dụng sang các dự án khác mà không cần lặp lại bước thiết lập từ đầu.
Cấu trúc file DESIGN.md chuẩn để đóng gói
Một DESIGN.md tốt nên có các phần sau để agent có thể đọc nhất quán:
- Color tokens: Tên biến và giá trị hex cho từng màu trong hệ thống, ví dụ
--color-primary: #1a1a2e,--color-accent: #7c3aed - Typography: Tên font, thang kích thước, line height và font weight cho heading, body và caption
- Spacing scale: Bảng khoảng cách theo đơn vị px hoặc rem cho padding, margin và gap
- Component inventory: Danh sách component, trạng thái (hover, active, disabled) và biến thể
- Layout rules: Grid columns, breakpoints và max-width
Chuyển DESIGN.md thành skill Antigravity
Tạo thư mục .antigravity/skills/stitch-design/ trong workspace và đặt DESIGN.md vào đó cùng với file SKILL.md mô tả cách dùng skill này:
Khi bật skill này trong một workspace mới, agent tự động đọc DESIGN.md trước khi viết bất kỳ component nào, đảm bảo mọi code đều tuân theo hệ thống thiết kế đã định nghĩa dù bạn không cần nhắc lại mỗi lần.
Tái sử dụng cho dự án khác
Khi bắt đầu dự án mới với hệ thống thiết kế tương tự, bạn chỉ cần cập nhật giá trị token trong DESIGN.md mà không cần viết lại toàn bộ hướng dẫn. Agent đọc file mới, áp dụng token mới, giữ nguyên quy trình. Đây là cách biến một lần thiết lập thành quy trình chuẩn dùng được mãi.
Quy trình Stitch và Antigravity qua MCP không chỉ tiết kiệm thời gian ở bước chuyển đổi thiết kế sang code mà còn giải quyết vấn đề thường gặp hơn là duy trì sự nhất quán khi thiết kế thay đổi. Khi bạn cập nhật màu sắc hay khoảng cách trong Stitch, bạn chỉ cần chạy lại lệnh fetch token, cập nhật DESIGN.md và agent tự biết phải sửa gì trong codebase thay vì bạn phải tự tìm và thay thủ công từng giá trị.



