Clone UI website dari screenshot dan tambah feature 'Google Grounding'

Tekan play pada video. Ia akan terus lompat ke bahagian yang menjawab tajuk di atas — tak perlu tonton video penuh.

Gemini 3.0 Google AI Studio Google Search Web Design Image Analysis

Cara unik ambil screenshot website sedia ada, minta AI clone design tersebut, dan tambah butang yang menarik data live daripada Google Search.

Teknik 'Vibe Coding' & Kegagalan Awal

Proses ini sering melibatkan ralat di mana AI menjana skrin kosong (blank). Jangan panik; ini adalah sebahagian daripada 'vibe coding'. Anda hanya perlu beritahu AI apa yang salah, dan biasanya ia akan membetulkan fail index.html dalam percubaan kedua.

Kelebihan Grounding dalam UI

Fungsi 'Google Grounding' membolehkan aplikasi yang anda bina menarik maklumat terkini daripada internet. Ini sangat berguna untuk aplikasi yang memerlukan data trend semasa atau berita harian yang tidak ada dalam data latihan statik AI.

Tips Screenshot yang Berkesan

Pastikan anda 'zoom out' browser sebelum mengambil screenshot. Lebih banyak konteks visual yang anda berikan kepada AI, lebih tepat hasil klon UI yang akan dihasilkan.

More from Coding & Pembangunan Aplikasi AI

Generate Frontend App dengan Google AI Studio & Sambung Webhook

Google AI Studio n8n

Analisis Rakaman Audio Sales Call Guna Google AI Studio

Google AI Studio Google Gemini

Automasi variasi iklan media sosial dengan Google AI Studio

Google AI Studio Gemini

Jana simulasi pendidikan interaktif dengan Gemini 3 Search

Gemini 3 Pro Google Search

Hasilkan simulasi 3D interaktif menggunakan Gemini 3 Pro dan Three.js

Gemini 3 Pro Three.js

Bina browser game dengan one-shot prompting menggunakan Gemini 3 Pro

Gemini 3 Pro Google AI Studio