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 nối thiết kế dựa trên AI (trí tuệ nhân tạo) 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 này 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ự động để 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 đầy đủ 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ã thông báo 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 nhận" mã so với bản thiết kế gốc.

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

  • Cách sử dụng Google Stitch để nhanh chóng tạo nguyên 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 tác nhân tự động để 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 Antigravity IDE
  • Tài khoản Google Stitch
  • Khoá API Stitch
  • Đã cài đặt Node.js (v18+) cục bộ

Trước khi bắt đầu

  1. Trong Google Cloud Console, trên trang bộ chọn dự án, hãy chọn hoặc tạo một dự án Google Cloud.
  2. Đảm bảo bạn đã bật tính năng thanh toán cho dự án trên đám mây của mình. Tìm hiểu cách kiểm tra xem tính năng thanh toán có được bật trên một dự án hay không .
  3. Chuyển đến stitch.withgoogle.com và đảm bảo bạn có thể đăng nhập.
  4. Đảm bảo bạn đã cài đặt Antigravity IDE (có tại antigravity.google).

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

Tác nhân cần một "Nguồn thông tin đáng tin cậy" trực quan để tuân theo. 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: Chuyển đến 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 bản 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.
  4. Mô tả ý tưởng của bạn: Trong vùng văn bản có nhãn "Describe your design" (Mô tả bản thiết kế của bạn), hãy nhập câu lệnh:

"Design a modern SaaS landing page for a space-tech startup called LaunchPad. Use a midnight blue and neon purple palette. Include a hero section with a ‘Get Started' button, a 3-column features grid, and a glassmorphism pricing table." 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 tạo giao diện người dùng, 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 bất kỳ phần tử cụ thể nào trước khi chuyển sang IDE.

ce283054cd30c7ab.png

[!TIP] Bạn cũng có thể chọn trong phần

"Try these prompts"

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

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

Để cho phép Tác nhân Antigravity "đọc" bản thiết kế của bạn, bạn phải tạo một khoá API an toàn 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ơ ở góc trên cùng bên phải.
  2. Chọn Stitch settings (Cài đặt Stitch) trong trình đơn thả xuống.
  3. Chuyển đến phần API key (Khoá API).
  4. Nhấp vào nút Create key (Tạo khoá).
  5. Sao chép khoá: Sao chép khoá đã tạo ngay lập tức và lưu trữ một cách an toàn. Bạn sẽ cần khoá này cho bước tiếp theo.

36788921796d1e67.png

Đị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. .

  1. Nhấp vào + Open Workspace (+ 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ẻ Start Conversation (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.

45e7241be5552e42.png

  1. Nhấp vào Open New Workspace (Mở không gian làm việc mới) và đặt tên cho không gian làm việc là LaunchPad-Project, sau đó chọn một thư mục cục bộ. Thao tác này đảm bảo Tác nhân 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.

d84ba507939a5efc.png

Định cấu hình Stitch MCP

  1. Trong không gian làm việc mới, hãy quay lại Agent Manager (Trình quản lý tác nhân) (CMD+E cho Mac hoặc CTRL+E cho 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.

b59dd8ef11d807f9.png

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 một cách 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. Quá trình tích hợp này cung cấp cho AI ngữ cảnh theo thời gian thực ngoài các tệp đang mở trong trình chỉnh sửa.

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ã thập lục phân 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.

  1. Tìm kiếm "Stitch" rồi nhấp vào Install.
  2. Khi được nhắc, hãy dán Stitch API Key (Khoá API Stitch) vào trường cấu hình.
  3. Xác minh: Trong cuộc trò chuyện với Tác nhân, hãy nhập: List my Stitch projects. (Liệt kê các dự án Stitch của tôi). Nếu hệ thống trả về LaunchPad, thì bạn đã sẵn sàng.

e067eefacac21766.png

  1. Xác minh: Trong cuộc trò chuyện với Tác nhân, hãy nhập: List my Stitch projects. (Liệt kê các dự án Stitch của tôi). Nếu tác nhân trả về LaunchPad, thì cầu nối đã được định cấu hình thành công.

4dade2a8d2c8a9ea.png

4. Tìm nạp ngữ cảnh thiết kế

Giờ đây, tác nhân cần thu thập 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 tệp DESIGN.md trong thư mục gốc của tôi.
  2. Xem lại: Mở tệp DESIGN.md mới tạo để xem mã hex và quy tắc bố cục mà tác nhân đã trích xuất.

c472fdc2cc466bbb.png

**Xem lại:** Mở tệp `DESIGN.md` mới 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. Triển khai (Bản dựng)

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

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

Đưa ra câu lệnh "Build" (Xây dựng): _" I want to build this full website now. Use React and Tailwind CSS. Sau khi hoàn tất, hãy chạy máy chủ dev và hiển thị cho tôi trong trình duyệt tích hợp. Once finished, run the dev server and show it to me in the integrated browser." (Tôi muốn xây dựng toàn bộ trang web này ngay bây giờ. Quan sát Agent: Agent sẽ tạo cấu trúc dự án trong terminal, 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.

Đảm bảo các thành phần là mô-đun. Sau khi hoàn tất, hãy chạy máy chủ phát triển và hiển thị cho tôi trong trình duyệt tích hợp).

77bf3890cf221728.png

2.

  1. **Quan sát Tác nhân:** Tác nhân sẽ tạo khung cho dự án trong thiết bị đầu cuối, 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.
  2. Nếu bất kỳ phần tử nào (như khoảng đệm nút hoặc trọng số phông chữ) không khớp, hãy nhắc nhân viên hỗ trợ: "Khoảng đệm nút 'Bắt đầu' hơi lệch. Hãy tham khảo lại thiết kế Stitch và cập nhật các lớp Tailwind."
  3. Xem lại và tinh chỉnh

Xác minh kết quả đầu ra và sử dụng tác nhân để khắc phục mọi sự khác biệt về hình ảnh. So sánh kết quả đầu ra của Trình duyệt tích hợp với bản thiết kế Stitch gốc.

Nếu bất kỳ phần tử nào (như khoảng đệm nút hoặc độ đậm của phông chữ) không khớp, hãy đưa ra câu lệnh cho tác nhân: "The ‘Get Started' button padding is slightly off. Refer back to the Stitch design and update the Tailwind classes." (Khoảng đệm nút "Bắt đầu" hơi lệch. Hãy tham khảo lại bản thiết kế Stitch và cập nhật các lớp Tailwind). 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.

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