Chuyển đổi mẫu thiết kế thành mã bằng Antigravity và Stitch MCP

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ tạo một trang web sẵn sàng cho hoạt động sản xuất bằng cách kết hợp thiết kế dựa trên AI với môi trường phát triển ưu tiên tác nhân. Bạn sẽ sử dụng Google Stitch để tạo giao diện người dùng có độ trung thực cao, sau đó kết nối giao diện đó với Antigravity IDE thông qua Giao thức ngữ cảnh mô hình (MCP). Cuối cùng, bạn sẽ sử dụng một tác nhân tự trị để tìm nạp "DNA thiết kế" và triển khai một ứng dụng React hoàn hảo đến từng pixel.

Bạn sẽ thực hiện

• Tạo giao diện người dùng trong Stitch: Sử dụng ngôn ngữ tự nhiên để tạo một bản thiết kế web quy mô lớn trong Google Stitch.
• Kết nối với MCP: Kết nối Antigravity với dự án Stitch bằng Giao thức ngữ cảnh mô hình.
• Triển khai tự động: Sử dụng "Thẻ tác nhân" của Antigravity để tìm nạp mã thiết kế và tạo khung cho dự án React/Tailwind.
• Xác minh và tinh chỉnh: Sử dụng trình duyệt tích hợp để "Kiểm tra cảm quan" mã dựa trên thiết kế ban đầu.

Kiến thức bạn sẽ học được

• Cách sử dụng Google Stitch để nhanh chóng tạo mẫu thiết kế giao diện người dùng có độ trung thực cao.
• Cách định cấu hình Máy chủ MCP trong Antigravity IDE.
• Cách sử dụng các tác nhân tự trị để chuyển đổi siêu dữ liệu thiết kế trực quan thành mã mô-đun.

Bạn cần có

• Trình duyệt web Chrome
• Đã cài đặt một IDE Antigravity
• Tài khoản Google Stitch
• Khoá API Stitch
• Node.js (phiên bản 18 trở lên) được cài đặt trên máy

Trước khi bắt đầu

1. Trong Google Cloud Console, trên trang chọn dự án, hãy chọn hoặc tạo một dự án trên Google Cloud.
2. Đảm bảo rằng bạn đã bật tính năng thanh toán cho dự án trên Cloud. Tìm hiểu cách kiểm tra xem tính năng thanh toán có được bật trong một dự án hay không .

Đối với Khoản tín dụng Google Cloud: Để giúp bạn sử dụng Antigravity với các dự án trên Google Cloud, hãy đổi khoản tín dụng Google Cloud miễn phí bằng cách sử dụng đường liên kết này. Bạn có thể làm theo hướng dẫn tại đây để kích hoạt khoản tín dụng và tạo một dự án mới.

3. Truy cập vào stitch.withgoogle.com và đảm bảo bạn có thể đăng nhập.
4. Đảm bảo bạn đã cài đặt IDE Antigravity (có tại antigravity.google).

2. Tạo thiết kế trong Google Stitch

Nhân viên hỗ trợ cần có một "Nguồn thông tin đáng tin cậy" để tham khảo. Trước khi viết mã, chúng ta phải xác định tính thẩm mỹ.

1. Truy cập vào nền tảng: Truy cập vào stitch.withgoogle.com.
2. Chọn loại dự án: Trên trang tổng quan chính, hãy tìm nút bật/tắt Bắt đầu thiết kế mới. Nhấp vào Web để đảm bảo thiết kế của bạn được tối ưu hoá cho bố cục dựa trên trình duyệt.
3. Chọn mô hình: Nhấp vào trình đơn thả xuống của mô hình (hiện đang hiển thị 3.0 Flash) bên trong ô nhập câu lệnh. Đảm bảo bạn chọn Gemini 3 để có khả năng suy luận nâng cao và tạo bố cục tiên tiến nhất.
4. Mô tả ý tưởng của bạn: Trong vùng văn bản có nhãn "Mô tả thiết kế của bạn", hãy nhập câu lệnh:

"Thiết kế một trang đích hiện đại cho SaaS cho một công ty khởi nghiệp về công nghệ vũ trụ có tên là LaunchPad. Sử dụng bảng màu xanh dương thẫm và tím neon. Thêm một phần nổi bật có nút "Bắt đầu", một lưới tính năng gồm 3 cột và một bảng giá theo hiệu ứng kính mờ." 5. Tạo: Nhấp vào biểu tượng mũi tên (bên cạnh bộ chọn mô hình) để bắt đầu quá trình tạo. 6. Tinh chỉnh và đặt tên: Sau khi giao diện người dùng được tạo, hãy đặt tên cho dự án của bạn trong tiêu đề trên cùng. Đặt tên tệp là LaunchPad. Bạn có thể sử dụng thanh bên trò chuyện để tinh chỉnh mọi phần tử cụ thể trước khi chuyển sang IDE.

[!LƯU Ý] Bạn cũng có thể chọn trong số các

"Thử các câu lệnh này"

nếu bạn muốn bắt đầu nhanh.

3. Định cấu hình MCP Antigravity

Để cho phép Antigravity Agent "đọc" thiết kế của bạn, bạn phải tạo một khoá API bảo mật và thêm máy chủ Stitch MCP.

Tạo khoá API Stitch

1. Trong Google Stitch, hãy nhấp vào Ảnh hồ sơ của bạn ở góc trên cùng bên phải.
2. Chọn Chế độ cài đặt ghép ảnh trong trình đơn thả xuống.
3. Chuyển đến phần Khoá API.
4. Nhấp vào nút Tạo khoá.
5. Sao chép khoá: Sao chép ngay khoá đã tạo và lưu trữ khoá đó một cách an toàn. Bạn sẽ cần khoá này cho bước tiếp theo.

