Google Stitch + Claude Code: desain situs web tanpa “tampilan AI”

Petunjuk tambahan untuk menggunakan Ailoot tersedia di dokumentasi.

Mengapa situs web yang dibuat dengan Claude Code terlihat seperti “sampah AI”?#

Dalam kasus praktis yang dijelaskan di sini, pengerjaan beranda aplikasi panggilan dimulai dengan proyek kosong dan permintaan kepada Claude Code untuk membuat landing page. Hasilnya seperti yang sudah bisa ditebak: slate-950 untuk latar belakang, indigo-500 untuk aksen, Inter tebal pada judul, dan tiga kartu identik dengan bayangan di bawahnya. Tata letak yang sama seperti v0 pertama, Lovable pertama, dan hasil generasi ChatGPT pertama. Saya menulis ulang prompt lima kali, menambahkan “premium”, “tidak seperti yang lain”, “modern”—halamannya tetap terlihat seperti tema WordPress dari 2015.

Logikanya sederhana: tanpa batasan, model mengambil rata-rata statistik dari hal-hal yang pernah dilihatnya. Dan model telah melihat jutaan landing page identik yang dibuat dengan Bootstrap dan Tailwind. Agar hasilnya tidak biasa-biasa saja, Anda perlu memberikan detail spesifik kepada agen: warna apa, font apa, jarak apa, dan komponen mana yang harus dijadikan acuan. Bagi model, kata “indah” berarti “median tahun 2020”. Kata sifat tidak akan mengubah hasilnya; Anda perlu parameter yang tepat.

Saya membahas kesenjangan yang sama dalam panduan tentang sistem desain siap pakai dengan Refero—di sana, Anda mengambil gaya milik orang lain (Apple, Linear, Stripe) lalu memberikannya kepada agen. Google Stitch menangani hal ini dari sisi yang berbeda: alih-alih meminjam gaya orang lain, Anda membuat gaya sendiri—dari deskripsi Anda.

Apa itu Google Stitch dan bagaimana alat ini membantu?#

Stitch adalah eksperimen dari Google Labs yang diperkenalkan pada Google I/O pada Mei 2025. Anda menulis seperti apa tampilan aplikasi yang diinginkan di kolom prompt (atau mengunggah tangkapan layar, sketsa papan tulis, maupun halaman milik pesaing), lalu Stitch menghasilkan layar antarmuka di kanvas tanpa batas. Di balik layar, alat ini menggunakan Gemini 2.5 Pro dan Flash, lalu Gemini 3 ditambahkan pada Desember 2025 untuk menghasilkan tata letak yang lebih rapi.

Hal yang berguna bagi kita:

• Vibe Design—jelaskan suasana dengan kata-kata (“minimalis dan premium, seperti Stripe”) dan dapatkan beberapa arah visual untuk dipilih.
• Referensi—unggah gambar dari Dribbble atau Pinterest; Stitch mempertahankan tata letaknya dan menerapkan persyaratan Anda.
• Ekspor dalam tiga format: ke Figma (dengan lapisan yang dapat diedit), sebagai HTML/CSS bersih, dan melalui MCP—langsung ke agen.

Perbedaan dengan gaya siap pakai seperti Refero ini penting. Refero adalah pustaka sistem desain yang sudah diekstrak dari situs web sungguhan; Anda menggunakan merek yang sudah ada. Stitch menghasilkan sistem untuk produk Anda dari nol. Tidak punya desain referensi dan ingin tampilan sendiri? Gunakan Stitch. Ingin menerapkan gaya produk terkenal dengan cepat? Gunakan Refero. Keduanya menangani tahap yang berbeda dan saling melengkapi dengan baik.

Claude sendiri juga memiliki mode desain bawaan; saya membahasnya dalam panduan tentang Claude Design. Stitch berbeda karena menyediakan sistem siap pakai dalam file eksternal yang dibaca agen setiap kali membangun sesuatu.

Persyaratan ketersediaan Google Stitch#

Stitch tidak tersedia di semua negara: seorang perwakilan Google menulis di forum resmi bahwa layanan ini tersedia bagi pengguna berusia 18 tahun ke atas di 212 negara, dan daftarnya terus bertambah. Di wilayah yang aksesnya dibatasi, Anda hanya melihat satu pesan saat membuka layanan: “Maaf, Stitch tidak tersedia.”

Anda memerlukan akun Google—Anda hanya bisa masuk dengan akun tersebut.

Ketika otorisasi Stitch MCP menghambat alur kerja Claude Code#

Ada banyak informasi tidak berguna tentang cara menghubungkan MCP di internet, dan setengah dari petunjuknya tidak berfungsi. Misalnya, banyak panduan (termasuk panduan populer berbahasa Inggris) menyarankan untuk memasang paket @google/stitch-mcp dengan perintah npx -y @google/stitch-mcp@latest. Paket itu tidak ada—npm mengembalikan 404. Jangan salin perintah ini; Anda hanya akan membuang waktu. Karena alasan yang sama, pilih integrasi yang pemasangan dan verifikasinya pada tugas nyata sudah dikonfirmasi.

