Learning Timeline
Key Insights
Kelebihan Gemini 1.5 Pro untuk UI
Gemini 1.5 Pro mempunyai 'context window' yang besar dan keupayaan 'multimodal' yang sangat tajam untuk mengenali elemen kecil dalam screenshot seperti spacing (padding/margin) dan jenis font yang digunakan.
Tip Kualiti Output
Pastikan screenshot yang dimuat naik mempunyai resolusi tinggi dan tidak kabur. Jika interface mempunyai 'Dark Mode' dan 'Light Mode', muat naik kedua-dua versi untuk mendapatkan spesifikasi pembolehubah CSS (CSS variables) yang lebih tepat.
Prompts
Expert UI Analyzer Prompt
Target:
Google AI Studio (Gemini 1.5 Pro)
You are a Senior Frontend Engineer and UI/UX Specialist. Analyze the attached screenshot and provide a highly detailed technical prompt for an AI coding assistant (like Cursor or Claude) to recreate this interface. Your output should include:
1. Tech Stack Recommendation: Suggest the best framework (e.g., Next.js, Tailwind CSS, Lucide React icons).
2. Color Palette: Identify primary, secondary, and background colors in Hex format.
3. Typography: Identify font styles, sizes, and weights.
4. Layout Structure: Breakdown the container system, margins, padding, and responsiveness.
5. Component Breakdown: List every UI element (buttons, inputs, cards) with their specific styling.
6. Logic & Interactivity: Describe how the elements should behave (e.g., hover states, animations).
Generate the output in a format that I can directly paste into a coding agent to build this from scratch.
Step by Step
Langkah Persediaan di Google AI Studio
- Layari laman web Google AI Studio (aistudio.google.com).
- Log masuk menggunakan akaun Google anda.
- Di bahagian sidebar kiri, klik butang '+ Create New' dan pilih 'Chat prompt'.
- Pada panel sebelah kanan (Model settings), pastikan model 'Gemini 1.5 Pro' dipilih untuk hasil analisis imej yang terbaik.
- Laraskan 'Temperature' kepada nilai yang lebih rendah (sekitar 0.2 hingga 0.4) untuk mendapatkan output teknikal yang lebih konsisten dan tepat.
Menganalisis Screenshot dan Menjana Prompt
- Klik pada ikon '+' atau butang 'Files' di dalam ruangan input chat.
- Muat naik screenshot interface (UI) yang ingin anda tukarkan menjadi kod.
- Tampal (paste) prompt arahan pakar (Expert Prompt) ke dalam ruangan teks di bawah imej yang dimuat naik.
- Tekan 'Enter' atau klik butang 'Run' untuk memulakan proses analisis.
- Tunggu sehingga Gemini selesai menjana spesifikasi teknikal yang lengkap termasuk UI components, layout, warna (hex codes), dan functional requirements.
- Salin (copy) keseluruhan output teks yang dihasilkan untuk digunakan dalam ejen coding seperti Cursor atau Claude.
