Fasa 3 — Projek Pertama

Modul Pelajar: Bina Landing Page dengan AI

Panduan 10 langkah untuk membina landing page pertama anda menggunakan Claude Code (atau Codex). Ikut langkah demi langkah — setiap langkah ada contoh prompt dan screenshot yang dijangka.

10
Langkah
3-4
Jam
1
Landing Page

10 Langkah Membina Landing Page

1. Tentukan produk/topik landing page anda 2. Guna AI untuk brainstorm layout dan sections 3. Pilih style — warna, font, vibe (guna UI/UX Pro Max) 4. Prompt untuk wireframe/content structure 5. Prompt untuk hasilkan HTML/CSS penuh 6. Buka dalam browser — semak hasil 7. Refine dengan prompt tambahan 8. Tambah content sebenar (teks, gambar) 9. Responsive check — mobile view 10. Final polish — animation, micro-interactions

🗺️ Perjalanan Anda — Selepas Fasa Ini

Selepas fasa ini, anda akan ada SATU landing page berfungsi di internet. Ini projek pertama anda sebagai Vibe Coder. Ia mungkin tak sempurna — tapi ia MILIK anda, dibina dengan perkataan, bukan kod.

"Setiap pakar pernah jadi pemula. Yang membezakan mereka bukan bakat — tapi keberanian untuk mula."

1️⃣

Tentukan Produk/Topik Landing Page Anda

Pilih apa yang anda mahu promosikan — ini akan menjadi fokus landing page anda

Langkah 1

Pilih Produk atau Idea Anda

Landing page yang baik bermula dengan produk atau idea yang jelas. Pilih satu perkara yang anda nak fokuskan. Jangan cuba letak semua dalam satu halaman.

Contoh produk/idea:

  • Kedai kopi artisan
  • Aplikasi fitness / kesihatan
  • Produk skincare natural
  • Perkhidmatan photography
  • Kedai pakaian vintage
  • Startup teknologi edukasi
  • Kafe atau restoran
  • Portfolio peribadi / freelance
Tips: Pilih produk yang anda minat. Landing page akan lebih baik bila anda faham dan suka apa yang anda promosikan. Jika tiada idea, guna "Kedai Kopi Artisan" sebagai latihan.
2️⃣

Guna AI untuk Brainstorm Layout dan Sections

Minta AI cadangkan struktur landing page yang sesuai untuk produk anda

Langkah 2

Brainstorm Layout dengan AI

Sebelum tulis kod, minta AI cadangkan struktur dan sections yang sesuai untuk landing page anda. Ini akan memudahkan langkah seterusnya.

Claude Code — Prompt Contoh:

Skill 'frontend-design:frontend-design' "Saya nak bina landing page untuk [produk/idea anda]. Cadangkan layout dan sections yang sesuai. Produk saya target [target market]. Mood: [mood yang diingini]."

Codex / Copilot — Prompt Contoh:

"Suggest a layout structure for a landing page for [product/idea]. Target audience: [target market]. List the sections I should include and what each section should contain. Include recommendations for visual hierarchy."
📸 Screenshot yang Dijangka:
AI akan return senarai sections cadangan: Hero, Features, Testimonials, CTA, Footer — dengan penerangan ringkas untuk setiap satu.
📚

Case Studies (3) — Inspirasi Landing Page

Tiga contoh projek yang menunjukkan pendekatan berbeza untuk membina landing page

Case 1: "Kedai Kopi Artisan" — Dari Zero ke Landing Page Live

Produk: Kedai kopi artisan premium "The Roast House"

Approach:

  1. Jawab 5 soalan wajib: produk, target market, mood, warna suka, warna tak suka
  2. Guna AI brainstorm — minta AI cadangkan 5 section sesuai untuk kedai kopi
  3. Guna Prompt Helper untuk hasilkan content setiap section (headline, feature text, testimonial)
  4. Generate landing page dengan Frontend Design skill — prompt pertama dapat 80% complete
  5. Iterasi 3 pusingan: spacing, warna, mobile responsive
  6. Deploy ke Netlify dalam 5 minit

Hasil: Landing page premium dalam ~3 jam. Dark theme dengan emas dan putih. 6 section: Hero, Features, Menu, Testimonials, CTA, Footer.

Pembelajaran: Content siap sebelum code = 50% kerja selesai. Prompt pertama yang baik kurangkan pusingan refine.

