Design-to-Code dengan Antigravity dan Stitch MCP

1. Pengantar

Dalam codelab ini, Anda akan membuat situs yang siap produksi dengan menjembatani desain berbasis AI dengan lingkungan pengembangan yang mengutamakan agen. Anda akan menggunakan Google Stitch untuk membuat UI dengan fidelitas tinggi, lalu menghubungkannya ke Antigravity IDE melalui Model Context Protocol (MCP). Terakhir, Anda akan menggunakan agen otonom untuk mengambil "DNA Desain" dan menerapkan aplikasi React yang sempurna secara visual.

Yang akan Anda lakukan

• Membuat UI di Stitch: Menggunakan bahasa natural untuk membuat desain web skala penuh di Google Stitch.
• Menghubungkan dengan MCP: Menghubungkan Antigravity ke project Stitch Anda menggunakan Model Context Protocol.
• Implementasi Otonom: Menggunakan "Tab Agen" Antigravity untuk mengambil token desain dan membuat kerangka project React/Tailwind.
• Memverifikasi dan Menyempurnakan: Menggunakan browser terintegrasi untuk "Memeriksa Kesesuaian" kode dengan desain aslinya.

Yang akan Anda pelajari

• Cara menggunakan Google Stitch untuk membuat prototipe desain UI dengan fidelitas tinggi secara cepat.
• Cara mengonfigurasi Server MCP dalam Antigravity IDE.
• Cara menggunakan agen otonom untuk menerjemahkan metadata desain visual ke dalam kode modular.

Yang akan Anda butuhkan

• Browser web Chrome
• Antigravity IDE terinstal
• Akun Google Stitch
• Kunci API Stitch
• Node.js (v18+) terinstal secara lokal

Sebelum memulai

1. Di Konsol Google Cloud, di halaman pemilih project, pilih atau buat project Google Cloud.
2. Pastikan penagihan diaktifkan untuk project Cloud Anda. Pelajari cara memeriksa apakah penagihan telah diaktifkan pada suatu project .
3. Buka stitch.withgoogle.com dan pastikan Anda dapat login.
4. Pastikan Anda telah menginstal Antigravity IDE (tersedia di antigravity.google).

2. Membuat Desain di Google Stitch

Agen memerlukan "Sumber Kebenaran" visual untuk diikuti. Sebelum menulis kode, kita harus menentukan estetika.

1. Mengakses Platform: Buka stitch.withgoogle.com.
2. Memilih Jenis Project: Di dasbor utama, temukan tombol Start a new design. Klik Web untuk memastikan desain Anda dioptimalkan untuk tata letak berbasis browser.
3. Memilih Model: Klik menu dropdown model (saat ini menampilkan 3.0 Flash) di dalam kotak perintah. Pastikan Gemini 3 dipilih untuk penalaran dan pembuatan tata letak yang paling canggih.
4. Mendeskripsikan Visi Anda: Di area teks berlabel "Describe your design", masukkan perintah Anda:

"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. Membuat: Klik ikon panah (di samping pemilih model) untuk memulai proses pembuatan. 6. Menyempurnakan &Memberi Nama: Setelah UI dibuat, beri nama project Anda di header atas. Sebut sebagai LaunchPad. Anda dapat menggunakan sidebar chat untuk menyempurnakan elemen tertentu sebelum beralih ke IDE.

[!TIP] Anda juga dapat memilih dari bagian

"Try these prompts"

jika Anda ingin memulai dengan cepat..

3. Mengonfigurasi Antigravity MCP

Untuk mengizinkan Agen Antigravity "membaca" desain Anda, Anda harus membuat kunci API yang aman dan menambahkan server Stitch MCP.

Membuat Kunci API Stitch

1. Di Google Stitch, klik Foto Profil Anda di pojok kanan atas.
2. Pilih Stitch settings dari menu dropdown.
3. Buka bagian API key.
4. Klik tombol Create key.
5. Menyalin kunci: Salin kunci yang dibuat segera dan simpan dengan aman. Anda akan memerlukannya untuk langkah berikutnya.

Mengonfigurasi Stitch MCP di Antigravity

