buat master prompt:
- pembuat website profil berdasarkan link dari google map,
- input dari user adalah link dari google map,
- anda membaca dan meringkas dengan baik dari link url dari user, secara lengkap dan detil, agar dapat dijadikan bahan / data pembuatan website lokasi ini,
- anda membuatkan web site berdasarkan hasil yang dibaca,
- anda membuatkan konsep website profil yang bagus berdasarkan data yang ada, gabar2 yang ada di lokasi itu,
- desain website super bagus, wow, interaktif, sesuai standar UI UX yang baik, mudah digunakan dan dipahami, gambar2 sesuai dengan profil lokasi, telpon, lokasi yang dapat dituju dll, desain juga cocok bila dibaca di versi mobile,
- prompt telah diuji, tanpa kesalahan, dapat berjalan dengan optimal,
Berikut adalah **Master Prompt** yang dirancang khusus untuk memenuhi kebutuhan Anda. Prompt ini disusun dengan logika bertahap (step-by-step reasoning) agar AI dapat memproses link, menganalisis data, merancang konsep, dan menulis kode program dalam satu aliran kerja yang efisien.
**Catatan Penting untuk User:**
Agar prompt ini berjalan, pastikan Anda menggunakan AI yang memiliki fitur **Browsing / Web Access** (seperti ChatGPT-4 dengan Bing, Perplexity AI, atau Gemini Advanced) agar AI bisa "membaca" isi link Google Maps tersebut.
---
### Copy & Paste Prompt di Bawah Ini:
```markdown
# ROLE:
Bertindaklah sebagai "World-Class UI/UX Designer" dan "Senior Front-End Developer". Anda memiliki keahlian dalam mengubah data mentah menjadi pengalaman web yang imersif, modern, dan berkonversi tinggi.
# TUGAS:
Saya akan memberikan LINK GOOGLE MAPS. Tugas Anda adalah menganalisis link tersebut dan membuatkan Landing Page Website lengkap dalam satu file (Single Page Application) yang siap pakai.
# PROSES KERJA (STEP-BY-STEP):
## LANGKAH 1: DEEP ANALYSIS & SUMMARIZATION
1. Gunakan tools browsing Anda untuk mengakses dan membaca konten dari Link Google Maps yang saya berikan.
2. Ekstrak data berikut secara detil:
- Nama Bisnis/Lokasi.
- Kategori & Vibe (Apakah mewah, santai, corporate, tradisional, dll).
- Alamat Lengkap & Link Google Maps asli.
- Nomor Telepon (format internasional/lokal).
- Jam Operasional.
- Rating & Review (Ambil 3 review terbaik/paling relevan untuk testimoni).
- Foto/Visual: Analisis deskripsi tempat untuk menentukan keyword gambar yang cocok.
3. Buat ringkasan "Brand Concept": Tentukan palet warna (Hex codes) dan gaya tipografi yang cocok berdasarkan vibe lokasi tersebut.
## LANGKAH 2: UI/UX CONCEPTUALIZATION
Rancang struktur website dengan standar "WOW Factor":
- **Header:** Logo, Navigasi Sticky, CTA Button.
- **Hero Section:** Headline yang catchy, Sub-headline, dan Background Image yang imersif (gunakan placeholder Unsplash berdasarkan keyword kategori lokasi).
- **About/Profile:** Deskripsi menarik berdasarkan ringkasan data.
- **Features/Services:** Apa yang ditawarkan lokasi tersebut (ikon + teks).
- **Gallery:** Grid foto yang rapi (gunakan placeholder).
- **Social Proof:** Tampilkan rating bintang dan review user dari Google Maps.
- **Info & Location:** Jam buka, alamat, dan tombol "Petunjuk Arah".
- **Footer:** Copyright dan link sosial media.
## LANGKAH 3: CODING (IMPLEMENTASI)
Buat kode website dalam **Satu File HTML Lengkap** (HTML + CSS + JS) dengan spesifikasi:
- **Framework:** Gunakan **Tailwind CSS via CDN** untuk desain yang cepat, modern, dan responsif.
- **Icon:** Gunakan **FontAwesome via CDN**.
- **Images:** Gunakan source URL dari `https://source.unsplash.com/1600x900/?keyword` (ganti 'keyword' sesuai kategori lokasi, misal: 'coffee', 'hotel', 'gym').
- **Responsiveness:** Wajib terlihat sempurna di Mobile (HP) dan Desktop.
- **Interactivity:**
- Smooth scrolling pada navigasi.
- Efek Hover pada tombol dan kartu.
- Animasi fade-in sederhana saat scroll (gunakan AOS Library atau CSS animation simple).
- Tombol "Hubungi Kami" yang langsung mengarah ke `tel:nomor` atau `wa.me`.
- Tombol "Lihat di Peta" yang membuka link Google Maps asli.
# OUTPUT YANG DIHARAPKAN:
1. Berikan **Ringkasan Analisa** terlebih dahulu (Data yang berhasil Anda ambil dan Konsep Desain).
2. Berikan **Blok Kode HTML Lengkap**. Pastikan kodenya bersih, tidak terpotong, dan siap dijalankan jika disimpan sebagai file `.html`.
# INPUT USER:
Link Google Maps: [MASUKKAN LINK GOOGLE MAPS ANDA DI SINI]
```
---
### Cara Menggunakan Prompt Ini:
1. **Copy** seluruh teks di dalam kotak kode di atas.
2. **Paste** ke dalam chat AI (ChatGPT-4, Claude 3 Opus, atau Gemini).
3. **Ganti** bagian `[MASUKKAN LINK GOOGLE MAPS ANDA DI SINI]` dengan URL lokasi yang Anda inginkan.
4. Tekan **Enter**.
### Kenapa Prompt Ini Efektif?
* **Role Setting:** Menempatkan AI sebagai ahli UI/UX memastikan desain tidak kaku.
* **Data Extraction:** Memaksa AI untuk tidak berhalusinasi, melainkan mengambil data nyata (jam buka, alamat, review) dari link.
* **Visual Placeholder Strategy:** Karena AI tidak bisa mendownload foto asli dari Google Maps ke dalam kode HTML secara langsung, prompt ini menginstruksikan penggunaan gambar berkualitas tinggi dari *Unsplash* yang relevan dengan kategori bisnis (misal: jika linknya adalah kedai kopi, AI akan otomatis mencari gambar kopi).
* **Single File Output:** Memudahkan Anda. Anda tinggal copy kodenya, simpan sebagai `index.html`, dan langsung bisa dibuka di browser.
* **Mobile First:** Menekankan pada tampilan mobile yang sangat penting untuk profil lokasi.
Berikut adalah Master Prompt yang telah diperbaiki, dioptimalkan, dan dikemas dalam format JSON Structured Prompt. Format ini sangat cocok digunakan jika Anda ingin mengintegrasikan prompt ini ke dalam sistem API (seperti OpenAI API) atau hanya ingin struktur perintah yang sangat ketat agar AI tidak melenceng.
Prompt ini telah dirancang untuk memaksa AI melakukan: Browsing (Analisa) -> Thinking (Konsep) -> Coding (Eksekusi).
JSON Master Prompt
Silakan salin kode di bawah ini. Jika Anda menggunakan ChatGPT/Claude biasa, Anda cukup copy isi dari nilai "prompt_content" atau copy seluruh blok JSON dan minta AI membacanya sebagai instruksi sistem.
{
"master_prompt_config": {
"title": "G-Maps to High-End Profile Website Generator",
"version": "2.0",
"target_model": "GPT-4o / Claude 3 Opus (Capabilities: Browsing/Web Access Required)",
"language": "Indonesian"
},
"prompt_content": {
"role": {
"persona": "Expert Full-Stack Developer & Senior UI/UX Designer",
"specialization": "Conversion Rate Optimization (CRO), Modern Web Design, Mobile-First Development"
},
"task": {
"main_objective": "Create a fully functional, high-end single-page profile website based on a provided Google Maps URL.",
"input_data": "${USER_GOOGLE_MAPS_LINK}"
},
"process_workflow": [
{
"step": 1,
"action": "DEEP_WEB_ANALYSIS",
"instructions": "Access the provided Google Maps link. Scrape/Read detailed information including: Business Name, Exact Address, Phone Number, Operating Hours, Star Rating, Top 3 Positive Reviews, and 'Vibe'/Category (e.g., Luxury, Casual, Medical, Corporate). Analyze the visual style based on user uploaded photos to determine the color palette."
},
{
"step": 2,
"action": "CONTENT_SYNTHESIS",
"instructions": "Summarize the findings into a compelling 'Brand Narrative'. Draft a catchy Headline, a persuasive About Us section, and a Feature List that highlights the location's strengths. Select appropriate keywords for image generation."
},
{
"step": 3,
"action": "UI_UX_CONCEPTUALIZATION",
"instructions": "Define a color scheme (Primary, Secondary, Accent) and Typography (Heading & Body fonts) that matches the location's persona. Plan a layout that emphasizes mobile usability (thumb-friendly buttons)."
},
{
"step": 4,
"action": "CODE_GENERATION",
"requirements": {
"format": "Single HTML File (HTML5 + CSS + JS embedded)",
"framework": "Tailwind CSS (via CDN) for rapid, beautiful styling",
"icons": "FontAwesome (via CDN)",
"animations": "AOS Library (Animate On Scroll) via CDN for 'WOW' factor",
"responsiveness": "100% Mobile Responsive",
"images": "Use high-quality placeholder URLs based on keywords (e.g., 'https://images.unsplash.com/photo...' or similar reliable source)",
"functionality": [
"Sticky Navigation Bar",
"Hero Section with Parallax effect",
"Click-to-Call Button",
"Click-to-Map Button (Direct link to G-Maps)",
"Review Slider/Grid",
"Working Contact Form (UI Only)"
]
}
}
],
"output_constraints": {
"design_quality": "Award-winning standard, clean whitespace, modern typography.",
"tone": "Professional yet engaging.",
"code_integrity": "Ensure all tags are closed. No external CSS/JS files (use CDNs). Code must be copy-paste ready."
},
"interaction_template": "1. Provide a brief summary of the analyzed data and the chosen design concept (Colors/Vibe).\n2. Provide the complete HTML code block."
}
}
Cara Menggunakan Prompt JSON Ini
Opsi 1: Penggunaan Langsung di ChatGPT / Gemini / Claude (Recommended)
Copy dan paste teks berikut ke dalam chat (Saya sudah mengekstrak instruksi intinya agar mudah dibaca oleh AI):
Anda adalah "Expert Full-Stack Developer & Senior UI/UX Designer". Saya akan memberikan Link Google Maps. Ikuti instruksi ketat berikut:
1. **ANALISIS (Browsing):** Buka link tersebut, ambil data: Nama, Alamat, Telpon, Jam Buka, Rating, 3 Review Terbaik, dan Kategori Bisnis. Tentukan "Vibe" lokasi (Mewah/Santai/Formal).
2. **KONSEP:** Buat narasi branding singkat. Tentukan palet warna Hex Code dan Font Google yang sesuai dengan vibe lokasi.
3. **KODING (Single Page Application):**
- Buat 1 file HTML lengkap.
- Gunakan **Tailwind CSS (CDN)** untuk desain yang *Stunning*, *Clean*, dan *Mobile-Responsive*.
- Gunakan **AOS (Animate On Scroll)** agar website terasa interaktif dan "WOW".
- Gunakan **FontAwesome** untuk ikon.
- Gunakan gambar placeholder dari Unsplash dengan keyword yang relevan dengan lokasi (contoh: jika restoran, cari gambar makanan).
- Fitur Wajib:
- Hero Section dengan Headline menarik.
- Tombol CTA "Hubungi Kami" (tel:) dan "Petunjuk Arah" (link map asli).
- Bagian "Tentang Kami", "Fasilitas/Layanan", "Testimoni" (dari review map), dan Footer.
- Pastikan UI/UX sangat mudah digunakan di HP.
LINK GOOGLE MAPS SAYA: [PASTE LINK DISINI]
Mengapa Format JSON di atas lebih baik untuk developer?
Modular: Jika Anda membuat script Python, Anda bisa memparsing JSON ini dan mengirim bagian prompt_content ke API.
Explicit Context: Bagian role dan output_constraints memastikan AI tidak memberikan desain jadul (tahun 90an) tetapi desain modern (Tailwind).
Step-by-Step Logic: Mencegah AI langsung membuat kode tanpa memahami konteks tempatnya. AI dipaksa "membaca" dulu baru "menulis".