Case 2: "Portfolio Designer Grafik" — Guna Frontend Design Skill

Produk: Portfolio peribadi untuk seorang designer grafik freelance

Approach:

  1. Terus invoke Skill 'frontend-design:frontend-design'
  2. Pilih style glassmorphism — background blur dengan kaca, warna pastel
  3. Generate landing page pertama — hero dengan nama + role, featured projects grid, contact form
  4. Iterasi warna: minta AI tukar palet kepada warna ungu-cyan
  5. Iterasi font: headline 'Playfair Display', body 'Inter'
  6. Tambah animasi: project cards fade-in on scroll, navigation smooth scroll

Hasil: Portfolio yang nampak profesional dan unik. Client kata "nampak macam buat sendiri, bukan template."

Pembelajaran: Frontend Design skill untuk hasil unik. Jangan takut untuk iterate warna dan font — AI boleh buat dalam beberapa saat.

Case 3: "Event Website" — Landing Page Pelbagai Guna

Produk: Landing page untuk majlis kahwin / kursus / festival — template guna semula

Approach:

  1. Bina landing page generic untuk "event" — guna nama dan tarikh sebagai placeholder
  2. Structure: Hero (nama event + tarikh), About section, Schedule/Timetable, Gallery, RSVP form, Location map, Footer
  3. Simpan sebagai template — boleh guna semula untuk pelbagai event
  4. Untuk event berbeza, cuma prompt: "Guna template landing page event, tukar nama kepada [nama baru], tarikh [tarikh baru], warna [palet baru]"

Hasil: Satu template yang boleh diguna untuk 5+ event berbeza. Jimat masa 80% untuk event seterusnya.

Idea Power: "Build once, use many times." Bina template generic yang boleh disesuaikan untuk pelbagai guna — majlis kahwin, kursus, festival, webinars. Ini kuasa sebenar Vibe Coding.
3️⃣

Pilih Style — Warna, Font, Vibe

Gunakan UI/UX Pro Max untuk menentukan identiti visual landing page anda

Langkah 3

Pilih Identiti Visual

Warna dan font menentukan "perasaan" landing page anda. Guna UI/UX Pro Max untuk dapatkan cadangan profesional.

Prompt untuk Palet Warna:

Skill 'ui-ux-pro-max' "Suggest 3 color palettes for a [product type] landing page. Target audience: [target market]. Mood: [mood]. I like [warna pilihan]."

Prompt untuk Font Pairing:

Skill 'ui-ux-pro-max' "Suggest font pairings for a [product type] landing page. I need one font for headlines (bold, impactful) and one for body text (clean, readable). Style: [modern/classic/playful]."
🎨 Screenshot yang Dijangka:
UI/UX Pro Max akan return 3 palet warna dengan kod HEX, diikuti dengan 2-3 cadangan font pairing. Simpan pilihan anda untuk langkah 5.
Simpan Pilihan Anda: Apabila dah pilih warna dan font, simpan dalam notepad: "Warna utama: #..., Warna sekunder: #..., Font headline: 'Poppins', Font body: 'Inter'". Anda akan guna ini dalam prompt langkah 5.
4️⃣

Prompt untuk Wireframe / Content Structure

Bina struktur kandungan untuk setiap section landing page

Langkah 4

Rancang Kandungan Setiap Section

Minta AI bantu tuliskan struktur kandungan — apa yang akan diisi dalam setiap section. Ini akan menjadi blueprint untuk langkah 5.

Claude Code — Prompt Contoh:

"Saya nak bina landing page untuk [produk]. Bantu saya tulis content structure untuk sections berikut: - Hero: headline, subheadline, CTA text - Features: 3-4 feature dengan icon dan penerangan - Testimonials: 2-3 testimonial - CTA: final call to action - Footer: links, copyright Gunakan tone [profesional/friendly/playful] untuk target audience [target market]."

Codex — Prompt Contoh:

"Help me write content for a landing page sections: Hero headline and subheadline for [product], 3 feature descriptions, 2-3 short testimonials, and a CTA text. Tone: [tone]. Audience: [audience]."
📝 Screenshot yang Dijangka:
AI akan return draft kandungan untuk setiap section. Anda boleh edit dan ubah ikut keperluan. Pastikan content dah siap sebelum ke langkah 5.
5️⃣

Prompt untuk Hasilkan HTML/CSS Penuh

