Google Stitch + Claude Code: reka bentuk laman web tanpa “rupa AI”

Arahan tambahan untuk bekerja dengan Ailoot terdapat dalam dokumentasi.

Mengapa laman web yang dibina dengan Claude Code kelihatan seperti “AI slop”?#

Dalam kes praktikal yang diterangkan, kerja pada halaman utama aplikasi panggilan bermula dengan projek kosong dan permintaan supaya Claude Code membina halaman pendaratan. Hasilnya seperti biasa: slate-950 untuk latar belakang, indigo-500 untuk aksen, fon Inter tebal pada tajuk dan tiga kad serupa dengan bayang di bawahnya. Susun atur yang sama seperti v0 pertama, Lovable pertama dan penjanaan ChatGPT pertama. Saya menulis semula arahan itu lima kali dan menambah “premium”, “bukan seperti orang lain”, “moden”—halaman itu masih kelihatan seperti tema WordPress dari 2015.

Gradien ungu itu bukan kebetulan. Ogos 2025:

Logiknya mudah: tanpa kekangan, model mengambil purata statistik daripada perkara yang pernah dilihatnya. Dan model itu telah melihat sejuta halaman pendaratan serupa yang dibina dengan Bootstrap dan Tailwind. Untuk mendapatkan hasil yang bukan biasa-biasa, anda perlu memberikan butiran khusus kepada ejen: warna, fon, jarak dan komponen yang perlu dianggap sebagai rujukan utama. Bagi model, perkataan “cantik” bermaksud “median tahun 2020”. Kata sifat tidak akan mengubah hasilnya; anda memerlukan parameter yang tepat.

Saya meneliti jurang yang sama dalam panduan tentang sistem reka bentuk sedia guna dengan Refero—di situ, anda mengambil gaya orang lain (Apple, Linear, Stripe) dan memberikannya kepada ejen. Google Stitch mengambil pendekatan dari arah yang berbeza: daripada meminjam gaya orang lain, anda menjana gaya sendiri daripada penerangan anda.

Apakah Google Stitch dan bagaimana ia membantu?#

Stitch ialah eksperimen daripada Google Labs, yang diperkenalkan di Google I/O pada Mei 2025. Anda menulis rupa yang dikehendaki untuk aplikasi dalam medan arahan (atau memuat naik tangkap layar, lakaran papan putih atau halaman pesaing), lalu Stitch menjana skrin antara muka pada kanvas tanpa had. Di sebalik tabir, alat ini menggunakan Gemini 2.5 Pro dan Flash, dan Gemini 3 ditambah pada Disember 2025 untuk menghasilkan susun atur yang lebih kemas.

Perkara yang berguna untuk kita:

• Vibe Design—terangkan suasana yang diingini dengan kata-kata (“minimalis dan premium, seperti Stripe”) dan dapatkan beberapa hala tuju visual untuk dipilih.
• Rujukan—muat naik imej daripada Dribbble atau Pinterest; Stitch mengekalkan susun aturnya dan menerapkan keperluan anda.
• Eksport dalam tiga format: ke Figma (dengan lapisan yang boleh diedit), sebagai HTML/CSS yang kemas dan melalui MCP—terus kepada ejen.

Perbezaan daripada gaya sedia guna seperti Refero penting. Refero ialah pustaka sistem reka bentuk yang telah diekstrak daripada laman web sebenar; anda mengambil jenama sedia ada. Stitch menjana sistem untuk produk anda dari awal. Tiada reka bentuk rujukan dan anda mahukan rupa sendiri? Gunakan Stitch. Perlu menerapkan gaya produk terkenal dengan pantas? Gunakan Refero. Kedua-duanya merangkumi langkah berbeza dan saling melengkapi.

Claude sendiri juga mempunyai mod reka bentuk terbina dalam; saya membincangkannya dalam panduan tentang Claude Design. Stitch berbeza kerana ia menyediakan sistem siap guna dalam fail luaran yang dibaca oleh ejen setiap kali membina sesuatu.

Keperluan ketersediaan Google Stitch#

Stitch tidak tersedia di setiap negara: seorang wakil Google menulis di forum rasmi bahawa perkhidmatan ini tersedia kepada pengguna berumur 18 tahun ke atas di 212 negara dan senarainya sedang diperluas. Di wilayah yang disekat, anda hanya akan melihat satu mesej apabila melawatnya: “Maaf, Stitch tidak tersedia.”

Anda memerlukan akaun Google—anda hanya boleh log masuk dengannya.

Apabila kebenaran Stitch MCP menyekat aliran kerja Claude Code#

Terdapat banyak maklumat tidak berguna dalam talian tentang cara menghubungkan MCP, dan separuh daripada arahannya tidak berfungsi. Contohnya, banyak panduan (termasuk panduan berbahasa Inggeris yang popular) menyarankan pemasangan pakej @google/stitch-mcp dengan arahan npx -y @google/stitch-mcp@latest. Pakej itu tidak wujud—npm memulangkan 404. Jangan salin arahan ini; anda akan membuang masa. Atas sebab yang sama, pilih integrasi yang pemasangan dan pengesahannya pada tugasan sebenar telah disahkan.

