Logo PoinTru PoinTru.com
📚 Official Documentation & AI Replication Guide

Panduan Lengkap PoinTru Master Suite

Dokumentasi penggunaan dan tutorial membuat generator landing page sendiri via Google Gemini Canvas & Google Antigravity.

🚀 Buka Tool Generator Prompt Landing Page 📂 Unduh Berkas Lokal (.html)
🏛️ 1. Deskripsi & Arsitektur PoinTru Master Suite

PoinTru Master Suite (dapat diakses online di https://www.pointru.com/prompt-generator-landing-page/ atau berkas lokal prompt-gen-landingpage.html) adalah aplikasi web mandiri (*Single-File HTML*) yang berfungsi sebagai Prompt Generator Engine untuk merancang halaman landing page berkonversi tinggi dan mengaudit skor kelayakan konversi (CRO) secara otomatis.

✨ Mode 1: Builder Generator (4 Pilar)
  • Pilar 1 (Model Layout A–E): Direct Sales, Lead Gen B2B, Squeeze Page, Long-Form Course, atau Event Webinar.
  • Pilar 2 (Skema Warna Human-Centric): Rasio 60-30-10 bebas klise neon generatif AI (Warm Editorial, Organic Earthy, Modern Ink Tech, Retro Industrial, Espresso Dark).
  • Pilar 3 (Aset Inline SVG Vektor): Membuat 2–3 kode inline <svg> murni responsif tanpa dependensi eksternal.
  • Pilar 4 (Formula Copywriting): Penerapan formula PAS (Pain-Agitate-Solve) atau AIDA (Attention-Interest-Desire-Action).
🔍 Mode 2: CRO Audit Tool (5 Poin Kritis)
  • Above the Fold Clarity: Headline, sub-headline & CTA terlihat tanpa scroll.
  • Single Focus CTA: 1 tujuan aksi tanpa tombol sekunder yang membingungkan.
  • WCAG AAA Contrast Rule: 4 Teknik Penyelamat Teks Putih di atas area terang.
  • Mobile Responsive: Form, tombol floating, dan kartu proporsional di smartphone.
  • Anti-AI & Fast Assets: Bebas tag lazy-load pada gambar, bebas kata klise AI, dan disclaimer modal aktif.
🚀 2. Panduan Langkah Demi Langkah Menggunakan Tool

🅰️ Menggunakan Mode Builder Generator (Membuat Landing Page Baru)

  1. Buka berkas prompt-gen-landingpage.html di peramban web Anda.
  2. Pilih tab "1. Builder Generator" di bar navigasi atas.
  3. Pilih salah satu dari 6 Quick Presets (misal: Direct Sales atau Lead Gen B2B) untuk memuat data instan, atau isi manual Nama Brand, URL Slug, dan Sumber Riset.
  4. Tentukan Mode Framework:
    • 100% Otomatis: AI menentukan sendiri kombinasi 4 pilar terbaik sesuai data mentah Anda.
    • Kustom Manual: Anda dapat memilih sendiri Model Layout (A-E), Palet Warna, Gaya SVG, dan Formula Copywriting.
  5. Tempelkan penawaran atau draf produk Anda di textarea Data Mentah.
  6. Klik tombol "✨ Generate Master Builder Prompt", lalu klik "📋 Salin Prompt".
  7. Buka Google Gemini, Claude 3.5 Sonnet, atau ChatGPT, lalu tempelkan prompt tersebut. AI akan langsung menghasilkan 1 file HTML landing page utuh siap pakai!

🅱️ Menggunakan Mode CRO Audit Tool (Audit & Revisi Landing Page)

  1. Klik tab "2. CRO Audit Tool" di bar navigasi atas.
  2. Masukkan Nama Brand dan pilih Goal Halaman (misal: Direct Sales atau Lead Gen Demo).
  3. Pastikan 5 kotak checklist Lingkup Audit CRO tercentang.
  4. Tempelkan seluruh kode HTML (<!DOCTYPE html> ... </html>) atau teks landing page Anda pada kolom input (atau klik "⚡ Isi Contoh Kode").
  5. Klik "🔍 Generate Master CRO Audit Prompt" lalu klik "📋 Salin Prompt".
  6. Tempelkan prompt ke AI. AI akan memberikan:
    • Tabel Matriks Skor CRO (0–100).
    • Diagnostik Celah & Kebocoran Konversi (Red Flags).
    • Blok Kode HTML Utuh Hasil Revisi Langsung.
👁️ 3. Standar Kontras Visual WCAG AAA & 4 Penyelamat Teks Putih

Salah satu masalah fatal desain web adalah teks putih yang tenggelam di atas latar putih atau gambar terang. Generator ini menanamkan instruksi ketat kepada AI: Jika teks putih/terang harus berada di atas latar terang atau foto hero, AI WAJIB menerapkan minimal 1 dari 4 teknik berikut:

Teknik 1
Bayangan Teks (Drop Shadow)
Menambahkan bayangan gelap tipis di belakang huruf untuk menciptakan kedalaman dan dimensi.
text-shadow: 0 2px 10px rgba(0,0,0,0.85);
Teknik 2
Blok Gelap (Dark Overlay Pill)
Meletakkan badge/kotak semi-transparan gelap (50%-80%) dengan efek blur tepat di bawah teks.
background: rgba(15,23,42,0.75); backdrop-filter: blur(8px);
Teknik 3
Garis Tepi (Stroke Outline)
Memberikan garis tepi gelap pada setiap huruf agar bentuk teks terpisah tajam dari background.
-webkit-text-stroke: 1px rgba(0,0,0,0.85);
Teknik 4
Efek Glow Gelap (Dark Glow)
Pendaran warna gelap yang halus dan merata di sekeliling teks untuk kontras yang lembut dan elegan.
text-shadow: 0 0 14px rgba(0,0,0,0.95);
🌐 4. Cara Membuat Tool Ini Sendiri via Google Gemini Canvas

Google Gemini Canvas adalah antarmuka interaktif pada Google Gemini (web) yang memungkinkan pembuatan dan pratinjau kode secara berdampingan (*side-by-side*).

Langkah-langkah:

  1. Buka gemini.google.com dan pilih model Gemini 1.5 Pro / Gemini 2.0 Pro.
  2. Aktifkan fitur Canvas atau ketikkan perintah pembuatan aplikasi di panel chat.
  3. Salin Master Prompt di bawah ini dan tempelkan ke Gemini:
Master Prompt Google Gemini Canvas 
Buatkan sebuah aplikasi web Single-Page Application (SPA) berbasis SINGLE-FILE HTML bernama "PoinTru Master Suite: Landing Page Builder & CRO Audit Generator" di dalam panel Canvas dengan spesifikasi teknis dan fitur berikut:

1. ARSITEKTUR TEKNIS (100% OFFLINE & ZERO EXTERNAL DEPENDENCY):
- Seluruh CSS wajib disematkan langsung di dalam tag <style> internal (TIDAK BOLEH bergantung pada CDN luar seperti Tailwind CDN, FontAwesome CDN, atau Google Fonts agar tetap jalan tanpa internet).
- Menggunakan tema gelap modern (Dark Slate & Deep Navy #060911, Card #0D1322, Border #1E293B, Aksen Cyan #06B6D4 dan Amber #F59E0B).
- Menggunakan ikon SVG inline murni untuk favicon, logo, dan tombol.
- JavaScript murni (Vanilla JS) yang langsung aktif dan terhubung ke window object.

2. FITUR UTAMA (DUAL-MODE NAVIGATION):
- Tombol Navigasi Mode di atas:
  * Mode 1: "1. Builder Generator" (Membuat Master Prompt Landing Page 4 Pilar).
  * Mode 2: "2. CRO Audit Tool" (Membuat Master Prompt Audit Skor Konversi 0-100 & Auto-Fix Rewrite).

3. FORM BUILDER GENERATOR (MODE 1):
- Quick Presets: 6 tombol preset (Direct Sales, Lead Gen B2B, Squeeze Page, Long-Form Course, Event Webinar, PoinTru Default).
- Input: Nama Brand, URL Slug (auto-sync dari nama brand), Sumber Riset, dan Data Mentah Textarea (lengkap dengan penghitung kata & karakter otomatis).
- Pilihan Eksekusi: Radio "100% Otomatis oleh AI" vs "Kustom Manual" (menampilkan dropdown Model Layout A-E, 5 Skema Warna Human-Centric, Gaya SVG, dan Formula PAS/AIDA).
- Aturan Kontras WCAG AAA & 4 Penyelamat Teks Putih: Wajib memasukkan instruksi Drop Shadow, Dark Overlay, Stroke Outline, dan Dark Glow jika teks putih berada di atas latar terang.

4. FORM CRO AUDIT TOOL (MODE 2):
- Input: Nama Brand, Goal Halaman, Format Output (Skor 0-100 + Red Flags + Full HTML Rewrite), dan Textarea Input Kode HTML lama.
- Checklist 5 Poin Kritis CRO: Above the Fold, Single Focus CTA, Contrast Check (WCAG AAA & 4 Contrast Rescuers), Mobile Responsive, dan Anti-AI Compliance.

5. PANEL OUTPUT & ACTIONS:
- Textarea hasil prompt (readonly, tinggi 520px, font monospaced) dengan status badge dinamis.
- Tombol "Salin Prompt" (dengan fallback clipboard untuk protokol file:///) dan tombol "Unduh (.txt)".
- Toast notification interaktif saat menyalin atau mengganti preset.

Keluarkan seluruh kode secara lengkap dalam SATU BLOK KODE HTML (<!DOCTYPE html> sampai </html>) yang siap pakai.

4. Setelah Gemini selesai membuat kode di panel Canvas, klik tombol Download atau Copy dan simpan sebagai berkas .html.

⚡ 5. Cara Membuat Tool Ini Sendiri via Google Antigravity

Google Antigravity adalah *Agentic Coding Assistant* bertenaga Gemini Pro yang bekerja langsung memodifikasi dan membuat file di dalam lingkungan folder komputer/IDE lokal Anda.

Langkah-langkah:

  1. Buka workspace proyek Antigravity Anda pada direktori yang diinginkan.
  2. Kirimkan instruksi pembuatan file langsung pada prompt Antigravity:
Master Prompt Google Antigravity 
Buatkan berkas tunggal "prompt-gen-landingpage.html" di direktori saat ini.

Aplikasi ini adalah PoinTru Master Suite (Landing Page Generator & CRO Audit Tool) dengan ketentuan arsitektur berikut:
1. Single-File HTML Utuh: Semua CSS dan Vanilla JS berada di dalam file tanpa dependensi CDN internet (100% offline-ready).
2. Dual Mode Switcher: Mode Builder 4 Pilar (Model Layout A-E, Palet Warna 60-30-10, Aset Inline SVG, Copywriting PAS/AIDA) dan Mode CRO Audit 5-Point Checklist.
3. Standar Kontras WCAG AAA: Sematkan aturan larangan teks putih di atas latar putih polos, serta sertakan 4 teknik penyelamat teks terang (Drop Shadow, Dark Overlay, Stroke Outline, Dark Glow).
4. Fitur Interaktif: Live counters, Quick Presets, Auto Slug, Salin Clipboard (dengan fallback file:///), dan Download .txt prompt.
5. Pastikan semua fungsi JavaScript di-bind ke window object dan dipanggil saat inisialisasi agar tombol Reset, Presets, dan Navigasi berfungsi 100% tanpa error.

3. Antigravity akan langsung menyusun kode, memverifikasi tidak ada bug ID DOM duplikat, dan menuliskan file langsung ke harddisk Anda.

📊 6. Tabel Perbandingan Platform
Parameter Penggunaan Harian Tool Google Gemini Canvas Google Antigravity
Lingkungan Kerja Browser Lokal (File Lokal) Antarmuka Web Gemini IDE / Agentic Workspace
Koneksi Internet ❌ 100% Offline (Tanpa Internet) ✔️ Diperlukan ✔️ Diperlukan saat pembuatan
API Key ❌ Tanpa API Key ❌ Menggunakan Kuota Chat Web ✔️ Terhubung ke Gemini Pro / AGY
Fungsi Utama Menghasilkan Prompt AI Siap Pakai Membuat & Modifikasi Kode Web Pemrograman Mandiri Langsung di File
Hasil Akhir Teks Prompt Terstruktur Kode HTML di Panel Canvas Berkas .html Tersimpan di Disk
✅ Teks berhasil disalin!