Logo PoinTruPoinTru.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, Tru Theme Sunny Beach).
  • 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: 5 Solusi 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.
⚡ Mode 3: Standarisasi & Minifikasi (Tru Theme)
  • Design System Sunny Beach Day: Deep Ocean, Persian Green, Saffron Gold, Sandy Orange, Burnt Sienna, Canvas Bg.
  • Core Web Vitals (FCP < 0.8s): 0 KB Font Overhead, explicit image width/height & async decoding.
  • Tanda Air Arsitektur: Tagging ekosistem resmi PoinTru.
  • Strict 1-Line Minifier: Minifikasi total HTML, CSS internal, dan script untuk produksi.
🚀 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 (termasuk Tru Theme Sunny Beach Day), 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.

🅲️ Menggunakan Mode Standarisasi, Tru Theme & Minifikasi HTML

  1. Klik tab "3. Standarisasi & Minifikasi" di bar navigasi atas.
  2. Pilih Design System Tru Theme (Sunny Beach Day Edition).
  3. Pilih target performa FCP < 0.8s (0 KB Overhead).
  4. Pastikan checklist Core Web Vitals & Strict Single-Block Minification tercentang.
  5. Tempelkan kode HTML landing page mentah Anda pada textarea (atau klik "⚡ Isi Contoh Kode").
  6. Klik "⚡ Generate Master Prompt Standarisasi & Minifikasi" lalu klik "📋 Salin Prompt".
  7. Tempelkan ke AI untuk mendapatkan file HTML produksi 1-blok yang telah terkonversi ke palet Sunny Beach Day dan terkompresi maksimal!
👁️ 3. Standar Kontras Visual WCAG AAA & 5 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, gradien terang, atau foto hero, AI WAJIB menerapkan minimal 1 dari 5 teknik berikut:

Solusi 1
Beri Kotak Transparan (Overlay)
Letakkan bentuk kotak hitam atau abu-abu gelap dengan tingkat transparansi 30%–50% di antara latar dan teks.
background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); padding: 6px 16px; border-radius: 8px;
Solusi 2
Tambahkan Bayangan (Drop Shadow)
Beri efek bayangan tipis berwarna hitam di belakang teks putih agar terlihat mengambang dan jelas.
text-shadow: 0 2px 8px rgba(0,0,0,0.85);
Solusi 3
Beri Garis Tepi (Outline / Stroke)
Tambahkan garis pinggir tipis berwarna hitam atau gelap pada huruf putih agar bentuk teks terpisah tajam.
-webkit-text-stroke: 1px rgba(0,0,0,0.85); paint-order: stroke fill;
Solusi 4
Gelapkan Latar Belakang
Ubah warna latar menjadi lebih gelap, atau gunakan gradasi warna gelap di bagian bawah teks.
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.85));
Solusi 5
Ganti Warna Teks
Ubah warna teks menjadi hitam atau warna gelap (#1C1917, #0F172A, #222222) jika desain tidak harus menggunakan teks putih.
color: #0F172A; /* Slate */ atau #1C1917; /* Charcoal */
🌐 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 (TRI-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).
  * Mode 3: "3. Standarisasi & Minifikasi (Tru Theme)" (Master Prompt Design System Sunny Beach Day & Minifikasi 1-Baris).

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, 6 Skema Warna Human-Centric termasuk Tru Theme Sunny Beach Day, Gaya SVG, dan Formula PAS/AIDA).
- Aturan Kontras WCAG AAA & 5 Solusi Penyelamat Teks Putih: Wajib memasukkan instruksi 5 Solusi (Kotak Overlay Transparan, Drop Shadow, Garis Tepi/Outline, Gelapkan Latar Belakang/Gradasi, dan Ganti Warna Teks Gelap) 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 & 5 Solusi Penyelamat Teks Putih), Mobile Responsive, dan Anti-AI Compliance.

5. FORM STANDARISASI & MINIFIKASI (MODE 3):
- Input: Pilihan Design System Tru Theme (Sunny Beach Day), Target Performa (FCP < 0.8s, skor 100/100, 0 KB Overhead), Checklist Core Web Vitals, dan Textarea Kode HTML mentah.
- Master Prompt Output: Menginstruksikan AI mengonversi token CSS Sunny Beach Day dan meminifikasi total ke dalam 1 blok kode produksi ultra-ringan.

6. 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 ( sampai ) 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 & Minifier Suite) 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. Tri-Mode Switcher: Mode Builder 4 Pilar (Model Layout A-E, 6 Palet Warna, Aset Inline SVG, Copywriting PAS/AIDA), Mode CRO Audit 5-Point Checklist, dan Mode Standarisasi Design System Tru Theme (Sunny Beach Day Edition) & Strict Minifier.
3. Standar Kontras WCAG AAA: Sematkan aturan larangan teks putih di atas latar putih polos, serta sertakan 5 solusi penyelamat teks terang (Kotak Overlay Transparan 30%-50%, Drop Shadow, Garis Tepi/Outline, Gelapkan Latar Belakang/Gradasi, dan Ganti Warna Teks Gelap).
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
ParameterPenggunaan Harian ToolGoogle Gemini CanvasGoogle Antigravity
Lingkungan KerjaBrowser Lokal (File Lokal)Antarmuka Web GeminiIDE / 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 UtamaMenghasilkan Prompt AI Siap PakaiMembuat & Modifikasi Kode WebPemrograman Mandiri Langsung di File
Hasil AkhirTeks Prompt TerstrukturKode HTML di Panel CanvasBerkas .html Tersimpan di Disk
✅ Teks berhasil disalin!