Percubaan MCP jauh diterangkan mencapai ralat Incompatible auth server dalam Claude Code. Ralat diperhatikan itu bukan resipi persediaan berfungsi atau bukti setiap konfigurasi semasa gagal. Jangan teruskan langkah “sambungkan MCP” yang tidak ditentukan: gunakan eksport HTML/CSS manual di bawah sehingga konfigurasi serasi tepat disahkan.

Laluan MCP dalam bahagian ini belum disahkan. Untuk laluan manual lengkap, gunakan eksport HTML/CSS serta aset skrin dipilih seperti langkah di bawah; tiada proksi atau kunci API diperlukan.

Aliran kerja Stitch dan DESIGN.md ialah kejuruteraan konteks dalam bentuk paling tulen: anda meletakkan token yang tepat dalam konteks Claude terlebih dahulu, lalu Claude membina sesuatu mengikut token tersebut tanpa “mengagak maksud saya”. Metodologi lengkap ini menghimpunkan ketiga-tiga tunjang—klon AI, Otak Kedua dan Kejuruteraan Konteks. Gabungan ini mengubah Claude daripada “pembantu yang meneka” kepada alat yang menghasilkan keputusan yang boleh dijangka.

Apakah DESIGN.md dan mengapa ia lebih baik daripada tangkap layar?#

Berikut satu butiran penting yang sering disalahnyatakan dalam kebanyakan arahan: tiada butang “Export DESIGN.md” dalam Stitch. Ejen itu sendiri yang menyusun fail tersebut. Menurut codelab rasmi Google, arahannya lebih kurang begini: “pergi ke projek melalui Stitch MCP, ekstrak palet dan tipografi, kemudian susun DESIGN.md daripadanya”. Codelab itu mengandaikan sambungan MCP berfungsi. Dalam laluan manual di sini, Claude Code membaca HTML/CSS dieksport dan menulis fail berstruktur di akar projek; ia mesti menandai token tiada daripada menekanya melalui imej.

DESIGN.md mengandungi butiran khusus dan bukannya 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)

Untuk membuat Claude Code menggunakannya, rujuk fail itu dalam CLAUDE.md (contohnya, dengan baris “Use the design of all components from DESIGN.md”)—dan ejen akan memuatkan token yang sama dalam setiap sesi. Butang pada hari Isnin dan kad pada hari Jumaat akan mempunyai gaya yang sama kerana terdapat satu sumber rujukan.

Dua rujukan setempat bekerjasama dalam persediaan ini. DESIGN.md menyimpan peraturan sistem—warna, tipografi, jarak dan komponen. HTML/CSS serta aset Stitch dieksport membekalkan susun atur skrin khusus. MCP pilihan dan bukan prasyarat laluan ini.

Bagaimana membina laman web: laluan lengkap daripada teks kepada reka bentuk?#

Berikut seluruh proses mengikut urutan:

1. Buka Stitch. Semak ketersediaan negara dan log masuk ke stitch.withgoogle.com dengan akaun Google anda.
2. Terangkan produk. Nyatakan skrin serta perjalanan pengguna; sahkan atau edit senarai skrin dicadangkan.
3. Tambah rujukan. Muat naik tangkap layar dikehendaki dan nyatakan warna, tipografi serta susun atur yang hendak dikekalkan.
4. Jana dan kemaskan. Pilih satu skrin dan perhalus sebelum mengembangkan reka bentuk.
5. Eksport skrin dipilih sebagai HTML/CSS. Simpan fail dan aset diperlukan dalam folder rujukan projek. Buka HTML dieksport secara setempat dan periksa ia skrin dipilih; tangkap layar sahaja tidak membawa nilai CSS tepat.
6. Susun DESIGN.md daripada eksport setempat. Minta Claude Code membaca HTML/CSS, merekod nilai warna, fon, jarak, susun atur dan komponen sebenar, serta menyenaraikan nilai tiada untuk keputusan anda. Laluan ini tidak memerlukan kunci API Stitch atau pengesahan MCP.
7. Bina dan periksa satu halaman. Berikan prompt ini kepada Claude Code, menggantikan nama folder dengan laluan eksport setempat sebenar:

Baca eksport HTML/CSS Stitch dalam refs/stitch-export/. Cipta DESIGN.md di akar projek menggunakan nilai yang wujud dalam fail itu. Kenal pasti nilai tiada daripada mereka-rekanya.

Bina satu halaman daripada DESIGN.md dan eksport Stitch setempat. Kekalkan komponen modular. Bandingkan halaman dirender dengan eksport pada lebar desktop dan mudah alih, kemudian sahkan navigasi serta keadaan interaktif secara berasingan.