Upaya MCP jarak jauh yang dijelaskan di sini mencapai kesalahan Incompatible auth server di Claude Code. Kesalahan yang diamati itu bukan resep pengaturan yang berfungsi atau bukti bahwa setiap konfigurasi saat ini gagal. Jangan melanjutkan langkah “hubungkan MCP” yang tidak ditentukan: gunakan jalur ekspor HTML/CSS manual di bawah sampai konfigurasi kompatibel yang tepat terverifikasi.

Untuk jalur manual yang lengkap di bawah, ekspor HTML/CSS dan aset layar terpilih. Langkah pembuatan kunci STITCH_API_KEY atau pemeriksaan claude mcp list bukan prasyarat jalur ini; konfigurasi MCP yang kompatibel tetap memerlukan verifikasi terpisah sebelum digunakan.

Alur kerja Stitch dan DESIGN.md adalah rekayasa konteks dalam bentuk paling murni: Anda memasukkan token yang tepat ke konteks Claude sebelumnya, lalu Claude membangun dengan mengikuti token tersebut secara ketat, tanpa “menebak maksud saya”. Metodologi lengkapnya menyatukan ketiga pilar—klona AI, Second Brain, dan Rekayasa Konteks. Kombinasi inilah yang mengubah Claude dari “asisten yang menebak” menjadi alat yang menghasilkan keluaran konsisten.

Apa itu DESIGN.md dan mengapa lebih baik daripada tangkapan layar?#

Berikut detail penting yang sering keliru dalam kebanyakan petunjuk: di Stitch tidak ada tombol “Ekspor DESIGN.md”. Agen menyusun file tersebut sendiri. Menurut codelab resmi Google, kira-kira prompt-nya seperti ini: “telusuri proyek melalui Stitch MCP, ambil palet warna dan tipografi, lalu susun DESIGN.md dari keduanya.” Codelab itu mengasumsikan koneksi MCP berfungsi. Pada jalur manual di sini, Claude Code membaca HTML/CSS ekspor Anda dan menulis file terstruktur pada akar proyek; agen harus menandai token yang belum tersedia, bukan menebaknya dari gambar.

DESIGN.md berisi hal-hal spesifik, bukan kata sifat:

# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Agar Claude Code menggunakannya, arahkan ke file tersebut dari CLAUDE.md (misalnya, dengan baris “Gunakan desain semua komponen dari DESIGN.md”)—lalu agen memasukkan token yang sama di setiap sesi. Tombol yang dibuat pada hari Senin dan kartu yang dibuat pada hari Jumat akan memiliki gaya yang sama karena ada satu sumber acuan.

Dua referensi lokal bekerja bersama dalam pengaturan ini. DESIGN.md memuat aturan sistem—warna, tipografi, jarak, dan komponen. HTML/CSS serta aset hasil ekspor Stitch menyediakan tata letak layar tertentu. MCP opsional dan bukan prasyarat jalur ini.

Bagaimana cara membangun situs web: seluruh alur dari teks hingga desain?#

Berikut seluruh proses secara berurutan:

1. Buka Stitch. Periksa ketersediaan di negara Anda dan masuk ke stitch.withgoogle.com dengan akun Google.
2. Jelaskan produknya. Sebutkan layar dan perjalanan pengguna; konfirmasikan atau edit daftar layar yang diusulkan.
3. Tambahkan referensi. Unggah tangkapan layar yang dimaksud dan tentukan warna, tipografi, serta tata letak yang ingin dipertahankan.
4. Buat dan sempurnakan. Pilih satu layar dan sempurnakan sebelum memperluas desain.
5. Ekspor layar terpilih sebagai HTML/CSS. Simpan file ekspor dan aset yang diperlukan dalam folder referensi proyek. Buka HTML ekspor secara lokal dan pastikan itu layar yang dipilih; tangkapan layar saja tidak membawa nilai CSS yang tepat.
6. Susun DESIGN.md dari ekspor lokal. Minta Claude Code membaca HTML/CSS ekspor, mencatat nilai warna, font, jarak, tata letak, dan komponen yang sebenarnya, serta mencantumkan nilai yang belum ada untuk keputusan Anda. Jalur ini tidak memerlukan kunci API Stitch atau autentikasi MCP.
7. Bangun dan periksa satu halaman. Berikan prompt berikut kepada Claude Code, dengan mengganti nama folder menjadi jalur ekspor lokal sebenarnya:

Baca ekspor HTML/CSS Stitch dalam refs/stitch-export/. Buat DESIGN.md pada akar proyek memakai nilai yang ada dalam file itu. Identifikasi nilai yang hilang alih-alih mengarangnya.

Bangun satu halaman dari DESIGN.md dan ekspor Stitch lokal. Pertahankan komponen modular. Periksa halaman hasil render terhadap ekspor pada lebar desktop dan seluler, lalu verifikasi navigasi serta keadaan interaktif secara terpisah.

