Design-to-Code dengan Antigravity dan Stitch MCP

1. Pengantar

Dalam codelab ini, Anda akan membangun situs 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 piksel.

Yang akan Anda lakukan

• Membuat UI di Stitch: Gunakan bahasa alami untuk membuat desain web skala penuh di Google Stitch.
• Menghubungkan dengan MCP: Hubungkan Antigravity ke project Stitch Anda menggunakan Model Context Protocol.
• Implementasi Mandiri: Gunakan "Tab Agen" Antigravity untuk mengambil token desain dan membuat project React/Tailwind.
• Verifikasi dan Sempurnakan: Gunakan browser terintegrasi untuk "Memeriksa Suasana" kode terhadap 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 IDE Antigravity.
• Cara menggunakan agen otonom untuk menerjemahkan metadata desain visual ke dalam kode modular.

Yang Anda butuhkan

• Browser web Chrome
• IDE Antigravity terinstal
• Akun Google Stitch
• Kunci API Stitch
• Node.js (v18+) diinstal 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 .

Untuk Kredit Google Cloud: Untuk membantu Anda menggunakan Antigravity dengan project Google Cloud, tukarkan kredit Google Cloud gratis Anda menggunakan link ini. Anda dapat mengikuti petunjuk di sini untuk mengaktifkan kredit dan membuat project baru.

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. Pilih Jenis Project: Di dasbor utama, cari tombol Mulai desain baru. Klik Web untuk memastikan desain Anda dioptimalkan untuk tata letak berbasis browser.
3. Pilih Model Anda: 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:

"Desain halaman landing SaaS modern untuk startup teknologi luar angkasa bernama LaunchPad. Gunakan palet biru tengah malam dan ungu neon. Sertakan bagian utama dengan tombol 'Mulai', petak fitur 3 kolom, dan tabel harga glassmorphism." 5. Buat: Klik ikon panah (di samping pemilih model) untuk memulai proses pembuatan. 6. Sempurnakan & Beri 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.

[!TIPS] Anda juga dapat memilih dari

"Coba perintah ini"

jika Anda ingin memulai dengan cepat.

3. Mengonfigurasi MCP Antigravity

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

Buat Kunci API Stitch

1. Di Google Stitch, klik Foto Profil Anda di sudut kanan atas.
2. Pilih Stitch settings dari menu dropdown.
3. Buka bagian kunci API.
4. Klik tombol Create key.
5. Salin 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 Pengelola Agen dan editor dengan menekan CMD+E (Mac) atau CTRL+E (Windows), atau melalui tombol Open Editor & Open Agent Manager di kanan atas panel menu. .

3. Klik + Buka Ruang Kerja.

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

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

Mengonfigurasi Stitch MCP

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

Buka toko MCP melalui drop-down "..." di bagian atas panel agen editor.

Antigravity mendukung Model Context Protocol (MCP), sebuah standar yang memungkinkan editor terhubung secara aman ke alat, database, dan layanan eksternal lokal Anda. Integrasi ini memberikan konteks real-time kepada AI, tidak hanya 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", lalu klik Instal.
3. Saat diminta, tempelkan Kunci API Stitch Anda ke dalam kolom konfigurasi.
4. Verifikasi: Di chat Agen, ketik: List my Stitch projects. Jika menampilkan LaunchPad, Anda sudah siap.

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

4. Mengambil Konteks Desain

Sekarang, agen perlu menyerap metadata desain untuk memastikan akurasi kode.

1. Di chat Antigravity, ketik: "Use the Stitch MCP to fetch the ‘LaunchPad' project. Ekstrak palet warna dan tipografi, lalu buat file DESIGN.md di direktori root saya."
2. Tinjau: 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 menjadi aplikasi React yang berfungsi.

1. Berikan perintah "Bangun":

"Saya ingin membangun situs lengkap ini sekarang. Gunakan React dan Tailwind CSS. Pastikan komponen bersifat modular. Setelah selesai, jalankan server dev dan tunjukkan kepada saya di browser terintegrasi." 2. Amati Agen: Agen akan membuat struktur project di terminal, menulis komponen di editor, dan membuka pratinjau di browser terintegrasi.

6. Tinjau dan Sempurnakan

Verifikasi output dan gunakan agen untuk memperbaiki perbedaan visual.

1. Bandingkan output Browser Terintegrasi dengan desain Stitch asli Anda.
2. Jika ada elemen (seperti padding tombol atau ketebalan font) yang tidak cocok, minta agen: "Padding tombol 'Mulai' sedikit tidak sesuai. Lihat kembali desain Stitch dan perbarui class Tailwind."
3. Agen akan mengambil ulang konteks desain dan menerapkan perbaikan secara instan.

7. Ringkasan & Langkah Selanjutnya

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

Ringkasan tindakan Anda:

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