Promt gambar dan artikel zasha.online tempalte jadi

ZASHA ONLINE BLOG

 

PANDUAN LENGKAP — prompt.zasha.online

Untuk: Muzadidil (pemilik & perawat tunggal) Terakhir diperbarui: 10 Juli 2026 Tujuan: Supaya kamu bisa memperbaiki, mengubah, dan mengembangkan website ini SENDIRI — tanpa harus selalu bertanya ke Claude.

Simpan file ini di dalam repo (nama: PANDUAN.md) supaya selalu ikut ter-backup di GitHub.

1. GAMBARAN BESAR — Apa Ini dan Bagaimana Dia Hidup

prompt.zasha.online adalah website statis: tidak ada server, tidak ada database sendiri, tidak ada PHP/Laravel. Hanya file HTML polos.

Analogi: ini seperti brosur digital. Kamu menulis brosur di komputer, kirim ke percetakan (GitHub), dan percetakan otomatis memajangnya di etalase (GitHub Pages).

Alur hidupnya:

Edit file di komputer
      ↓
git add + commit  (bungkus perubahan)
      ↓
git push          (kirim ke GitHub)
      ↓
GitHub Pages      (otomatis, 1-2 menit)
      ↓
prompt.zasha.online  (live, bisa diakses semua orang)

Tidak ada langkah SSH, tidak ada cp file, tidak ada Hostinger. Ini beda dengan post_multy. Cukup push, selesai.

2. PETA LOKASI — Di Mana Saja File Ini Berada

Tempat Alamat Catatan
GitHub (pusat) github.com/muzadidil/zasha_promt Ini sumber kebenaran. Kalau komputer rusak, semua ada di sini.
Komputer KANTOR C:\Users\CSONLINE\Downloads\zasha.online\zasha_promt pakai garis bawah _
Komputer RUMAH C:\xampp\htdocs\zasha-prompt pakai strip -

⚠️ PERHATIAN — nama folder rumah dan kantor BEDA (zasha_promt vs zasha-prompt). Ini sering bikin bingung. Sebelum menjalankan perintah git, selalu cek dulu kamu ada di folder mana dengan mengetik pwd (SSH) atau melihat tulisan PS C:\...> di PowerShell.

Isi repo

zasha_promt/
├── CNAME          ← penghubung domain prompt.zasha.online. JANGAN DIHAPUS/DIUBAH.
├── README.md      ← deskripsi singkat repo
├── index.html     ← Halaman 1: Mode Manual
├── cepat.html     ← Halaman 2: Mode Cepat (paling sering dipakai, paling besar)
├── sosmed.html    ← Halaman 3: Posting Sosmed (composer teks)
├── custom.html    ← Halaman 4: Prompt Custom (kanvas grid)
└── LAPORAN_ISI_REPO.md ← dokumentasi/laporan (tidak memengaruhi website)

Setiap halaman adalah satu file utuh — CSS, HTML, dan JavaScript ada di dalam satu file itu. Tidak ada file terpisah.

3. ATURAN EMAS — Jangan Dilanggar

  1. JANGAN hapus atau ubah file CNAME. Kalau hilang → domain prompt.zasha.online mati, website cuma bisa diakses lewat alamat github.io.
  2. JANGAN git add -A atau git add . — selalu sebut nama file satu per satu. (Pernah kejadian 51 file sampah ikut ke-push.)
  3. Claude Code DILARANG menjalankan git. Semua git lewat PowerShell, oleh kamu sendiri.
  4. Pindah komputer? git pull DULU sebelum mulai kerja. Kalau lupa, dua komputer bisa "bertabrakan" isinya.
  5. Sebelum perubahan besar, catat titik kembali: jalankan git log --oneline -3, tulis/foto kode 7 huruf paling atas (contoh: cb4b36f). Itu "pintu darurat" untuk kembali.

4. ANATOMI FILE HTML — Isi Dalamannya

Keempat file punya susunan yang sama. Buka salah satu di VS Code, dari atas ke bawah:

