# Prompt Dasar — Membuat Tema Baru untuk Vowly

Dokumen ini adalah **kontrak resmi** antara tema dan aplikasi Vowly.
Siapa pun (manusia atau AI) yang membuat tema baru harus mengikuti dokumen ini,
supaya tema tersebut langsung bisa dipakai tanpa mengubah satu baris pun di
renderer.

Ada dua bagian:

1. **Prompt siap tempel** — blok yang bisa Anda copy ke AI mana pun.
2. **Spesifikasi kontrak** — rujukan teknis lengkap (enum, aturan, contoh).

---

## 1. Prompt Siap Tempel

Copy seluruh blok di bawah ini, lalu isi bagian `[ISI DI SINI]`.

```text
Kamu adalah desainer tema untuk Vowly, platform undangan pernikahan SaaS.

TUGAS
Buat 1 tema undangan baru yang langsung kompatibel dengan sistem tema Vowly.

KONSEP TEMA YANG DIMINTA
- Nama tema   : [ISI DI SINI]
- Suasana/mood: [ISI DI SINI]  (contoh: "Floral klasik", "Luxury gelap")
- Referensi   : [ISI DI SINI]  (contoh: pantone warna, foto, kata kunci)

ATURAN PALING PENTING
Tema adalah DATA, bukan kode. Tema hanya boleh berisi:
  warna, font, ornamen, mode layout, sudut lengkung.
Tema TIDAK BOLEH mengubah struktur HTML undangan, menambah section baru,
atau menyentuh data tamu. Satu renderer membaca semua tema.

FORMAT OUTPUT
Tulis tepat satu pemanggilan fungsi T(...) dengan urutan argumen persis ini:

T(id, name, origin, layout, mood, tags, fontKey, ornament, cover, radius, tokens)

Penjelasan tiap argumen:
- id        : string huruf-kecil-tanpa-spasi, unik. Contoh: 'aurora-sage'
- name      : nama tampilan, boleh ada spasi. Contoh: 'Aurora Sage'
- origin    : selalu 'vowly' untuk tema baru
- layout    : pilih SATU dari: 'slide' | 'scroll' | 'mobile'
- mood      : deskripsi 2-4 kata. Contoh: 'Botani modern'
- tags      : array 3-5 string huruf kecil. Contoh: ['modern','botani','minimalis']
- fontKey   : pilih SATU dari: 'classic' | 'romantic' | 'editorial' | 'modern' | 'warm'
- ornament  : pilih SATU dari: 'floral-frame' | 'mandala' | 'islamic-arch' | 'batik'
              | 'watercolor' | 'geometric' | 'botanical' | 'none'
- cover     : pilih SATU dari: 'centered' | 'fullscreen' | 'split'
- radius    : angka bulat 0-20 (piksel sudut kartu/tombol). 0 = tegas, 16 = lembut
- tokens    : objek 10 kunci warna (lihat di bawah)

OBJEK TOKENS — WAJIB 10 KUNCI, TIDAK BOLEH KURANG
{
  bg:        '#'  warna latar halaman utama
  bgAlt:     '#'  latar alternatif untuk section bergantian
  surface:   '#'  latar kartu/panel di atas bg
  ink:       '#'  warna teks utama
  inkSoft:   '#'  warna teks sekunder/abu
  accent:    '#'  warna merek utama (tombol, judul, sampul)
  accentInk: '#'  warna teks DI ATAS accent (harus kontras!)
  gold:      '#'  warna aksen mewah (garis, ornamen, nama pasangan)
  line:      '#'  warna garis pembatas
  overlay:   'rgba(r,g,b,a)'  lapisan gelap di atas sampul, alpha 0.45-0.7
}

ATURAN KONTRAS (WAJIB, jangan dilanggar)
1. accentInk harus kontras tinggi terhadap accent.
   accent gelap -> accentInk '#FFFFFF'. accent terang -> accentInk gelap.
2. ink harus kontras tinggi terhadap bg DAN terhadap surface.
3. gold dipakai HANYA untuk aksen kecil, jangan untuk blok warna besar.
4. Jika tema gelap: bg/ bgAlt/ surface semuanya gelap, ink terang.
   Jika tema terang: bg/ bgAlt/ surface semuanya terang, ink gelap.
   JANGAN mencampur tema gelap dengan ink gelap.
5. overlay harus senada dengan bg (tema gelap -> overlay lebih pekat).

PANDUAN MEMILIH
- 'slide'    : undangan dibuka per layar penuh, ada tombol maju/mundur.
               Cocok untuk tema sinematik, mewah, atau banyak ornamen.
- 'scroll'   : halaman memanjang ke bawah, ada chip navigasi.
               Cocok untuk tema editorial, cerita, dan botani.
- 'mobile'   : memanjang ke bawah + menu tab menempel di bawah layar.
               Cocok untuk tema ringan, floral, dan sederhana.
- 'centered' : sampul di tengah. Paling aman, cocok hampir semua tema.
- 'fullscreen': nama jauh lebih besar, veil tebal. Untuk tema gelap/mewah.
- 'split'    : konten sampul didorong ke bawah, area atas lapang. Editorial.

FORMAT JAWABAN
1. Satu blok kode berisi pemanggilan T(...) saja, tanpa penjelasan di dalamnya.
2. Setelah kode, tulis 3 baris: alasan pemilihan layout, alasan palet,
   dan alasan ornamen.
3. Jangan mengarang argumen baru. Hanya 11 argumen di atas yang ada.
```

