Learning Timeline
Key Insights
Kenapa Screenshot Lebih Baik Daripada Figma Import?
Import fail Figma secara terus selalunya menghasilkan kod yang 'messy' kerana ia mengikut struktur layer Figma yang mungkin tidak tersusun. Teknik screenshot-to-code membolehkan AI membina semula struktur DOM yang bersih berdasarkan apa yang ia 'nampak', menghasilkan kod yang lebih mudah diuruskan (cleaner code).
Tips Ketepatan Visual
Jika AI tersalah tafsir elemen (seperti menyangka button adalah kotak teks), berikan prompt pembetulan di Bolt.new seperti: 'Change the search box to a functional input field with a search icon on the right'.
Prompts
Optimasi Kod Frontend
Target:
Bolt.new
I have this UI code from a screenshot. Please refine it to be fully responsive using Tailwind CSS, ensure all buttons have hover states, and use Lucide React for any icons. Here is the code: [PASTE_CODE_HERE]
Step by Step
Langkah Menyediakan Design Figma untuk AI
- Buka fail design anda di Figma.
- Pilih frame atau seksyen spesifik yang ingin ditukar kepada kod.
- Klik kanan pada frame tersebut.
- Pilih menu 'Copy/Paste as' daripada senarai dropdown.
- Klik 'Copy as PNG' untuk mengambil paparan visual tepat (teknik screenshot-to-code).
- Pastikan resolusi paparan mencukupi agar AI dapat mengenal pasti elemen kecil seperti icon dan text.
Proses Penukaran Visual kepada Kod via Magic Patterns
- Layari laman web Magic Patterns (magicpatterns.com).
- Klik pada ruangan input utama atau tekan 'Ctrl+V' (Windows) atau 'Cmd+V' (Mac) untuk paste gambar Figma tadi.
- Tunggu AI menganalisis struktur visual dan menjana kod React/Tailwind CSS secara automatik.
- Klik pada tab 'Code' untuk melihat hasil sintaks yang dijana.
- Klik butang 'Copy Code' untuk menyalin keseluruhan kod ke clipboard anda.
Membangunkan Website Lengkap di Bolt.new
- Buka pelayar web dan layari Bolt.new.
- Tampal kod yang disalin daripada Magic Patterns ke dalam kotak chat prompt di bahagian bawah.
- Tambah arahan spesifik dalam prompt untuk fungsi tambahan (cth: menambah interactivity atau logic API).
- Tekan 'Enter' atau klik butang hantar untuk memulakan sesi 'Live Preview'.
- Perhatikan panel sebelah kanan untuk melihat website anda berfungsi secara real-time.
- Klik butang 'Deploy' di bahagian atas kanan jika anda ingin menghoskan website tersebut ke Netlify atau platform lain.