<!DOCTYPE html>
<html>
<head>
  ...
  <style>      ← BAGIAN 1: CSS (tampilan/warna/ukuran)
    :root { --navy: #1F2F65; ... }
    ...
  </style>
</head>
<body>
  ...          ← BAGIAN 2: HTML (kerangka form, tombol, kotak output)
  <script>     ← BAGIAN 3: JavaScript (otak/logika)
    const FIXED = {...}
    const PRESETS = {...}
    function generate() {...}
    ...
  </script>
</body>
</html>

Cara mencari sesuatu: buka file di VS Code → tekan Ctrl+F → ketik kata kuncinya. Contoh: mau ubah template artikel → cari buildArtikelPrompt.

Token warna (sama di keempat file)

Nama Kode Dipakai untuk
navy #1F2F65 warna utama Zasha
navy-deep #162149 navy lebih gelap
gold #C9A227 emas Zasha
gold-soft #E3C45A emas muda
paper #F6F7FB latar halaman
ok #1E7F52 hijau sukses

Font: Plus Jakarta Sans (tampilan) dan JetBrains Mono (kotak hasil prompt) — dimuat dari Google Fonts.

⚠️ Karena tiap halaman berdiri sendiri, kalau ubah warna di satu file, tiga file lainnya tidak ikut berubah. Harus diedit 4 kali (di bagian :root masing-masing).

5. HALAMAN PER HALAMAN

5.1 index.html — Mode Manual

  • Form kosong semua, isi satu per satu: ukuran, warna, judul, objek, aktivitas, latar, mockup HP.
  • Fungsi inti: generate() — merangkai isian form + bagian terkunci (FIXED) menjadi satu blok teks prompt gambar.
  • Riwayat tersimpan ke Firebase (node prompts).

5.2 cepat.html — Mode Cepat ⭐ (paling penting)

Halaman yang paling sering kamu pakai dan paling banyak fiturnya.

Bagian-bagian penting di JavaScript-nya (cari pakai Ctrl+F):

Nama Fungsi
PRESETS Daftar 13 jenis jasa (rewang, bangunan, coding, dst). Tiap preset berisi nilai otomatis untuk semua field: judul, objek, aktivitas, keunggulan1-3, cta, namaUsaha, hpisi, dll.
fillPreset() Saat dropdown jenis jasa dipilih, fungsi ini menyalin isi preset ke form.
EXTRA_FIELDS Daftar nama field tambahan. Field yang terdaftar di sini otomatis ikut ter-reset saat ganti preset. Kalau menambah field form baru, daftarkan juga di sini.
FIXED Bagian prompt gambar yang TERKUNCI: gaya, footer website, tipografi, negative prompt. Ubah di sini kalau mau ganti gaya poster secara permanen.
promoData() Mengumpulkan semua isian form jadi satu paket data.
generate() Membuat output Tab 1 — Gambar (GPT): format baris tetap, urutan tidak berubah-ubah.
buildArtikelPrompt() Membuat output Tab 2 — Artikel (Claude/Gemini): template baku 9 poin (H1, H2/H3, harga, ajakan jastip Zasha, penutup italic).
buildTelegramPrompt() Membuat output Tab 3 — Telegram: perintah menulis caption maksimal 900 karakter.

Alur pakai: pilih preset → (opsional) isi Panel Lanjutan: deskripsi, panel icon 1-5, keunggulan 1-3, bonus kiri/kanan, CTA, website, nama usaha, lokasi, harga → klik Generate → keluar 3 tab, masing-masing ada tombol Salin.

Ke mana hasil salinan dikirim:

  • Tab 1 → GPT/DALL-E (gambar)
  • Tab 2 → Claude/Gemini (artikel blog, hasilnya HTML → tempel ke kolom "Konten Blog" di post.zasha.online)
  • Tab 3 → Claude/Gemini (caption pendek → tempel ke kolom "Konten Media Sosial")

5.3 sosmed.html — Posting Sosmed

  • Bukan generator prompt gambar — ini composer teks: tulis isi sekali, pilih pembuka/footer/tagar per platform (IG, FB, TikTok, WA, Telegram), salin per platform.
  • Template pembuka/footer/tagar tersimpan di Firebase node sosmed (terpisah dari riwayat prompt).

5.4 custom.html — Prompt Custom

  • Kanvas kotak-kotak 3 kolom yang mewakili posisi visual poster. Klik kotak → ketik isi → prompt dirangkai berdasar tata letak.
  • Tidak pakai Firebase — hasil sekali pakai, tidak ada riwayat.

6. FIREBASE — Tempat Riwayat Tersimpan

Riwayat prompt TIDAK disimpan di GitHub, tapi di Firebase Realtime Database (layanan Google, gratis untuk skala kecil).

  • Nama project: zasha-promt
  • Cara buka: console.firebase.google.com → login pakai akun Google yang dulu dipakai membuat project → pilih project zasha-promt → menu Realtime Database.
  • Isi database:
    • node prompts → riwayat dari index.html DAN cepat.html (tercampur jadi satu)
    • node sosmed → template halaman sosmed
  • Di Realtime Database kamu bisa: melihat semua data, menghapus satu entri (klik ikon ✕), atau export backup (titik tiga ⋮ → Export JSON).

Hal yang perlu kamu tahu:

  1. Config Firebase (apiKey dll) tertulis di dalam ketiga file HTML dan bisa dibaca siapa saja lewat View Source. Ini normal untuk Firebase — kuncinya memang bukan rahasia. Keamanan sesungguhnya ada di menu Rules.
  2. Cek Rules sesekali (menu Rules di Realtime Database). Kalau isinya .read: true, .write: true artinya siapa pun bisa menulis/menghapus riwayat. Untuk data riwayat prompt (tidak sensitif) risiko ini kecil, tapi sadari itu ada. Jangan pernah menyimpan password/token di riwayat prompt.
  3. Kalau di kode apiKey berisi teks ISI_ (belum diisi), website otomatis pindah menyimpan ke localStorage (riwayat hanya tersimpan di browser masing-masing).

7. RESEP PERUBAHAN UMUM — Tinggal Ikuti

Semua resep polanya sama: edit file → simpan → deploy (bab 8) → cek di browser. Boleh dikerjakan sendiri di VS Code, atau minta Claude Code (tapi git tetap kamu).

7.1 Menambah preset jenis jasa baru (cepat.html)

  1. Buka cepat.html, Ctrl+F cari PRESETS.
  2. Lihat salah satu blok preset yang sudah ada, contohnya blok rewang:{ ... }, — copy seluruh bloknya dari nama sampai },.
  3. Tempel di bawahnya, ganti nama kuncinya (contoh: laundry:) dan semua isinya (judul, objek, aktivitas, keunggulan1-3, cta, namaUsaha, hpisi, dst).
  4. Cek dropdown "Jenis jasa": Ctrl+F cari <select. Kalau pilihan ditulis manual sebagai <option value="rewang">..., tambahkan satu baris <option value="laundry">Jasa Laundry</option>. Kalau option dibuat otomatis dari PRESETS lewat perulangan (loop), tidak perlu tambah apa-apa.
  5. Simpan → deploy → test pilih preset baru di browser.