---

## 2. Spesifikasi Kontrak

### 2.1 Tanda tangan fungsi

```js
function T(id, name, origin, layout, mood, tags, fontKey, ornament, cover, radius, tokens)
```

Fungsi ini ada di `themes.js` dan mengembalikan objek tema:

```js
{ id, name, origin, layout, mood, tags, font, ornament, cover, radius, tokens }
```

Perhatikan `fontKey` **di-resolve** menjadi `font` (objek `{head, body}`) saat
dibuat. Tema tidak menyimpan nama fontKey-nya.

### 2.2 Enum lengkap

| Argumen | Nilai yang sah | Jumlah |
|---|---|---|
| `origin` | `'nikah.link'`, `'vowly'` | 2 |
| `layout` | `'slide'`, `'scroll'`, `'mobile'` | 3 |
| `fontKey` | `'classic'`, `'romantic'`, `'editorial'`, `'modern'`, `'warm'` | 5 |
| `ornament` | `'floral-frame'`, `'mandala'`, `'islamic-arch'`, `'batik'`, `'watercolor'`, `'geometric'`, `'botanical'`, `'none'` | 8 |
| `cover` | `'centered'`, `'fullscreen'`, `'split'` | 3 |

### 2.3 Preset font

| fontKey | Judul | Isi | Kesan |
|---|---|---|---|
| `classic` | Georgia serif | system sans | Netral, aman |
| `romantic` | Georgia / Palatino | Georgia serif | Klasik, floral, pernikahan |
| `editorial` | Georgia serif | Georgia serif | Majalah, mewah, tegas |
| `modern` | system sans | system sans | Bersih, minimalis, tech |
| `warm` | Georgia serif | system sans | Hangat, ramah, islami |

Semua font adalah **font sistem** — tidak ada unduhan eksternal, jadi undangan
tetap tampil benar saat offline.

### 2.4 Token yang di-inject ke CSS

Renderer mengubah setiap kunci token menjadi CSS custom property pada elemen
`.vw-inv`, sehingga tema otomatis berlaku ke seluruh halaman:

| Token | CSS variable |
|---|---|
| `bg` | `--vw-bg` |
| `bgAlt` | `--vw-bg-alt` |
| `surface` | `--vw-surface` |
| `ink` | `--vw-ink` |
| `inkSoft` | `--vw-ink-soft` |
| `accent` | `--vw-accent` |
| `accentInk` | `--vw-accent-ink` |
| `gold` | `--vw-gold` |
| `line` | `--vw-line` |
| `overlay` | `--vw-overlay` |

Tambahan otomatis: `--vw-font-head`, `--vw-font-body`, `--vw-radius`,
`--vw-orn` (data-URI ornamen yang sudah diwarnai token).

Elemen `.vw-inv` juga menerima tiga atribut yang dipakai CSS untuk bercabang:
`data-theme-id`, `data-layout`, `data-cover`.

### 2.5 Ornamen

Ornamen dibuat sebagai **SVG data-URI** oleh fungsi generator, diwarnai dari
`accent` dan `gold`. Karena itu tidak ada file gambar eksternal dan tema aman
dipakai offline.

| Ornamen | Karakter |
|---|---|
| `floral-frame` | Sulur bunga di sudut, romantis |
| `mandala` | Lingkaran konsentris simetris, etnik/mewah |
| `islamic-arch` | Geometri belah ketupat, islami |
| `batik` | Motif parang/kawung, Nusantara |
| `watercolor` | Bercak radial lembut (bukan SVG, gradient CSS) |
| `geometric` | Garis diagonal, modern minimalis |
| `botanical` | Daun dan tangkai, organik |
| `none` | Tanpa ornamen, sangat bersih |

### 2.6 Aturan yang tidak boleh dilanggar

1. **Jangan menambah kunci token.** Renderer hanya membaca 10 kunci di atas.
   Kunci ekstra (seperti `rose` pada `midnight-bloom`) boleh ada sebagai
   metadata, tapi **tidak akan** di-render.
2. **Jangan menambah section.** Tujuh section yang tersedia tetap:
   `cover`, `couple`, `event`, `story`, `gallery`, `gift`, `rsvp`.
3. **Jangan menaruh data tamu di dalam tema.** Tema hanya soal tampilan.
   Inilah alasan tema bisa diganti tanpa kehilangan data.
