AI Prompt Template & Contoh Lengkap
Template prompt untuk Claude/ChatGPT + contoh hero/CTA section siap import.
Template Prompt untuk Claude / ChatGPT
Copy-paste ke ChatGPT/Claude, lalu deskripsikan section yang kamu mau:
Saya butuh JSON BuilderSchema untuk Alus Builder (format raw, langsung importable). Aturan:
1. Root WAJIB: { "elements": [...] }
(Jangan dibungkus wrapper apapun.)
2. Setiap element: { "id": "xxxxxxxx", "type": "...", "props": {...} }
- id: 8-char alphanumeric, harus UNIK di seluruh schema
- Renderer otomatis prefix "alsbldr-" saat output ke DOM
3. Hierarki: section > container > element-element basic
4. Element category Basic yang tersedia:
- heading (text, level h1-h6, alignment, optional link/mode/richText)
- basicText (text, tag p|div|span|figcaption|address|figure, optional link/wordsLimit/readMore)
- richText (body: HTML string)
- button (text, link, linkType url|whatsapp, alignment, width auto|full, + Meta/TikTok tracking)
- textLink (text, link, alignment)
- image (src, alt, optional link, alignment, + Meta/TikTok tracking)
- video (url YouTube, aspectRatio 16/9|4/3|1/1, optional title)
- icon (icon Lucide PascalCase, view default|stacked|framed, shape, size, dst.)
PENTING — konteks element (penempatan divalidasi):
- Untuk landing page / section, pakai HANYA element universal: Basic, General,
eCommerce non-checkout (productGrid, courseGrid, checkoutButton, miniCheckout), Social.
- Element Dynamic (productPrice, productImage, postTitle, pageTitle, courseTitle, ...)
bersifat TEMPLATE-ONLY: hanya valid di dalam builder single_product / single_post /
single_page / single_course. JANGAN taruh di page biasa kecuali aku minta buat template.
- Form field (nameField, emailField, submitButton, ...) hanya jalan di Form Builder.
Slot checkout* (checkoutForm, checkoutPayment, ...) hanya jalan di template checkout.
5. Layout types: section, container, block (semua butuh "children": [])
- props: {} valid (layout schema punya defaults)
6. Style opsional:
"style": { "desktop": {...}, "tablet": {...}, "mobile": {...} }
Pakai struktur: layout (padding/margin/width/...), typography (color/fontSize/...),
background (color/image), border (radius/width/color)
7. Untuk global class: tambah "classes": ["shortId"] di element +
embed definition di "globalClasses" array di root.
8. JANGAN tulis "selectorConfig" — itu legacy, sudah dihapus dari format baru.
9. Output HANYA JSON valid — no comments, no trailing comma, no markdown fences.
Sekarang buatkan saya: [DESKRIPSIKAN APA YANG KAMU MAU]
Contoh: Hero section landing page jasa fotografi pernikahan, dengan headline besar
"Abadikan Momen Sakralmu", sub-text 1 paragraf tentang pengalaman 10 tahun, tombol
CTA "Lihat Paket" + "Konsultasi via WhatsApp" (nomor 6281234567890), background
hijau gelap, teks putih, center alignment.
Aturan konteks element — di mana tiap element boleh dipakai
Tidak semua element jalan di mana saja; builder memvalidasi penempatan berdasarkan konteks. Saat membuat schema untuk landing page atau section umum, pakai hanya element universal.
| Grup | Berlaku di mana | Contoh |
|---|---|---|
| Universal | Page, section, atau template apa pun | Basic (heading, button, image…), General (accordion, counter…), eCommerce non-checkout (productGrid, courseGrid, checkoutButton, miniCheckout), Social |
| Dynamic — template only | Hanya di dalam template builder yang sesuai; datanya diambil dari post / produk / page / course saat ini | postTitle, postContent → single_post; productPrice, productImage, addToCartButton → single_product; pageTitle → single_page; courseTitle → single_course |
| Slot checkout — template only | Hanya di dalam template checkout | checkoutForm, checkoutPayment, checkoutSummary, checkoutTotals, checkoutPayButton |
| Form field — hanya Form Builder | Hanya di dalam Form Builder (bukan Page/Template builder) | nameField, emailField, selectField, submitButton |
Patokan: untuk landing page atau section, jangan pakai element Dynamic, checkout, atau form-field kecuali memang diminta membuat template tersebut — element template-only di page biasa akan gagal validasi atau render kosong. Daftar lengkap per-kategori ada di halaman Element Type Reference.
Contoh 1: Hero Section sederhana
{
"elements": [
{
"id": "sec001x9",
"type": "section",
"props": {},
"style": {
"desktop": {
"layout": { "paddingTop": "80px", "paddingBottom": "80px", "paddingLeft": "24px", "paddingRight": "24px" },
"background": { "color": "#0f172a" }
}
},
"children": [
{
"id": "con002y8",
"type": "container",
"props": {},
"children": [
{
"id": "h003z7w6",
"type": "heading",
"props": { "text": "Bangun Bisnis Online Tanpa Coding", "level": "h1", "alignment": "center" },
"style": {
"desktop": { "typography": { "fontSize": "56px", "color": "#ffffff", "fontWeight": "800" } },
"mobile": { "typography": { "fontSize": "32px" } }
}
},
{
"id": "txt04q5p",
"type": "basicText",
"props": {
"text": "Buat website, kelola toko, dan jualan kursus online dalam satu platform. Mulai gratis tanpa kartu kredit.",
"tag": "p"
},
"style": {
"desktop": {
"typography": { "color": "#cbd5e1", "fontSize": "18px" },
"layout": { "marginTop": "16px", "maxWidth": "600px", "marginLeft": "auto", "marginRight": "auto" }
}
}
},
{
"id": "btn05o4n",
"type": "button",
"props": {
"text": "Mulai Gratis",
"link": "/register",
"linkType": "url",
"alignment": "center",
"width": "auto"
},
"style": {
"desktop": { "layout": { "marginTop": "32px" } }
}
}
]
}
]
}
]
}
Contoh 2: CTA Section dengan Icon + Global Class
{
"elements": [
{
"id": "sec06m3k",
"type": "section",
"props": {},
"style": {
"desktop": {
"layout": { "paddingTop": "60px", "paddingBottom": "60px", "paddingLeft": "24px", "paddingRight": "24px" },
"background": { "color": "#fef3c7" }
}
},
"children": [
{
"id": "con07j2i",
"type": "container",
"props": {},
"children": [
{
"id": "ic08h1g0",
"type": "icon",
"props": {
"icon": "Sparkles",
"view": "stacked",
"shape": "circle",
"alignment": "center",
"link": "",
"linkTarget": "_self",
"primaryColor": "#ffffff",
"secondaryColor": "#f59e0b",
"size": 32,
"rotate": 0,
"borderWidth": 2,
"borderRadius": 0,
"padding": 16
}
},
{
"id": "h09f8e7d",
"type": "heading",
"props": { "text": "Promo Akhir Tahun: Diskon 50%", "level": "h2", "alignment": "center" },
"style": { "desktop": { "layout": { "marginTop": "16px" }, "typography": { "color": "#78350f" } } }
},
{
"id": "txt10c6b",
"type": "basicText",
"props": { "text": "Berlaku sampai 31 Desember. Daftar sekarang dan dapatkan akses penuh.", "tag": "p" },
"style": { "desktop": { "layout": { "marginTop": "8px" }, "typography": { "color": "#92400e", "textAlign": "center" } } }
},
{
"id": "btn11a5z",
"type": "button",
"props": { "text": "Klaim Diskon", "link": "/register?promo=END50", "alignment": "center", "width": "auto" },
"classes": ["promo01"],
"style": { "desktop": { "layout": { "marginTop": "24px" } } }
},
{
"id": "tl12y4w3",
"type": "textLink",
"props": { "text": "Pelajari syarat & ketentuan →", "link": "/promo-tnc", "alignment": "center" },
"style": { "desktop": { "layout": { "marginTop": "12px" }, "typography": { "fontSize": "14px" } } }
}
]
}
]
}
],
"globalClasses": [
{
"id": "promo01",
"name": "btn-promo",
"desktopStyle": {
"background": { "color": "#dc2626" },
"typography": { "color": "#ffffff", "fontWeight": "700" }
},
"pseudoStates": {
":hover": { "desktop": { "background": { "color": "#b91c1c" } } }
}
}
]
}
Workflow ideal dengan AI
- Pakai template prompt di atas untuk generate JSON
- Validasi cepat: cek JSON valid (JSONLint) + ada field
elementsberupa array - Buka builder → Import Schema → paste → Import
- Tweak di canvas dengan drag-drop kalau perlu detail
- Save
Common mistakes
- Lupa
"children": []di layout element (section/container/block) — wajib walau kosong - ID duplikat di seluruh schema — validator reject
- Type tidak valid — periksa daftar di halaman Struktur Schema
- Style flatten (mis.
"fontSize": "32px"langsung di element) — wrap distyle.desktop.typography - Comment JSON — JSON tidak support, AI kadang lupa hapus
- Trailing comma — strict JSON forbid
- Tulis "selectorConfig" — itu legacy, format baru pakai top-level
"classes"