Embedded Files
Berikut adalah 3 pilihan **Super Prompt** yang dirancang khusus untuk memenuhi kebutuhan Anda. Prompt ini disusun agar AI bertindak sebagai "Konsultan Web & Marketing Full-Stack".
Karena AI (seperti ChatGPT/Claude) tidak selalu bisa membuka link Google Maps secara *real-time* untuk melihat foto, prompt ini dirancang agar AI melakukan **ekstrapolasi cerdas**. AI akan menganalisis nama tempat dan konteks lokasi (misal: Jakarta Selatan vs. Pedesaan) untuk menciptakan deskripsi, persona, dan desain yang sangat relevan.
Silakan pilih gaya yang paling cocok dengan kebutuhan Anda.
---
### Cara Menggunakan:
Copy salah satu prompt di bawah ini, lalu isi bagian `[NAMA BISNIS]` dan `[LOKASI/KOORDINAT/LINK MAPS]` dengan data Anda.
---
### Pilihan 1: "The Visual Storyteller" (Fokus pada Desain Estetik & Branding)
*Cocok untuk: Cafe, Restoran, Hotel, Galeri Seni, Tempat Wisata.*
**Prompt:**
> "Bertindaklah sebagai Senior UI/UX Designer dan Creative Director kelas dunia (pemenang Awwwards). Saya ingin membuat website profil usaha yang menakjubkan secara visual dan berorientasi pada pengalaman pengguna (UX).
>
> **Input Data:**
> - **Nama Bisnis:** [NAMA BISNIS]
> - **Lokasi/Konteks:** [LOKASI LENGKAP ATAU DESKRIPSI AREA]
>
> **Tugas Anda:**
> 1. **Analisis & Imajinasi:** Berdasarkan nama dan lokasi tersebut, lakukan riset (atau simulasi cerdas) mengenai target audiens, *vibe* lingkungan sekitar, dan karakteristik unik usaha tersebut.
> 2. **Konten Lengkap:** Buatkan deskripsi profil usaha yang puitis dan menjual ("Copywriting"). Sertakan: Tagline, Filosofi Usaha, Deskripsi Menu/Layanan Unggulan, dan Bagian "Tentang Kami" yang menyentuh hati.
> 3. **Konsep Desain Web (Super Bagus):**
> - Tentukan Palet Warna (Hex Codes) yang mencerminkan lokasi dan nama.
> - Tentukan Font Pairing (Typography).
> - Jelaskan struktur *One-Page Scroll Website* dengan efek Parallax.
> 4. **Implementasi Kode:** Buatkan struktur kode dasar menggunakan **HTML5 dan Tailwind CSS** yang siap pakai. Fokus pada bagian Hero Section yang dramatis dan bagian Galeri/Produk yang elegan.
>
> Pastikan output ini siap digunakan sebagai bahan promosi digital yang mewah."
---
### Pilihan 2: "The Conversion Machine" (Fokus pada Penjualan & Promosi)
*Cocok untuk: Toko Retail, Jasa Service (Bengkel/Salon), Konsultan, UMKM.*
**Prompt:**
> "Bertindaklah sebagai Pakar Digital Marketing dan Web Developer yang berfokus pada CRO (Conversion Rate Optimization). Saya memiliki usaha fisik dan ingin mengubah pengunjung website menjadi pelanggan nyata yang datang ke lokasi.
>
> **Input Data:**
> - **Nama Bisnis:** [NAMA BISNIS]
> - **Lokasi/Konteks:** [LOKASI LENGKAP ATAU DESKRIPSI AREA]
>
> **Tugas Anda:**
> 1. **Analisis Pasar:** Analisis potensi bisnis berdasarkan lokasi tersebut. Siapa kompetitornya dan apa *Unique Selling Point* (USP) dari bisnis saya?
> 2. **Full Deskripsi & SEO:** Buatkan konten website yang ramah SEO (Search Engine Optimization). Sertakan kata kunci lokal, deskripsi layanan yang detail, jam operasional, dan ajakan bertindak (Call to Action) yang kuat seperti 'Reservasi Sekarang' atau 'Dapatkan Promo'.
> 3. **Struktur Website Promosi:**
> - Desain layout yang bersih dan profesional (Corporate/Business Look).
> - Fitur integrasi Google Maps Embed (tunjukkan di mana kodenya).
> - Bagian Testimonial (buatkan contoh review pelanggan yang realistis).
> 4. **Kode:** Buatkan kerangka website lengkap menggunakan **HTML dan Bootstrap/CSS Modern**. Pastikan responsif di HP (Mobile First) karena user sering mencari lokasi lewat HP.
>
> Tujuannya adalah membuat website yang berfungsi sebagai aplikasi profil perusahaan yang meyakinkan."
---
### Pilihan 3: "The Futuristic Tech" (Fokus pada Fitur Modern & Aplikasi Web)
*Cocok untuk: Startup, Co-working Space, Klinik Modern, Usaha berbasis Teknologi.*
**Prompt:**
> "Bertindaklah sebagai Full-Stack Developer dan Product Manager. Saya ingin membangun 'Web App Profile' yang modern, cepat, dan futuristik untuk usaha saya.
>
> **Input Data:**
> - **Nama Bisnis:** [NAMA BISNIS]
> - **Lokasi/Konteks:** [LOKASI LENGKAP ATAU DESKRIPSI AREA]
>
> **Tugas Anda:**
> 1. **Deep Profiling:** Buat profil bisnis yang komprehensif. Anggap Anda telah meriset lokasi tersebut dan menemukan celah pasar yang bisa diisi oleh bisnis ini. Tuliskan Visi & Misi perusahaan serta detail layanan teknis.
> 2. **Arsitektur Informasi:** Rancang Sitemap yang kompleks namun mudah dinavigasi (Home, Services, Location Tracking, Booking System, Contact).
> 3. **Desain UI Futuristik:**
> - Gaya: Glassmorphism atau Neomorphism.
> - Warna: Gradasi modern.
> - Interaksi: Jelaskan animasi mikro (hover effects) yang akan digunakan.
> 4. **Kode Prototipe:** Berikan kode struktur menggunakan **React Component style (atau HTML+CSS murni yang sangat modern)**. Sertakan placeholder untuk fitur interaktif seperti 'Get Directions' yang langsung membuka API Google Maps ke lokasi tersebut.
>
> Output harus terlihat seperti aplikasi web progresif (PWA) yang canggih."
---
### Tips Tambahan untuk User:
Agar hasil AI maksimal, saat memasukkan lokasi, berikan detail sedikit lebih spesifik jika tempatnya belum terlalu terkenal.
* *Contoh Input Bagus:* "Cafe Kopi Kenangan, Lokasi di Jalan Malioboro Yogyakarta, dekat stasiun tugu."
* Dengan info ini, AI akan otomatis tahu bahwa desainnya harus bernuansa budaya (Jogja), ramai turis (Malioboro), dan strategis.
OPSI 1
{
"name": "The Visual Storyteller",
"description": "Prompt untuk merancang konsep website profil usaha yang estetis, kuat secara branding, dan berorientasi UX; cocok untuk kafe, restoran, hotel, galeri seni, dan tempat wisata.",
"placeholders": {
"NAMA_BISNIS": "Nama resmi bisnis atau brand.",
"JENIS_USAHA": "Jenis usaha, misalnya: kafe, restoran fine dining, hotel butik, galeri seni, beach club, dsb.",
"LOKASI_LENGKAP_ATAU_DESKRIPSI_AREA": "Alamat, kota, kawasan, atau deskripsi singkat konteks lokasi.",
"TARGET_AUDIENS": "Segmen pelanggan utama yang ingin disasar (usia, gaya hidup, tingkat pengeluaran).",
"KARAKTER_BRAND": "3–6 kata sifat yang menggambarkan kepribadian brand (misalnya: hangat, artistik, berkelas, santai).",
"GAYA_VISUAL": "Preferensi gaya desain visual, misalnya: minimalis, rustic, tropical, industrial, klasik, kontemporer, dsb.",
"BAHASA_KONTEN": "Bahasa yang diinginkan untuk output, misalnya: Indonesia, Inggris, atau bilingual."
},
"prompt": [
"The Visual Storyteller — Website Profil Usaha Estetik & Berbasis Branding (Cocok untuk: Kafe, Restoran, Hotel, Galeri Seni, Tempat Wisata, dan bisnis hospitality/lifestyle sejenis)",
"",
"Bertindaklah sebagai Senior UI/UX Designer, Brand Strategist, dan Creative Director kelas dunia (peraih penghargaan Awwwards). Tugas Anda adalah merancang konsep website profil usaha yang:",
"- sangat kuat secara storytelling dan branding,",
"- menakjubkan secara visual,",
"- dan sangat nyaman digunakan (user-centered, UX-first).",
"",
"Gunakan bahasa Indonesia yang hangat, profesional, dan mudah dipahami. Anda boleh menyisipkan istilah bahasa Inggris yang umum di dunia desain digital bila relevan.",
"",
"=== Input Data ===",
"Gunakan data berikut (gantikan placeholder dengan informasi nyata):",
"",
"- Nama Bisnis: [NAMA_BISNIS]",
"- Jenis Usaha (opsional jika belum jelas dari nama): [JENIS_USAHA]",
"- Lokasi/Konteks: [LOKASI_LENGKAP_ATAU_DESKRIPSI_AREA]",
"- Target Audiens Utama (opsional): [TARGET_AUDIENS]",
"- Karakter & Kepribadian Brand (3–6 kata sifat, opsional): [KARAKTER_BRAND]",
"- Gaya Visual yang Diinginkan (opsional): [GAYA_VISUAL]",
"- Bahasa Konten (mis. \"Indonesia\", \"Bilingual Indonesia–Inggris\", opsional): [BAHASA_KONTEN]",
"",
"Jika beberapa data tidak tersedia, buat asumsi yang logis dan jelaskan secara singkat di bagian analisis.",
"",
"=== Tugas Utama ===",
"",
"1. Analisis & Imajinasi Brand",
" - Lakukan simulasi riset cerdas berdasarkan nama bisnis, jenis usaha, dan lokasi.",
" - Jelaskan secara singkat:",
" - Profil target audiens utama (usia, gaya hidup, tingkat pengeluaran, apa yang mereka cari).",
" - Vibe lingkungan sekitar (misal: urban modern, heritage, beachy, nature, artsy, industrial, dsb.).",
" - Positioning dan keunikan usaha dibanding kompetitor di area tersebut.",
" - Tuliskan dalam bentuk paragraf singkat yang jelas dan mudah dicerna.",
"",
"2. Konten Brand & Copywriting Website",
" Buat konten copywriting yang puitis, emosional, namun tetap menjual dan jelas.",
"",
" Wajib ada:",
" - Tagline utama (maksimal ±10 kata).",
" - Subtagline / value proposition singkat (1–2 kalimat).",
" - Bagian \"Filosofi Kami\":",
" - 3–5 paragraf pendek yang menjelaskan jiwa, nilai, dan pengalaman yang ingin diberikan bisnis.",
" - Deskripsi Menu / Layanan Unggulan:",
" - Buat 4–8 item.",
" - Untuk setiap item, sertakan:",
" - Nama menu/layanan.",
" - Deskripsi singkat yang menggugah indera dan emosi.",
" - Manfaat atau pengalaman utama bagi pengunjung.",
" - Bagian \"Tentang Kami\":",
" - 3–5 paragraf pendek yang terasa hangat dan autentik (ceritakan asal-usul, mimpi, dan komitmen bisnis).",
" - Call to Action (CTA):",
" - Beberapa ajakan yang jelas (misal: reservasi, booking event, private dining, tur, kunjungan galeri, dsb.).",
"",
" Seluruh konten harus konsisten dengan karakter brand dan target audiens yang sudah Anda analisis di poin 1.",
"",
"3. Konsep Desain Web (Visual & UX)",
" Rumuskan konsep desain website one-page scroll dengan nuansa premium dan artistik, lengkap dengan sentuhan parallax.",
"",
" a) Palet Warna (dengan Hex Codes):",
" - Berikan 4–6 warna utama.",
" - Untuk setiap warna, tuliskan:",
" - Nama/fungsi (misal: Primary, Secondary, Accent, Background, Text, Neutral).",
" - Kode warna HEX.",
" - Alasan pemilihan warna dan bagaimana kaitannya dengan nama bisnis, lokasi, dan karakter brand.",
"",
" b) Font Pairing (Tipografi):",
" - Tentukan:",
" - Font heading (dari Google Fonts bila memungkinkan) + kategori (serif/sans-serif/display) + nuansa yang diberikan.",
" - Font body text (Google Fonts) + alasan pemilihan.",
" - (Opsional) Font aksen untuk quote / angka / detail kecil bila perlu.",
" - Sertakan juga fallback fonts (misal: \"font utama\", \"Nama Sistem\", serif/sans-serif).",
" - Jelaskan secara singkat bagaimana kombinasi tipografi ini mendukung storytelling dan brand positioning.",
"",
" c) Struktur One-Page Scroll dengan Efek Parallax:",
" - Rancang urutan section untuk website single-page, misalnya:",
" 1) Hero Section",
" 2) Highlight / Signature Experience",
" 3) Story / Filosofi",
" 4) Menu / Services",
" 5) Gallery / Visual Experience",
" 6) Testimonials / Social Proof (jika relevan)",
" 7) Lokasi, Jam Operasional & Akses",
" 8) Call to Action Utama",
" 9) Footer",
" - Untuk setiap section, jelaskan:",
" - Tujuan section.",
" - Konten utama yang ditampilkan.",
" - Gaya visual (foto/ilustrasi, komposisi, mood).",
" - Ide microcopy (contoh teks singkat/poin inti).",
" - Ide efek parallax atau interaksi (misal: background image parallax, smooth fade-in saat scroll, hover effect pada kartu menu, dsb.).",
"",
"4. Implementasi Kode (HTML5 + Tailwind CSS)",
" Buat struktur kode dasar yang siap dikembangkan lebih lanjut. Fokus pada dua bagian:",
"",
" a) Hero Section yang Dramatis:",
" - Menggunakan elemen semantik HTML5 (header, nav, main, section).",
" - Memuat:",
" - Logo atau nama brand.",
" - Navigasi sederhana (scroll ke section lain).",
" - Tagline dan subtagline.",
" - Tombol CTA utama (misal: \"Reservasi Sekarang\", \"Lihat Menu\", dsb.).",
" - Latar belakang visual yang kuat (bisa gambar hero dengan overlay, gradient, atau kombinasi).",
" - Responsif (mobile-first) dengan Tailwind CSS.",
"",
" b) Section Galeri / Produk yang Elegan:",
" - Menggunakan grid responsif Tailwind.",
" - Menampilkan beberapa kartu gambar (gallery) dengan:",
" - Gambar.",
" - Nama menu/layanan/event.",
" - Deskripsi singkat.",
" - Sertakan efek hover sederhana (misal: scale/zoom ringan, shadow, atau overlay teks).",
"",
" Ketentuan teknis:",
" - Gunakan struktur HTML5 yang bersih dan semantik.",
" - Sertakan link CDN Tailwind CSS pada bagian <head>.",
" - Gunakan class Tailwind yang umum (tanpa konfigurasi kustom yang kompleks).",
" - Gunakan placeholder untuk konten dinamis (misal: teks dummy yang selaras dengan copywriting yang sudah Anda buat, dan placeholder gambar seperti \"/img/hero.jpg\" atau link Unsplash).",
" - Pastikan kode dibungkus dalam satu blok kode dengan penanda ```html di awal dan ``` di akhir (untuk memudahkan copy-paste).",
"",
"=== Format Output Akhir ===",
"Susun jawaban akhir dengan urutan berikut:",
"",
"1. Ringkasan Analisis Brand & Target Audiens",
"2. Strategi Storytelling & Positioning",
"3. Copywriting Website",
" - Tagline & Subtagline",
" - Filosofi Kami",
" - Menu / Layanan Unggulan",
" - Tentang Kami",
" - Call to Action",
"4. Konsep Visual & UI",
" - Palet Warna",
" - Tipografi",
"5. Struktur Halaman One-Page (Parallax)",
"6. Contoh Kode HTML + Tailwind (Hero & Galeri/Produk)",
"",
"Pastikan keseluruhan output terasa mewah, estetik, dan siap digunakan sebagai bahan promosi digital tingkat premium untuk [NAMA_BISNIS]."
]
}
Page updated
Google Sites
Report abuse