1. Buka Antigravity IDE.
2. Buka Agent Manager

Kapan saja, Anda dapat beralih antara Agent Manager dan editor dengan menekan CMD+E (Mac) atau CTRL+E (Windows), atau melalui tombol Open Editor &Open Agent Manager di pojok kanan atas panel menu. .

3. Klik + Open Workspace.

Untuk memulai percakapan baru dalam ruang kerja, pilih ruang kerja yang diinginkan dari tab Start Conversation atau klik tombol Plus di samping nama ruang kerja di sidebar.

4. Klik Open New Workspace dan beri nama ruang kerja LaunchPad-Project, lalu pilih direktori lokal. Hal ini memastikan Agen memiliki folder root tertentu untuk membuat kerangka file tanpa mengacaukan project lain.

Mengonfigurasi Stitch MCP

1. Dalam ruang kerja baru Anda, kembali ke Agent Manager (CMD+E untuk Mac atau CTRL+E untuk Windows) dan pilih MCP Servers.

Buka MCP store melalui dropdown "..." di bagian atas panel agen editor.

Antigravity mendukung Model Context Protocol (MCP), standar yang memungkinkan editor terhubung dengan aman ke alat, database, dan layanan eksternal lokal Anda. Integrasi ini memberi AI konteks real-time di luar file yang terbuka di editor Anda.

MCP bertindak sebagai jembatan antara Antigravity dan Google Stitch. Daripada mengekspor token desain secara manual atau menyalin kode hex dan metadata tata letak ke editor, MCP memungkinkan Antigravity mengambil DNA Desain langsung dari project Stitch Anda jika diperlukan.

2. Telusuri "Stitch" dan klik Install.
3. Saat diminta, tempelkan Kunci API Stitch Anda ke kolom konfigurasi.
4. Memverifikasi: Di chat Agen, ketik: List my Stitch projects. Jika menampilkan LaunchPad, Anda sudah siap.

5. Memverifikasi: Di chat Agen, ketik: List my Stitch projects. Jika agen menampilkan LaunchPad, jembatan berhasil dikonfigurasi.

4. Mengambil Konteks Desain

Agen kini perlu menyerap metadata desain untuk memastikan akurasi kode.

1. Di chat Antigravity, ketik: "Use the Stitch MCP to fetch the ‘LaunchPad' project. Extract the color palette and typography, then generate a DESIGN.md file in my root directory."
2. Meninjau: Buka DESIGN.md yang baru dibuat untuk melihat kode hex dan aturan tata letak yang telah diekstrak oleh agen.

5. Implementasi (Build)

Gunakan agen untuk menerjemahkan desain ke dalam aplikasi React yang berfungsi.

1. Berikan perintah "Build":

"I want to build this full website now. Use React and Tailwind CSS. Ensure the components are modular. Once finished, run the dev server and show it to me in the integrated browser." 2. Mengamati Agen: Agen akan membuat kerangka project di terminal, menulis komponen di editor, dan membuka pratinjau di browser terintegrasi.

6. Meninjau dan Menyempurnakan

Verifikasi output dan gunakan agen untuk memperbaiki ketidaksesuaian visual.

1. Bandingkan output Browser Terintegrasi dengan desain Stitch asli Anda.
2. Jika ada elemen (seperti padding tombol atau ketebalan font) yang tidak cocok, berikan perintah kepada agen: "The ‘Get Started' button padding is slightly off. Refer back to the Stitch design and update the Tailwind classes."
3. Agen akan mengambil kembali konteks desain dan menerapkan perbaikan secara instan.

7. Ringkasan &Langkah Selanjutnya

Selamat! Anda telah berhasil menjembatani kesenjangan antara desain dengan fidelitas tinggi dan basis kode fungsional menggunakan Antigravity dan Stitch MCP.

Ringkasan hal yang Anda lakukan:

• Mendesain UI di Stitch menggunakan Gemini 3.
• Membuat Kunci API yang aman dan mengonfigurasi Antigravity MCP.
• Menggunakan agen otonom untuk membuat dan memverifikasi situs React + Tailwind.