Ini adalah langkah paling penting — hasilkan landing page penuh dalam satu fail HTML

Langkah 5

Generate Landing Page Pertama

Gunakan semua maklumat dari langkah sebelumnya (produk, style, content) dalam satu prompt komprehensif.

Claude Code — Prompt Utama:

Skill 'frontend-design:frontend-design' "Bina landing page untuk [produk]. Target audience: [target market]. Mood: [mood]. Spesifikasi visual: - Warna utama: [hex] - Warna sekunder: [hex] - Font headline: '[font name]' - Font body: '[font name]' - Style: [modern/elegant/playful/minimal] Sections: 1. Hero: Headline '[headline]', subheadline '[sub]', CTA button '[text]' 2. Features: 3-4 kad dengan icon, tajuk, penerangan 3. Testimonials: 2-3 quote dengan nama 4. CTA: Final section dengan button 5. Footer: copyright, social links Buat responsive. Satu fail HTML."

Codex — Prompt Utama:

"Create a single-file HTML landing page for [product]. Target audience: [audience]. Style: [style]. Color palette: primary [hex], secondary [hex], accent [hex]. Fonts: headings '[font]', body '[font]'. Use Google Fonts. Sections: 1. Hero with headline '[headline]', subheadline '[sub]', CTA button 2. Features section with 4 cards (icon + title + description) 3. Testimonials with 3 quotes 4. CTA section with email signup or contact button 5. Footer with copyright and social links Make fully responsive with CSS media queries. Include smooth scrolling and fade-in animations on scroll. All CSS and JS must be inline in the single HTML file."
🖥️ Screenshot yang Dijangka:
AI akan hasilkan satu fail HTML penuh (20-40 baris CSS + HTML). Simpan sebagai landing-page.html.
Simpan Fail: Selepas AI hasilkan kod, copy dan save sebagai landing-page.html. Letak di desktop atau folder projek. Jangan lupa extension .html.
6️⃣

Buka dalam Browser — Semak Hasil

Lihat landing page pertama anda dalam browser dan buat penilaian awal

Langkah 6

Preview Landing Page Anda

Cara buka fail HTML dalam browser:

  1. Right-click pada landing-page.html
  2. Pilih "Open with" → pilih browser (Chrome/Edge/Firefox)
  3. ATAU: Double-click file HTML
  4. ATAU: Guna Live Server dalam VS Code (recommended)

Bila dah buka, tanya diri sendiri:

  • Adakah hero section nampak menarik?
  • Adakah CTA button jelas dan mudah diklik?
  • Adakah susun atur kemas dan teratur?
  • Adakah warna dan font konsisten?
🌐 Screenshot yang Dijangka:
Landing page pertama anda akan nampak di browser. Mungkin tak sempurna — itu normal! Langkah seterusnya adalah untuk refine.
Guna Live Server: Dalam VS Code, klik kanan file HTML → pilih "Open with Live Server". Ini akan auto-reload page setiap kali anda simpan perubahan.
7️⃣

Refine dengan Prompt Tambahan

Baiki spacing, warna, imej, dan elemen lain dengan prompt lanjutan

Langkah 7

Refine Landing Page Anda

Selepas nampak hasil pertama, anda akan nampak apa yang perlu diperbaiki. Guna prompt untuk refine.

Contoh Prompt Refine:

"Dalam landing page saya yang sedia ada, tukar spacing antara sections kepada 80px. Buat section features dalam grid 3 column. Tukar warna button CTA kepada [warna]. Tambah subtle shadow pada card features. Gunakan gradient background untuk hero section."
🔄 Screenshot yang Dijangka:
Landing page selepas refine — spacing lebih baik, warna lebih konsisten, elemen lebih menonjol.
Iterasi adalah Kunci: Landing page yang baik melalui beberapa pusingan refine. Jangan puas hati dengan versi pertama. Cuba 2-3 pusingan refine untuk hasil terbaik.
8️⃣

Tambah Content Sebenar

Gantikan placeholder dengan teks dan gambar sebenar

Langkah 8

Gantikan Placeholder dengan Content Sebenar

Pada ketika ini, mungkin masih ada lorem ipsum atau placeholder images. Gantikan semua dengan content sebenar.

Prompt untuk Gambar:

"Tambah gambar dalam landing page saya. Gunakan placeholder service seperti picsum.photos untuk images. Hero section: gambar barista sedang menuang kopi. Features: gambar setiap jenis kopi. Pastikan semua img tag ada alt text."

