Langkah 1: Research & Copywriting Guna Kimi AI
Kimi AI adalah antara AI percuma paling underrated untuk research dan content creation. Dia boleh handle PDF, URL, dan context panjang. Guna dia untuk draft copy landing page.
Apa Yang Nak Minta Dari Kimi AI?
Kimi kena faham produk korang dulu. Pergi ke [kimi.ai](https://kimi.ai), dan prompt macam ni:
Prompt untuk Kimi AI:
Saya nak jual [NAMA PRODUK] — [huraian ringkas produk]. Harga RM[HARGA]. Target audiens adalah pengusaha bisnes digital Malaysia yang nak [BENEFIT UTAMA].
Tolong hasilkan copy untuk landing page produk digital dengan struktur ni:
1. **Hero Headline** — 3 pilihan headline power yang guna formula "Masalah + Penyelesaian"
2. **Subheadline** — ayat yang explain apa produk ni, dalam 15 patah perkataan
3. **Bullet Points Faedah** — 5 point utama kenapa orang kene beli produk ni
4. **Social Proof Section** — 3 testimoni fiktif yang realistik
5. **CTA Button** — 3 pilihan call-to-action yang konversi tinggi
6. **FAQ Section** — 5 soalan lazim dan jawapan
Guna bahasa Melayu Malaysia, gaya santai profesional. Output dalam format JSON supaya senang nak guna.
Kimi akan bagi output yang structured. Korang boleh tweak mana-mana yang rasa tak sesuai. Simpan output ni — kita akan guna untuk langkah seterusnya.
> Kenapa Kimi AI? Sebab context dia besar (200k token), free, dan bagus untuk research. Dia boleh baca URL competitor landing page dan guna sebagai referensi.
—
Langkah 2: Generate Visual Landing Page Guna Google Gemini
Landing page tanpa visual macam nasi lemak tanpa sambal — okay, tapi tak power. Tapi kita taknak bayar graphic designer. Guna Google Gemini untuk generate gambar produk, background, banner, dan icon.
Gemini sekarang dah support image generation terus (Gmail 2.0, Imagen). Korang boleh request gambar profesional dengan prompt yang betul.
Prompt Image Generation:
Pergi ke [gemini.google.com](https://gemini.google.com) dan guna prompt ni:
Prompt untuk Hero Image:
Generate an image for a digital product landing page. A clean, modern laptop mockup on a wooden desk showing a dashboard interface. Warm lighting, cozy vibe. Target audience is Malaysian entrepreneurs. Professional but approachable style. No text on the image. 1920x1080 aspect ratio. Minimalist, premium look.
Prompt untuk Product Mockup:
A smartphone and laptop side by side displaying a digital product dashboard. Clean white background. Soft shadows. Modern UI design. Suitable for a landing page hero section. Mockup style, photorealistic. 16:9 aspect ratio.
Prompt untuk Background Section:
Abstract gradient background in purple and orange tones, soft and smooth. Suitable for web design hero section. No text, no objects. Minimalist and modern. 1920x1080 pixels.
Alternatif Percuma Lain Untuk Visual:
| Tool | Kegunaan | Kelebihan |
|---|---|---|
| Gemini (Imagen) | Generate gambar produk/mockup | Free, unlimited |
| Canva (Free) | Edit & tambah teks | Template landing page siap |
| Screenshot Mockups | Mockup device | Free, no signup |
Simpan semua gambar yang dah generate dalam satu folder untuk digunakan nanti.
> Tip: Jangan guna gambar dengan teks dalam image — nanti nampak murahan. Biar clean, tambah teks nanti guna CSS.
—
Langkah 3: Coding Landing Page Guna Claude
Ini langkah paling magik. Claude (claude.ai, versi percuma pun dah cukup power) akan tulis satu landing page HTML+CSS yang lengkap, responsive, dan conversion-optimized.
Cara Prompt Claude:
Buka [claude.ai](https://claude.ai), dan guna prompt ni:
You are a professional web developer specializing in high-converting landing pages for digital products.
I need you to create a complete single-page HTML landing page using ONLY HTML + CSS (inline/style tag) + vanilla JavaScript.
**Product Details:**
- Product Name: [NAMA PRODUK]
- Price: RM[HARGA]
- Target Audience: [AUDIENS]
- Key Benefits:
1. [BENEFIT 1]
2. [BENEFIT 2]
3. [BENEFIT 3]
4. [BENEFIT 4]
5. [BENEFIT 5]
**CTA Button Text:** [CTA TEXT]
**Requirements:**
- Fully responsive (mobile-first)
- Modern, clean design — warna tema utama ungu + oren
- Include: Hero section, benefits section, features, testimonial cards, FAQ accordion, footer
- Use CSS flexbox/grid
- Smooth scroll navigation
- Mobile hamburger menu
- All placeholder images guna https://placehold.co/ dengan size sesuai
- Testimonial section dengan 3 cards
- FAQ section dengan accordion JavaScript
- Include Google Fonts (Inter atau Poppins)
- Colour scheme: Primary #6C63FF (purple), Secondary #FF6B35 (orange), dark #1a1a2e
- Bahasa Melayu Malaysia content — santai profesional
**Copy Content to use:**
[INSERT COPY DARI KIMI AI OUTPUT HERE]
Generate the COMPLETE HTML code in a single file. Jangan split jadi multiple files. Use inline CSS dalam