Learning Timeline
Key Insights
Kelebihan Planning Mode
Gunakan workflow 'Planning Mode' di mana anda menyemak strategi rekaan dalam PRD terlebih dahulu. Pastikan hierarchy dan konsep visual betul sebelum klik 'Go ahead' untuk menjana keseluruhan UI bagi mengelakkan pembaziran masa.
Fleksibiliti Kanvas
Anda boleh menyusun kedudukan skrin (layout) di atas kanvas secara bebas dengan hanya 'drag and drop' skrin tersebut mengikut kesesuaian aliran kerja (flow) anda.
Preview Merentas Peranti
Sentiasa gunakan fungsi preview untuk melihat bagaimana elemen UI bertindak balas (responsive) pada saiz skrin yang berbeza seperti telefon, tablet, dan desktop.
Prompts
Prompt Rekaan App Habit Tracker
Target:
Google Stitch / Google Gemini
Create an app for habit tracking. It's going to be gamified, but still it's going to be pretty minimalistic. I want it to be dark mode with neon accent.
Step by Step
Cara Menggunakan Ideate Mode di Google Stitch
- Layari Google Stitch dan klik pada butang 'Ideate' (pilihan 'Bring a problem to solve and see the solution').
- Pilih jenis projek yang ingin dihasilkan, sama ada 'Mobile App' atau 'Website/Web App'.
- Jika perlu, klik ikon '+' untuk memuat naik fail rujukan atau masukkan URL website untuk dijadikan inspirasi rekaan.
- Masukkan prompt rekaan anda ke dalam kotak teks yang disediakan. Anda boleh klik 'Enhance prompt' untuk mengoptimumkan arahan AI.
- Klik pada menu 'Design System' untuk memilih palet warna, preset rekaan, atau jenis interaksi secara real-time.
- Log masuk menggunakan akaun Google anda jika diminta (percuma).
- Semak 'Product Requirement Document' (PRD) yang dijana secara automatik oleh Stitch untuk melihat hala tuju visual rekaan.
- Klik butang 'Go ahead and design it' atau buat pelarasan pada 'Color palette' atau 'Home screen hierarchy' terlebih dahulu sebelum menjana UI.
- Gunakan panel di sebelah kiri untuk melihat komponen yang telah dicipta dan navigasi antara skrin yang berbeza.
- Klik pada pilihan seperti 'Add the habit detail screen' (atau skrin cadangan lain) untuk menambah halaman baru ke dalam kanvas.
- Gunakan fungsi 'Direct edit' pada mana-mana elemen untuk mengubah teks secara manual atau menggunakan bantuan AI.
- Klik butang 'Preview' untuk melihat prototaip interaktif aplikasi anda.
- Tukar mod paparan di bahagian atas skrin preview untuk melihat rupa aplikasi pada peranti Tablet atau Komputer.