4. **`id` harus unik.** Cek dulu dengan `VowlyThemes.get('id')` — kalau
   mengembalikan tema lain, berarti id sudah dipakai.
5. **Jangan pakai URL gambar eksternal.** Ornamen sudah disediakan.
6. **Pastikan `accentInk` kontras.** Ini kesalahan paling sering terjadi dan
   paling merusak tampilan (teks putih di atas latar krem, dsb).

### 2.7 Contoh lengkap — tema terang

```js
T('aurora-sage', 'Aurora Sage', 'vowly', 'scroll', 'Botani modern',
  ['modern', 'botani', 'minimalis', 'baru'], 'editorial', 'botanical', 'split', 16,
  { bg:'#F8F7F2', bgAlt:'#ECEADE', surface:'#FFFFFF', ink:'#22271F', inkSoft:'#63685A',
    accent:'#3F5D48', accentInk:'#FFFFFF', gold:'#B99A4E', line:'#DEDCCC',
    overlay:'rgba(34,39,31,.5)' }),
```

Kenapa begini: `accent` hijau sage gelap → `accentInk` putih (kontras tinggi).
`bg` dan `surface` sama-sama terang, `ink` gelap. `split` dipilih supaya area
atas sampul lapang untuk ornamen botanikal.

### 2.8 Contoh lengkap — tema gelap

```js
T('midnight-bloom', 'Midnight Bloom', 'vowly', 'slide', 'Luxury gelap',
  ['dark', 'luxury', 'floral', 'baru'], 'editorial', 'floral-frame', 'fullscreen', 8,
  { bg:'#14101A', bgAlt:'#1C1723', surface:'#221C2B', ink:'#F4F1F6', inkSoft:'#A79FB2',
    accent:'#D9A468', accentInk:'#14101A', gold:'#D9A468', line:'#2E2738',
    overlay:'rgba(8,5,12,.66)' }),
```

Kenapa begini: tema gelap, jadi `bg`/`bgAlt`/`surface` gelap dan `ink` terang.
`accent` emas terang → `accentInk` gelap (bukan putih!). `overlay` pekat karena
`bg` gelap.

### 2.9 Cara mendaftarkan tema

Tema **tidak** di-load otomatis dari file. Tambahkan pemanggilan `T(...)` ke
dalam array `THEMES` di `outputs/theme-system/themes.js`, di kelompok layout
yang sesuai (ada penanda komentar `SLIDE`, `SCROLL`, `MOBILE`).

### 2.10 Checklist sebelum dianggap selesai

- [ ] 11 argumen, urutan benar
- [ ] `id` unik dan formatnya huruf-kecil-tanpa-spasi
- [ ] `origin` = `'vowly'`
- [ ] `layout`, `fontKey`, `ornament`, `cover` semuanya dari enum yang sah
- [ ] `tokens` punya **tepat** 10 kunci wajib
- [ ] semua warna token valid (`#RGB`, `#RRGGBB`, atau `rgba(...)`)
- [ ] `overlay` memakai format `rgba(...)` dengan alpha 0.45–0.7
- [ ] `accentInk` kontras terhadap `accent`
- [ ] `ink` kontras terhadap `bg` **dan** `surface`
- [ ] tema gelap/terang konsisten (tidak campur)
- [ ] sudah ditambahkan ke array `THEMES`

### 2.11 Verifikasi

Setelah menambah tema, jalankan pemeriksa kontrak:

```bash
cd "D:/# AI Notion/Buddy/nikah/outputs/theme-system"
node validate-theme.js
```

Skrip ini memeriksa **semua** tema terhadap seluruh aturan di bagian 2.6 —
argumen sah, 10 token wajib lengkap, format warna, alpha overlay, kontras
teks, dan konsistensi tema gelap/terang. Keluar dengan kode `1` bila ada
pelanggaran, jadi bisa dipakai di CI.

Contoh keluaran sehat:

```
Tema diperiksa : 27
  slide 7 | scroll 10 | mobile 10
  portofolio nikah.link 25 | orisinal Vowly 2
Total pelanggaran: 0

OK — semua tema patuh pada kontrak PROMPT-BUAT-TEMA.md.
```

Selain itu ada uji render penuh di
`.workbuddy-ai/scratch/test-themes.js` yang me-render setiap tema di jsdom dan
memeriksa bahwa semua section muncul, token ter-inject, form RSVP berfungsi,
navigasi jalan, dan **data tidak berubah saat tema diganti**.

---

## 3. Ringkasan Satu Paragraf

> Tema Vowly adalah **data, bukan kode**. Sebuah tema hanyalah satu pemanggilan
> `T()` berisi 11 argumen: identitas, pilihan layout/font/ornamen/sampul, dan
> 10 kunci warna. Satu renderer membaca semua tema, jadi tema baru langsung
> berfungsi tanpa menyentuh HTML undangan maupun data tamu — itulah yang membuat
> tema bisa diganti-ganti kapan saja tanpa kehilangan apa pun.