Merevolusi Desain Aplikasi AI: Google Stitch dan Claude Code

Merevolusi Desain Aplikasi AI: Google Stitch dan Claude Code

Google baru saja merilis update besar untuk Google Stitch yang membawa perubahan paradigma yang sangat signifikan dalam mempertahankan design styles di dalam code. Dengan menggabungkan fitur design system baru dari Google Stitch dan AI coding agent seperti Claude Code, para developer kini bisa dengan mudah mengubah proyek mereka dari interface dasar bergaya “AI slop” menjadi produk yang profesional dan terpadu.

Yuk, simak panduan step-by-step berikut untuk memanfaatkan workflow baru ini dalam mendesain dan membangun aplikasi yang keren banget!

Bagian 1: AI-Native Spatial Canvas

Google Stitch beroperasi sebagai AI-native spatial canvas yang bisa menerima product requirements documents (PRDs), code, atau gambar sebagai benih kreatif (creative seeds). Alih-alih cuma jadi visual generator biasa, sistem ini bertindak seperti design agent yang lebih pintar dan mampu melakukan interactive prototyping dengan cepat bergaya Figma.

Kalau kamu punya aplikasi yang kelihatannya belum terlalu rapi atau hasil dari “vibe-coded”, kamu cukup ambil screenshot dari halaman tersebut (misalnya halaman dashboard atau library) lalu drop langsung ke dalam canvas Stitch.

Bagian 2: Melakukan Prompting untuk Redesign

Setelah screenshot kamu ter-upload, kamu bisa menggunakan natural language prompts untuk menentukan arah kreatif yang baru.

Kamu bisa memakai prompt seperti ini untuk memulai proses redesign:

"I want to redesign these two screens for this landing page... I'd like to redesign this in a more professional minimal I also want to change the fonts that we're using for this as well so can you recommend me some more professional looking serif fonts for the headings and create some versions and also a sans serif font that is readable for the body copy here."

Stitch akan menerjemahkan screenshot tersebut tanpa butuh referensi desain eksternal dan langsung meng-generate layar UI yang baru dan profesional. Kamu juga bisa memberikan prompt kepada sang agent untuk membuat versi desktop dari desain mobile, atau mengubah warnanya agar lebih “neutral and warm”.

Bagian 3: Melakukan Generate dan Export design.md

Fitur paling powerful dari update ini adalah bagaimana cara Google Stitch menangani design systems. Saat membuat UI kamu, Stitch secara otomatis membangun design system komprehensif yang didokumentasikan di dalam markdown file bernama design.md. File ini berisi typography rules, elevation components, color scales, dan daftar styling “dos and don’ts” yang diperlukan untuk mengaplikasikan bahasa desain tersebut ke seluruh codebase kamu.

Untuk membawanya ke dalam project kamu:

1. Buka design system yang sudah di-generate di Google Stitch dan arahkan ke design.md.
2. Copy isinya ke clipboard kamu.
3. Di local app project kamu, buat sebuah file baru dan save isinya:

# Create a new file in your project root
touch design.md

Bagian 4: Setup Google Stitch MCP

Agar Claude Code bisa membaca design screens kamu secara langsung dan mengekstrak layout structures (yang dibangun dengan HTML dan CSS oleh Stitch), kamu perlu melakukan configure pada Google Stitch Model Context Protocol (MCP).

• Generate API Key: Di dalam Google Stitch, buka Settings > API Key lalu klik Create Key, kemudian copy kodenya.
• Cari Setup Command: Cari “Google Stitch MCP setup” di dokumentasi Google Stitch untuk menemukan install command yang dirancang khusus untuk Claude Code.
• Run the Command: Paste command tersebut ke dalam terminal kamu, lalu tambahkan API Key yang tadi.
• Start Session: Mulai sesi Claude Code yang baru.

Bagian 5: Mengimplementasikan Desain di Claude Code

Dengan design.md yang sudah di-save di project kamu dan MCP yang sudah aktif, kamu sekarang bisa memberikan instruksi ke Claude Code untuk menulis ulang UI aplikasi kamu.

Pertama, kamu bisa mencoba seberapa baik Claude Code memahami markdown file tersebut dengan mengaktifkan “plan mode” dan menjalankan prompt ini:

"Create a plan to redesign the entire UI for this web using the exact instructions from design.md"

Claude Code akan memecah redesign ini menjadi beberapa fase terpisah (misalnya sidebar layout, feature components, typography) berdasarkan aturan-aturan di dalam markdown.

Kalau kamu merasa markdown file saja tidak cukup sempurna untuk menangkap complex layouts atau fonts yang presisi dari desain Stitch, kamu bisa menggunakan MCP secara langsung. Untuk memulai dari awal dan mengambil layout secara eksplisit dari Stitch, lakukan clear pada sesi kamu dan jalankan targeted prompt:

/clear

"Let's update landing page to match the layout of the landinge page desktop screen in Google Stitch using the Stitch MCP"

Dengan membiarkan Claude Code mengambil detail layar, melihat kode HTML di baliknya, dan meninjau screenshot melalui Stitch MCP, AI ini dapat diandalkan untuk membangun layouts, components, dan hover effects yang baru. Pastikan fitur aplikasi kamu yang sudah ada selaras dengan desain Stitch, karena Claude Code mungkin akan mencoba membangun fitur-fitur yang hilang secara otomatis (seperti bagian “recent drafts”) kalau AI tersebut melihatnya di mockups Stitch.