7.2 Mengubah template artikel blog

  1. cepat.html → Ctrl+F buildArtikelPrompt.
  2. Semua teks perintah (struktur 9 poin, kalimat wajib Zasha, aturan HTML) ada di dalam fungsi ini. Edit teksnya seperti mengedit tulisan biasa.
  3. Hati-hati: bagian dalam kurung kurawal seperti ${d.cta} adalah data dari form — jangan diubah/dihapus kecuali paham.

7.3 Mengubah batas karakter Telegram

  1. cepat.html → Ctrl+F buildTelegramPrompt.
  2. Cari angka 900, ganti sesuai kebutuhan. (Ingat: batas caption foto Telegram = 1024, jadi jangan lebih dari ±950.)

7.4 Mengubah warna tema

  1. Buka file yang mau diubah → Ctrl+F :root.
  2. Ganti kode warna (contoh #1F2F65).
  3. Ulangi di 4 file kalau mau seragam.

7.5 Mengubah gaya poster / footer / negative prompt (bagian terkunci)

  1. index.html dan cepat.html → Ctrl+F FIXED.
  2. Edit teksnya. Ini memengaruhi SEMUA prompt gambar yang dihasilkan.

7.6 Menambah field form baru (cepat.html)

  1. Tambah input di bagian HTML, contoh: <input id="namaField" type="text"> (tiru field yang sudah ada, letakkan di Panel Lanjutan).
  2. Ctrl+F EXTRA_FIELDS → tambahkan "namaField" ke daftarnya.
  3. Ctrl+F promoData → tambahkan pengambilan nilainya (tiru baris field lain).
  4. Pakai nilainya di generate() / buildArtikelPrompt() / buildTelegramPrompt() sesuai kebutuhan.

Kalau ragu, resep 7.6 paling aman diserahkan ke Claude Code — tapi tulis di prompt: "DILARANG menjalankan git".

8. CARA DEPLOY — SOP Baku

Semua lewat PowerShell. Ganti path sesuai komputer (kantor/rumah — lihat bab 2).

# 0. Masuk folder repo (contoh: komputer rumah)
cd C:\xampp\htdocs\zasha-prompt

# 1. Cek dulu apa saja yang berubah
git status

# 2. Stage file yang diubah SAJA (sebut namanya)
git add cepat.html

# 3. Commit dengan pesan jelas
git commit -m "ubah template artikel: tambah bagian testimoni"

# 4. Kirim ke GitHub
git push

Lalu:

  • tunggu 1–2 menit (GitHub Pages membangun ulang otomatis),
  • buka prompt.zasha.online → hard refresh: Ctrl+Shift+R,
  • cek perubahan muncul.

SOP pindah komputer (WAJIB)

cd <folder repo di komputer itu>
git pull

Baru mulai kerja. Kalau lupa pull lalu edit → nanti push bisa ditolak (lihat bab 9).

9. TROUBLESHOOTING — Masalah dan Obatnya

Perubahan tidak muncul di website

  1. Sudah lewat 2 menit? 2. Hard refresh Ctrl+Shift+R. 3. Cek file di github.com/muzadidil/zasha_promt — perubahannya ada? Kalau tidak ada → push-mu belum masuk, ulangi bab 8. Kalau ada tapi web tetap lama → coba buka lewat mode penyamaran (Ctrl+Shift+N).

fatal: not a git repository Kamu berada di folder yang salah. cd ke folder repo yang benar (bab 2), cek dengan git status.

pathspec 'namafile' did not match any files File itu tidak ada di folder tempat kamu berdiri — biasanya karena salah folder/salah repo. Cek git status dan path.

Push ditolak (rejected / non-fast-forward) GitHub punya perubahan yang belum kamu tarik. Jalankan git pull, selesaikan (biasanya otomatis), lalu git push lagi.

nothing to commit, working tree clean padahal merasa sudah mengubah Dua kemungkinan: (1) kamu mengedit file di folder LAIN (kantor vs rumah, atau folder ganda) — cek lokasi file yang dibuka di VS Code (klik kanan tab file → Copy Path); (2) perubahan memang sudah ter-commit sebelumnya — cek git log --oneline -3.

Tombol "Salin" tidak berfungsi Fitur salin butuh HTTPS. Di prompt.zasha.online (HTTPS) harus jalan; kalau buka file lewat file:// atau http://localhost, dipakai jalur cadangan (fallback) yang kadang perlu klik dua kali. Tes selalu di alamat aslinya.

Riwayat tidak tersimpan Buka halaman → F12 → tab Console → lihat error merah. Kalau menyebut "permission denied" → masalah Rules Firebase (bab 6). Kalau menyebut "network" → cek internet.

Halaman blank / rusak setelah edit Ada kesalahan ketik di JavaScript (biasanya kurung/koma hilang). Buka F12 → Console → baca baris error (contoh: cepat.html:1043) → buka baris itu di VS Code → perbaiki. Kalau buntu → pakai mesin waktu (bab 10).

Salah edit parah, mau kembali seperti semula Lihat bab 10.

10. MESIN WAKTU — Membatalkan Perubahan

Belum di-commit (baru edit-edit di VS Code):

git restore cepat.html

File kembali persis seperti commit terakhir. Perubahanmu hilang — pastikan memang mau dibuang.

Sudah di-commit & push, ternyata rusak:

# lihat daftar titik kembali
git log --oneline -5

# ambil versi file dari commit yang masih bagus (contoh kode: cb4b36f)
git checkout cb4b36f -- cepat.html

# lalu commit + push seperti biasa
git add cepat.html
git commit -m "kembalikan cepat.html ke versi cb4b36f"
git push

Inilah kenapa Aturan Emas no. 5 penting: selalu tahu kode commit terakhir yang masih sehat.

11. KAMUS ISTILAH

Istilah Arti sederhana
Repo Folder proyek yang diawasi git (punya riwayat lengkap).
Commit "Foto" kondisi file pada satu titik waktu, dengan catatan pesan.
Push Kirim commit dari komputer ke GitHub.
Pull Tarik commit terbaru dari GitHub ke komputer.
Deploy Proses membuat perubahan tampil di website. Di sini = push.
GitHub Pages Layanan gratis GitHub yang menampilkan isi repo sebagai website.
CNAME File kecil berisi nama domain — penghubung ke prompt.zasha.online.
Hard refresh Ctrl+Shift+R — paksa browser buang simpanan lama (cache).
F12 / DevTools Alat bawaan browser untuk melihat error (tab Console) dan lalu lintas file (tab Network).
Node (Firebase) "Laci" data di Realtime Database, contoh: prompts, sosmed.
Preset Paket isian jadi untuk satu jenis jasa di Mode Cepat.
FIXED Bagian prompt yang terkunci di kode (gaya, footer, negative prompt).
Fallback Jalur cadangan otomatis kalau jalur utama gagal.

12. KONDISI REPO SAAT INI — Yang Perlu Kamu Sadari

Catatan jujur (per 10 Juli 2026), bukan kerusakan, tapi baik diketahui:

  1. Kode duplikat ±90% antar 4 file. CSS dan fungsi yang sama ditulis ulang di tiap file. Konsekuensi: satu perbaikan harus diterapkan sampai 4 kali. Suatu saat bisa dirapikan (dipindah ke shared.css + shared.js), tapi tidak mendesak.
  2. Riwayat Manual & Cepat tercampur di node prompts tanpa penanda asal. Kalau mengganggu, bisa ditambah field source saat menyimpan.
  3. Rules Firebase perlu dicek (bab 6 poin 2).
  4. Layout kolom kaku (2 kolom 50:50, satu breakpoint 880px) — murni kosmetik.
  5. LAPORAN_ISI_REPO.md bisa jadi tidak sinkron dengan kode — anggap dokumen sejarah, bukan acuan.

Kalau mau mengerjakan salah satunya lewat Claude Code, pola prompt-nya selalu:

Kerjakan di repo zasha_promt. File yang boleh diubah: <sebutkan>.
DILARANG menjalankan perintah git apapun.
<jelaskan tugas>
Setelah selesai: laporan perubahan + nomor baris. JANGAN commit/push.

13. KARTU CONTEKAN — Tempel di Meja

DEPLOY:
  cd <folder repo> → git status → git add <file> →
  git commit -m "pesan" → git push → tunggu 2 mnt → Ctrl+Shift+R

PINDAH KOMPUTER:  git pull DULU.

RUSAK?            F12 → Console → baca error.
BALIKIN FILE:     git restore <file>   (belum commit)
                  git checkout <kode> -- <file>   (sudah commit)

JANGAN:           git add .  |  hapus CNAME  |  git lewat Claude Code

Dokumen ini dibuat berdasarkan kondisi repo commit terakhir per 10 Juli 2026. Kalau struktur kode berubah besar, perbarui panduan ini juga.

14. PROMPT KARAKTER — Fungsi Tersembunyi di cepat.html

Di dalam file cepat.html ada satu fungsi tersembunyi: prompt imajinasi karakter untuk MockupHero (Lexica). Cari buildHeroInput() — ini bagian dari promoData().

Apa fungsinya?

Prompt ini tidak untuk dipakai langsung, tapi jadi "jiwa/persona" bagi MockupHero (Lexica) untuk membuat mockup screen HP yang cocok dengan karakter tersebut.

Contoh: presetnya "Guru Privat" → prompt buildHeroInput() menggambarkan persona guru yang rapi, profesional, tapi bersahabat → MockupHero membuat mockup screen HP guru les.

Isinya apa?

  1. Objek utama: Orang yang dideskripsikan sesuai preset — gender, usia, penampilan, profesi, personalitas.
  2. Aplikasi: Deskripsi 1–2 screen aplikasi Zasha/mitra.zasha.online yang sesuai karakter itu.
  3. Latar: Deskripsi tempat/setting yang cocok — kelas, kantor, outdoor, dll.

Cara pakai di MockupHero (Lexica)?

  1. Pilih preset di cepat.html.
  2. Salin teks output buildHeroInput() (terpisah dari output prompt gambar).
  3. Buka MockupHero → paste di kotak prompt → jadikan mockup.
  4. Salin kode mockup ke form cepat.html → generate prompt gambar.

ℹ️ Kalau mau ubah/tambah: Ctrl+F heroInput, ubah teksnya (di dalam PRESETS) sesuai karakter baru. Struktur tetap sama.

15. SARAN PENGEMBANGAN — Kalau Mau Lebih Lanjut

Beberapa ide (opsional — yang sekarang sudah cukup) kalau suatu saat mau mengembangkan:

  • Rapikan duplikasi — untuk mempermudah perawatan. Caranya: pindahkan CSS ke shared.css, JS global ke shared.js, lalu rujuk dari tiap halaman lewat <link> / <script>. Bisa dicicil per bagian (FIXED, warna, fungsi).
  • Layout responsif — supaya tetap nyaman di HP. Grid kolom pakai fr + clamp(), flexbox untuk riwayat.
  • Dark mode — misal lewat toggle class .dark di <body>, lalu ubah warna di CSS sesuai mode (bisa manual atau deteksi otomatis sesuai jam).
  • Perkaya preset — inspirasi dari tema yang sering dicari (lihat riwayat Firebase). Kalau perlu, tambah variasi struktur artikel per jenis jasa.
  • Mode "Save As" di riwayat — kalau ada prompt lama yang mau dibuat variasi sedikit, bisa dimuat ulang ke form (seperti template).
  • Opsi pilih model di UI — antara claude-instant-1 vs claude-1 (trade-off kecepatan vs kualitas).

Pesan saya: fokus dulu di pemakaian nyata. Lihat apa yang paling sering dibutuhkan sehari-hari, perbaiki/perkaya itu dulu. Fitur keren tidak berguna kalau tidak dipakai.

16. PENUTUP — Kamu Sudah Bisa Mandiri

Kamu sudah punya semua yang dibutuhkan untuk merawat, memperbaiki, dan mengembangkan prompt.zasha.online sendiri:

  • Panduan lengkap ini — simpan baik-baik, baca ulang saat perlu.
  • Mesin pencari di VS Code (Ctrl+F) — untuk menemukan bagian yang perlu diubah.
  • Kartu contekan bab 13 — tempel di meja, lihat saat lupa.
  • Claude Code — kalau mentok, minta bantuan dengan pola prompt bab 12.
  • Keberanian mencoba — jangan takut salah, karena sudah tahu cara kembali (bab 10).

Kalau ada yang tidak jelas atau butuh bantuan, tanyakan di chat utama (jangan di Claude Code) — saya bantu sebisanya. Tapi saya yakin kamu bisa.

Selamat berkarya!

Tags
Komentar