Định cấu hình Stitch MCP trong Antigravity

1. Mở Antigravity IDE.
2. Mở Agent Manager (Trình quản lý tác nhân)

Bất cứ lúc nào, bạn cũng có thể chuyển đổi giữa Trình quản lý tác nhân và trình chỉnh sửa bằng cách nhấn tổ hợp phím CMD+E (Mac) hoặc CTRL+E (Windows), hoặc thông qua các nút Open Editor (Mở trình chỉnh sửa) và Open Agent Manager (Mở Trình quản lý tác nhân) ở trên cùng bên phải của thanh trình đơn. .

3. Nhấp vào + Mở không gian làm việc.

Để bắt đầu một cuộc trò chuyện mới trong một không gian làm việc, hãy chọn không gian làm việc mong muốn trong thẻ Bắt đầu cuộc trò chuyện hoặc nhấn vào nút Dấu cộng bên cạnh tên không gian làm việc trong thanh bên.

4. Nhấp vào Open New Workspace (Mở không gian làm việc mới), đặt tên cho không gian làm việc là LaunchPad-Project rồi chọn một thư mục cục bộ. Điều này đảm bảo rằng Agent có một thư mục gốc cụ thể để tạo khung cho các tệp mà không làm lộn xộn các dự án khác.

Định cấu hình MCP của Stitch

1. Trong không gian làm việc mới, hãy quay lại Agent Manager (CMD+E đối với máy Mac hoặc CTRL+E đối với Windows) rồi chọn MCP Servers (Máy chủ MCP).

Mở cửa hàng MCP thông qua trình đơn thả xuống "..." ở đầu ngăn tác nhân của trình chỉnh sửa.

Antigravity hỗ trợ Giao thức ngữ cảnh mô hình (MCP), một tiêu chuẩn cho phép trình chỉnh sửa kết nối an toàn với các công cụ, cơ sở dữ liệu và dịch vụ bên ngoài cục bộ của bạn. Tính năng tích hợp này cung cấp cho AI ngữ cảnh theo thời gian thực, không chỉ là các tệp đang mở trong trình chỉnh sửa của bạn.

MCP đóng vai trò là cầu nối giữa Antigravity và Google Stitch. Thay vì xuất mã thông báo thiết kế theo cách thủ công hoặc sao chép mã hex và siêu dữ liệu bố cục vào trình chỉnh sửa, MCP cho phép Antigravity tìm nạp DNA thiết kế trực tiếp từ dự án Stitch của bạn khi cần.

2. Tìm "Stitch" rồi nhấp vào Cài đặt.
3. Khi được nhắc, hãy dán Khoá Stitch API vào trường cấu hình.
4. Xác minh: Trong cuộc trò chuyện với Agent, hãy nhập: List my Stitch projects. Nếu hệ thống trả về LaunchPad, tức là bạn đã sẵn sàng.

5. Xác minh: Trong cuộc trò chuyện với nhân viên hỗ trợ, hãy nhập: List my Stitch projects. Nếu nhân viên hỗ trợ trả về LaunchPad, thì có nghĩa là bạn đã định cấu hình cầu nối thành công.

4. Tìm nạp bối cảnh thiết kế

Giờ đây, tác nhân cần tiếp nhận siêu dữ liệu thiết kế để đảm bảo độ chính xác của mã.

1. Trong cuộc trò chuyện Antigravity, hãy nhập: "Use the Stitch MCP to fetch the ‘LaunchPad' project. Trích xuất bảng màu và kiểu chữ, sau đó tạo một tệp DESIGN.md trong thư mục gốc của tôi."
2. Xem xét: Mở DESIGN.md vừa tạo để xem mã thập lục phân và các quy tắc bố cục mà tác nhân đã trích xuất.

5. Triển khai (Bản dựng)

Sử dụng tác nhân để chuyển bản thiết kế thành một ứng dụng React đang hoạt động.

1. Đưa ra câu lệnh "Tạo":

"Tôi muốn xây dựng toàn bộ trang web này ngay bây giờ. Sử dụng React và Tailwind CSS. Đảm bảo các thành phần có tính mô-đun. Sau khi hoàn tất, hãy chạy máy chủ phát triển và cho tôi xem trong trình duyệt tích hợp." 2. Quan sát Agent: Agent sẽ tạo khung cho dự án trong cửa sổ dòng lệnh, viết các thành phần trong trình chỉnh sửa và mở bản xem trước trong trình duyệt tích hợp.

6. Xem lại và tinh chỉnh

Xác minh kết quả và sử dụng tác nhân để khắc phục mọi điểm khác biệt về hình ảnh.

1. So sánh đầu ra của Trình duyệt tích hợp với thiết kế Stitch ban đầu của bạn.
2. Nếu có bất kỳ phần tử nào (chẳng hạn như khoảng đệm nút hoặc độ đậm của phông chữ) không khớp, hãy nhắc nhân viên hỗ trợ: "Khoảng đệm của nút 'Bắt đầu' hơi lệch. Hãy tham khảo lại thiết kế của Stitch và cập nhật các lớp Tailwind."
3. Tác nhân sẽ tìm nạp lại ngữ cảnh thiết kế và áp dụng bản sửa lỗi ngay lập tức.

7. Tổng kết và các bước tiếp theo

Xin chúc mừng! Bạn đã thu hẹp khoảng cách giữa một thiết kế có độ trung thực cao và một cơ sở mã chức năng bằng cách sử dụng Antigravity và Stitch MCP.

Tóm tắt những việc bạn đã làm:

• Thiết kế giao diện người dùng trong Stitch bằng Gemini 3.
• Tạo Khoá API an toàn và định cấu hình MCP Antigravity.
• Đã sử dụng một tác nhân tự trị để tạo và xác minh một trang web React + Tailwind.