Setelah itu, semuanya ditangani Claude Code: navigasi antar-layar, responsivitas pada breakpoint di DESIGN.md, animasi, dan interaktivitas. Stitch menyediakan layar statis dan prototipe yang dapat diklik, tetapi tidak membangun logika yang berfungsi atau menerbitkan situs ke hosting—itu tugas agen.

Bagaimana cara menghilangkan “tampilan AI”: apa tepatnya yang harus diubah?#

Berikut hal-hal spesifik yang membuat situs berhenti menunjukkan ciri khasnya:

• Warna. Ungu indigo-500 adalah petunjuk pertama. Tetapkan warna utama dan aksen dengan nilai hex persis di DESIGN.md. Setiap agen akan menafsirkan “biru merek” dengan caranya sendiri.
• Font. Inter adalah pilihan teraman sehingga menjadi “font AI” yang paling mudah dikenali. Pilih kombinasi yang ekspresif: misalnya, font sans serif untuk teks isi dan font berkarakter untuk judul. Atur di desain Stitch dan catat di DESIGN.md.
• Referensi sebagai pengganti kata sifat. Model menafsirkan “buat modern” sebagai “median tahun 2020”. Model memahami “gunakan tata letak dari halaman ini” secara harfiah jika disertai tangkapan layar sungguhan. Unggah gambar referensi ke Stitch; selera tidak bisa disampaikan dengan kata-kata.
• Jarak dan ruang lega. Tata letak templat mudah dikenali dari blok-bloknya yang sempit dan seragam. Tetapkan skala jarak yang lapang di DESIGN.md—agen akan mengatur elemen dengan lebih leluasa.

Hal spesifik lebih ampuh daripada kata sifat subjektif. Stitch pada dasarnya adalah mesin yang menerjemahkan “saya ingin seperti ini” menjadi token yang presisi, sehingga agen tidak perlu lagi menebak.

Google Stitch atau alternatifnya: mana yang sebaiknya dipilih?#

Saya membandingkan alat-alat ini berdasarkan hal-hal yang benar-benar penting saat melakukan vibe coding dengan anggaran terbatas:

Alur kerja yang saya gunakan sendiri: Stitch untuk menjelajahi desain → Claude Code untuk membangun dan menangani logika. Bagi vibe coder dengan anggaran terbatas, Stitch adalah pilihan terbaik karena gratis dan membuat tampilan unik untuk produk Anda dari nol. Jika ingin memahami seluruh rangkaian alat yang tersedia di pasaran, saya membahasnya dalam artikel pilar apa yang bisa digunakan untuk coding pada 2026.

Apa kekurangan Google Stitch: apa saja batasannya?#

Berikut daftar lengkapnya agar Anda tidak kecewa setelah layar ketiga:

• Antarmuka saja. Tidak ada backend, basis data, atau publikasi ke hosting. Untuk itu, Anda memerlukan Claude Code (atau Lovable, jika ingin semuanya tersedia di satu tempat).
• Pengeditan di dalam alat terbatas. Anda tidak bisa memindahkan elemen satu per satu dengan mouse—Anda hanya bisa mengubahnya melalui prompt dan membuatnya ulang. Ini bukan Figma.
• Tidak deterministik. Prompt yang sama menghasilkan keluaran yang berbeda. Bagus untuk menjelajahi ide, tetapi merepotkan jika Anda memerlukan hasil yang dapat diulang.
• Kuota. Anda akan mencapai batas generasi gratis (saat ini harian); Anda tidak bisa membeli tambahan, jadi harus menunggu hingga kuota diatur ulang. Jumlah pastinya bervariasi, jadi periksa antarmukanya.
• Status eksperimental. Google Labs tidak menjamin dukungan jangka panjang. Layanannya dapat berubah atau ditutup.
• Pembatasan geografis dan masalah otorisasi MCP di Claude Code, yang disebutkan pada bagian ketersediaan dan penyiapan.

Stitch kurang cocok jika Anda memiliki panduan merek ketat untuk banyak proyek, jika desainnya sudah tersedia di Figma, atau jika Anda memerlukan aplikasi dengan backend yang sudah dipublikasikan.

Apa selanjutnya?#

Buat alur kerja sekecil mungkin dengan satu layar: jelaskan produk di Stitch, buat berandanya, ekspor HTML/CSS-nya, lalu minta Claude Code menyusun DESIGN.md dan membuat halaman dari file lokal tersebut. Setelah melihat gradien ungu menghilang dengan sendirinya, sisanya akan terasa lebih mudah.

Mendesain dengan Stitch adalah salah satu teknik rekayasa konteks. Sistem lengkapnya menggabungkan klona AI, Second Brain, dan rekayasa konteks agar Claude dapat mengandalkan aturan dan konteks yang sudah disiapkan.

Klona AI, Second Brain, dan rekayasa konteks penting bagi produk. Mendesain dengan Stitch adalah batu pijakan pertama dalam kombinasi ini.

Untuk bekerja lebih lanjut dengan model, Anda dapat mengunjungi Ailoot.