Prompt untuk Teks:

"Kemas kini teks dalam landing page saya: - Hero headline: '[headline sebenar]' - Feature 1: '[description sebenar]' - Feature 2: '[description sebenar]' - Testimonial 1: '[quote sebenar]' — [nama] - CTA text: '[call to action sebenar]' Pastikan tiada placeholder atau lorem ipsum."
📸 Screenshot yang Dijangka:
Landing page dengan content sebenar — gambar relevan, teks bermakna, tiada lorem ipsum. Nampak lebih profesional.
Gambar Percuma: picsum.photos, unsplash.com, atau pexels.com untuk gambar percuma tanpa copyright. Alternatif: generate SVG icons/illustrations terus dalam HTML.
9️⃣

Responsive Check — Mobile View

Pastikan landing page nampak baik di telefon dan tablet

Langkah 9

Uji di Pelbagai Saiz Skrin

Kebanyakan pengguna akan buka landing page di telefon. Pastikan ia responsive.

Cara uji responsive:

  1. Buka landing page di browser
  2. Tekan F12 (DevTools)
  3. Klik ikon Toggle Device Toolbar (CTRL+SHIFT+M)
  4. Pilih device: iPhone, Pixel, iPad, dll.
  5. Semak: adakah semua content nampak? Scroll smooth? Butang boleh diklik?

Prompt untuk Baiki Responsive:

"Baiki responsive landing page saya. Guna mobile-first approach. Pada mobile (max-width: 768px): - Features grid tukar kepada 1 column - Font size dikurangkan 20% - Padding dikurangkan - Navigation jadi hamburger menu - Testimonial cards full width - CTA button full width"
📱 Screenshot yang Dijangka:
Dua screenshot: satu desktop view, satu mobile view. Mobile view patut menunjukkan content yang sama — cuma susun atur berbeza (single column, font lebih kecil).
Checklist Mobile: Butang tak bertindih. Teks tak terpotong. Imej muat dalam skrin. Scroll lancar. Semua section nampak tanpa zoom.
🔟

Final Polish — Animation, Micro-Interactions

Tambah sentuhan akhir untuk menjadikan landing page lebih profesional

Langkah 10

Polish dan Tambah Animasi

Langkah terakhir — tambah animasi halus dan micro-interactions yang menjadikan landing page terasa "hidup".

Prompt untuk Animasi:

"Tambah animations pada landing page saya: 1. Fade-in-up animation untuk setiap section bila scroll (gunakan Intersection Observer) 2. Hover effect pada buttons: scale 1.05 3. Smooth transition untuk semua warna dan shadow 4. Subtle gradient animation pada hero background 5. Stagger animation untuk feature cards (muncul satu persatu) Gunakan CSS @keyframes dan JavaScript ringan. Performance: guna transform dan opacity untuk animasi."
✨ Screenshot yang Dijangka:
Landing page dengan animasi smooth — section muncul bila scroll, butang bertukar warna bila hover, hero background bernyawa.
Kurang Lebih Banyak: Animasi yang terlalu banyak akan mengganggu. Gunakan animasi secara sederhana — cukup untuk memberi "life" tanpa melambatkan page.
✅

Tahniah! Anda Telah Selesai

Anda kini mempunyai landing page berfungsi yang dibina dengan bantuan AI

Tahniah! Anda telah berjaya membina landing page pertama menggunakan AI. Apa yang anda pelajari:
  • Cara brainstorm dan plan struktur landing page
  • Cara pilih warna, font, dan identiti visual
  • Cara prompt AI untuk hasilkan HTML/CSS
  • Cara refine dan improve melalui iterasi
  • Cara pastikan landing page responsive
  • Cara tambah animasi dan polish akhir

Apa Yang Boleh Dibuat Seterusnya?

  • Hosting: Upload landing page ke Netlify, Vercel, atau GitHub Pages percuma
  • Domain: Beli domain sendiri (RM30-50/tahun) untuk page anda
  • Multi-page: Kembangkan ke multiple pages (About, Blog, Contact)
  • Forms: Tambah contact form dengan formspree.io atau Google Forms
  • Analytics: Tambah Google Analytics atau Plausible untuk track pengunjung
  • A/B Test: Cuba versi berbeza landing page dan lihat mana lebih efektif