Selepas itu, Claude Code mengurus semuanya: penghalaan antara skrin, reka bentuk responsif pada titik henti dalam DESIGN.md, animasi dan interaktiviti. Stitch menyediakan skrin statik dan prototaip boleh klik, tetapi tidak membina logik yang berfungsi atau menerbitkan laman web kepada pengehosan—itu tugas ejen.

Bagaimana menghilangkan “rupa AI”: apakah yang perlu diubah?#

Berikut perkara khusus yang boleh menghilangkan rupa klise sesebuah laman web:

• Warna. Ungu indigo-500 ialah petunjuk pertama. Tetapkan warna utama dan aksen sebagai nilai heks yang tepat dalam DESIGN.md. Setiap ejen akan mentafsir “biru jenama” dengan cara tersendiri.
• Fon. Inter ialah pilihan paling selamat dan oleh itu “fon AI” yang paling mudah dikenali. Pilih gandingan yang ekspresif: contohnya, fon sans serif untuk teks isi dan fon yang mempunyai karakter untuk tajuk. Tetapkannya dalam reka bentuk Stitch dan catat dalam DESIGN.md.
• Rujukan dan bukannya kata sifat. Model mentafsir “jadikannya moden” sebagai “median tahun 2020”. Model mengikut arahan “gunakan susun atur daripada halaman ini” secara literal apabila diberikan tangkap layar sebenar. Muat naik imej rujukan ke Stitch; cita rasa tidak dapat disampaikan dengan kata-kata.
• Jarak dan ruang lapang. Susun atur bertemplat mudah dikenal melalui blok yang sempit dan serupa. Tetapkan skala jarak yang luas dalam DESIGN.md—ejen akan menyusun elemen dengan lebih bebas.

Perincian khusus lebih berkesan daripada kata sifat subjektif. Stitch pada asasnya mesin yang menukar “saya mahu ia begini” kepada token yang tepat, supaya ejen tidak perlu meneka.

Google Stitch atau alternatif: yang mana patut dipilih?#

Saya membandingkan alat-alat ini berdasarkan perkara yang benar-benar penting apabila melakukan vibe coding dengan bajet terhad:

Aliran kerja yang saya gunakan: Stitch untuk meneroka reka bentuk → Claude Code untuk membina dan mengurus logik. Bagi pembangun vibe coding dengan bajet terhad, Stitch pilihan terbaik kerana ia percuma dan melukis rupa unik dari awal untuk produk anda. Jika anda ingin memahami keseluruhan pilihan alat yang terdapat di pasaran, saya membincangkannya dalam artikel utama apa yang patut digunakan untuk menulis kod pada 2026.

Apakah kelemahan Google Stitch: apakah batasannya?#

Berikut senarai yang jujur supaya anda tidak kecewa pada skrin ketiga:

• Antara muka sahaja. Tiada backend, pangkalan data atau penerbitan ke pengehosan. Anda memerlukan Claude Code untuk itu (atau Lovable jika mahu semuanya di satu tempat).
• Penyuntingan dalam alat terhad. Anda tidak boleh mengalihkan satu elemen dengan tetikus—hanya mengubahnya melalui arahan dan menjana semula. Ini bukan Figma.
• Ketidakdeterministikan. Arahan yang sama menghasilkan keputusan yang berbeza. Ini bagus untuk meneroka idea, tetapi menyusahkan apabila anda memerlukan hasil yang boleh diulang.
• Kuota. Anda akan mencapai had penjanaan percuma (kini harian); anda tidak boleh membeli tambahan, jadi anda perlu menunggu kuota ditetapkan semula. Bilangan tepat berbeza-beza, jadi semak antara muka.
• Status eksperimen. Google Labs tidak menjamin sokongan jangka panjang. Perkhidmatan ini mungkin berubah atau ditutup.
• Sekatan geografi dan isu kebenaran MCP dalam Claude Code, yang disebut dalam bahagian ketersediaan dan persediaan.

Stitch kurang sesuai jika anda mempunyai panduan jenama yang ketat untuk banyak projek, jika reka bentuk sudah tersedia dalam Figma atau jika anda memerlukan aplikasi yang sudah diterbitkan dengan backend.

Apa seterusnya?#

Bina aliran kerja yang paling ringkas dengan satu skrin: terangkan produk dalam Stitch, jana halaman utama, eksport HTML/CSS dan minta Claude Code menyusun DESIGN.md serta membina halaman daripada fail setempat itu. Sebaik sahaja anda melihat gradien ungu hilang dengan sendirinya, selebihnya akan menjadi lebih mudah.

Mereka bentuk dengan Stitch ialah satu teknik kejuruteraan konteks. Sistem lengkap menggabungkan klon AI, Otak Kedua dan kejuruteraan konteks supaya Claude dapat bergantung pada peraturan dan konteks yang telah disediakan.

Klon AI, Otak Kedua dan kejuruteraan konteks penting untuk produk ini. Mereka bentuk dengan Stitch ialah blok binaan pertama dalam gabungan tersebut.

Untuk terus bekerja dengan model, anda boleh pergi ke Ailoot.